/* ============================================================
   Wecleanow — "Nordic Daylight"
   Light editorial design system.

   Warm paper ground, deep ink type, and brand blue reserved almost
   entirely for actions. Fraunces carries the voice, Inter carries the
   information. The page runs light the whole way down, then drops
   into ink for the final call to action.

   Fonts:  Fraunces (display) + Inter (body/UI)
   Order:  tokens · base · type · buttons · nav · hero · trust ·
           services · estimator · plans · care · why · note ·
           gallery · process · compare · areas · faq ·
           final CTA · footer · overlays · motion · responsive
   ============================================================ */

/* ============================================================ TOKENS */
:root{
  /* --- Surfaces: warm off-whites, never a flat cold grey --- */
  --paper:#FBFAF7;          /* page ground */
  --paper-2:#F5F2EC;        /* alternating band */
  --paper-3:#EFEBE3;        /* deepest sand, used sparingly */
  --surface:#FFFFFF;        /* cards sit above the paper */

  /* --- Ink --- */
  --ink:#0F1A24;            /* headlines */
  --ink-2:#24333F;          /* strong body */
  --muted:#5A6B7B;          /* body copy — 5.6:1 on paper */
  --muted-2:#5C6B78;        /* captions — 4.5:1 on the paper-2 band, the worst case */

  /* --- Lines --- */
  --line:#E7E3DA;
  --line-2:#D9D3C7;

  /* --- Brand: actions and links only --- */
  --brand:#0B6FB8;          /* 5.1:1 on white */
  --brand-ink:#075189;      /* hover / pressed */
  --brand-wash:#EAF3FA;
  --brand-line:#C7E0F2;

  /* --- Eco accent, used sparingly --- */
  --mint:#0E9384;
  --mint-wash:#E6F6F4;
  --mint-line:#BFE7E1;

  /* --- Warm highlight for "best value" moments --- */
  --amber:#B4690E;
  --amber-wash:#FBF2E4;

  /* --- WhatsApp --- */
  --wa:#25D366;
  --wa-ink:#04231A;

  /* --- Comparison semantics --- */
  --yes:#0E7C6F;
  --mid:#A05F0C;
  --no:#A93A3A;

  /* --- Effects: layered and warm --- */
  --sh-1:0 1px 2px rgba(15,26,36,.04), 0 2px 8px rgba(15,26,36,.04);
  --sh-2:0 2px 4px rgba(15,26,36,.03), 0 12px 32px -8px rgba(15,26,36,.10);
  --sh-3:0 4px 10px rgba(15,26,36,.04), 0 28px 64px -18px rgba(15,26,36,.18);
  --sh-brand:0 10px 28px -12px rgba(11,111,184,.5);
  --ring:0 0 0 3px rgba(11,111,184,.3);

  --radius:20px;
  --radius-sm:12px;
  --radius-lg:28px;

  /* --- Layout --- */
  --maxw:1200px;
  --nav-h:74px;
  --ease:cubic-bezier(.16,1,.3,1);

  /* Spacious scale — this is a marketing page, it should breathe */
  --s-1:8px;  --s-2:16px; --s-3:24px; --s-4:40px;
  --s-5:64px; --s-6:96px; --s-7:128px;

  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
}

/* ============================================================ BASE */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* A whisper of paper grain over the whole page. Fixed so it never scrolls
   against the content, pointer-events:none so it can't swallow a click. */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.28;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
body > *{position:relative;z-index:2}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* Any author `display` beats the UA stylesheet's [hidden]{display:none}, so a
   component styled with display:grid/flex stays on screen while marked hidden.
   The lightbox did exactly that and covered the page, swallowing every click. */
[hidden]{display:none!important}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.center{text-align:center;margin-top:var(--s-4)}

.skip-link{
  position:absolute;left:-999px;top:0;z-index:300;
  background:var(--ink);color:#fff;padding:12px 20px;
  border-radius:0 0 12px 0;font-weight:600;
}
.skip-link:focus{left:0}

.i{width:1.15em;height:1.15em;fill:currentColor;flex:0 0 auto}

/* Scroll progress — a thin hairline across the very top */
.progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:150;
  background:linear-gradient(90deg,var(--mint),var(--brand));
}

/* ============================================================ TYPE */
.eyebrow{
  display:inline-flex;align-items:center;gap:.65em;
  font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);margin:0 0 var(--s-2);
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px var(--mint-wash)}

.sec-title{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(2rem,4.4vw,3.15rem);
  line-height:1.05;letter-spacing:-.022em;
  color:var(--ink);margin:0 0 var(--s-2);text-wrap:balance;
}
.sec-lead{color:var(--muted);font-size:1.09rem;line-height:1.62;max-width:58ch;margin:0;text-wrap:pretty}
.sec-head{max-width:760px;margin:0 auto var(--s-5);text-align:center}
.sec-head .eyebrow{justify-content:center}
.sec-head .sec-lead{margin-inline:auto}

