/* ============================================================
   MUSCADOR — concept site & pitch
   Design system: art-deco boutique. Sage green + warm cream.
   Display: Bodoni Moda (didone). Labels/body: Jost.
   ============================================================ */

:root{
  /* surfaces */
  --paper:        #ece6d8;   /* dominant warm cream */
  --paper-2:      #e4dccb;   /* slightly deeper card */
  --paper-3:      #f3eee3;   /* lifted/lightest */
  --ink:          #2b302a;   /* warm near-black green (text) */
  --ink-soft:     #51564c;

  /* greens (from logo palette) */
  --sage:         #70776b;
  --sage-mid:     #7f8579;
  --sage-muted:   #919688;
  --sage-light:   #a6aa9d;
  --sage-pale:    #bcc0b3;
  --olive:        #777d69;
  --forest:       #343d33;   /* dark sections */
  --forest-deep:  #283026;

  /* accent (used <10%, from terracotta chair / gelato cup) */
  --clay:         #b66a45;
  --clay-soft:    #c98863;

  /* lines */
  --line:         rgba(43,48,42,.16);
  --line-soft:    rgba(43,48,42,.09);
  --line-cream:   rgba(236,230,216,.22);

  /* type */
  --display: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --serif-alt: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Century Gothic", system-ui, sans-serif;

  /* rhythm */
  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 88px);
  --radius: 2px;

  /* easing */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-out-quart: cubic-bezier(.25,1,.5,1);
}

*{ 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;
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

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

/* ---------- type primitives ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:500; line-height:1.05; margin:0; letter-spacing:.01em; }
.serif{ font-family:var(--display); }

.eyebrow{
  font-family:var(--sans);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--sage);
  margin:0 0 1.4rem;
  display:inline-flex;
  align-items:center;
  gap:.85em;
}
.eyebrow::before{
  content:"";
  width:34px; height:1px; background:var(--sage-light);
  display:inline-block;
}
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{
  content:""; width:34px; height:1px; background:var(--sage-light); display:inline-block;
}

.lead{ font-size:clamp(1.05rem,1.5vw,1.22rem); color:var(--ink-soft); max-width:60ch; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
section{ position:relative; }
.pad{ padding-block:clamp(72px,11vw,148px); }
.pad-sm{ padding-block:clamp(48px,7vw,90px); }

/* faint brand pattern overlay */
.patterned{ position:relative; }
.patterned{ isolation:isolate; }
.patterned::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:url("img/brandbanner.webp");
  background-size:auto 320px; background-repeat:repeat;
  opacity:.05; pointer-events:none; mix-blend-mode:multiply;
}
.patterned > *{ position:relative; z-index:1; }

