/* =====================================================================
   Nine Taps — index v4
   Built 1:1 on the Ardène Framer teardown (2026-06-23-1231).
   Token layer is lifted verbatim from teardown/style-kit/tokens.css, then
   wired into semantic component styles. Restyle = edit tokens only.
   ===================================================================== */

/* ---------- self-hosted face (Urbanist, one variable file for every weight) ---------- */
@font-face{
  font-family:'Urbanist';
  src:url('assets/fonts/urbanist-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ============================== TOKENS ============================== */
:root{
  /* palette (frequency-ranked from teardown) */
  --accent:#1E5E8C;        /* nine taps blue (sampled from the logo) — all non-button accents */
  --accent-ink:#164665;    /* darker blue for hover / contrast */
  --btn:#B11226;           /* ralph-lauren red — BUTTONS ONLY */
  --btn-ink:#8E0F1F;       /* darker red for button hover */
  --ink:#121212;           /* text-primary */
  --muted:#808080;         /* text-muted / link hover */
  --black:#000000;         /* invert bg + hairlines */
  --terracotta:#9F4C29;    /* warm-accent, used once */
  --gold:#E0A52E;          /* review-rating stars (gold) */
  --canvas:#FAFAFA;        /* cream page */
  --surface:#F0F0F0;       /* light card surface */
  --white:#FFFFFF;         /* over-photo text */

  /* font roles — all unified to Urbanist (single variable face, weights 100–900) */
  --font-display:'Urbanist','Helvetica Neue',Arial,sans-serif;
  --font-mono:'Urbanist','Helvetica Neue',Arial,sans-serif;
  --font-ui:'Urbanist','Helvetica Neue',Arial,sans-serif;
  --font-script:'Urbanist','Helvetica Neue',Arial,sans-serif;

  /* fluid type scale (375 -> 1440), tracking kept ~ -0.04em on display */
  --fs-wordmark:clamp(4rem, -1rem + 22vw, 18.75rem);   /* 64 -> 300 */
  --fs-display: clamp(2.5rem, 0.4rem + 7.6vw, 7.5rem);  /* 40 -> 120 */
  --fs-subhead: clamp(1.5rem, 1.1rem + 1vw, 2rem);      /* 24 -> 32  */
  --fs-lead:    clamp(1.0625rem, 1rem + 0.32vw, 1.25rem);/* 17 -> 20 */
  --fs-mono:    clamp(0.8125rem, 0.74rem + 0.28vw, 1.125rem);/* 13 -> 18 */
  --fs-mono-sm: 0.75rem;                                 /* 12 */

  /* spacing scale */
  --space-2:4px; --space-3:8px; --space-4:12px; --space-5:16px;
  --space-6:20px; --space-7:32px; --space-8:40px; --space-9:52px;
  --space-10:60px; --space-11:64px; --space-12:100px; --space-13:152px;

  /* rhythm + container */
  --section-pad:clamp(72px, 10vw, 152px);
  --container:1400px;
  --gutter:clamp(20px, 4vw, 48px);

  /* radii — sharp/flat aesthetic, 1:1 with the Zara design language */
  --radius-pill:0; --radius-card:0; --radius-sm:0;

  /* shadows (from teardown shadowScale) */
  --shadow-sm:rgba(0,0,0,.26) 0 .6px .6px -1.25px, rgba(0,0,0,.23) 0 2.29px 2.29px -2.5px, rgba(0,0,0,.09) 0 10px 10px -3.75px;
  --shadow-md:rgba(0,0,0,.17) 0 .6px 1.57px -1.5px, rgba(0,0,0,.14) 0 2.29px 5.95px -3px, rgba(0,0,0,.02) 0 10px 26px -4.5px;

  /* motion (median 0.32s, link/card hover bezier captured from CSS) */
  --t-fade:.32s;
  --t-hover:.3s;
  --ease-none:linear;
  --ease-hover:cubic-bezier(.12,.23,.5,1);
}

/* ============================== RESET ============================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-display);
  font-weight:400;
  font-optical-sizing:auto;
  line-height:1.2;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;transition:color var(--t-hover) var(--ease-hover)}
a:hover{color:var(--muted)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--accent);color:var(--white)}

/* ============================== LAYOUT HELPERS ============================== */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-pad)}
section[id]{scroll-margin-top:84px}
.bleed{width:100vw;margin-left:50%;transform:translateX(-50%)}
.eyebrow-row{display:flex;align-items:center;gap:var(--space-4)}

/* ============================== TYPE UTILITIES ============================== */
.wordmark{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-wordmark);line-height:.8;letter-spacing:-.04em;
  text-transform:lowercase;
}
.display{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-display);line-height:.92;letter-spacing:-.035em;
}
.subhead{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-subhead);line-height:1.04;letter-spacing:-.03em;
}
.lead{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-lead);line-height:1.45;letter-spacing:-.02em;
}
.mono{
  font-family:var(--font-mono);font-weight:400;
  font-size:var(--fs-mono);line-height:1.4;letter-spacing:-.02em;
  text-transform:uppercase;
}
.mono-sm{
  font-family:var(--font-mono);font-weight:400;
  font-size:var(--fs-mono-sm);line-height:1.4;letter-spacing:.01em;
  text-transform:uppercase;
}
.accent{color:var(--accent)}
.muted{color:var(--muted)}
.caps{text-transform:none} /* opt-out for proper nouns inside lowercased type (e.g. George Nikolov) */

/* the recurring starburst maker's mark */
.star{width:1em;height:1em;flex:none;display:inline-block;fill:currentColor}
.star--lg{width:clamp(40px,5vw,72px);height:clamp(40px,5vw,72px)}

/* ============================== NAV ============================== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-6);
  padding:18px var(--gutter);
  color:var(--white);
  transition:background var(--t-fade) ease, color var(--t-fade) ease, border-color var(--t-fade) ease;
  border-bottom:1px solid transparent;
}
.nav__group{display:flex;align-items:center;gap:var(--space-7)}
.nav__brand{display:flex;align-items:center;gap:var(--space-4);font-size:var(--fs-lead);text-transform:lowercase;letter-spacing:-.03em}
.nav__brand .star{width:18px;height:18px}
.nav__brand b{font-weight:400}
.nav--solid{background:rgba(250,250,250,.92);color:var(--ink);border-bottom-color:rgba(0,0,0,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pill{
  display:inline-flex;align-items:center;gap:.5em;
  border:1px solid currentColor;border-radius:var(--radius-pill);
  padding:.55em 1.05em;font-family:var(--font-mono);font-size:var(--fs-mono);
  text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap;
  transition:background var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover);
}
.pill:hover{background:currentColor;color:var(--canvas)}
.nav--solid .pill:hover{color:var(--canvas)}
.nav__menu-btn{display:none}

/* ============================== HERO ============================== */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--black)}
.hero__media{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform,opacity}
.hero__media picture{position:absolute;inset:0;display:block}
.hero__media img{width:100%;height:100%;object-fit:cover}
/* slightly stronger gradient: the customer-problem headline sits lower-left and
   needs more contrast than the old single wordmark did */
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,.08) 30%,rgba(0,0,0,.22) 62%,rgba(0,0,0,.62) 100%)}
.hero__inner{
  position:absolute;inset:auto 0 0 0;
  max-width:var(--container);margin-inline:auto;padding:0 var(--gutter) clamp(28px,4vw,64px);
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,2vw,26px);
  color:var(--white);
}
.hero__brand{display:flex;align-items:center;gap:.6em;color:var(--white)}
.hero__brand .star{width:1.05em;height:1.05em;color:var(--white)}
.hero__head{color:var(--white);max-width:15ch}
.hero__sub{max-width:54ch}
.hero__cta{margin-top:clamp(4px,1vw,10px)}