.section{padding-block:clamp(72px,10vw,var(--s-7));position:relative}
.section--alt{background:var(--paper-2)}
/* Hairlines top and bottom of a banded section keep the rhythm crisp */
.section--alt::before,.section--alt::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--line)}
.section--alt::before{top:0}
.section--alt::after{bottom:0}

/* ============================================================ BUTTONS */
.btn{
  --btnpad:15px 26px;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:var(--btnpad);border-radius:999px;border:1px solid transparent;
  cursor:pointer;font-weight:600;font-size:1rem;letter-spacing:-.005em;text-align:center;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),
             background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn--sm{--btnpad:10px 18px;font-size:.9rem}
.btn--lg{--btnpad:18px 32px;font-size:1.06rem}
.btn--block{display:flex;width:100%}
.btn .i{width:1.05em;height:1.05em}

.btn--primary{background:var(--brand);color:#fff;box-shadow:var(--sh-brand)}
.btn--primary:hover{background:var(--brand-ink);transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(11,111,184,.6)}
.btn--primary:active{transform:translateY(0)}

.btn--ink{background:var(--ink);color:#fff;box-shadow:0 10px 28px -14px rgba(15,26,36,.6)}
.btn--ink:hover{background:#1B2B39;transform:translateY(-2px)}

.btn--wa{background:var(--wa);color:var(--wa-ink);box-shadow:0 10px 28px -14px rgba(37,211,102,.7)}
.btn--wa:hover{background:#1FBF5B;transform:translateY(-2px)}

.btn--ghost{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--sh-1)}

/* On the ink-dark sections the ghost button has to invert */
.on-ink .btn--ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.26);color:#fff}
.on-ink .btn--ghost:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.55)}

/* ============================================================ NAV */
.nav{
  position:sticky;top:0;z-index:100;
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);height:var(--nav-h)}
.nav.is-stuck{
  background:rgba(251,250,247,.86);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom-color:var(--line);
  box-shadow:0 1px 24px -12px rgba(15,26,36,.28);
}

.brand{display:inline-flex;align-items:center;gap:.55em;font-weight:700;font-size:1.16rem;letter-spacing:-.02em;color:var(--ink)}
.brand__mark{display:grid;place-items:center}
.brand__text em{font-style:normal;color:var(--brand)}

.nav__links{display:flex;gap:var(--s-3);align-items:center}
.nav__links a{color:var(--muted);font-size:.94rem;font-weight:500;position:relative;padding-block:8px;transition:color .2s var(--ease)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:2px;border-radius:2px;background:var(--brand);transition:width .3s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after,.nav__links a.is-current::after{width:100%}
.nav__links a.is-current{color:var(--ink)}

.nav__cta{display:flex;align-items:center;gap:10px}
.nav__cta .btn{white-space:nowrap}
.nav__social{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  color:var(--muted);border:1px solid var(--line-2);background:var(--surface);
  transition:color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.nav__social svg{width:19px;height:19px}
.nav__social:hover{color:var(--brand);border-color:var(--brand-line);transform:translateY(-2px)}

.nav__toggle{
  display:none;width:44px;height:44px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line-2);
  cursor:pointer;padding:0;place-items:center;gap:5px;
}
.nav__toggle span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s var(--ease)}
.nav.is-open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__toggle span:nth-child(2){opacity:0}
.nav.is-open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav__mobile{
  display:none;flex-direction:column;gap:2px;
  padding:var(--s-2) clamp(20px,5vw,40px) var(--s-3);
  background:var(--paper);border-bottom:1px solid var(--line);
  box-shadow:var(--sh-2);
}
.nav__mobile a:not(.btn){padding:13px 4px;color:var(--ink-2);font-weight:500;border-bottom:1px solid var(--line)}
.nav__mobile .btn{margin-top:10px}

/* ============================================================ HERO */
.hero{position:relative;padding-block:clamp(48px,7vw,88px) clamp(56px,8vw,104px);overflow:hidden}

/* Two soft washes of colour behind the copy. GSAP parallaxes them. */
.hero__glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.hero__glow--1{width:min(620px,70vw);height:min(620px,70vw);top:-18%;left:-14%;background:rgba(11,111,184,.16)}
.hero__glow--2{width:min(520px,60vw);height:min(520px,60vw);bottom:-24%;right:-10%;background:rgba(14,147,132,.15)}

.hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(32px,5vw,72px);align-items:center}

.hero__title{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(2.5rem,5.4vw,4.2rem);
  line-height:1.04;letter-spacing:-.035em;color:var(--ink);
  margin:0 0 var(--s-3);
  /* balance keeps the last line from stranding a single word */
  text-wrap:balance;
}
.hero__title .hi{position:relative;font-style:normal;display:inline-block;white-space:nowrap}
.hero__title .squiggle{position:absolute;left:0;bottom:-.14em;width:100%;height:.3em;overflow:visible}