/* pattern divider band */
.band{
  height:74px;
  background-image:url("img/brandbanner.webp");
  background-size:auto 100%; background-repeat:repeat-x; background-position:center;
  opacity:.85;
}
.band.flip{ transform:scaleY(-1); }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink); --fg:var(--paper); --bd:var(--ink);
  display:inline-flex; align-items:center; gap:.7em;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bd);
  padding:.95em 1.8em;
  font-family:var(--sans); font-size:.78rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  border-radius:var(--radius);
  transition:background .45s var(--ease-out), color .45s var(--ease-out), transform .45s var(--ease-out), border-color .45s var(--ease-out);
}
.btn:hover{ transform:translateY(-2px); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:rgba(43,48,42,.34); }
.btn--ghost:hover{ --bg:var(--ink); --fg:var(--paper); --bd:var(--ink); }
.btn--cream{ --bg:var(--paper); --fg:var(--ink); --bd:var(--paper); }
.btn--ghost-cream{ --bg:transparent; --fg:var(--paper); --bd:var(--line-cream); }
.btn--ghost-cream:hover{ --bg:var(--paper); --fg:var(--ink); --bd:var(--paper); }
.btn--clay{ --bg:var(--clay); --fg:#fff; --bd:var(--clay); }
.btn--clay:hover{ --bg:#a25b3a; --bd:#a25b3a; }
.btn .arr{ transition:transform .45s var(--ease-out); }
.btn:hover .arr{ transform:translateX(4px); }

/* ---------- reveal utility ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }
.reveal.d5{ transition-delay:.40s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding:18px var(--gut);
  transition:background .5s var(--ease-out), padding .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(236,230,216,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding-block:11px;
  border-bottom:1px solid var(--line-soft);
}
.nav__brand{ display:flex; align-items:center; }
.nav__brand img{ width:62px; height:auto; transition:width .5s var(--ease-out); }
.nav.scrolled .nav__brand img{ width:50px; }
.nav__brand .b-green{ display:none; }
.nav.scrolled .nav__brand .b-cream{ display:none; }
.nav.scrolled .nav__brand .b-green{ display:block; }

.nav__links{ display:flex; align-items:center; gap:2.1rem; list-style:none; margin:0; padding:0; }
.nav__links a{
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  color:var(--ink-soft); position:relative; padding:.3em 0;
  transition:color .35s;
}
.nav.on-dark:not(.scrolled) .nav__links a{ color:rgba(236,230,216,.82); }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--clay);
  transition:width .4s var(--ease-out);
}
.nav__links a:hover{ color:var(--clay); }
.nav.on-dark:not(.scrolled) .nav__links a:hover{ color:var(--paper); }
.nav__links a:hover::after{ width:100%; }

.nav__cta{ display:flex; align-items:center; gap:.8rem; }
/* Order button adapts: cream text over the dark hero, dark ink once the nav turns cream */
.nav.scrolled .nav__cta .btn--ghost-cream{ --fg:var(--ink); --bd:rgba(43,48,42,.32); }
.nav.scrolled .nav__cta .btn--ghost-cream:hover{ --bg:var(--ink); --fg:var(--paper); --bd:var(--ink); }
.nav__burger{
  display:none; background:none; border:0; padding:6px;
}
.nav__burger span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.35s var(--ease-out); }
.nav.on-dark:not(.scrolled) .nav__burger span{ background:var(--paper); }

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:55; background:var(--forest);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
  transform:translateY(-100%); transition:transform .6s var(--ease-out);
}
.mobile-menu.open{ transform:none; }
.mobile-menu a{
  font-family:var(--display); font-size:2rem; color:var(--paper); letter-spacing:.04em;
}
.mobile-menu a:hover{ color:var(--clay-soft); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  color:var(--paper); overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(28,33,27,.55) 0%, rgba(28,33,27,.30) 35%, rgba(28,33,27,.62) 100%),
    radial-gradient(120% 90% at 50% 8%, rgba(40,48,38,.18), rgba(28,33,27,.66));
}
.hero__inner{ position:relative; z-index:2; width:100%; text-align:center; padding-block:120px 90px; }
.hero__emblem{ width:84px; margin:0 auto 1.6rem; filter:drop-shadow(0 8px 26px rgba(0,0,0,.28)); }
.hero__since{
  font-size:.72rem; letter-spacing:.5em; text-transform:uppercase; color:rgba(236,230,216,.8);
  margin-bottom:1.1rem;
}
.hero h1{
  font-size:clamp(2.5rem, 11.4vw, 9.2rem);
  font-weight:600; letter-spacing:.04em; line-height:.92;
  margin:0; text-indent:.04em; white-space:nowrap;
}
.hero__wm{ white-space:nowrap; }
.hero__wm-letter{ display:inline-block; }
.hero__tag{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.1rem, 2.4vw, 1.7rem);
  color:var(--paper); margin-top:1.1rem; letter-spacing:.02em;
}
.hero__sub{
  font-size:.8rem; letter-spacing:.34em; text-transform:uppercase; color:rgba(236,230,216,.78);
  margin-top:1.7rem;
}
.hero__sub b{ color:var(--clay-soft); font-weight:500; }
.hero__btns{ margin-top:2.6rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.hero__scroll{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:3;
}
.hero__scroll .rail{
  display:block; width:1px; height:60px; position:relative; overflow:hidden;
  background:linear-gradient(rgba(236,230,216,0), rgba(236,230,216,.32) 28%, rgba(236,230,216,.32) 72%, rgba(236,230,216,0));
}
.hero__scroll .dot{
  position:absolute; left:50%; top:-7px; width:6px; height:6px;
  background:var(--paper); transform:translateX(-50%) rotate(45deg);
  box-shadow:0 0 8px rgba(236,230,216,.7);
  animation:scrollDot 2.6s var(--ease-out) infinite;
}
@keyframes scrollDot{
  0%{ top:-7px; opacity:0; }
  18%{ opacity:1; }
  82%{ opacity:1; }
  100%{ top:60px; opacity:0; }
}

/* hero load animation */
.hero [data-rise]{ opacity:0; transform:translateY(30px); }
.hero.loaded [data-rise]{ opacity:1; transform:none; transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.hero.loaded [data-rise="1"]{ transition-delay:.15s; }
.hero.loaded [data-rise="2"]{ transition-delay:.30s; }
.hero.loaded [data-rise="3"]{ transition-delay:.95s; }
.hero.loaded [data-rise="4"]{ transition-delay:1.15s; }
.hero.loaded [data-rise="5"]{ transition-delay:1.35s; }
.hero__wm-letter{ opacity:0; transform:translateY(40%); }
.hero.loaded .hero__wm-letter{ animation:letterRise .9s var(--ease-out) forwards; }
@keyframes letterRise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .hero [data-rise], .hero__wm-letter{ opacity:1 !important; transform:none !important; animation:none !important; }
  .hero__bg img{ transform:none; }
  .hero__scroll .dot{ animation:none; top:27px; opacity:.7; }
}

/* ============================================================
   PROPOSAL NOTE
   ============================================================ */
.proposal{ background:var(--forest-deep); color:var(--paper); text-align:center; }
.proposal .wrap{ padding-block:clamp(40px,6vw,72px); }
.proposal .tag{ color:var(--clay-soft); letter-spacing:.4em; font-size:.7rem; text-transform:uppercase; font-weight:500; }
.proposal p{ font-family:var(--display); font-style:italic; font-size:clamp(1.3rem,3vw,2.1rem); line-height:1.4; max-width:24ch; margin:1rem auto 0; color:var(--paper); }
.proposal small{ display:block; margin-top:1.4rem; color:rgba(236,230,216,.6); letter-spacing:.18em; text-transform:uppercase; font-size:.66rem; }

/* ============================================================
   SECTION HEADER
   ============================================================ */
.shead{ max-width:62ch; }
.shead.center{ margin-inline:auto; text-align:center; }
.shead h2{
  font-size:clamp(2.2rem,5.2vw,4rem); font-weight:500; line-height:1.02; letter-spacing:.005em;
}
.shead h2 em{ font-style:italic; color:var(--sage); }
.shead p{ margin-top:1.3rem; color:var(--ink-soft); font-size:1.04rem; }

/* ============================================================
   STORY (editorial)
   ============================================================ */
.story{ background:var(--paper); }
.story__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,76px); align-items:center;
}
.story__media{ position:relative; }
.story__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius); }
.story__media .frameline{ position:absolute; inset:16px; border:1px solid var(--line-cream); pointer-events:none; }
.story__media .badge{
  position:absolute; left:-26px; bottom:30px; width:120px; height:120px;
  background:var(--paper-3); border-radius:50%;
  display:grid; place-items:center; text-align:center; box-shadow:0 18px 50px rgba(43,48,42,.18);
}
.story__media .badge b{ font-family:var(--display); font-size:1.6rem; color:var(--sage); display:block; line-height:1; }
.story__media .badge span{ font-size:.56rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); }
.story__body p{ color:var(--ink-soft); margin:0 0 1.1rem; }
.story__body p.dropcap::first-letter{
  font-family:var(--display); font-size:3.6rem; float:left; line-height:.8; padding:.06em .14em 0 0; color:var(--sage);
}
.story__stats{ display:flex; gap:2.4rem; margin-top:2rem; flex-wrap:wrap; }
.story__stats div b{ font-family:var(--display); font-size:2rem; color:var(--ink); display:block; }
.story__stats div span{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sage); }