/* ============================== SHARED SECTION HEADER ============================== */
.head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,80px);align-items:start}
.head__title{max-width:14ch}
.head__aside{padding-top:.6em;display:flex;flex-direction:column;gap:var(--space-6);max-width:46ch}
.eyebrow{color:var(--muted);display:flex;align-items:center;gap:.6em}
.eyebrow .star{width:1.1em;height:1.1em;color:var(--ink)}
@media(max-width:820px){.head{grid-template-columns:1fr;gap:var(--space-7)}}
/* single-headline variant (proof section): no aside column, headline breathes */
.head--solo{display:block}
.head--solo .head__title{max-width:24ch}

/* ============================== OPTIONS / RESIDENCE CARDS ============================== */
.cards{display:flex;flex-direction:column;gap:6px;margin-top:clamp(40px,6vw,80px)}
.card{
  position:relative;overflow:hidden;
  min-height:clamp(440px,62vw,780px);
  display:flex;color:var(--white);isolation:isolate;
}
.card__img{position:absolute;inset:0;z-index:-2}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-hover)}
.card:hover .card__img img{transform:scale(1.04)}
.card::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.12) 45%,rgba(0,0,0,.05) 60%,rgba(0,0,0,.45) 100%)}
.card__grid{
  position:relative;width:100%;
  max-width:var(--container);margin-inline:auto;
  padding:clamp(20px,3vw,40px) var(--gutter);
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;
  gap:var(--space-5);
}
.card__code{grid-row:1}
.card__code--l{grid-column:1;justify-self:start}
.card__code--r{grid-column:2;justify-self:end;text-align:right}
.card__name{grid-row:3;grid-column:1;align-self:end}      /* left column — wraps like the villa names, never collides with desc */
.card__desc{grid-row:3;grid-column:2;justify-self:end;align-self:end;max-width:34ch;text-align:right}
/* tablet + mobile: stack the card name above a full-width description
   (the desktop 2-col name|desc grid gets too cramped below ~900px) */
@media(max-width:900px){
  .card__grid{grid-template-rows:auto auto 1fr auto;row-gap:var(--space-6)}
  .card__name{grid-row:3;grid-column:1/-1}
  .card__desc{grid-row:4;grid-column:1/-1;justify-self:start;text-align:left;max-width:52ch}
}
@media(max-width:680px){
  .card__code--r{font-size:var(--fs-mono-sm)}
}
.tail{text-align:center;margin-top:clamp(32px,4vw,52px)}

/* ============================== TICKER ============================== */
.ticker{position:relative;overflow:hidden;background:var(--black);
  height:clamp(330px,44vw,560px);display:flex;align-items:center}
.ticker__img{position:absolute;inset:0;z-index:0}
.ticker__img img{width:100%;height:100%;object-fit:cover;object-position:50% 36%}
.ticker__img::after{content:"";position:absolute;inset:0;background:rgba(20,16,10,.18)}
.ticker__track{position:relative;z-index:1;display:flex;flex-wrap:nowrap;width:max-content;will-change:transform}
.ticker__word{
  font-family:var(--font-display);font-weight:400;font-size:var(--fs-wordmark);
  line-height:.85;letter-spacing:-.04em;text-transform:lowercase;
  padding-inline:.18em;display:inline-flex;align-items:center;gap:.35em;white-space:nowrap;color:var(--ink);
}
.ticker__word:nth-child(even){color:var(--accent)}
.ticker__word .star{width:.32em;height:.32em;color:var(--ink);opacity:.9}

/* ============================== IDEAL (centered editorial) ============================== */
.ideal{text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(24px,3vw,40px)}
.ideal .star--lg{color:var(--ink)}
.ideal__title{max-width:16ch}
.ideal__body{max-width:60ch;font-size:var(--fs-subhead);line-height:1.2}
/* three benefits as a clean 3-up row (no icons), hairline-topped like the dossier */
.ideal__list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,48px);
  width:100%;max-width:900px;margin-top:clamp(10px,1.6vw,22px);list-style:none}
.ideal__item{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);
  padding-top:var(--space-6);border-top:1px solid rgba(0,0,0,.16)}
.ideal__item-no{color:var(--accent)}
@media(max-width:680px){.ideal__list{grid-template-columns:1fr;max-width:34ch;gap:var(--space-7)}}

/* ============================== ABOUT / WHY (two-col + signature card) ============================== */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:stretch}
.about__text{display:flex;flex-direction:column;gap:clamp(20px,2.5vw,32px);align-self:start;max-width:44ch}
.about__media{position:relative;min-height:clamp(420px,52vw,640px)}
.about__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.sigcard{
  position:absolute;right:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px);
  width:min(340px,72%);background:var(--surface);color:var(--black);
  border-radius:var(--radius-card);box-shadow:var(--shadow-md);
  padding:clamp(18px,2vw,26px);
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:var(--space-3) var(--space-5);
  transition:background var(--t-hover) var(--ease-hover),color var(--t-hover) var(--ease-hover);
}
.sigcard:hover{background:var(--black);color:var(--accent)}
.sigcard__mark{grid-column:1;font-family:var(--font-display);font-size:1.5rem;text-transform:lowercase;letter-spacing:-.03em;line-height:1}
.sigcard__sign{grid-column:1/-1;font-family:var(--font-script);font-size:2rem;line-height:.9}
.sigcard__role{grid-column:1;align-self:end}
.sigcard__star{grid-column:2;grid-row:1/3;align-self:start;justify-self:end;width:26px;height:26px;fill:currentColor}
@media(max-width:820px){.about{grid-template-columns:1fr}}

/* ============================== VALUE (3-up dossier) ============================== */
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(40px,6vw,80px)}
.value{display:flex;flex-direction:column;gap:var(--space-5);padding-top:var(--space-7);border-top:1px solid rgba(0,0,0,.16)}
.value__no{color:var(--accent)}
.value__title{max-width:16ch}
.value__body{color:var(--ink)}
/* pull-stat anchored to the bottom of its (equal-height) column */
.value__metric{margin-top:auto;padding-top:var(--space-8);display:flex;flex-direction:column;gap:var(--space-2)}
.value__metric-num{font-family:var(--font-display);font-size:clamp(2.75rem,4.4vw,4rem);line-height:.92;letter-spacing:-.04em}
.value__metric-cap{color:var(--muted)}
@media(max-width:820px){.value-grid{grid-template-columns:1fr}}

/* ===== DIFFERENCE — pinned heading + sequential card reveal on scroll ===== */
/* the section is taller than the viewport; an inner stage sticks for the scroll
   distance while main.js lights cards (a)->(b)->(c) by scroll progress. */
.section.difference{padding-block:0}
.difference__track{position:relative;height:280vh}
.difference__stage{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;
  padding-block:clamp(64px,9vw,128px)}