.hero__sub{color:var(--muted);font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.6;max-width:52ch;margin:0 0 var(--s-4);text-wrap:pretty}
.hero__sub strong{color:var(--ink);font-weight:600}

.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:var(--s-4)}

.hero__badges{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0}
.hero__badges li{display:inline-flex;align-items:center;gap:.5em;font-size:.92rem;font-weight:500;color:var(--muted)}
.hero__badges .i{color:var(--mint);width:18px;height:18px}

/* --- The quote card: white, lifted, photo on top --- */
.hero__card{position:relative}
.quotecard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-3);overflow:hidden}
.quotecard__photo{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-3)}
.quotecard__photo img{width:100%;height:100%;object-fit:cover}
.quotecard__chip{
  position:absolute;left:16px;bottom:16px;
  display:inline-flex;align-items:center;gap:.5em;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  color:var(--ink);border-radius:999px;padding:9px 16px;
  font-size:.85rem;font-weight:500;box-shadow:var(--sh-2);
}
.quotecard__chip strong{font-weight:700}
.quotecard__chip .star{width:15px;height:15px;fill:var(--amber)}

.quotecard__body{padding:clamp(20px,3vw,30px)}
.quotecard__title{font-family:var(--font-display);font-weight:500;font-size:1.45rem;line-height:1.15;letter-spacing:-.02em;color:var(--ink);margin:0 0 6px}
.quotecard__note{color:var(--muted-2);font-size:.9rem;margin:0 0 var(--s-3)}

.miniform{display:grid;gap:14px}
.miniform__alt{text-align:center;font-size:.88rem;color:var(--muted-2);margin:2px 0 0}
.miniform__alt a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* --- Scroll cue --- */
.hero__scroll{
  display:flex;align-items:center;justify-content:center;gap:.6em;
  margin-top:clamp(32px,5vw,56px);
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);font-weight:600;
}
.hero__scroll svg{width:16px;height:16px;animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ============================================================ FORM FIELDS */
.field{display:grid;gap:7px}
.field > span{font-size:.84rem;font-weight:600;color:var(--ink-2);letter-spacing:-.005em}
.field > span small{font-weight:400;color:var(--muted-2)}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.98rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  padding:13px 15px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
  appearance:none;
}
.field textarea{resize:vertical;min-height:88px}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B7B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px;padding-right:42px;
}
.field input::placeholder,.field textarea::placeholder{color:#9AA7B2}

/* The open dropdown is drawn by the OS, not by the page, and <option> inherits
   the select's colour while the popup keeps its own background. On the dark
   contact form that meant white text on a white popup — invisible. Both selects
   now state option colours outright, and color-scheme tells the browser which
   chrome to draw so the scrollbar and highlight match. */
.field select{color-scheme:light}
.field select option{background-color:#FFFFFF;color:#0F1A24}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--no)}
.field__err{font-size:.82rem;color:var(--no);font-weight:500}

/* Inverted fields on the ink-dark contact band */
.on-ink .field > span{color:rgba(255,255,255,.86)}
.on-ink .field > span small{color:rgba(255,255,255,.55)}
/* background-color, not the `background` shorthand — the shorthand also resets
   size/position/repeat, which blew the select's chevron up to fill the field. */
.on-ink .field input,.on-ink .field select,.on-ink .field textarea{
  background-color:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff;
}
.on-ink .field input::placeholder,.on-ink .field textarea::placeholder{color:rgba(255,255,255,.42)}
.on-ink .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme:dark;
}
.on-ink .field select option{background-color:#16212C;color:#FFFFFF}
.on-ink .field input:focus,.on-ink .field select:focus,.on-ink .field textarea:focus{
  border-color:#7FC0EC;box-shadow:0 0 0 3px rgba(127,192,236,.28);
}
.on-ink .field__err{color:#FF9E9E}

/* ============================================================ TRUST BAR */
.trustbar{background:var(--surface);border-block:1px solid var(--line)}
.trustbar__inner{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.trust{
  display:flex;align-items:center;gap:14px;
  padding:clamp(22px,3vw,32px) clamp(14px,2.2vw,28px);
  border-left:1px solid var(--line);
}
.trust:first-child{border-left:0}
.trust__ic{display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;border-radius:12px;background:var(--brand-wash);color:var(--brand)}
.trust__ic svg{width:21px;height:21px}
.trust:nth-child(even) .trust__ic{background:var(--mint-wash);color:var(--mint)}
.trust__txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.stat__num,.trust__num{font-family:var(--font-display);font-weight:600;font-size:1.55rem;letter-spacing:-.02em;color:var(--ink)}
.stat__label,.trust__label{font-size:.85rem;color:var(--muted);font-weight:500;text-wrap:balance}

/* ============================================================ SERVICES (BENTO) */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}

.card{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--sh-1);display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s var(--ease);
}
/* Cursor-following wash. JS feeds --mx/--my; harmless when it doesn't. */
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(11,111,184,.07),transparent 70%);
  transition:opacity .4s var(--ease);
}
.card:hover{box-shadow:var(--sh-3);border-color:var(--brand-line)}
.card:hover::after{opacity:1}