/* ============================================================
   FEATURE BLOCKS (alternating)
   ============================================================ */
.feature{ background:var(--paper); }
.feature + .feature{ padding-top:0; }
.feature__row{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,80px); align-items:center;
}
.feature__row.flip .feature__media{ order:2; }
.feature__media{ position:relative; }
.feature__media .pic{
  width:100%; aspect-ratio:4/4.6; object-fit:cover; border-radius:var(--radius);
}
.feature__media .tagline{
  position:absolute; bottom:18px; left:18px; right:18px;
  color:var(--paper); font-family:var(--display); font-style:italic; font-size:1.1rem;
  text-shadow:0 2px 18px rgba(0,0,0,.5);
}
.feature__media .num{
  position:absolute; top:-22px; right:8px; font-family:var(--display);
  font-size:5rem; color:var(--sage-pale); opacity:.55; line-height:1;
}
.feature__row.flip .feature__media .num{ right:auto; left:8px; }
.feature__txt .kind{ font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:var(--clay); margin-bottom:1rem; }
.feature__txt h3{ font-size:clamp(2rem,4vw,3.1rem); font-weight:500; }
.feature__txt h3 em{ font-style:italic; color:var(--sage); }
.feature__txt p{ color:var(--ink-soft); margin:1.2rem 0 1.6rem; max-width:46ch; }
.feature__list{ list-style:none; padding:0; margin:0 0 1.8rem; display:flex; flex-wrap:wrap; gap:.6rem; }
.feature__list li{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
  border:1px solid var(--line); padding:.5em 1em; border-radius:40px;
}

/* moment / video */
.moment{ background:var(--forest); color:var(--paper); overflow:hidden; }
.moment__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,72px); align-items:center; }
.moment__video{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.moment__video video{ width:100%; display:block; aspect-ratio:9/12; object-fit:cover; background:#1c211b; }
.moment__video .fl{ position:absolute; inset:14px; border:1px solid var(--line-cream); pointer-events:none; z-index:2; }
.moment__txt .eyebrow{ color:var(--clay-soft); }
.moment__txt .eyebrow::before{ background:var(--clay-soft); }
.moment__txt h2{ font-size:clamp(2.2rem,5vw,3.8rem); color:var(--paper); }
.moment__txt h2 em{ font-style:italic; color:var(--sage-pale); }
.moment__txt p{ color:rgba(236,230,216,.74); margin-top:1.2rem; max-width:44ch; }

/* ============================================================
   MENU (oval / striped recreation)
   ============================================================ */
.menu{ background:var(--paper-2); }
.menu__card{
  position:relative; max-width:760px; margin:0 auto; background:var(--paper-3);
  padding:clamp(40px,6vw,80px) clamp(28px,7vw,110px); border-radius:var(--radius);
  overflow:hidden;
}
.menu__stripes{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 36px, rgba(112,119,107,.16) 36px 64px);
}
.menu__oval{ position:absolute; inset:26px; border:1.5px solid var(--sage); border-radius:50%/12%; z-index:1; pointer-events:none; }
.menu__oval::after{ content:""; position:absolute; inset:7px; border:1px solid var(--sage-light); border-radius:50%/12%; }
.menu__inner{ position:relative; z-index:2; text-align:center; }
.menu__inner h2{ font-size:clamp(1.9rem,5vw,3rem); letter-spacing:.08em; color:var(--sage); }
.menu__cat{ margin-top:2rem; }
.menu__cat h4{ font-family:var(--sans); font-weight:600; letter-spacing:.3em; text-transform:uppercase; font-size:.92rem; color:var(--ink); }
.menu__cat ul{ list-style:none; padding:0; margin:.7rem 0 0; }
.menu__cat li{ font-family:var(--sans); letter-spacing:.16em; text-transform:uppercase; font-size:.82rem; color:var(--ink-soft); line-height:2; }

/* ============================================================
   ORDER / E-COMMERCE
   ============================================================ */
.order{ background:var(--paper); }
.order__grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:22px; margin-top:3rem;
}
.product{
  background:var(--paper-3); border:1px solid var(--line-soft); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.product:hover{ transform:translateY(-6px); box-shadow:0 22px 48px rgba(43,48,42,.14); }
.product__img{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--paper-2); }
.product__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.product:hover .product__img img{ transform:scale(1.06); }
.product__tag{
  position:absolute; top:12px; left:12px; background:var(--paper); color:var(--sage);
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; padding:.4em .8em; border-radius:30px;
}
.product__body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.product__body h4{ font-family:var(--display); font-weight:500; font-size:1.3rem; }
.product__body p{ font-size:.84rem; color:var(--ink-soft); margin:0; flex:1; line-height:1.5; }
.product__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:.6rem; }
.product__price{ font-family:var(--display); font-size:1.25rem; color:var(--ink); }
.product__price span{ font-family:var(--sans); font-size:.7rem; color:var(--sage); letter-spacing:.1em; }
.add{
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  width:38px; height:38px; border-radius:50%; font-size:1.2rem; line-height:1;
  display:grid; place-items:center; transition:.4s var(--ease-out);
}
.add:hover{ background:var(--ink); color:var(--paper); transform:rotate(90deg); }
.order__note{
  margin-top:2.4rem; display:flex; gap:1.4rem; flex-wrap:wrap; align-items:center;
  font-size:.8rem; color:var(--ink-soft); letter-spacing:.04em;
}
.order__note .chip{ display:inline-flex; gap:.5em; align-items:center; }
.order__note .chip b{ color:var(--sage); }