.difference__stage .wrap{width:100%}
.difference__head{margin-bottom:clamp(28px,4vw,56px)}
.difference .value-grid{margin-top:0}
/* sequential reveal: a bigger lift + slower ease than the generic data-reveal.
   Kept at attribute-only specificity (inside :where) so reduced-motion's
   [data-reveal]{transform:none} still wins and nothing stays hidden. */
:where(html.js-reveal) [data-step]{transform:translateY(56px);
  transition:opacity .55s ease, transform .7s var(--ease-hover)}
/* below the 3-col breakpoint, drop the pin and fall back to normal flow */
@media(max-width:820px){
  .difference__track{height:auto}
  .difference__stage{position:static;min-height:0;padding-block:var(--section-pad)}
}

/* ============================== SELECTED WORK (projects + quotes) ============================== */
/* featured case: large mockup beside a meta column, full content width.
   .project.project--feature (specificity 0,2,0) so it beats the later .project base rule. */
.project.project--feature{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(40px,6vw,72px)}
.project--feature .project__meta{gap:var(--space-6)}
.project--feature .project__name{max-width:14ch}

/* 3-up supporting projects */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(28px,4vw,56px)}
.project{display:flex;flex-direction:column;gap:var(--space-6)}
.project__img{overflow:hidden;border-radius:var(--radius-card);background:var(--surface)}
.project__img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .9s var(--ease-hover)}
.project:hover .project__img img{transform:scale(1.04)}
.project__meta{display:flex;flex-direction:column;gap:var(--space-4)}
.project__no{color:var(--accent)}
.project__result{color:var(--ink);max-width:42ch}
.project__tags{display:flex;flex-wrap:wrap;gap:var(--space-3);color:var(--muted)}
.project__tags span{border:1px solid rgba(0,0,0,.16);border-radius:var(--radius-pill);padding:.4em .9em;line-height:1}
.project__link{display:inline-flex;align-items:center;gap:.5em;color:var(--ink);margin-top:var(--space-2)}
.project__link:hover{color:var(--accent)}
@media(max-width:900px){.project.project--feature{grid-template-columns:1fr;gap:var(--space-7)}}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,40px);margin-top:clamp(40px,6vw,72px)}
.quote{
  position:relative;
  padding:clamp(28px,3.2vw,48px);border-radius:var(--radius-card);
  background:var(--surface);color:var(--black);
  display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);min-height:clamp(300px,32vw,380px);
  transition:background var(--t-hover) var(--ease-hover),color var(--t-hover) var(--ease-hover);
}
.quote--invert{background:var(--ink);color:var(--canvas)}
.quote--invert:hover{background:var(--black);color:var(--accent)}
.quote:not(.quote--invert):hover{background:var(--black);color:var(--accent)}
/* review-rating: real gold stars (replaces the starburst icon) */
.rate-stars{color:var(--gold);font-size:1.05rem;line-height:1;letter-spacing:.14em}
/* oversized opening mark sets the editorial tone and fills the top */
.quote__mark{font-family:var(--font-display);font-size:clamp(3rem,5vw,4.75rem);line-height:.5;height:.5em;color:var(--accent)}
.quote__text{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.125rem);line-height:1.12;text-transform:lowercase;letter-spacing:-.025em;margin-bottom:auto}
/* footer pinned to the bottom, separated by a hairline; rating + source */
.quote__foot{margin-top:clamp(20px,3vw,36px);padding-top:clamp(16px,1.8vw,22px);
  border-top:1px solid rgba(0,0,0,.16);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap}
.quote__rating{display:inline-flex;align-items:center;gap:.45em}
.quote__rating .star{width:15px;height:15px;color:var(--accent)}
.quote__by{opacity:.62;letter-spacing:.01em}
.quote--invert .quote__foot{border-top-color:rgba(255,255,255,.2)}
.quote:not(.quote--invert):hover .quote__foot{border-top-color:rgba(255,255,255,.2)}
@media(max-width:820px){.projects{grid-template-columns:1fr}.quotes{grid-template-columns:1fr}}

/* ============================== FAQ (dossier list) ============================== */
/* two-column split: sticky headline on the left, all rows on the right (v18 pattern) */
.faqsplit{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(24px,5vw,80px);align-items:start}
.faqsplit__head{position:sticky;top:96px;display:flex;flex-direction:column;gap:var(--space-6);max-width:20ch}
.faqsplit .faq{margin-top:0}
/* inside the narrower right column, use the compact 2-col row at every width */
.faqsplit .faq__row{grid-template-columns:1fr;gap:var(--space-4)}
.faqsplit .faq__a{grid-column:1;max-width:60ch}
@media(max-width:820px){
  .faqsplit{grid-template-columns:1fr;gap:var(--space-8)}
  .faqsplit__head{position:static;max-width:none}
}
.faq{margin-top:clamp(32px,5vw,64px);border-top:1px solid rgba(0,0,0,.16)}
.faq__row{
  display:grid;grid-template-columns:auto 1.2fr 2fr;gap:clamp(16px,3vw,56px);
  padding-block:clamp(24px,3vw,40px);border-bottom:1px solid rgba(0,0,0,.16);align-items:start;
}
.faq__no{color:var(--accent);font-family:var(--font-mono)}
.faq__q{align-self:start}
.faq__a{color:var(--ink);max-width:54ch}
@media(max-width:820px){
  .faq__row{grid-template-columns:auto 1fr;gap:var(--space-5) var(--space-6)}
  .faq__a{grid-column:2}
}

/* ============================== CTA + FORM ============================== */
.cta__head{max-width:18ch}
.cta__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start;margin-top:clamp(32px,4vw,56px)}
.cta__copy{display:flex;flex-direction:column;gap:var(--space-6);max-width:46ch}
.form{display:flex;flex-direction:column;gap:clamp(20px,2.5vw,32px)}
.field{display:flex;flex-direction:column;gap:var(--space-3)}
.field label{color:var(--muted)}
.field input{
  font-family:var(--font-display);font-size:var(--fs-subhead);letter-spacing:-.02em;
  color:var(--ink);background:none;border:none;border-bottom:1px solid rgba(0,0,0,.3);
  padding:.3em 0;width:100%;
}
.field input::placeholder{color:rgba(0,0,0,.28)}
.field input:focus{outline:none;border-bottom-color:var(--accent)}
.btn{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.6em;
  background:var(--btn);color:var(--white);
  border-radius:var(--radius-pill);padding:.95em 1.6em;
  font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:-.02em;
  transition:background var(--t-hover) var(--ease-hover),color var(--t-hover) var(--ease-hover);
}
.btn:hover{background:var(--btn-ink);color:var(--white)}
/* light variant (kept for reuse) */
.btn--light{background:var(--white);color:var(--ink)}
.btn--light:hover{background:var(--btn);color:var(--white)}
.cta__alt{display:flex;gap:clamp(20px,3vw,40px);flex-wrap:wrap;margin-top:var(--space-6)}
.cta__alt a:hover{color:var(--accent)}
@media(max-width:820px){.cta__grid{grid-template-columns:1fr;gap:var(--space-9)}}

/* ============================== FOOTER ============================== */
/* bottom padding leaves room for the wordmark's descender (the "p" in taps);
   no overflow:hidden so nothing clips the giant mark */