.card--feature{grid-column:1 / -1;flex-direction:row;align-items:stretch}
/* Without an explicit ratio the portrait source drives the height and the card
   grows to ~700px with the copy stranded at the top. */
.card--feature .card__media{flex:0 0 46%;aspect-ratio:5/4}
.card--feature .card__body{padding:clamp(26px,3.4vw,44px);justify-content:center}
.card--feature h3{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.card--feature .card__list{grid-template-columns:1fr 1fr}

.card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card__media img{transform:scale(1.045)}
.card__badge{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--ink);color:#fff;font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:7px 13px;border-radius:999px;
}

.card__body{padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;gap:12px;flex:1;position:relative;z-index:1}
.card__body h3{font-family:var(--font-display);font-weight:500;font-size:1.4rem;line-height:1.15;letter-spacing:-.02em;color:var(--ink);margin:0}
.card__body > p{color:var(--muted);font-size:.98rem;margin:0;text-wrap:pretty}
.card__list{list-style:none;display:grid;gap:9px;margin:0;padding:0}
.card__list li{position:relative;padding-left:26px;font-size:.93rem;color:var(--ink-2)}
.card__list li::before{
  content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;
  background:var(--mint-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9384' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L19 8'/%3E%3C/svg%3E") center/11px no-repeat;
}
.card__link{
  margin-top:auto;padding-top:6px;
  display:inline-flex;align-items:center;gap:.45em;align-self:flex-start;
  color:var(--brand);font-weight:600;font-size:.96rem;
}
.card__link span{transition:transform .3s var(--ease)}
.card__link:hover span{transform:translateX(5px)}

/* ============================================================ ESTIMATOR */
.est{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s-3);align-items:start}

.est__form{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(22px,3.4vw,42px);box-shadow:var(--sh-2);
  display:grid;gap:var(--s-4);
}
.est__row{display:grid;gap:14px}
.est__row--split{grid-template-columns:1fr 1fr;gap:var(--s-3)}

.est__label{display:flex;align-items:center;gap:.6em;font-size:.95rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.est__label i{
  display:grid;place-items:center;flex:0 0 auto;
  width:25px;height:25px;border-radius:50%;
  background:var(--brand-wash);color:var(--brand);
  font-style:normal;font-size:.78rem;font-weight:700;
}

/* --- Segmented control --- */
.segmented{display:flex;gap:4px;padding:4px;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;flex-wrap:wrap}
.seg{
  flex:1 1 0;min-width:88px;min-height:44px;
  padding:10px 14px;border:0;border-radius:999px;background:transparent;cursor:pointer;
  font-size:.93rem;font-weight:600;color:var(--muted);
  transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease);
}
.seg em{display:block;font-style:normal;font-size:.76rem;font-weight:500;color:var(--mint);margin-top:1px}
.seg:hover{color:var(--ink)}
.seg.is-active{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.seg.is-active em{color:var(--mint)}
.seg:focus-visible{outline:none;box-shadow:var(--ring)}
.segmented--stack .seg{min-width:120px}

/* --- Steppers --- */
.stepper{display:grid;gap:14px}
.stepper__ctrl{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:5px;
}
.stepper__btn{
  width:44px;height:44px;flex:0 0 auto;border-radius:50%;cursor:pointer;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  font-size:1.25rem;line-height:1;display:grid;place-items:center;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.stepper__btn:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:scale(1.06)}
.stepper__btn:focus-visible{outline:none;box-shadow:var(--ring)}
.stepper__val{font-family:var(--font-display);font-weight:600;font-size:1.35rem;color:var(--ink);min-width:4ch;text-align:center}

/* --- Extras: grouped chips --- */
.xgroups{display:grid;gap:var(--s-3)}
.xgroup{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;background:var(--paper)}
.xgroup__title{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin:0 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:9px}

.chip{
  display:inline-flex;align-items:center;gap:.45em;min-height:44px;
  padding:10px 16px;border-radius:999px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2);
  font-size:.91rem;font-weight:500;text-align:left;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.chip:hover{border-color:var(--brand-line);background:var(--brand-wash);transform:translateY(-1px)}
.chip:focus-visible{outline:none;box-shadow:var(--ring)}
.chip__unit{font-style:normal;font-size:.78rem;color:var(--muted-2);font-weight:400}
.chip.is-on{background:var(--brand-wash);border-color:var(--brand);color:var(--brand-ink);font-weight:600;padding-left:38px;position:relative}
.chip.is-on .chip__unit{color:var(--brand)}
.chip.is-on::before{
  content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;border-radius:50%;background:var(--brand);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L19 8'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat;
}

/* Per-unit chips get a small counter beside them */
.chipq{display:inline-flex;align-items:center;gap:6px}
.chipq__ctrl{display:inline-flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--brand-line);border-radius:999px;padding:3px}
.chipq__ctrl[hidden]{display:none}
.chipq__btn{
  width:32px;height:32px;border-radius:50%;cursor:pointer;
  border:0;background:var(--brand-wash);color:var(--brand-ink);
  font-size:1.05rem;line-height:1;display:grid;place-items:center;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.chipq__btn:hover{background:var(--brand);color:#fff}
.chipq__btn:focus-visible{outline:none;box-shadow:var(--ring)}
.chipq__val{min-width:2ch;text-align:center;font-weight:700;font-size:.92rem;color:var(--ink)}

/* --- The live price panel --- */
.est__result{
  position:sticky;top:calc(var(--nav-h) + 20px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(22px,3vw,32px);box-shadow:var(--sh-3);
  overflow:hidden;
}
.est__result::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--mint),var(--brand))}
.est__reslabel{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin:0 0 8px}
.est__price{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.1rem,4.2vw,2.9rem);line-height:1;letter-spacing:-.035em;
  color:var(--ink);margin:0;display:flex;align-items:baseline;gap:.18em;flex-wrap:wrap;
  font-variant-numeric:tabular-nums;
}
.est__dash{color:var(--line-2);font-weight:400}
.est__per{font-size:.92rem;color:var(--muted);margin:8px 0 var(--s-3)}

