/* ===========================
   GREENPACT – Global Styles
   =========================== */



:root{
  --primary:#18BAA8;
  --primary-press:#149586;
  --bg:#f6f8fb;
  --card:#fff;
  --text:#111;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow-sm:0 2px 5px rgba(0,0,0,.05);
  --shadow-md:0 8px 24px rgba(0,0,0,.08);
  --radius:14px;
  --radius-sm:10px;
  --focus:#0ea5e9;
  --success:#16a34a;
  --warn:#f59e0b;
  --danger:#ef4444;
  --trans:.25s ease;
}

*,
*::before,
*::after { box-sizing:border-box; }

html,body{ height:100%; }

body{
  font-family:'TrebuchetMS','Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji',sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#f8fafc 0%, #f6f8fb 60%, #f3f4f6 100%);
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

@font-face {
  font-family: "TrebuchetMS";
  src: url("fonts/trebuchet.woff2") format("woff2"),
       url("fonts/trebuchet.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===========================
   Header & Footer
   =========================== */

.app-header{
  text-align:center;
  padding:2.25rem 1rem 1.25rem;
}
.brand{
  margin:0 0 .5rem 0;
  font-weight:700;
  letter-spacing:.2px;
  font-size:clamp(1.25rem,2.5vw,1.8rem);
}
.tagline{
  margin:0 auto;
  max-width:52rem;
  color:var(--muted);
  font-size:.98rem;
}

.app-footer{
  text-align:center;
  color:var(--muted);
  font-size:.9rem;
  padding:2rem 1rem 3.5rem;
  background: #f6f8fb;
  border-top: 1px solid var(--border);
}

.footer__inner {
  display: flex;
  margin: 0 auto;
  padding: 20px 16px;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.footer__text {
  margin: 0;
}

.footer__acknowledgement {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__logo {
  height: 200px;
  width: auto;
}
  
@media (min-width: 640px) {
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* base */
.site-header__inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; }


/* mobile layout */
@media (max-width: 768px){
  .site-header__inner { flex-wrap:wrap; }
  
  /* start hidden and stacked full-width */
  .nav {
    display:none; width:100%; flex-direction:column; gap:.25rem; padding:.5rem 0;
  }
  .nav a, 
  
  
  .brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: inherit;
  }
}

/* constrain header contents */
.site-header__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: .5rem 1rem;
}


.site-header{
  position: sticky; top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}


.hero{ position: relative; z-index: 0; }
.hero img, .hero .leaf, .hero .art{
  position: absolute;   
  z-index: -1;          
  pointer-events: none; 
}

/* mobile dropdown stays within header width */
@media (max-width:768px){
  .nav{
    width: 100%;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    border-radius: 12px;
  }
}

/* compact nav */
.nav--compact {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between; 
  gap: 1rem;
}




/* ===========================
   Utility Bar (Sticky)
   =========================== */

.utility-bar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.75rem 1rem;
  background:rgba(255,255,255,.7);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(1.3) blur(10px);
}

.utility-left{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
.utility-right{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
}

.tabs{
  display:inline-flex;
  gap:.3rem;
  border:1px solid var(--border);
  border-radius:999px;
  padding:.25rem;
  background:var(--card);
  box-shadow:var(--shadow-sm);
}
.tab{
  border:0;
  background:transparent;
  padding:.5rem .9rem;
  border-radius:999px;
  font-weight:600;
  font-size:.92rem;
  color:#334155;
  cursor:pointer;
  transition:transform var(--trans), background var(--trans);
}
.tab.active{
  background:var(--primary);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.tab:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}

.progress-wrap{
  display:flex;
  align-items:center;
  gap:.6rem;
  min-width:240px;
}
.progress-bar{
  --h:10px;
  flex:1;
  height:var(--h);
  background:#eef2f7;
  border:1px solid var(--border);
  border-radius:999px;
  overflow:hidden;
}
.progress-fill{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--primary),#22d3ee);
  width:0%;
  transition:width .4s ease;
}
.progress-meta{
  white-space:nowrap;
  color:var(--muted);
  font-size:.9rem;
}

.switch{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.95rem;
  color:#334155;
  cursor:pointer;
  user-select:none;
}
.switch input{
  appearance:none;
  width:42px;height:24px;
  background:#e5e7eb;
  border-radius:999px;
  position:relative;
  outline:none;
  transition:background var(--trans);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.switch input::after{
  content:"";
  position:absolute;top:2px;left:2px;
  width:20px;height:20px;border-radius:50%;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
  transition:left var(--trans);
}
.switch input:checked{ background:var(--primary); }
.switch input:checked::after{ left:20px; }




/* ===========================
   Layout Container
   =========================== */

.container{
  width:100%;
  max-width:920px;
  margin:0 auto;
  padding:1rem clamp(.75rem, 2vw, 1.25rem);
}

/* ===========================
   Intro / Meta
   =========================== */

.intro{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:1rem;
  margin-bottom:1rem;
}

.meta{
  display:grid;
  gap:1rem;
  grid-template-columns:1fr;
}
@media (min-width:680px){
  .meta{ grid-template-columns:1fr 1fr; }
}
.field label{
  display:block;
  font-weight:600;
  margin:0 0 .35rem 0;
}
.field input[type="text"]{
  width:100%;
  padding:.85rem 1rem;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  transition:border-color var(--trans), box-shadow var(--trans);
}
.field input[type="text"]:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(24,186,168,.15);
}

.section-chips{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin:.25rem 0 .25rem;
}
.chip{
  border:1px solid var(--border);
  background:#fff;
  padding:.5rem .8rem;
  border-radius:999px;
  font-weight:600;
  color:#374151;
  cursor:pointer;
  transition:background var(--trans), transform var(--trans), border-color var(--trans);
}
.chip:hover{
  background:#f7fdfa;
  border-color:var(--primary);
  transform:translateY(-1px);
}
.note {
  margin: 1rem 0;
  padding: .6rem .8rem;
  background: rgba(255, 230, 150, 0.25); /* zarter Gelbton */
  border-left: 4px solid #f5c542;
  border-radius: .5rem;
  color: #333;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}

/* ===========================
   Sections and Questions
   =========================== */

.eyebrow{
  text-transform: uppercase;
  letter-spacing:.06em;
  font-weight:600;
  font-size:.8rem;
  color:#18BAA8;
  margin: 0 0 .5rem 0;
}

.q-section{
  margin:1rem 0 1.25rem;
}
.section-title{
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:.2px;
  margin:.75rem 0 .75rem;
  padding:.25rem .5rem;
  display:inline-block;
  background:linear-gradient(90deg,#e6fffb,#f0fdfa);
  border:1px dashed #c7f9f2;
  color:#0f766e;
  border-radius:8px;
}

.question-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:1.05rem;
  margin:.85rem 0;
  transition:box-shadow var(--trans), border-color var(--trans), transform var(--trans);
  will-change:transform;
}
.question-card:hover{
  border-color:#cfe9e6;
  box-shadow:var(--shadow-md);
  transform:translateY(-1px);
}

.q-head{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.65rem .8rem;
  align-items:flex-start;
  margin-bottom:.6rem;
}
.q-number{
  background:var(--primary);
  color:#fff;
  font-weight:800;
  border-radius:10px;
  padding:.35rem .6rem;
  font-size:.85rem;
  line-height:1;
}
.q-title{
  font-weight:600;
  font-size:1.02rem;
}


/* Options as card-like radios */
.options{
  display:grid;
  gap:.6rem;
  margin:.4rem 0 .3rem;
}
.option{
  position:relative;
}
.option input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.option label{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  padding:.8rem 1rem;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  transition:border-color var(--trans), background var(--trans), box-shadow var(--trans), transform var(--trans);
}
.option label:hover{
  border-color:var(--primary);
  background:#f0fdfa;
}
.option input[type="radio"]:focus + label{
  outline:2px solid var(--focus);
  outline-offset:2px;
}
.option input[type="radio"]:checked + label{
  border-color:var(--primary);
  background:#ecfdf5;
  box-shadow:0 0 0 3px rgba(24,186,168,.16);
  transform:translateY(-1px);
  font-weight:600;
}
.opt-index{
  display:inline-block;
  min-width:1.5rem;
  color:#0f766e;
  font-weight:700;
}

/* Question actions */
.q-actions{
  display: none !important;
  gap:.5rem;
  justify-content:flex-end;
  margin-top:.6rem;
}

/* ===========================
   Buttons
   =========================== */

.btn{
  appearance:none;
  border:0;
  border-radius:12px;
  padding:.8rem 1rem;
  font-weight:700;
  cursor:pointer;
  transition:transform var(--trans), background var(--trans), box-shadow var(--trans), color var(--trans);
  background:var(--primary);
  color:#fff;
  box-shadow:0 2px 0 rgba(0,0,0,.06);
}
.btn:hover{ background:var(--primary-press); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn.ghost{
  background:#fff;
  color:#0f172a;
  border:1px solid var(--border);
}
.btn.ghost:hover{
  border-color:var(--primary);
  color:#0f766e;
  background:#f5fffd;
}
.btn.primary{ background:var(--primary); color:#fff; }

/* Submit area */

.submit-wrap{
  display:block !important;
  padding:0 !important;
  margin:.85rem 0 !important;
  background:transparent !important;
  border:0 !important;
}
.submit-card{
  width:100% !important;
  padding:1.05rem;
}
#submitBtn{
  width:100%;
  display:block;
  padding:1rem 1.25rem;
  font-size:1.05rem;
  border-radius:var(--radius);
}

.btn[disabled] {
  opacity: .6;
  cursor: not-allowed;
}


/* prevent long lines from breaking layout */
.options label { word-break: break-word; }

/* force full width */
.submit-wrap { display:block !important; }


/* ===========================
   results and stars
   =========================== */

.results{ margin:1rem 0; }
.hidden{ display:none; }

.results-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  padding:1.25rem;
}

.results-card h3{
  margin:.25rem 0 1rem;
}

.stars{
  --size:28px; 
  --stars:0;   
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  line-height:1;
  margin:.35rem 0 0;
}
.stars::before{  
  content:"★★★★★";
  font-size:var(--size);
  letter-spacing:4px;
  background:linear-gradient(90deg,#f59e0b calc((var(--stars)/5)*100%), #e5e7eb calc((var(--stars)/5)*100%));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.stars-label{
  font-weight:800;
  color:#0f172a;
}

.results-actions{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin:1rem 0 .25rem;
}

.recommendation{
  white-space:pre-wrap;
  background:#f9fafb;
  border:1px dashed #e5e7eb;
  border-radius:10px;
  padding:.75rem .8rem;
  color:#0f172a;
}

.disclaimer{
  color:var(--muted);
  font-size:.9rem;
  margin:.75rem 0 0;
}

/* ===========================
   accessibility & helpers
   =========================== */

:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}
[role="radiogroup"] label{ line-height:1.45; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ===========================
   responsive tweaks
   =========================== */

@media (max-width:720px){
  .utility-bar{ padding:.6rem .6rem; }
  .tabs .tab{ padding:.45rem .7rem; }
  .submit-wrap{
    grid-template-columns:1fr;
  }
  .live-stars{ justify-self:stretch; text-align:center; }
}

@media (min-width:980px){
  .container{ max-width:980px; }
}


/* Hide hero on phones */
@media (max-width: 680px){
  .hero-media,
  .hero .hero-media,
  .hero .illustration,
  .hero picture,
  .hero img.hero-image { 
    display: none !important; 
  }

  /* hero text span full width when image is hidden */
  .hero{ 
    grid-template-columns: 1fr !important; 
  }
}



/* ===========================
  certificate text clarity for print
   =========================== */

@media print{
  .utility-bar,
  .submit-wrap,
  .section-chips,
  .btn,
  .app-footer { display:none !important; }
  body{ background:#fff; }
  .results-card{
    box-shadow:none;
    border-color:#ddd;
  }
}

/* recommendation formatting */
.rec-header{
  display:flex; gap:.4rem; flex-wrap:wrap; margin:.25rem 0 .6rem;
}
.pill-row{ margin:.25rem 0 .5rem; }
.pill{
  display:inline-block;
  padding:.35rem .6rem; border-radius:999px;
  font-weight:700; font-size:.82rem; letter-spacing:.2px;
  border:1px solid var(--border); background:#fff; color:#0f172a;
}
.pill.success{ border-color:#bbf7d0; background:#f0fdf4; color:#166534; }
.pill.warn{ border-color:#fde68a; background:#fffbeb; color:#92400e; }
.pill.info{ border-color:#bae6fd; background:#eff6ff; color:#1e40af; }

.recommendation.rich{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:1rem;
}

.recommendation.rich h4{
  margin:.6rem 0 .4rem; font-size:1rem; font-weight:800;
}
.recommendation.rich h5{
  margin:.4rem 0 .3rem; font-size:.92rem; font-weight:800; color:#0f172a;
  text-transform:uppercase; letter-spacing:.35px;
}
.recommendation.rich ul{
  margin:.2rem 0 .6rem 1.1rem; padding:0;
}
.recommendation.rich li{
  margin:.25rem 0; line-height:1.45;
}

.block{
  border:1px dashed var(--border);
  border-radius:10px;
  padding:.75rem .8rem;
  margin:.6rem 0;
  background:#fafafa;
}
.block.success{ background:#f0fdf4; border-color:#bbf7d0; }
.block.warn{ background:#fffbeb; border-color:#fde68a; }
.block.info{ background:#eff6ff; border-color:#bae6fd; }

.callout{
  border-left:4px solid var(--primary);
  background:#f7fffd;
  padding:.75rem .9rem; border-radius:10px; margin:.5rem 0 .7rem;
}
.callout.info{ border-left-color:#60a5fa; background:#eff6ff; }

/* 30/60/90 grid */
.ns-grid{
  display:grid; gap:.6rem;
  grid-template-columns: 1fr;
}
@media (min-width:680px){
  .ns-grid{ grid-template-columns: repeat(3,1fr); }
}
.ns-col{
  background:#fff; border:1px solid var(--border); border-radius:10px;
  padding:.6rem .75rem;
}

/* company name field span across grid columns */
@media (min-width: 680px){
  .meta .field:has(#companyName){
    grid-column: 1 / -1;
  }
}


/* sticky bar stick across the whole page */
.utility-bar{
  position: sticky; 
  top: 0;
  z-index: 1000;    
}


html, body { height: 100%; }
body { overflow-y: auto; }


main, .page, .app, .container {
  overflow: visible !important;
  contain: none !important;
  transform: none !important;      
  filter: none !important;          
  -webkit-overflow-scrolling: auto; 
}

/* Ensure the target card isn't hidden behind the sticky bar */
.question-card{ scroll-margin-top: 96px; } /* match your sticky utility-bar height */


/* ---------- 
    HERO 
---------- */

:root{
  --hero-h: clamp(60vh, 85vh, 92vh);
  --hero-pad: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

.hero{
  position: relative;
  height: var(--hero-h);
  overflow: clip;
  display: grid;
  place-items: center;
  padding: var(--hero-pad);
  background:
    radial-gradient(1200px 600px at 20% 20%, #18BAA81a, transparent 60%),
    linear-gradient(#fff, #f8fffd);
}


/* stacking */
.hero { position: relative; }
.hero__bg { z-index: 0; }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.28) 0%,
    rgba(0,0,0,.18) 35%,
    rgba(0,0,0,.12) 60%,
    rgba(0,0,0,.08) 100%
  );
}
.hero__content { z-index: 3; position: relative; }


.hero__bg{
  position: absolute; inset: 0;
  background:
    url("assets/hero-bg.jpg") center/cover no-repeat,
    linear-gradient(180deg, #eafff9, #ffffff);
  filter: saturate(1.05) contrast(1.02);
  will-change: transform;
}

.hero__visual{
  position: absolute; inset: auto 0 6% 0;
  margin-inline: auto;
  max-width: min(70vw, 920px);
  opacity: .93;
  transform-origin: center bottom;
  will-change: transform;
}

/* Content block */
.hero__content{
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  z-index: 3;
}


.hero__content::before{ content:none; }


.hero__text{
  position: relative;
  display: inline-block;
  text-align: center;
}

/* headline and subline */
.hero h1{
  font-family: 'TrebuchetMS', sans-serif;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem 0;
  color: #fff;
  background: #18BAA8;
  display: inline-block;
  padding: 0.12em 0.6em 0.30em; 
  border-radius: 10px;
  font-weight: 800;
  text-shadow: 0 2px 16px rgba(0,0,0,.22);
}

.hero p{
  font-family: 'TrebuchetMS', sans-serif;
  font-size: clamp(1rem, 2vw, 2rem);
  font-weight: 400;
  color: #fff;
  letter-spacing: .2em;
  margin: .25rem 0 1.25rem;
  text-shadow: 0 2px 6px rgba(0,0,0,.4);
  text-transform: lowercase;
  display: block;
  max-width: 100%;
}

/* soft dark overlay */
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.28) 0%,
    rgba(0,0,0,.18) 35%,
    rgba(0,0,0,.12) 60%,
    rgba(0,0,0,.08) 100%
  );
}


/* grid responsiveness-How it works parts/
@media (max-width: 1024px){
  .steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px){
  .steps{ grid-template-columns: 1fr; }
}


@media (min-width: 769px){
  .step{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: .75rem 1rem;
  }
  .step__n{
    align-self: start;
    min-width: 2.6rem;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 10px;
    padding: .4rem .6rem;
    font-weight: 800; color: #18BAA8; line-height: 1;
    margin: 0;                 
  }
}

/* mobile stack number above text */
@media (max-width: 768px){
  .step{
    display: block;            
  }
  .step__n{
    display: inline-block;
    margin-bottom: .4rem;      
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 10px;
    padding: .45rem .7rem;
    font-weight: 800; color: #18BAA8; line-height: 1;
  }
}




/* CTA */
.btn{
  margin-top: 2.5rem;
  display: inline-block;
  padding: .75rem 1.8rem;
  border-radius: 50px;
  border: 1.5px solid #1f2b4d;
  background: #fff;
  color: #1f2b4d;
  font-family: 'TrebuchetMS', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform .25s ease, background .25s ease, color .25s ease;
  box-shadow: none;
}
.btn:hover{ transform: translateY(-2px); background:#18BAA8; color:#fff; }

/* logo rule */
.hero .hero__text .hero__logo{
  position: absolute;
  right: -16rem;        
  top: -34%;           
  height: 125%;        
  width: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 3;

  /*  entrance animation  */
  opacity: 0;
  transform: translateX(80px);
  animation: heroLogoIn .9s var(--ease) forwards .35s;
}

@keyframes heroLogoIn{
  to { opacity:1; transform: translateX(0); }
}


/* mobile simplifications */
@media (max-width:768px){
  .hero{ height: clamp(64vh, 78vh, 84vh); }
  .hero .hero__text .hero__logo{ display:none !important; }
}
@media (max-width:680px){
  .leaf { display:none !important; }
}


/* hero reveal animations */
.hero .reveal-left,
.hero .reveal-right{
  opacity: 0;
  will-change: transform, opacity;
  transition-property: transform, opacity;
  transition-duration: .7s;
  transition-timing-function: var(--ease);
  transform: translateZ(0); 
}

/* initial offsets */
.hero .reveal-left  { transform: translateX(-64px); }
.hero .reveal-right { transform: translateX( 64px); }

/* enter state */
.hero .reveal-left.in-view,
.hero .reveal-right.in-view{
  opacity: 1;
  transform: translateX(0);
}

.hero .hero__cta.reveal-right{ transition-delay: .12s; }
.hero .hero__cta.reveal-right .btn{ transition-delay: .12s; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero .reveal-left,
  .hero .reveal-right{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

.no-io .reveal-left, .no-io .reveal-right { opacity: 1; transform: none; }


.site-header{ z-index:1000; }
.site-header__inner{ box-sizing:border-box; }


html, body { overflow-x: hidden; }


.site-header, .site-header__inner, #primaryNav { max-width: 100%; }

@media (max-width:768px){
  .site-header__inner{ display:flex; flex-wrap:wrap; gap:1rem; }
  

/* keep nav inline */
@media (min-width:769px){
  .nav{ display:flex; align-items:center; gap:.75rem; }
}


@media (max-width:768px){
  .site-header__inner {
    flex-wrap: wrap;
    gap: .5rem;
  }
  .nav {
  display: flex;
  align-items: center;
}



  .nav a, 
}

html, body { overflow-x:hidden; }
.site-header, .site-header__inner, .nav { max-width:100%; box-sizing:border-box; }

/* Header container */
.site-header{
  position: sticky; top:0; z-index:1000;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between; 
}


:root{
  --brand-green: #18BAA8;
  --brand-green-2: #12A896;     
}

.brand{
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: inherit;
  min-height: 44px;            
}

.brand__mark{
  width: 36px;
  height: 36px;
  border-radius: 10px;            
  background: linear-gradient(135deg, var(--brand-green), var(--brand-green-2));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.04),
    0 0 0 0 rgba(0,0,0,0);       
  display: inline-block;
}

.brand__name{
  font-family: TrebuchetMS, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  font-size: 1.05rem;            
}

/* Hover */
.brand:where(:hover){
  filter: saturate(1.04);
}
.brand:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--brand-green) 55%, black 10%);
  outline-offset: 3px;
  border-radius: 10px;
}

.site-header{ position: sticky; top:0; z-index:1000; }
html, body{ overflow-x:hidden; }

/* nav always visible  */
@media (max-width: 768px){
  .site-header .nav{
    display:flex !important;
    position:static !important;
    width:auto !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:12px 16px !important;
    gap: 10px;
  }

  
  .site-header .nav{
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
  }

  /* Language control sizing */
  .lang select,
  
}

/* ======================================================================
                           primary nav and language
   ====================================================================== */
#primaryNav.nav{
  display:flex;
  align-items:center;
  gap:.65rem;
}

#primaryNav.nav label{
  margin:0;
  font: 500 0.95rem/1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#111;
}

/* language select */
#primaryNav.nav .lang-switcher{
  display:inline-block;
  font: 500 0.95rem/1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  min-width:96px;
  height:36px;
  padding:6px 10px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  background:#fff;
  color:#111;
  vertical-align:middle;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:none !important;
  background-size:6px 6px, 6px 6px, 2.5em 2.5em;
  background-repeat:no-repeat;
}

#primaryNav.nav .lang-switcher:hover{ border-color: rgba(0,0,0,.18); }
#primaryNav.nav .lang-switcher:focus{
  outline:none;
  border-color:#18BAA8;
  box-shadow:0 0 0 3px rgba(24,186,168,.15);
}

/* mobile overlay behavior */
@media (max-width:768px){
  #primaryNav.nav{ gap:.5rem; }
  .site-header.site-header--open #primaryNav.nav{
    position:absolute;
    inset:60px 0 auto 0;
    display:flex;
    flex-direction:column;
    background:#ffffffcc;
    backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(0,0,0,.06);
    padding:.5rem;
  }
  #primaryNav.nav label{ font-size:.95rem; }
  #primaryNav.nav .lang-switcher{
    width: clamp(110px, 100%, 240px);
    min-width:80px;
  }
}



#primaryNav.nav{
  display:flex;
  align-items:center;
  gap:.65rem;
}

#primaryNav.nav label{
  margin:0;
  font: 500 0.95rem/1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#111;
}

/* visual specification for select */
#primaryNav.nav .lang-switcher,
#primaryNav.nav #langSwitcher {
  display: inline-block;
  font: 500 0.95rem/1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  min-width: 96px;
  height: 36px;
  padding: 6px 10px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 10px;
  background: #fff;
  color: #111;
  vertical-align: middle;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 6px 24px; 
  text-align: center; 
}
#primaryNav.nav .lang-switcher:hover,
#primaryNav.nav #langSwitcher:hover{ border-color: rgba(0,0,0,.18); }
#primaryNav.nav .lang-switcher:focus,
#primaryNav.nav #langSwitcher:focus{
  outline:none;
  border-color:#18BAA8;
  box-shadow:0 0 0 3px rgba(24,186,168,.15);
}

/* mobile overlay behavior */
@media (max-width:768px){
  #primaryNav.nav{ gap:.5rem; }
  .site-header.site-header--open #primaryNav.nav{
    position:absolute;
    inset:60px 0 auto 0;
    display:flex;
    flex-direction:column;
    background:#ffffffcc;
    backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(0,0,0,.06);
    padding:.5rem;
  }
  #primaryNav.nav label{ font-size:.95rem; }
  #primaryNav.nav .lang-switcher,
  #primaryNav.nav #langSwitcher{
    width:min(240px, 100%);
    min-width:0;
  }
}


.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow:hidden; white-space:nowrap;
}