.footer{padding-top:clamp(56px,7vw,100px);padding-bottom:clamp(40px,5vw,80px)}
.footer__top{display:flex;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap;padding-bottom:clamp(40px,5vw,72px)}
.footer__nav{display:flex;flex-direction:column;gap:var(--space-3)}
.footer__nav a:hover{color:var(--accent)}
.footer__meta{display:flex;flex-direction:column;gap:var(--space-3);text-align:right;color:var(--muted)}
.footer__wordmark{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);line-height:.9}
.footer__wordmark .wordmark{line-height:.9}
.footer__wordmark .star--lg{margin-bottom:.45em;color:var(--ink)}
@media(max-width:680px){.footer__meta{text-align:left}}

/* ============================== SCROLL REVEAL ============================== */
/* Hidden state is gated behind .js-reveal (added by main.js). If the script
   never runs, nothing is hidden — the page can never render blank. */
:where(html.js-reveal) [data-reveal]{opacity:0;transform:translateY(24px);
  transition:opacity var(--t-fade) ease, transform var(--t-fade) var(--ease-hover)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-d="1"]{transition-delay:.06s}
[data-reveal-d="2"]{transition-delay:.12s}
[data-reveal-d="3"]{transition-delay:.18s}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
  .hero__media{transform:none!important;opacity:1!important}
}

/* ============================== MOBILE NAV ============================== */
@media(max-width:680px){
  .nav__group--hideable{display:none}
  .nav__menu-btn{display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;border:1px solid currentColor;border-radius:var(--radius-pill);font-size:1.2rem}
}

/* ======================================================================
   ROUND 2 — red brand, logo, split hero, comparison, footer logo
   ====================================================================== */

/* ---- nav: logo + red "remodel" pill + red link hover (page is light now) ---- */
.nav{padding-block:8px}
.nav__logo{width:74px;height:74px;display:block;object-fit:contain}
.nav__logo--dark{display:none}
.nav--solid .nav__logo--light{display:none}
.nav--solid .nav__logo--dark{display:block}
.nav__group a:hover{color:var(--muted)}
.pill--red{background:var(--btn);color:var(--white);border-color:var(--btn)}
.pill--red:hover,
.nav .pill--red:hover,
.nav--solid .pill--red:hover{background:var(--btn-ink);color:var(--white);border-color:var(--btn-ink)}

/* ---- HERO: clean editorial split, no photo ---- */
.hero--split{position:relative;height:100svh;min-height:600px;overflow:hidden;
  background:var(--black);color:var(--white);display:block;padding:0}
.hero--split .hero__media{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform,opacity}
.hero--split .hero__media img{width:100%;height:100%;object-fit:cover}
.hero--split .hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.10) 32%,rgba(0,0,0,.22) 60%,rgba(0,0,0,.66) 100%)}
.hero--split .hero__inner{position:absolute;inset:auto 0 0 0;max-width:var(--container);margin-inline:auto;
  display:block;padding:0 var(--gutter) clamp(32px,5vw,72px);color:var(--white);width:100%}