/* two ways to order */
.order__ways{ margin-top:3.4rem; }
.order__ways-title{ font-family:var(--display); font-size:clamp(1.5rem,3vw,2.2rem); color:var(--ink); margin:0 0 1.4rem; }
.order__ways-title em{ font-style:italic; color:var(--sage); }
.order__ways-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.way{ background:var(--paper-3); border:1px solid var(--line-soft); border-radius:var(--radius); padding:28px 28px 30px; }
.way--plus{ background:var(--forest); color:var(--paper); border-color:var(--forest); }
.way__tag{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color:var(--sage); }
.way--plus .way__tag{ color:var(--clay-soft); }
.way h4{ font-family:var(--display); font-weight:500; font-size:1.7rem; margin:.5rem 0 .8rem; }
.way--plus h4{ color:var(--paper); }
.way p{ font-size:.9rem; color:var(--ink-soft); margin:0; line-height:1.6; }
.way--plus p{ color:rgba(236,230,216,.78); }
.way__list{ list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.55rem; }
.way__list li{ position:relative; padding-left:1.5em; font-size:.86rem; color:var(--ink); }
.way__list li::before{ content:"\2713"; position:absolute; left:0; color:var(--sage); font-size:.8em; }
.way--plus .way__list li{ color:var(--paper); }
.way--plus .way__list li::before{ color:var(--clay-soft); }
.way__note{ margin-top:1.2rem !important; font-size:.78rem !important; font-style:italic; color:rgba(236,230,216,.6) !important; }
@media (max-width:860px){ .order__ways-grid{ grid-template-columns:1fr; } }

/* floating buttons */
.fab{
  position:fixed; right:22px; z-index:50; width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; border:0; box-shadow:0 12px 34px rgba(43,48,42,.28);
  transition:transform .4s var(--ease-out), opacity .4s;
}
.fab svg{ width:26px; height:26px; }
.fab--cart{ bottom:92px; background:var(--ink); color:var(--paper); }
.fab--wa{ bottom:22px; background:#25D366; color:#fff; }
.fab:hover{ transform:scale(1.08); }
.fab__count{
  position:absolute; top:-4px; right:-4px; background:var(--clay); color:#fff;
  min-width:22px; height:22px; padding:0 5px; border-radius:11px; font-family:var(--sans);
  font-size:.72rem; font-weight:600; display:grid; place-items:center;
  transform:scale(0); transition:transform .4s var(--ease-out);
}
.fab__count.show{ transform:scale(1); }

/* cart drawer */
.cart{ position:fixed; inset:0; z-index:80; visibility:hidden; }
.cart.open{ visibility:visible; }
.cart__scrim{ position:absolute; inset:0; background:rgba(28,33,27,.5); opacity:0; transition:opacity .5s var(--ease-out); }
.cart.open .cart__scrim{ opacity:1; }
.cart__panel{
  position:absolute; top:0; right:0; height:100%; width:min(420px,92vw);
  background:var(--paper); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .5s var(--ease-out);
  box-shadow:-20px 0 60px rgba(0,0,0,.2);
}
.cart.open .cart__panel{ transform:none; }
.cart__head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line-soft); }
.cart__head h3{ font-size:1.5rem; }
.cart__close{ background:none; border:0; font-size:1.6rem; color:var(--ink); line-height:1; }
.cart__items{ flex:1; overflow-y:auto; padding:8px 24px; }
.cart__empty{ text-align:center; color:var(--ink-soft); padding:3rem 1rem; font-style:italic; font-family:var(--display); font-size:1.2rem; }
.citem{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-soft); }
.citem img{ width:62px; height:62px; object-fit:cover; border-radius:var(--radius); }
.citem__main{ flex:1; }
.citem__main b{ font-family:var(--display); font-weight:500; font-size:1.05rem; }
.citem__main .pr{ color:var(--sage); font-size:.8rem; }
.qty{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.4rem; border:1px solid var(--line); border-radius:30px; padding:.1em .3em; }
.qty button{ background:none; border:0; width:24px; height:24px; color:var(--ink); font-size:1rem; }
.qty span{ min-width:18px; text-align:center; font-size:.85rem; }
.cart__foot{ padding:20px 24px 26px; border-top:1px solid var(--line-soft); background:var(--paper-3); }
.cart__total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1rem; }
.cart__total span{ letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; color:var(--sage); }
.cart__total b{ font-family:var(--display); font-size:1.7rem; }
.cart__foot .btn{ width:100%; justify-content:center; }
.cart__foot small{ display:block; text-align:center; margin-top:.8rem; color:var(--ink-soft); font-size:.7rem; }