.est__summary{list-style:none;margin:0 0 var(--s-3);padding:var(--s-2) 0;display:grid;gap:9px;border-block:1px solid var(--line)}
.est__summary li{display:flex;justify-content:space-between;gap:14px;font-size:.9rem;align-items:baseline}
.est__summary li span:first-child{color:var(--muted-2);flex:0 0 auto}
.est__summary li span:last-child{color:var(--ink-2);font-weight:500;text-align:right}
.est__fine{font-size:.8rem;color:var(--muted-2);margin:12px 0 0;line-height:1.5}

/* ============================================================ PLANS */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);align-items:start;max-width:940px;margin-inline:auto}
.plan{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(24px,3.2vw,38px);box-shadow:var(--sh-1);
  display:flex;flex-direction:column;gap:var(--s-2);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.plan:hover{box-shadow:var(--sh-3)}
.plan--featured{border-color:var(--brand);box-shadow:var(--sh-2),0 0 0 4px var(--brand-wash)}
.plan__ribbon{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--amber);color:#fff;font-size:.72rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;padding:6px 16px;border-radius:999px;white-space:nowrap;
}
.plan__head h3{font-family:var(--font-display);font-weight:500;font-size:1.6rem;letter-spacing:-.02em;color:var(--ink);margin:0 0 4px}
.plan__price{margin:0;color:var(--muted);font-size:.95rem}
.plan__price span{display:block;font-family:var(--font-display);font-weight:600;font-size:1.7rem;color:var(--brand);letter-spacing:-.025em;line-height:1.15}
.plan__tag{color:var(--muted);font-size:.95rem;margin:0;text-wrap:pretty}
.plan__list{list-style:none;display:grid;gap:10px;margin:0;padding:var(--s-2) 0;border-top:1px solid var(--line);flex:1}
.plan__list li{position:relative;padding-left:27px;font-size:.94rem;color:var(--ink-2)}
.plan__list li small{color:var(--muted-2)}
.plan__list li::before{
  content:"";position:absolute;left:0;top:.4em;width:17px;height:17px;border-radius:50%;
  background:var(--brand-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6FB8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L19 8'/%3E%3C/svg%3E") center/11px no-repeat;
}
.plans__fine{text-align:center;color:var(--muted-2);font-size:.9rem;max-width:60ch;margin:var(--s-4) auto 0}

/* ============================================================ CARE BAND */
.care{background:var(--mint-wash);border-block:1px solid var(--mint-line);padding-block:clamp(72px,9vw,var(--s-6))}
.care__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.care__media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sh-3);aspect-ratio:4/3}
.care__media img{width:100%;height:100%;object-fit:cover}
.care__list{list-style:none;display:grid;gap:11px;margin:var(--s-3) 0 0;padding:0}
.care__list li{display:flex;align-items:center;gap:.6em;font-size:.98rem;color:var(--ink-2);font-weight:500}
.care__list .i{color:var(--mint);width:19px;height:19px}

/* ============================================================ WHY US */
.why__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:start}
.why__points{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-top:var(--s-4)}
.point{display:flex;gap:14px;align-items:flex-start}
.point__ic{display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--brand);box-shadow:var(--sh-1)}
.point__ic svg{width:22px;height:22px}
.point h3{font-size:1.03rem;font-weight:650;color:var(--ink);margin:0 0 3px;letter-spacing:-.01em}
.point p{font-size:.92rem;color:var(--muted);margin:0;text-wrap:pretty}