.hero__lead{display:flex;flex-direction:column;gap:clamp(16px,2vw,26px)}
.hero--split .hero__head{color:var(--white);max-width:18ch;display:block}
.hero--split .hero__sub{color:var(--white);max-width:46ch}
.hero__dot{color:var(--white)}
/* rotating word — white over the photo */
.rotator{display:inline-block;white-space:nowrap;color:#fff}
.rotator__word{display:inline-block;transition:opacity .28s ease, transform .28s var(--ease-hover)}
.rotator__word.is-out{opacity:0;transform:translateY(-.34em)}
/* small CTA squares — absolutely pinned right, OUT of text flow so the
   rotating headline never shifts them (comment 3) */
.hero__cta-stack{position:absolute;z-index:999;top:50%;right:0;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:0;width:clamp(122px,13vw,176px)}
.herobox{position:relative;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 clamp(8px,1vw,14px) clamp(10px,1vw,16px);overflow:hidden;
  transition:background var(--t-hover) var(--ease-hover)}
.herobox__arrow{flex:1;display:flex;align-items:center;justify-content:center;width:100%;
  font-size:clamp(64px,8.5vw,120px);line-height:.7;
  transition:transform .45s var(--ease-hover)}
.herobox__label{font-size:clamp(.9rem,1vw,1.1rem);line-height:1;text-transform:lowercase}
.herobox:hover .herobox__arrow{transform:translate(.08em,-.08em)}
.herobox--work{background:var(--white);color:var(--ink)}
.herobox--work:hover{background:var(--surface)}
.herobox--price{background:var(--black);color:var(--white)}
.herobox--price:hover{background:#222}
@media(max-width:680px){
  .hero__cta-stack{top:clamp(74px,11vh,104px);transform:none;width:clamp(92px,26vw,116px)}
}

/* ---- centered section head variant ---- */
.head--center{text-align:center}
.head--center .head__title{max-width:none;margin-inline:auto}

/* ---- COMPARISON (nine taps vs the alternatives) ---- */
.compare .head__title{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.3em;max-width:none}
.cmp-pick{position:relative;display:inline-block}
.cmp-select{font:inherit;letter-spacing:inherit;text-transform:lowercase;color:var(--accent);
  background:none;border:none;border-bottom:3px solid var(--accent);
  padding:0 1.1em .04em 0;cursor:pointer;-webkit-appearance:none;appearance:none;line-height:1}
.cmp-select:focus{outline:none}
.cmp-pick::after{content:"\25BE";position:absolute;right:.1em;top:.46em;font-size:.5em;color:var(--accent);pointer-events:none}
/* editorial ledger: hairline rows, mono labels, the nine-taps column quietly
   tinted + blue-accented so it 'wins' — no heavy filled cards */
.cmp-body{margin-top:clamp(36px,5vw,68px);transition:opacity .4s ease}
.cmp{display:flex;flex-direction:column}
.cmp__row{display:grid;grid-template-columns:minmax(170px,1.15fr) minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(20px,3vw,52px);align-items:baseline;
  padding-block:clamp(18px,2.1vw,30px);border-top:1px solid rgba(0,0,0,.14)}
.cmp__head{border-top:none;align-items:flex-end;padding-bottom:clamp(18px,2vw,26px)}
.cmp__cell{min-width:0}
.cmp__h{display:flex;flex-direction:column;gap:var(--space-3)}
.cmp__name{font-family:var(--font-mono);text-transform:lowercase;font-size:var(--fs-mono);
  letter-spacing:-.01em;color:var(--muted)}
.cmp__col-us .cmp__name{color:var(--accent)}
.cmp__verdict{font-family:var(--font-display);font-size:clamp(1.4rem,1.9vw,2.05rem);line-height:1.0;
  letter-spacing:-.03em;text-transform:lowercase;color:var(--ink)}
.cmp__tag{font-family:var(--font-mono);text-transform:lowercase;font-size:var(--fs-mono-sm);
  letter-spacing:.01em;color:var(--accent);margin-top:var(--space-2)}
.cmp__label{font-family:var(--font-display);text-transform:lowercase;font-size:clamp(1.15rem,1.4vw,1.55rem);
  letter-spacing:-.025em;line-height:1.04;color:var(--ink)}
.cmp__them{color:var(--muted);text-transform:lowercase;font-size:var(--fs-lead);line-height:1.25}
.cmp__us{color:var(--ink);text-transform:lowercase;font-size:var(--fs-lead);line-height:1.25;display:flex;gap:.55em}
.cmp__us::before{content:"";flex:none;width:.6em;height:.6em;margin-top:.4em;border-radius:50%;background:var(--accent)}
.cmp-note{color:var(--muted);margin-top:clamp(20px,2.4vw,32px);max-width:60ch}
@media(max-width:720px){
  .cmp__row{grid-template-columns:1fr 1fr;column-gap:clamp(16px,4vw,28px);row-gap:var(--space-4)}
  .cmp__cell--label{grid-column:1/-1}
  .cmp__head{padding-bottom:var(--space-5)}
  .cmp__head .cmp__cell--label{display:none}
}

/* ---- ticker: white + (speed handled in JS) ---- */
.ticker .ticker__word{color:var(--white)}
.ticker__img::after{background:rgba(10,8,6,.42)}

/* ---- FAQ numbers: red (via accent) + animate in on row reveal ---- */
:where(html.js-reveal) .faq__row .faq__no{opacity:0;transform:translateX(-10px) scale(.82);transform-origin:left center}
.faq__row.in .faq__no{opacity:1;transform:none;
  transition:opacity .45s ease .12s, transform .55s var(--ease-hover) .12s}

/* ---- footer: logo replaces the star ---- */
.footer__logo{width:clamp(60px,8vw,92px);height:auto;margin-bottom:.35em}

/* ======================================================================
   ROUND 3 — blue accent + red-only buttons, value icons, about, grey quotes
   ====================================================================== */
/* value cards: no top divider; a small icon instead of (a)(b)(c) */
.value{border-top:none;padding-top:0}
.value__icon{display:block;color:var(--accent);line-height:0}
.value__icon .star{width:clamp(26px,2.6vw,36px);height:clamp(26px,2.6vw,36px)}
/* about: widen the text column so the headline isn't a narrow 4-row stack */
.about{grid-template-columns:1.25fr .75fr}
.about__text{max-width:none}
.about__text .lead{max-width:54ch}
@media(max-width:820px){.about{grid-template-columns:1fr}}
/* quotes: grey card + black text + blue mark; gentle hover (no dark invert) */
.quote{background:var(--surface);color:var(--black)}
.quote__mark{color:var(--accent)}
.quotes .quote:hover{background:var(--surface);color:var(--black);box-shadow:var(--shadow-sm)}
.quotes .quote:hover .quote__foot{border-top-color:rgba(0,0,0,.16)}
/* greyish link hovers (no red), per comment 7 */
.cta__alt a:hover,.footer__nav a:hover{color:var(--muted)}

/* ======================================================================
   ROUND 5 — liquid-glass nav, $ pricing, mobile squares, 2-card compare, dark footer
   ====================================================================== */
/* ---- NAV: floating Apple-style liquid-glass bar (ported from Zara) ---- */
.nav{position:fixed;inset:auto;top:clamp(10px,1.5vw,20px);left:50%;right:auto;transform:translateX(-50%);
  width:min(calc(100% - 2*clamp(14px,3.5vw,40px)), var(--container));
  z-index:50;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  padding:6px clamp(16px,2vw,26px);border:none;border-radius:20px;color:var(--ink);
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(13px) saturate(1.5) url(#glass-distortion);
  backdrop-filter:blur(13px) saturate(1.5) url(#glass-distortion);
  box-shadow:0 10px 44px rgba(0,0,0,.12),inset 1.5px 1.5px 1px rgba(255,255,255,.55),inset -1px -1px 1px rgba(255,255,255,.22)}
.nav--solid{background:rgba(255,255,255,.55)}      /* same glass — toggle removed */
.nav__logo{width:60px;height:60px}
.nav .nav__group a,.nav__menu-btn{color:var(--ink)}
.nav__group a:hover{color:var(--muted)}

/* ---- hero squares: $ on pricing + mobile bottom-right above the text ---- */
.herobox__arrow--dollar{font-family:var(--font-display);line-height:.9}
@media(max-width:680px){
  .hero__cta-stack{top:auto;bottom:clamp(184px,27vh,250px);right:var(--gutter);transform:none;
    flex-direction:column;width:clamp(86px,24vw,112px)}
}

/* ---- COMPARISON: back to two contained cards (alt left / nine taps right, black) ---- */
.compare .head__title{font-family:var(--font-mono);font-size:clamp(1.25rem,2.4vw,2.05rem);line-height:1.2;letter-spacing:-.02em}
.cmp-body{margin-top:clamp(32px,4.5vw,58px);transition:opacity .4s ease}
.cmp-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px);align-items:stretch}
.cmp-card{border-radius:var(--radius-card);padding:clamp(22px,2.6vw,38px);display:flex;flex-direction:column;gap:clamp(12px,1.6vw,20px)}
.cmp-card--them{background:var(--surface);color:var(--ink)}
.cmp-card--us{background:var(--black);color:var(--canvas);position:relative;overflow:hidden}
.cmp-card__tag{position:absolute;top:0;right:0;background:var(--accent);color:#fff;font-family:var(--font-mono);
  font-size:var(--fs-mono-sm);text-transform:uppercase;letter-spacing:.05em;padding:.5em .95em;border-bottom-left-radius:var(--radius-sm)}
.cmp-card__name{font-family:var(--font-mono);text-transform:lowercase;font-size:var(--fs-mono);letter-spacing:-.01em;color:var(--muted)}
.cmp-card--us .cmp-card__name{color:rgba(255,255,255,.6)}
.cmp-card__verdict{font-family:var(--font-display);font-size:clamp(1.4rem,2vw,2.1rem);line-height:1.02;letter-spacing:-.03em;text-transform:lowercase}
.cmp-card__list{list-style:none;display:flex;flex-direction:column;margin-top:var(--space-3)}
.cmp-card__list li{display:flex;justify-content:space-between;gap:1.4em;align-items:baseline;
  padding:clamp(10px,1.3vw,15px) 0;border-top:1px solid rgba(0,0,0,.14);font-size:var(--fs-lead);text-transform:lowercase;line-height:1.25}
.cmp-card--us .cmp-card__list li{border-top-color:rgba(255,255,255,.16)}
.cmp-card__k{color:var(--muted);flex:none;font-family:var(--font-mono)}
.cmp-card--us .cmp-card__k{color:rgba(255,255,255,.55)}
.cmp-card__v{text-align:right}
@media(max-width:680px){.cmp-cards{grid-template-columns:1fr}}

/* ---- FOOTER: dark background, light text ---- */
.footer{background:var(--ink);color:var(--canvas)}
.footer__nav a{color:var(--canvas)}
.footer__nav a:hover{color:rgba(255,255,255,.6)}
.footer__meta{color:rgba(255,255,255,.5)}
.footer__wordmark .wordmark{color:var(--canvas)}

/* ======================================================================
   ROUND 6 — Zara nav 1:1, sharp corners, fixed hero CTAs, compare polish
   ====================================================================== */
/* ---- NAV: Zara liquid-glass ported 1:1 (full-width floating glass bar) ---- */
.nav{position:fixed;inset:auto;left:0;right:0;top:clamp(12px,1.6vw,22px);transform:none;width:auto;z-index:50;
  display:block;padding-inline:clamp(12px,1.4vw,20px);border-radius:0;
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border:none;color:var(--ink)}
.glass-bar{position:relative;max-width:var(--container);margin:0 auto;overflow:hidden;
  padding:clamp(10px,.9vw,15px) clamp(18px,2vw,30px);
  box-shadow:0 6px 60px rgba(0,0,0,.05),0 0 83px rgba(0,0,0,.07)}
.glass-effect,.glass-tint,.glass-shine{position:absolute;inset:0;pointer-events:none}
.glass-effect{-webkit-backdrop-filter:blur(8px) url(#glass-distortion);backdrop-filter:blur(8px) url(#glass-distortion)}
.glass-tint{background:rgba(255,255,255,.5)}
.glass-shine{box-shadow:inset 2px 2px 1px rgba(255,255,255,.55),inset -1px -1px 1px 1px rgba(255,255,255,.2)}
.glass-content{position:relative;z-index:2}
.nav-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem}
.nav__brand{flex:none}
.nav__logo{width:54px;height:54px}
.nav-collapsible{display:flex;align-items:center;gap:clamp(1.4rem,2.4vw,2.4rem)}
.navigation-menu{display:flex;align-items:center;gap:clamp(1.2rem,2vw,2rem)}
.navigation-menu a{color:var(--ink)}
.navigation-menu a:hover{color:var(--muted)}
.hamburger{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:none;background:none;
  color:var(--ink);font-family:var(--font-display);font-size:1.7rem;line-height:1;cursor:pointer;margin-left:auto}
@media(max-width:820px){
  .hamburger{display:inline-flex}
  .nav-row{row-gap:0}
  .nav-collapsible{flex-basis:100%;flex-direction:column;align-items:center;gap:0;max-height:0;overflow:hidden;opacity:0;
    transition:max-height .42s ease,opacity .3s ease,margin-top .42s ease}
  .nav-collapsible.open{max-height:80vh;opacity:1;margin-top:1.3rem;padding-bottom:.5rem;overflow-y:auto}
  .navigation-menu{flex-direction:column;align-items:center;gap:1.1rem;width:100%}
  .navigation-menu a{font-size:clamp(1.5rem,5.5vw,2.1rem)}
  .nav-cta{margin-top:1.1rem}
}
/* nav pill: darken to --btn-ink on hover, uniform with .btn everywhere else on the page */
.pill--red:hover,.nav .pill--red:hover{background:var(--btn-ink);color:var(--white);border-color:var(--btn-ink)}

/* ---- HERO CTA squares: fixed (follow scroll) + ease slide-in from the right ---- */
.hero__cta-stack{position:fixed;top:50%;right:0;left:auto;bottom:auto;transform:translateY(-50%);z-index:60;
  width:clamp(92px,8.5vw,118px);animation:heroCtaIn .85s cubic-bezier(.5,0,.2,1) .4s both}
@keyframes heroCtaIn{from{transform:translate(125%,-50%)}to{transform:translate(0,-50%)}}
@media(max-width:680px){
  .hero__cta-stack{position:fixed;top:auto;bottom:14px;right:14px;transform:none;flex-direction:column;
    width:clamp(76px,22vw,98px);animation:heroCtaInM .85s cubic-bezier(.5,0,.2,1) .4s both}
}
@keyframes heroCtaInM{from{transform:translateX(135%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.hero__cta-stack{animation:none}}

/* ---- rotating word: underlined in blue (comment 4) ---- */
.rotator__word{text-decoration:none}

/* ---- COMPARISON: heading font on names, fewer dividers (comments 7,8,10) ---- */
.cmp-card__name{font-family:var(--font-mono);text-transform:lowercase;letter-spacing:-.02em;
  font-size:clamp(1.05rem,1.4vw,1.4rem);color:var(--muted)}
.cmp-card--us .cmp-card__name{color:rgba(255,255,255,.62)}
.cmp-card__list li{border-top:none;padding:clamp(8px,1vw,12px) 0}
.cmp-card__v{max-width:18ch}

/* ---- ticker: spacing now the star is gone (comment 12) ---- */
.ticker__word{padding-inline:.42em}

/* ---- alternatives: no gap between the 3 cards (comment 13) ---- */
.cards{gap:0}

/* ---- quotes: no divider above the rating (comment 14) ---- */
.quote__foot{border-top:none;padding-top:0;margin-top:clamp(16px,2vw,24px)}

/* ---- difference: more space between heading and cards (comment 19) ---- */
.difference__head{margin-bottom:clamp(56px,8vw,118px)}

/* ======================================================================
   ROUND 7 — edge-to-edge transparent→glass nav, custom icons, compare copy
   ====================================================================== */
/* ---- NAV: full-width, top:0, logo centred; transparent over hero → glass on scroll ---- */
.nav{position:fixed;inset:0 0 auto 0;left:0;right:0;top:0;transform:none;width:auto;z-index:50;
  display:block;padding:0;border:none;border-radius:0;background:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;color:var(--white);
  transition:color .3s ease,background .35s ease,box-shadow .35s ease}
.nav-row{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:var(--space-6);max-width:none;margin:0;padding:9px var(--gutter)}
.nav__links{grid-column:1;justify-self:start;display:flex;align-items:center;gap:clamp(1.2rem,2vw,2rem)}
.nav__links a{color:inherit}
.nav__links a:hover{color:var(--muted)}
.nav__brand{grid-column:2;justify-self:center;display:flex;align-items:center}
.nav__end{grid-column:3;justify-self:end;display:flex;align-items:center;gap:var(--space-5)}
.nav__logo{width:clamp(56px,5.4vw,76px);height:auto;display:block}
.nav__logo--dark{display:none}
.nav--solid{color:var(--ink);background:rgba(255,255,255,.5);
  /* plain blur first as a fallback for engines that reject the SVG url() ref at parse
     time; the url() version follows and wins where it parses (Chromium renders the
     liquid-glass distortion). WebKit PARSES the url() ref but renders no filter at all,
     leaving the bar flat-transparent on iPhone — the @supports block below (WebKit-only
     -webkit-named-image test) forces plain blur+saturate glass back on Safari/iOS. */
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  -webkit-backdrop-filter:blur(14px) saturate(1.6) url(#glass-distortion);backdrop-filter:blur(14px) saturate(1.6) url(#glass-distortion);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 30px rgba(0,0,0,.08)}
@supports (background: -webkit-named-image(i)){
  .nav--solid{-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6)}
}
.nav--solid .nav__logo--light{display:none}
.nav--solid .nav__logo--dark{display:block}
.pill__ico{width:.95em;height:.95em;display:inline-block;fill:none;stroke:currentColor;stroke-width:2;vertical-align:-.1em}
.hamburger{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:none;background:none;
  color:inherit;font-family:var(--font-display);font-size:1.8rem;line-height:1;cursor:pointer}
@media(max-width:820px){
  .nav__group--hideable{display:none}
  .hamburger{display:inline-flex}
}
/* mobile overlay menu */
.nav-overlay{position:fixed;inset:0;z-index:70;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:24px;background:var(--canvas);color:var(--ink);font-family:var(--font-display);font-size:2.1rem;
  text-transform:lowercase;letter-spacing:-.03em}
.nav-overlay.open{display:flex}
.nav-overlay a{color:var(--ink)}
.nav-overlay .pill{margin-top:12px;font-size:1rem}

/* ---- HERO CTA squares: SVG icons (smaller), stronger presence (comments 2,3,8) ---- */
.hero__cta-stack{box-shadow:0 22px 55px rgba(0,0,0,.42)}
.herobox__icon{flex:1;display:flex;align-items:center;justify-content:center;width:100%}
.herobox__icon .ico{width:clamp(34px,3.4vw,52px);height:auto;fill:none;stroke:currentColor;stroke-width:1.6;
  transition:transform .45s var(--ease-hover)}
.herobox:hover .herobox__icon .ico{transform:translate(.1em,-.1em) scale(1.05)}

/* ---- DIFFERENCE: custom icons above each card (comment 10) ---- */
.value__icon{display:block;color:var(--accent);margin-bottom:var(--space-3);line-height:0}
.value__icon .ico{width:clamp(30px,2.8vw,40px);height:auto;fill:none;stroke:currentColor;stroke-width:1.8}

/* ---- COMPARISON: stacked rows (room for explanation) + animated card transition (4,5,7) ---- */
.cmp-card__list li{display:flex;flex-direction:column;gap:.22em;border-top:none;padding:clamp(9px,1.1vw,13px) 0}
.cmp-card__k{font-family:var(--font-mono);text-transform:lowercase;font-size:var(--fs-mono-sm);letter-spacing:.01em;color:var(--muted)}
.cmp-card--us .cmp-card__k{color:rgba(255,255,255,.5)}
.cmp-card__v{max-width:none;text-align:left;font-size:var(--fs-lead);line-height:1.25}
.cmp-card--them .cmp-card__v{color:var(--ink)}
.cmp-card{animation:cmpCardIn .5s var(--ease-hover) both}
.cmp-card--us{animation-delay:.09s}
@keyframes cmpCardIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cmp-card{animation:none}}

/* ---- alternatives: small gap back between the 3 cards (comment 6) ---- */
.cards{gap:6px}

/* ---- FIX: keep the pinned "built different" content inside the viewport so all
   three cards are actually visible while pinned (top-align instead of centre,
   trimmed padding + heading gap). This is what made the reveal look broken. ---- */
.difference__stage{align-items:flex-start;padding-block:clamp(78px,10vh,106px) clamp(22px,3vw,40px)}
.difference__head{margin-bottom:clamp(36px,4.5vw,68px)}
.difference .value__body{font-size:var(--fs-lead)}
@media(max-height:760px){
  .difference__stage{padding-block:clamp(70px,9vh,90px) 16px}
  .difference__head{margin-bottom:clamp(24px,3vw,40px)}
}

/* ======================================================================
   ROUND 8 — dockbar, footer legal, form fields, compare fonts, FAQ, MCP icons
   ====================================================================== */
/* ---- comparison: red "better" tag; row labels + names in the nav (mono) font ---- */
.cmp-card__tag{background:var(--btn);color:#fff}
.cmp-card__k{font-family:var(--font-mono);text-transform:lowercase;font-size:.85rem;letter-spacing:-.01em;line-height:1.4}
.cmp-card__name{font-family:var(--font-mono);text-transform:lowercase;font-size:1rem;letter-spacing:-.01em}
.cmp-card--us .cmp-card__name{color:rgba(255,255,255,.75)}

/* ---- difference: the 3 brand-new MCP icons (black, solid) ---- */
.value__icon{color:var(--ink)}
.value__icon .ico{width:clamp(42px,3.8vw,54px);height:auto;display:block}

/* ---- FAQ: no dividers between questions; wider intro so it doesn't wrap 3 rows ---- */
.faq{border-top:none}
.faq__row{border-bottom:none}
.faqsplit__head{max-width:34ch}

/* ---- CTA form: name + notes; textarea matches the underlined inputs ---- */
.field textarea{font-family:var(--font-display);font-size:var(--fs-subhead);letter-spacing:-.02em;color:var(--ink);
  background:none;border:1px solid rgba(0,0,0,.3);padding:.5em .6em;width:100%;resize:vertical;min-height:84px;line-height:1.3}
.field textarea::placeholder{color:rgba(0,0,0,.28)}
.field textarea:focus{outline:none;border-color:var(--accent)}
.field__opt{color:var(--muted)}

/* ---- persistent bottom CTA bar (our work + pricing), sticky desktop + mobile ---- */
.dockbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;
  box-shadow:0 -8px 30px rgba(0,0,0,.16);transition:transform .42s var(--ease-hover)}
.dockbar.is-hidden{transform:translateY(110%)}
.dockbar__btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:clamp(14px,1.5vw,20px);font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;
  letter-spacing:-.02em;line-height:1;color:var(--white);transition:background var(--t-hover) var(--ease-hover)}
.dockbar__ico{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.dockbar__btn--work{background:var(--ink)}
.dockbar__btn--work:hover{background:#000}
.dockbar__btn--price{background:var(--btn)}
.dockbar__btn--price:hover{background:var(--btn-ink)}
.dockbar__btn:hover{color:var(--white)}   /* keep text/icon white on hover (overrides global a:hover muted) */
@media(prefers-reduced-motion:reduce){.dockbar{transition:none}}

/* ---- mobile: logo LEFT, menu RIGHT (comment 12) ---- */
@media(max-width:820px){
  .nav__brand{grid-column:1;justify-self:start}
  .nav__logo{width:clamp(48px,12vw,60px)}
}

/* ---- footer legal row (privacy / cookies / company / copyright) ---- */
.footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-4) var(--space-6);
  margin-top:clamp(36px,5vw,64px);padding-top:clamp(18px,2.2vw,28px);border-top:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.5)}
.footer__legal-nav{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,26px)}
.footer__legal-nav a{color:rgba(255,255,255,.55)}
.footer__legal-nav a:hover{color:#fff}

/* ===== COMPARISON v6 — all-mono, stacked rows, two columns on mobile (review round 3) ===== */
.cmp-card__verdict{font-family:var(--font-mono);font-size:clamp(1.05rem,1.7vw,1.5rem);letter-spacing:-.02em;line-height:1.12;text-transform:lowercase}
.cmp-card__list{margin-top:var(--space-3)}
.cmp-card__list li{display:flex;flex-direction:column;gap:.4em;border-top:none;padding:clamp(11px,1.4vw,17px) 0;text-transform:none}
.cmp-card__list li + li{border-top:1px solid rgba(0,0,0,.1)}
.cmp-card--us .cmp-card__list li + li{border-top-color:rgba(255,255,255,.14)}
.cmp-card__k{font-family:var(--font-mono);text-transform:lowercase;letter-spacing:0;font-size:var(--fs-mono-sm);color:var(--muted);flex:none}
.cmp-card--us .cmp-card__k{color:rgba(255,255,255,.5)}
.cmp-card__v{font-family:var(--font-mono);text-align:left;max-width:none;font-size:clamp(.84rem,1vw,1rem);line-height:1.4;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.cmp-card--us .cmp-card__v{color:rgba(255,255,255,.9)}
@media(max-width:680px){
  .cmp-cards{grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
  .cmp-card{padding:13px 11px;gap:9px;border-radius:var(--radius-sm)}
  .cmp-card__name{font-size:.66rem}
  .cmp-card__verdict{font-size:clamp(.92rem,3.6vw,1.12rem);line-height:1.15}
  .cmp-card__list li{padding:9px 0;gap:.3em}
  .cmp-card__k{font-size:.56rem}
  .cmp-card__v{font-size:.72rem;line-height:1.34}
  .cmp-card__tag{font-size:.5rem;padding:.35em .55em}
}

/* ===== MOBILE MENU FIXES (review) — visible close × + red/white CTA ===== */
/* lift the nav (logo + hamburger →  ×) above the full-screen overlay so the close button is reachable */
.nav--menu-open{z-index:80}
.nav--menu-open .hamburger{color:var(--ink)}
.nav--menu-open .nav__logo--light{display:none}
.nav--menu-open .nav__logo--dark{display:block}
/* overlay CTA: match the desktop pill — red fill, white text (beats .nav-overlay a{color:ink}) */
.nav-overlay .pill--red{background:var(--btn);color:#fff;border-color:var(--btn)}
.nav-overlay .pill--red:hover{background:var(--btn-ink);color:#fff;border-color:var(--btn-ink)}

/* ======================================================================
   ROUND 8 — real testimonial (Magi Hristova / Fit Kids): quote card + portrait
   replaces the two clutch-review cards in #proof
   ====================================================================== */
.testi{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,40px);align-items:stretch;margin-top:clamp(40px,6vw,72px)}
/* subtitle under the centred heading */
.testi__sub{color:var(--muted);margin-top:var(--space-5)}
/* left: long-form quote card — same grey surface + sharp corners as .quote */
.testi__card{
  display:flex;flex-direction:column;
  padding:clamp(28px,3.2vw,48px);border-radius:var(--radius-card);
  background:var(--surface);color:var(--ink);
  min-height:clamp(320px,34vw,440px);
}
.testi__mark{width:clamp(34px,3vw,44px);height:auto;color:var(--accent);opacity:.4;margin-bottom:clamp(14px,1.8vw,24px);flex:none}
/* body-sized (not display-sized) so a real paragraph reads as a testimonial */
.testi__quote{margin:0 0 auto;font-size:var(--fs-lead);line-height:1.55;letter-spacing:-.01em;}
/* author lockup: brand logo + name/role */
.testi__by{display:flex;align-items:center;gap:clamp(12px,1.4vw,16px);margin-top:clamp(28px,3.4vw,40px)}
.testi__logo{height:clamp(30px,3.4vw,40px);width:auto;display:block;flex:none}
.testi__who{display:flex;flex-direction:column;gap:3px;min-width:0}
.testi__name{font-size:var(--fs-lead);letter-spacing:-.02em;}
.testi__role{font-size:var(--fs-mono-sm);color:var(--muted);letter-spacing:.01em}
.testi__role a{color:var(--accent)}
.testi__role a:hover{color:var(--accent-ink)}
/* right: full-bleed portrait — capped so the row (and the quote card) doesn't grow too tall */
.testi__photo{margin:0;overflow:hidden;border-radius:var(--radius-card);background:var(--surface);min-height:0;align-self:start;aspect-ratio:4/5;max-height:clamp(460px,52vw,600px)}
.testi__photo img{width:100%;height:100%;min-height:0;object-fit:cover;object-position:50% 14%;display:block}
/* closing line below the cards */
.testi__foot{text-align:center;color:var(--muted);margin-top:clamp(40px,6vw,72px)}
@media(max-width:820px){
  .testi{grid-template-columns:1fr}
  .testi__photo{max-height:none;order:-1}
  .testi__photo img{aspect-ratio:4/5;height:auto}
}

/* ======================================================================
   v12 CONTACT CHIP — vertical "get in touch" pin on the RIGHT EDGE
   (ported from the live app's .bookpin); tapping it slides the contact
   panel in from the right. The schedule option opens the Calendly
   slide-over (.calover) with a proper waiting screen.
   ====================================================================== */
.sidechip{position:fixed;top:50%;right:0;z-index:60;
  transform:translateY(-50%) translateX(100%);
  transition:transform .45s var(--ease-hover)}
.sidechip.open{transform:translateY(-50%) translateX(0)}
/* mobile: pin sits lower, ~75% down toward the bottom-right (George 2026-07-07) */
@media(max-width:820px){.sidechip{top:75%}}
/* the handle: a vertical rectangle flush against the viewport edge; it rides
   the panel's left edge, so it slides left together with the panel when open */
.sidechip__tab{position:absolute;right:100%;top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;border:none;cursor:pointer;
  background:var(--btn);color:var(--white);padding:20px 11px;
  font-family:var(--font-mono);font-size:14px;text-transform:lowercase;letter-spacing:.03em;line-height:1;
  box-shadow:var(--shadow-md);
  transition:background var(--t-hover) var(--ease-hover),padding var(--t-hover) var(--ease-hover)}
.sidechip__tab:hover,.sidechip__tab:focus-visible{background:var(--btn-ink);padding-right:15px;outline:none}
.sidechip__tab span{display:inline-block;transform:rotate(180deg)}
.sidechip__panel{width:min(320px,calc(100vw - 48px));background:var(--canvas);color:var(--ink);
  border:1px solid rgba(0,0,0,.16);border-right:none;box-shadow:0 18px 50px rgba(0,0,0,.2);
  display:flex;flex-direction:column}
.sidechip__opt{display:flex;align-items:center;gap:13px;padding:16px 18px;width:100%;
  appearance:none;-webkit-appearance:none;border:none;background:none;cursor:pointer;text-align:left;
  font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:lowercase;letter-spacing:-.01em;line-height:1.15;color:var(--ink);
  transition:background var(--t-hover) var(--ease-hover)}
.sidechip__opt+.sidechip__opt{border-top:1px solid rgba(0,0,0,.1)}
.sidechip__opt:hover{background:var(--surface);color:var(--ink)}
.sidechip__opt span{display:flex;flex-direction:column;gap:3px}
.sidechip__opt em{font-style:normal;color:var(--muted);font-size:var(--fs-mono-sm)}
.sidechip__ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){.sidechip{transition:none}}

/* ---- Calendly slide-over (ported from the live app's .bookover): full-height
   right drawer, scrim, waiting screen that covers the iframe until it loads ---- */
.calover{position:fixed;inset:0;z-index:300;pointer-events:none}
.calover.open{pointer-events:auto}
.calover__scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .3s var(--ease-hover)}
.calover.open .calover__scrim{opacity:1}
.calover__panel{position:absolute;top:0;right:0;height:100%;width:min(460px,94vw);
  background:var(--white);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .36s var(--ease-hover);
  box-shadow:-10px 0 40px rgba(0,0,0,.22)}
.calover.open .calover__panel{transform:translateX(0)}
.calover__head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid rgba(0,0,0,.1);flex:none}
.calover__title{color:var(--ink)}
.calover__close{appearance:none;-webkit-appearance:none;background:none;border:0;
  font-size:28px;line-height:1;cursor:pointer;color:var(--ink);padding:0 4px}
.calover__body{flex:1;min-height:0;background:var(--surface);position:relative}
.calover__frame{width:100%;height:100%;border:0;display:block;opacity:0;transition:opacity .3s ease}
.calover__frame.is-ready{opacity:1}
.calover__loading{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;background:var(--surface);color:var(--muted)}
.calover__spin{width:32px;height:32px;border-radius:50%;
  border:3px solid rgba(0,0,0,.12);border-top-color:var(--accent);
  animation:calspin .8s linear infinite}
.calover__loadtxt{font-size:13px}
@keyframes calspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .calover__scrim,.calover__panel,.calover__frame{transition:none}
  .calover__spin{animation:none}
}