/* ============================================================
   PALETTE
   ============================================================ */
.palette{ background:var(--paper-3); }
.swatches{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:14px; margin-top:2.6rem; }
.sw{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-soft); }
.sw__chip{ height:120px; display:flex; align-items:flex-end; padding:10px; }
.sw__meta{ padding:12px 12px 16px; background:var(--paper); }
.sw__meta b{ font-size:.78rem; letter-spacing:.04em; display:block; }
.sw__meta span{ font-size:.7rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.1em; }
.sw__chip code{ font-family:var(--sans); font-size:.66rem; letter-spacing:.08em; padding:.2em .5em; border-radius:3px; background:rgba(255,255,255,.5); color:var(--ink); }

/* ============================================================
   TYPOGRAPHY STUDY
   ============================================================ */
.type{ background:var(--paper); }
.type__compare{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:2.6rem; }
.type__M{
  background:var(--paper-3); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:30px; text-align:center; position:relative;
}
.type__M .glyph{ font-family:var(--display); font-size:7rem; line-height:1; color:var(--sage); font-weight:600; }
.type__M.alt .glyph{ font-family:var(--serif-alt); }
.type__M .lbl{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-top:.6rem; }
.type__M .note{ font-size:.78rem; color:var(--ink-soft); margin-top:.4rem; }
.type__M .pill{ position:absolute; top:14px; right:14px; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; padding:.3em .7em; border-radius:30px; }
.pill--rec{ background:var(--sage); color:var(--paper); }
.pill--off{ background:var(--paper-2); color:var(--ink-soft); }

.type__weights{ margin-top:2.8rem; border-top:1px solid var(--line); }
.type__weights-head{ font-family:var(--display); font-size:clamp(1.2rem,2.6vw,1.7rem); color:var(--ink); padding:1.2rem 0 .4rem; max-width:50ch; line-height:1.3; }
.type__weights-head em{ font-style:italic; color:var(--sage); }
.wrow{ display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; padding:16px 0; border-bottom:1px solid var(--line-soft); }
.wrow .w{ font-family:var(--display); font-size:clamp(1.6rem,3.6vw,2.5rem); line-height:1; color:var(--ink); }
.wrow .wmeta{ text-align:right; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sage); white-space:nowrap; }
.wrow .wmeta i{ display:block; font-style:normal; color:var(--ink-soft); letter-spacing:.04em; text-transform:none; margin-top:.3rem; font-size:.8rem; }

.specimen__label{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sage-pale); margin-bottom:1rem; }
.specimen{ margin-top:2.4rem; background:var(--forest); color:var(--paper); border-radius:var(--radius); padding:clamp(28px,5vw,56px); }
.specimen__tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.8rem; }
.specimen__tabs button{
  background:transparent; border:1px solid var(--line-cream); color:rgba(236,230,216,.8);
  padding:.5em 1.1em; border-radius:30px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  transition:.35s var(--ease-out);
}
.specimen__tabs button.active{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.specimen__word{ font-size:clamp(2.6rem,9vw,6.4rem); line-height:1; letter-spacing:.04em; font-weight:600; transition:font-family .2s; }
.specimen__row{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:1rem; margin-top:1.4rem; border-top:1px solid var(--line-cream); padding-top:1.2rem; }
.specimen__row .name{ font-family:var(--display); font-style:italic; font-size:1.2rem; color:var(--sage-pale); }
.specimen__row .desc{ font-size:.82rem; color:rgba(236,230,216,.7); max-width:46ch; }
.type__pair{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:2rem; }
.type__pair .card{ background:var(--paper-3); border:1px solid var(--line-soft); border-radius:var(--radius); padding:26px; }
.type__pair .card .big{ font-family:var(--display); font-size:2rem; }
.type__pair .card .small{ font-family:var(--sans); font-size:.9rem; color:var(--ink-soft); margin-top:.6rem; }
.type__pair .card .tag{ font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--clay); margin-bottom:1rem; }

/* ============================================================
   FRAMES / IMAGERY
   ============================================================ */
.frames{ background:var(--paper-2); }
.frames__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:2.8rem; }
.frame-card{ text-align:center; }
.frame-card .holder{ position:relative; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; background:var(--paper-3); }
.frame-card .holder img{ width:100%; height:100%; object-fit:cover; }
.frame-card .lbl{ margin-top:1rem; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); }
.frame-card .desc{ font-size:.8rem; color:var(--ink-soft); margin-top:.3rem; }