.why__panel{position:sticky;top:calc(var(--nav-h) + 20px);display:grid;gap:var(--s-3)}
.why__photo{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sh-3);aspect-ratio:4/5}
.why__photo img{width:100%;height:100%;object-fit:cover}
.guarantee{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,3vw,30px);text-align:center;box-shadow:var(--sh-2)}
.guarantee__seal{display:grid;place-items:center;margin-bottom:12px}
.guarantee__seal svg{width:96px;height:96px}
.seal-top{font:700 20px var(--font-display);fill:var(--brand)}
.seal-mid,.seal-bot{font:600 11px var(--font-sans);fill:var(--muted);letter-spacing:2px}
.guarantee h3{font-family:var(--font-display);font-weight:500;font-size:1.3rem;color:var(--ink);margin:0 0 8px;letter-spacing:-.02em}
.guarantee p{color:var(--muted);font-size:.93rem;margin:0 0 var(--s-3);text-wrap:pretty}

/* ============================================================ OWNER NOTE */
.note__inner{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,4vw,48px);align-items:start;
  max-width:900px;margin-inline:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(26px,4vw,52px);box-shadow:var(--sh-2);
}
.note__avatar{width:88px;height:88px;flex:0 0 auto;border-radius:50%;overflow:hidden;box-shadow:var(--sh-2);border:3px solid var(--surface);outline:1px solid var(--line)}
.note__avatar img{width:100%;height:100%;object-fit:cover}
.note__quote{
  font-family:var(--font-display);font-weight:400;font-style:italic;
  font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.45;letter-spacing:-.015em;
  color:var(--ink);margin:0;position:relative;text-wrap:pretty;
}
.note__quote::before{
  content:"\201C";position:absolute;left:-.42em;top:-.28em;
  font-size:3.4em;line-height:1;color:var(--brand-line);z-index:-1;
}
.note__sign{margin:var(--s-2) 0 0;font-size:.92rem;font-weight:600;color:var(--muted-2)}

/* ============================================================ GALLERY */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;grid-auto-flow:dense;gap:16px}
.gallery__item{
  position:relative;margin:0;overflow:hidden;border-radius:var(--radius);
  grid-row:span 2;cursor:zoom-in;background:var(--paper-3);
  box-shadow:var(--sh-1);transition:box-shadow .4s var(--ease),transform .4s var(--ease);
}
.gallery__item--tall{grid-row:span 3}
.gallery__item--wide{grid-column:span 2}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gallery__item:hover{box-shadow:var(--sh-3);transform:translateY(-3px)}
.gallery__item:hover img{transform:scale(1.06)}
.gallery__item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 16px 14px;
  color:#fff;font-size:.86rem;font-weight:500;
  background:linear-gradient(to top,rgba(9,16,22,.82),transparent);
  transform:translateY(4px);opacity:.92;transition:transform .4s var(--ease),opacity .3s var(--ease);
}
.gallery__item:hover figcaption{transform:translateY(0);opacity:1}
.gallery__zoom{
  position:absolute;top:12px;right:12px;display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink);
  opacity:0;transform:scale(.82);transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.gallery__zoom svg{width:17px;height:17px}
.gallery__item:hover .gallery__zoom,.gallery__item:focus-visible .gallery__zoom{opacity:1;transform:scale(1)}
.gallery__more{text-align:center;margin:var(--s-4) 0 0;color:var(--muted)}
.gallery__more a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ============================================================ PROCESS */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);margin:0;padding:0;position:relative;counter-reset:step}
.step{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(24px,3vw,36px);box-shadow:var(--sh-1);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.step:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.step__n{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--brand-wash);color:var(--brand);
  font-family:var(--font-display);font-weight:600;font-size:1.5rem;
  margin-bottom:var(--s-2);
}
.step h3{font-family:var(--font-display);font-weight:500;font-size:1.3rem;letter-spacing:-.02em;color:var(--ink);margin:0 0 7px}
.step p{color:var(--muted);font-size:.96rem;margin:0;text-wrap:pretty}

/* ============================================================ COMPARISON */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--sh-1);-webkit-overflow-scrolling:touch}
.compare{width:100%;border-collapse:collapse;min-width:660px;font-size:.95rem}
.compare th,.compare td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line)}
.compare thead th{
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);background:var(--paper-2);white-space:nowrap;
}
.compare thead th:first-child{border-top-left-radius:var(--radius-lg)}
.compare thead th:last-child{border-top-right-radius:var(--radius-lg)}
.compare tbody th{font-weight:600;color:var(--ink);width:30%}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
/* Our column stays tinted the whole way down so the eye tracks it */
.compare__us{background:var(--brand-wash);color:var(--brand-ink)}
.compare td.compare__us,.compare tbody td:nth-child(2){background:var(--brand-wash)}
.compare td{color:var(--muted)}
/* Never colour alone — each verdict carries a glyph too */
.compare .yes,.compare .mid,.compare .no{font-weight:600}
.compare .yes{color:var(--yes)}
.compare .mid{color:var(--mid)}
.compare .no{color:var(--no)}
.compare .yes::before{content:"\2713\00a0\00a0"}
.compare .mid::before{content:"\007e\00a0\00a0"}
.compare .no::before{content:"\2715\00a0\00a0"}

/* ============================================================ AREAS */
.areas{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;max-width:820px;margin-inline:auto}
.areas li{
  background:var(--surface);border:1px solid var(--line-2);border-radius:999px;
  padding:10px 20px;font-size:.94rem;font-weight:500;color:var(--ink-2);
  transition:border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.areas li:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.areas__note{text-align:center;color:var(--muted);margin:var(--s-4) 0 0;font-size:.96rem}
.areas__note a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ============================================================ FAQ */
.faq{max-width:820px}
.acc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sh-1)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__item:last-child{border-bottom:0}
.acc__item summary{
  list-style:none;cursor:pointer;padding:20px clamp(20px,3vw,28px);
  font-weight:600;font-size:1.03rem;color:var(--ink);letter-spacing:-.01em;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.acc__item summary::-webkit-details-marker{display:none}
.acc__item summary::after{
  content:"";flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1A24' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/13px no-repeat;
  transition:transform .3s var(--ease),background-color .2s var(--ease);
}
.acc__item[open] summary{color:var(--brand)}
.acc__item[open] summary::after{transform:rotate(180deg);background-color:var(--brand-wash)}
.acc__item summary:hover{background:var(--paper)}
.acc__body{padding:0 clamp(20px,3vw,28px) 22px}
.acc__body p{margin:0;color:var(--muted);font-size:.98rem;max-width:62ch;text-wrap:pretty}

/* ============================================================ FINAL CTA (INK) */
.quote{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding-block:clamp(72px,10vw,var(--s-7))}
.quote__glow{
  position:absolute;width:min(760px,90vw);height:min(760px,90vw);border-radius:50%;
  top:-42%;left:-12%;filter:blur(110px);pointer-events:none;
  background:radial-gradient(circle,rgba(11,111,184,.55),transparent 68%);
}
.quote__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.quote .sec-title{color:#fff}
.quote .sec-lead{color:rgba(255,255,255,.7)}
.quote .eyebrow{color:rgba(255,255,255,.6)}
.quote .eyebrow .dot{background:#5EEAD4;box-shadow:0 0 0 4px rgba(94,234,212,.18)}

.quote__direct{display:grid;gap:10px;margin-top:var(--s-4)}
.quote__chip{
  display:flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);padding:14px 18px;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.quote__chip:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34);transform:translateX(4px)}
.quote__chip .i{width:21px;height:21px;color:#7FC0EC}
.quote__chip span{display:flex;flex-direction:column;font-weight:600;line-height:1.3;min-width:0;word-break:break-word}
.quote__chip small{font-weight:400;font-size:.78rem;color:rgba(255,255,255,.55);letter-spacing:.06em;text-transform:uppercase}

.bigform{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);padding:clamp(24px,3.4vw,38px);
  display:grid;gap:var(--s-2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.bigform .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.bigform__fine{font-size:.8rem;color:rgba(255,255,255,.5);margin:0;text-align:center;line-height:1.5}

/* ============================================================ FOOTER */
.footer{background:#0A131B;color:rgba(255,255,255,.66);padding-block:var(--s-5) var(--s-3);font-size:.94rem}
.footer__inner{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--s-4)}
.footer .brand{color:#fff;margin-bottom:14px}
.footer .brand__text em{color:#7FC0EC}
.footer__brand p{margin:0 0 16px;max-width:36ch;line-height:1.6;text-wrap:pretty}
.footer__ig{display:inline-flex;align-items:center;gap:.5em;color:#7FC0EC;font-weight:600;transition:color .2s var(--ease)}
.footer__ig svg{width:19px;height:19px}
.footer__ig:hover{color:#fff}
.footer__col{display:flex;flex-direction:column;gap:11px}
.footer__col h3{color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 4px}
.footer__col a{transition:color .2s var(--ease)}
.footer__col a:hover{color:#fff}
.footer__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  margin-top:var(--s-4);padding-top:var(--s-3);
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.85rem;color:rgba(255,255,255,.45);
}
.footer__bottom p{margin:0}
/* Keep the last line clear of the floating quick-contact buttons */
@media (min-width:901px){.footer__bottom{padding-right:84px}}

/* ============================================================ OVERLAYS */
/* --- Sticky mobile action bar --- */
.mobilebar{
  position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;
  background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:9px clamp(10px,3vw,16px) calc(9px + env(safe-area-inset-bottom));
  gap:8px;transform:translateY(110%);transition:transform .4s var(--ease);
  box-shadow:0 -6px 28px -14px rgba(15,26,36,.4);
}
.mobilebar.is-visible{transform:translateY(0)}
.mobilebar__btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:52px;border-radius:14px;font-size:.76rem;font-weight:600;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
}
.mobilebar__btn svg{width:20px;height:20px;fill:currentColor}
.mobilebar__btn--price{background:var(--brand);border-color:var(--brand);color:#fff}
.mobilebar__btn--wa{background:var(--wa);border-color:var(--wa);color:var(--wa-ink)}

/* --- Desktop floating quick-contact --- */
.fab{position:fixed;right:22px;bottom:22px;z-index:110;display:grid;gap:10px}
.fab__btn{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  box-shadow:var(--sh-3);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.fab__btn svg{width:24px;height:24px;fill:currentColor}
.fab__btn:hover{transform:translateY(-3px) scale(1.05)}
.fab__btn--wa{background:var(--wa);color:var(--wa-ink)}
.fab__btn--call{background:var(--surface);color:var(--brand);border:1px solid var(--line-2)}

/* --- Lightbox --- */
.lb{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(9,16,22,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .28s var(--ease);padding:clamp(16px,4vw,48px);
}
.lb.is-open{opacity:1}
.lb__stage{margin:0;display:grid;place-items:center;gap:14px;max-width:100%;max-height:100%}
.lb__stage img{max-width:min(1100px,92vw);max-height:78vh;width:auto;border-radius:var(--radius);box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.lb__stage figcaption{color:rgba(255,255,255,.8);font-size:.92rem;text-align:center}
.lb__close,.lb__nav{
  position:absolute;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.lb__close svg,.lb__nav svg{width:22px;height:22px}
.lb__close:hover,.lb__nav:hover{background:rgba(255,255,255,.22);transform:scale(1.06)}
.lb__close{top:20px;right:20px}
.lb__nav--prev{left:clamp(10px,3vw,32px)}
.lb__nav--next{right:clamp(10px,3vw,32px)}

/* ============================================================ MOTION */
/* GSAP animates the same two properties. The transition is scoped to
   .is-in so the IntersectionObserver fallback still eases, without
   fighting GSAP when it is the one driving. */
.reveal{opacity:0;transform:translateY(24px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero__scroll svg{animation:none}
}

/* ============================================================ RESPONSIVE */
@media (max-width:1080px){
  .nav__links{display:none}
  .nav__toggle{display:grid}
  .nav.is-open .nav__mobile{display:flex}
  .hero__inner{grid-template-columns:1fr;gap:var(--s-4)}
  .hero__card{max-width:560px;width:100%}
  .est{grid-template-columns:1fr}
  .est__result{position:static}
  .why__grid{grid-template-columns:1fr}
  .why__panel{position:static;grid-template-columns:1fr 1fr;align-items:start}
  .card--feature{flex-direction:column}
  .card--feature .card__media{flex:none;aspect-ratio:16/9;width:100%}
}

@media (max-width:900px){
  .nav__cta .btn--ghost{display:none}
  .trustbar__inner{grid-template-columns:1fr 1fr}
  .trust:nth-child(3){border-left:0}
  .trust:nth-child(n+3){border-top:1px solid var(--line)}
  .bento{grid-template-columns:1fr 1fr}
  .card--feature{grid-column:1 / -1}
  .quote__grid{grid-template-columns:1fr}
  .care__inner{grid-template-columns:1fr}
  .care__media{order:-1;aspect-ratio:16/9}
  .steps{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .footer__inner{grid-template-columns:1fr 1fr;gap:var(--s-3)}
  .footer__brand{grid-column:1 / -1}
  .fab{display:none}
  .mobilebar{display:flex}
  body{padding-bottom:74px}
}

@media (max-width:720px){
  body{font-size:16px}
  .plans{grid-template-columns:1fr}
  .plan--featured{margin-top:var(--s-2)}
  .why__panel{grid-template-columns:1fr}
  .why__points{grid-template-columns:1fr}
  .note__inner{grid-template-columns:1fr;text-align:left}
  .note__avatar{width:66px;height:66px}
  .note__quote::before{display:none}
  .bigform .row{grid-template-columns:1fr}
  .est__row--split{grid-template-columns:1fr}
  .hero__actions .btn{width:100%}
}

@media (max-width:560px){
  /* Brand + CTA + burger is all that fits; the mobile bar carries the rest */
  .nav__social{display:none}
  .trustbar__inner{grid-template-columns:1fr}
  .trust{border-left:0}
  .trust:nth-child(n+2){border-top:1px solid var(--line)}
  .bento{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr;grid-auto-rows:190px}
  .gallery__item--wide{grid-column:span 1}
  .gallery__item--tall{grid-row:span 2}
  .seg{min-width:0;flex:1 1 40%}
  .segmented--stack .seg{min-width:0;flex:1 1 100%}
  .chipq{width:100%}
  .footer__inner{grid-template-columns:1fr}
}