/* frame treatments */
.fx-oval::after{ content:""; position:absolute; inset:16px; border:1.5px solid rgba(236,230,216,.85); border-radius:50%/40%; }
.fx-deco::after{ content:""; position:absolute; inset:14px; border:1px solid rgba(236,230,216,.8); outline:4px solid rgba(236,230,216,.25); outline-offset:-22px; }
.fx-duotone img{ filter:grayscale(1) contrast(1.05); }
.fx-duotone::before{ content:""; position:absolute; inset:0; background:var(--sage); mix-blend-mode:color; z-index:1; }
.fx-duotone::after{ content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(52,61,51,.15), rgba(52,61,51,.5)); z-index:1; }
/* pattern mat: a photo matted with a cream border on the diamond wallpaper */
.fx-pattern{
  background-image:url("img/brandbanner.webp");
  background-size:auto 100%; background-position:center; background-repeat:repeat-x;
  display:grid; place-items:center;
}
.fx-pattern img{
  width:62%; height:74%; object-fit:cover;
  border:7px solid var(--paper);
  box-shadow:0 18px 42px rgba(43,48,42,.32);
}
/* soft arch: applied to the holder so the photo fills the arch, corners stay clean */
.holder.fx-arch{ background:transparent; border-radius:62% 62% var(--radius) var(--radius) / 24% 24% 0 0; }
.holder.fx-arch img{ width:100%; height:100%; object-fit:cover; }

/* pattern + mark: finer pattern, softened, with a tidy set of smaller emblems */
.holder.fx-mark{
  position:relative;
  background-image:url("img/brandbanner.webp");
  background-size:auto 116px; background-repeat:repeat; background-position:center;
  display:grid; place-items:center;
}
.holder.fx-mark::before{ content:""; position:absolute; inset:0; background:rgba(236,230,216,.5); }
.fx-mark .marks{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:8%; width:74%;
}
.fx-mark .marks img{ width:100%; height:auto; }

/* ============================================================
   ANIMATION LAB
   ============================================================ */
.lab{ background:var(--forest); color:var(--paper); }
.lab .shead h2{ color:var(--paper); }
.lab .shead p{ color:rgba(236,230,216,.74); }
.lab__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:3rem; }
.demo{
  background:rgba(236,230,216,.04); border:1px solid var(--line-cream); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
}
.demo__stage{ position:relative; height:200px; display:grid; place-items:center; overflow:hidden; background:radial-gradient(120% 120% at 50% 0%, rgba(236,230,216,.06), transparent); }
.demo__meta{ padding:18px 20px 20px; border-top:1px solid var(--line-cream); }
.demo__meta h4{ font-family:var(--display); font-weight:500; font-size:1.3rem; color:var(--paper); }
.demo__meta .where{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sage-pale); margin:.5rem 0 .2rem; }
.demo__meta p{ font-size:.82rem; color:rgba(236,230,216,.7); margin:.4rem 0 1rem; line-height:1.5; }
.replay{
  display:inline-flex; align-items:center; gap:.55em; background:transparent; border:1px solid var(--line-cream);
  color:var(--paper); padding:.55em 1.1em; border-radius:30px; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  transition:.35s var(--ease-out);
}
.replay:hover{ background:var(--clay); border-color:var(--clay); }
.replay svg{ width:14px; height:14px; transition:transform .5s var(--ease-out); }
.replay:hover svg{ transform:rotate(-180deg); }

/* demo: wordmark reveal */
.d-word span{ display:inline-block; font-family:var(--display); font-size:2.6rem; font-weight:600; color:var(--paper); letter-spacing:.06em; opacity:0; transform:translateY(60%); }
.demo.play .d-word span{ animation:dWord .7s var(--ease-out) forwards; }
.demo.play .d-word span:nth-child(1){ animation-delay:.04s; }
.demo.play .d-word span:nth-child(2){ animation-delay:.10s; }
.demo.play .d-word span:nth-child(3){ animation-delay:.16s; }
.demo.play .d-word span:nth-child(4){ animation-delay:.22s; }
.demo.play .d-word span:nth-child(5){ animation-delay:.28s; }
.demo.play .d-word span:nth-child(6){ animation-delay:.34s; }
.demo.play .d-word span:nth-child(7){ animation-delay:.40s; }
.demo.play .d-word span:nth-child(8){ animation-delay:.46s; }
@keyframes dWord{ to{ opacity:1; transform:none; } }

/* demo: emblem draw */
.d-emblem{ width:120px; opacity:0; transform:scale(.6) rotate(-8deg); }
.demo.play .d-emblem{ animation:dEmblem 1s var(--ease-out) forwards; }
@keyframes dEmblem{ 60%{ opacity:1; } to{ opacity:1; transform:none; } }
.d-emblem-ring{ position:absolute; width:150px; height:190px; border:1px solid var(--sage-pale); border-radius:50%/42%; opacity:0; }
.demo.play .d-emblem-ring{ animation:dRing 1.1s var(--ease-out) .2s forwards; }
@keyframes dRing{ from{ opacity:0; transform:scale(.7); } 50%{ opacity:.8; } to{ opacity:.35; transform:scale(1); } }

/* demo: image wipe */
.d-wipe{ width:150px; height:150px; overflow:hidden; position:relative; border-radius:var(--radius); }
.d-wipe img{ width:100%; height:100%; object-fit:cover; clip-path:inset(0 100% 0 0); }
.demo.play .d-wipe img{ animation:dWipe .9s var(--ease-out-quart) forwards; }
@keyframes dWipe{ to{ clip-path:inset(0 0 0 0); } }

/* demo: card lift (continuous on hover-ish, triggered) */
.d-card{ width:120px; height:150px; background:var(--paper); border-radius:var(--radius); box-shadow:0 6px 18px rgba(0,0,0,.3); display:grid; place-items:center; transform:translateY(10px); }
.d-card .e{ font-family:var(--display); font-size:2.6rem; color:var(--sage); }
.demo.play .d-card{ animation:dLift 1.4s var(--ease-out) forwards; }
@keyframes dLift{ 0%{ transform:translateY(10px); box-shadow:0 6px 18px rgba(0,0,0,.3);} 45%{ transform:translateY(-12px); box-shadow:0 26px 46px rgba(0,0,0,.45);} 100%{ transform:translateY(0); box-shadow:0 14px 30px rgba(0,0,0,.35);} }

/* demo: swirl draw (SVG) */
.d-swirl path{ stroke:var(--paper); stroke-width:3; fill:none; stroke-linecap:round; stroke-dasharray:1400; stroke-dashoffset:1400; }
.demo.play .d-swirl path{ animation:dSwirl 1.8s var(--ease-out-quart) forwards; }
@keyframes dSwirl{ to{ stroke-dashoffset:0; } }

/* demo: count up */
.d-count{ font-family:var(--display); font-size:3.4rem; color:var(--paper); font-weight:600; }
.d-count .u{ font-size:1.4rem; color:var(--sage-pale); }

/* demo: marquee */
.d-marq{ width:100%; overflow:hidden; }
.d-marq__track{ display:flex; gap:2rem; white-space:nowrap; font-family:var(--display); font-style:italic; font-size:1.6rem; color:var(--sage-pale); }
.demo.play .d-marq__track{ animation:dMarq 6s linear infinite; }
@keyframes dMarq{ to{ transform:translateX(-50%); } }

/* demo: parallax tiles */
.d-para{ position:relative; width:160px; height:160px; }
.d-para .layer{ position:absolute; inset:0; border:1px solid var(--sage-pale); border-radius:50%/42%; }
.demo.play .d-para .l1{ animation:dPara1 2.2s var(--ease-out) infinite alternate; }
.demo.play .d-para .l2{ animation:dPara2 2.6s var(--ease-out) infinite alternate; }
.demo.play .d-para .l3{ animation:dPara3 3s var(--ease-out) infinite alternate; }
@keyframes dPara1{ to{ transform:translateY(-10px) scale(.96); } }
@keyframes dPara2{ to{ transform:translateY(10px) scale(1.04); } }
@keyframes dPara3{ to{ transform:translateY(-6px) scale(1.08); opacity:.4; } }

@media (prefers-reduced-motion: reduce){
  .demo .d-word span, .d-emblem, .d-emblem-ring, .d-wipe img, .d-card, .d-swirl path, .d-marq__track, .d-para .layer{
    animation:none !important; opacity:1 !important; transform:none !important; clip-path:none !important; stroke-dashoffset:0 !important;
  }
}

/* ============================================================
   AI SEO
   ============================================================ */
.aiseo{ background:var(--paper); }
.aiseo__split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; }
.aiseo__stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:1rem; }
.statcard{ background:var(--paper-3); border:1px solid var(--line-soft); border-radius:var(--radius); padding:22px; }
.statcard b{ font-family:var(--display); font-size:clamp(2.2rem,4vw,3rem); color:var(--sage); display:block; line-height:1; }
.statcard span{ font-size:.8rem; color:var(--ink-soft); display:block; margin-top:.5rem; line-height:1.4; }
.statcard cite{ font-style:normal; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sage-muted); display:block; margin-top:.6rem; }

.compare{ width:100%; border-collapse:collapse; margin-top:1.4rem; background:var(--paper-3); border-radius:var(--radius); overflow:hidden; }
.compare th, .compare td{ text-align:left; padding:14px 18px; border-bottom:1px solid var(--line-soft); font-size:.88rem; }
.compare th{ font-family:var(--sans); font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:.66rem; color:var(--sage); background:var(--paper-2); }
.compare td:first-child{ color:var(--ink-soft); }
.compare .yes{ color:var(--sage); font-weight:600; }
.compare .no{ color:var(--clay); }

.aiseo__how{ margin-top:3rem; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.howcard{ border-top:2px solid var(--sage); padding-top:1.2rem; }
.howcard .n{ font-family:var(--display); font-size:1rem; color:var(--sage); }
.howcard h4{ font-family:var(--display); font-weight:500; font-size:1.25rem; margin:.4rem 0; }
.howcard p{ font-size:.82rem; color:var(--ink-soft); margin:0; line-height:1.5; }
.aiseo__cta{ margin-top:2.4rem; padding:24px 28px; background:var(--forest); color:var(--paper); border-radius:var(--radius); display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; justify-content:space-between; }
.aiseo__cta p{ margin:0; font-family:var(--display); font-style:italic; font-size:1.3rem; max-width:40ch; }

/* ============================================================
   QUOTATION
   ============================================================ */
.quote{ background:var(--paper-3); }
.quote__doc{
  max-width:880px; margin:3rem auto 0; background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--radius); overflow:hidden; box-shadow:0 30px 80px rgba(43,48,42,.10);
}
.quote__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:30px 34px; border-bottom:1px solid var(--line-soft); background:var(--paper-3); flex-wrap:wrap; }
.quote__top .who b{ font-family:var(--display); font-size:1.5rem; letter-spacing:.18em; }
.quote__top .who span{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sage); display:block; margin-top:.3rem; }
.quote__top .meta{ text-align:right; font-size:.78rem; color:var(--ink-soft); }
.quote__top .meta b{ color:var(--ink); }
.qline{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:18px 34px; border-bottom:1px solid var(--line-soft); }
.qline .desc b{ font-family:var(--display); font-size:1.15rem; font-weight:500; }
.qline .desc p{ margin:.25rem 0 0; font-size:.8rem; color:var(--ink-soft); max-width:50ch; }
.qline .amt{ font-family:var(--display); font-size:1.2rem; white-space:nowrap; }
.qtotal{ display:flex; justify-content:space-between; align-items:center; padding:24px 34px; background:var(--forest); color:var(--paper); }
.qtotal .lbl{ letter-spacing:.24em; text-transform:uppercase; font-size:.74rem; color:var(--sage-pale); }
.qtotal .big{ font-family:var(--display); font-size:2.2rem; }
.qtotal .big s{ color:rgba(236,230,216,.45); font-size:1.2rem; margin-right:.5rem; text-decoration-thickness:1px; }
.quote__foot{ padding:22px 34px; font-size:.78rem; color:var(--ink-soft); display:flex; gap:1.5rem; flex-wrap:wrap; }
.quote__foot .chip{ display:flex; gap:.5em; align-items:center; }
.quote__foot .chip b{ color:var(--sage); }
.quote__addons{ max-width:880px; margin:1.4rem auto 0; display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; font-size:.8rem; color:var(--ink-soft); }
.quote__addons span b{ color:var(--ink); font-family:var(--display); }

/* ============================================================
   CLOSING CTA
   ============================================================ */
.closing{ background:var(--forest-deep); color:var(--paper); text-align:center; overflow:hidden; }
.closing .wrap{ position:relative; z-index:2; }
.closing__emblem{ width:96px; margin:0 auto 1.8rem; opacity:.92; }
.closing h2{ font-size:clamp(2.6rem,7vw,5.4rem); font-weight:500; color:var(--paper); line-height:1; }
.closing h2 em{ font-style:italic; color:var(--sage-pale); }
.closing p{ color:rgba(236,230,216,.74); max-width:46ch; margin:1.4rem auto 2.4rem; }
.closing__btns{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.closing__contact{ margin-top:2.6rem; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(236,230,216,.6); }
.closing__contact b{ color:var(--clay-soft); }

/* footer */
.foot{ background:var(--forest-deep); color:rgba(236,230,216,.55); border-top:1px solid var(--line-cream); }
.foot .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding-block:28px; font-size:.72rem; letter-spacing:.08em; }
.foot a:hover{ color:var(--paper); }

/* toast */
.toast{
  position:fixed; left:50%; bottom:30px; transform:translate(-50%,140%); z-index:90;
  background:var(--ink); color:var(--paper); padding:.9em 1.6em; border-radius:40px;
  font-size:.8rem; letter-spacing:.06em; box-shadow:0 16px 40px rgba(0,0,0,.3);
  transition:transform .5s var(--ease-out);
}
.toast.show{ transform:translate(-50%,0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .lab__grid{ grid-template-columns:repeat(2,1fr); }
  .frames__grid{ grid-template-columns:repeat(2,1fr); }
  .aiseo__how{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__cta .btn--ghost{ display:none; }
  .nav__burger{ display:block; }
  .story__grid, .feature__row, .feature__row.flip, .moment__grid, .aiseo__split, .type__compare, .type__pair{
    grid-template-columns:1fr;
  }
  .feature__row.flip .feature__media{ order:0; }
  .story__media .badge{ left:auto; right:18px; bottom:18px; width:96px; height:96px; }
  /* the patterned divider band reads as a stray strip on narrow screens */
  .band{ display:none; }
}
@media (max-width:680px){
  .lab__grid{ grid-template-columns:1fr; }
  .frames__grid{ grid-template-columns:1fr; }
  .aiseo__how{ grid-template-columns:1fr; }
  .aiseo__stats{ grid-template-columns:1fr 1fr; }
  .quote__top .meta{ text-align:left; }
  .qline{ flex-direction:column; gap:.4rem; }
  .hero h1{ letter-spacing:.02em; }
}

/* ============================================================
   CUSTOM SCROLLBAR
   ============================================================ */
/* hide the native scrollbar (page still scrolls via wheel/touch/keys) */
html{ scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar{ width:0; height:0; }
*::-webkit-scrollbar{ width:0; height:0; }

.scrollrail{
  position:fixed; top:108px; bottom:160px; right:15px; width:16px; z-index:70;
  display:flex; justify-content:center; opacity:0; transition:opacity .6s var(--ease-out);
  touch-action:none;
}
.scrollrail.ready{ opacity:1; }
.scrollrail__line{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:1px; height:100%; background:rgba(112,119,107,.28);
}
.scrollrail__fill{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:1px; height:0; background:linear-gradient(var(--sage-light), var(--sage));
}
.scrollrail__thumb{
  position:absolute; top:0; left:50%; width:11px; height:11px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--sage); border:1px solid var(--paper);
  box-shadow:0 3px 10px rgba(43,48,42,.35);
  cursor:grab; transition:width .2s var(--ease-out), height .2s var(--ease-out), background .35s var(--ease-out);
}
.scrollrail__thumb::after{
  content:""; position:absolute; inset:3px; background:var(--paper);
}
.scrollrail.active .scrollrail__thumb{ width:15px; height:15px; }
.scrollrail__thumb:hover{ background:var(--clay); }
.scrollrail.drag .scrollrail__thumb{ cursor:grabbing; background:var(--clay); width:15px; height:15px; }
.scrollrail__cap{
  position:absolute; left:50%; transform:translateX(-50%); width:5px; height:5px;
  background:var(--sage-light); border-radius:50%;
}
.scrollrail__cap.top{ top:-3px; }
.scrollrail__cap.bot{ bottom:-3px; }

@media (prefers-reduced-motion: reduce){
  .scrollrail__thumb{ transition:none; }
}
@media (max-width:860px){
  .scrollrail{ display:none; }
}