/* =========================================================================
   Coast Roast Coffee — design system
   Coastal California · certified organic · small-batch heritage (est. 1991)
   Tokens → base → layout → header → buttons → cursor → hero → components → footer
   ========================================================================= */

:root{
  /* palette (docs/intel/03-style-guide.md) */
  --teal:#14524E; --teal-700:#0E3E3B; --teal-300:#3C7C76;
  --espresso:#241B15; --espresso-800:#2E231B;
  --roast:#6B4329; --terra:#C8623C; --terra-600:#B14E2C;
  --cream:#F6F0E6; --sand:#ECE2D2; --sand-200:#E2D5C0;
  --sage:#8DA68B; --wheat:#C9A24B;
  --ink:#241B15; --muted:#6f6256; --line:rgba(36,27,21,.12);

  /* roles */
  --bg:var(--cream); --surface:#FBF7EF; --surface-2:var(--sand);
  --on-dark:#F3ECDF; --on-dark-muted:#C9BCA8;

  /* type */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* scale */
  --step--1:clamp(.82rem,.79rem + .15vw,.9rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.12rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.5rem,1.3rem + .9vw,2rem);
  --step-3:clamp(2rem,1.6rem + 1.8vw,3rem);
  --step-4:clamp(2.6rem,1.9rem + 3.2vw,4.6rem);
  --step-5:clamp(3.2rem,2.2rem + 4.6vw,6rem);

  /* space + shape */
  --container:1200px; --container-wide:1320px;
  --radius:14px; --radius-lg:22px; --radius-pill:999px;
  --shadow-sm:0 2px 10px rgba(36,27,21,.06);
  --shadow:0 18px 50px -24px rgba(36,27,21,.4);
  --shadow-lg:0 40px 90px -40px rgba(20,82,78,.45);
  --header-h:74px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{
  font-family:var(--sans); font-size:var(--step-0); line-height:1.65;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden; position:relative;
}
/* paper grain overlay */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
img,svg,video{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
ul{list-style:none; padding:0}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
input,textarea,select{font:inherit; color:inherit}
:focus-visible{outline:2.5px solid var(--terra); outline-offset:3px; border-radius:4px}
::selection{background:var(--terra); color:#fff}

h1,h2,h3,h4{font-family:var(--display); font-weight:540; line-height:1.06; letter-spacing:-.015em; font-optical-sizing:auto}
h1{font-size:var(--step-5)} h2{font-size:var(--step-4)} h3{font-size:var(--step-2)}
p{text-wrap:pretty}

/* ---------- layout ---------- */
.container{width:min(100% - 2.5rem,var(--container)); margin-inline:auto}
.container-wide{width:min(100% - 2.5rem,var(--container-wide)); margin-inline:auto}
.section{padding:clamp(4rem,8vw,8rem) 0; position:relative; z-index:2}
.section--tight{padding:clamp(3rem,5vw,5rem) 0}
.section--dark{background:var(--espresso); color:var(--on-dark)}
.section--teal{background:var(--teal); color:var(--on-dark)}
.section--sand{background:var(--surface-2)}
.section--surface{background:var(--surface)}
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem; font-family:var(--sans);
  font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--terra-600);
}
.section--dark .eyebrow,.section--teal .eyebrow{color:var(--wheat)}
.eyebrow::before{content:""; width:26px; height:1px; background:currentColor; opacity:.6}
.lead{font-size:var(--step-1); color:var(--muted); max-width:60ch; line-height:1.5}
.section--dark .lead,.section--teal .lead{color:var(--on-dark-muted)}
.center{text-align:center} .center .lead{margin-inline:auto}
.section-head{max-width:62ch}
.section-head.center{margin-inline:auto}
.section-head h2{margin:.4rem 0 .9rem}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--terra); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.6rem; border-radius:var(--radius-pill); background:var(--bg); color:var(--fg);
  font-weight:600; font-size:var(--step--1); letter-spacing:.01em; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  box-shadow:0 12px 28px -12px rgba(200,98,60,.7); isolation:isolate;
}
.btn::after{ /* sheen */
  content:""; position:absolute; inset:0; z-index:-1; transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);
  transition:transform .7s var(--ease);
}
.btn:hover{transform:translateY(-3px); box-shadow:0 18px 36px -12px rgba(200,98,60,.8)}
.btn:hover::after{transform:translateX(120%)}
.btn--ghost{--bg:transparent; --fg:var(--ink); box-shadow:none; border:1.5px solid var(--line)}
.btn--ghost:hover{--bg:var(--ink); --fg:var(--cream); box-shadow:none}
.btn--light{--bg:var(--cream); --fg:var(--espresso); box-shadow:0 12px 28px -14px rgba(0,0,0,.5)}
.btn--on-dark.btn--ghost{--fg:var(--on-dark); border-color:rgba(243,236,223,.3)}
.btn--on-dark.btn--ghost:hover{--bg:var(--cream); --fg:var(--espresso)}
.btn--lg{padding:1.1rem 2rem; font-size:var(--step-0)}
.btn-row{display:flex; flex-wrap:wrap; gap:.85rem; align-items:center}
.textlink{display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color:var(--terra-600); border-bottom:1.5px solid transparent; transition:.25s}
.section--dark .textlink,.section--teal .textlink{color:var(--wheat)}
.textlink .arr{transition:transform .3s var(--ease)}
.textlink:hover{border-color:currentColor} .textlink:hover .arr{transform:translateX(5px)}

/* ---------- custom cursor ---------- */
.cursor-dot,.cursor-ring{position:fixed; top:0; left:0; z-index:9000; pointer-events:none; border-radius:50%; mix-blend-mode:difference}
.cursor-dot{width:7px; height:7px; background:#fff; transform:translate(-50%,-50%)}
.cursor-ring{width:38px; height:38px; border:1.5px solid rgba(255,255,255,.7); transform:translate(-50%,-50%); transition:width .25s var(--ease),height .25s var(--ease),background .25s}
.cursor-ring.is-active{width:58px; height:58px; background:rgba(255,255,255,.12)}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto; z-index:1000; height:var(--header-h);
  display:flex; align-items:center; transition:background .4s var(--ease),box-shadow .4s,backdrop-filter .4s;
}
.site-header .container-wide{display:flex; align-items:center; justify-content:space-between; gap:1rem; width:min(100% - 2rem,var(--container-wide))}
.site-header.scrolled{background:rgba(246,240,230,.85); backdrop-filter:blur(14px) saturate(1.2); box-shadow:0 1px 0 var(--line)}
.brand{display:inline-flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:600; font-size:1.22rem; letter-spacing:-.01em; color:var(--espresso)}
.brand .mark{width:34px; height:34px; flex:0 0 auto}
.brand small{display:block; font-family:var(--sans); font-weight:600; font-size:.54rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-top:2px}
.is-hero-light .brand{color:var(--cream)} .is-hero-light .brand small{color:rgba(243,236,223,.7)}
.nav{display:flex; align-items:center; gap:.3rem}
.nav a{position:relative; padding:.5rem .85rem; font-size:.92rem; font-weight:500; color:var(--espresso); border-radius:8px; transition:color .25s}
.is-hero-light .nav a{color:var(--cream)}
.nav a::after{content:""; position:absolute; left:.85rem; right:.85rem; bottom:.34rem; height:1.5px; background:var(--terra); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.header-cta{display:flex; align-items:center; gap:.6rem}
.nav-toggle{display:none; width:46px; height:46px; border-radius:10px; align-items:center; justify-content:center}
.nav-toggle span{position:relative; width:22px; height:2px; background:currentColor; color:var(--espresso); transition:.3s}
.is-hero-light .nav-toggle span{color:var(--cream); background:currentColor}
.nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:0; width:22px; height:2px; background:currentColor; transition:.3s}
.nav-toggle span::before{top:-7px} .nav-toggle span::after{top:7px}

@media (max-width:940px){
  .nav-toggle{display:flex}
  .nav,.header-cta .btn{display:none}
  .mobile-drawer{
    position:fixed; inset:0; z-index:1200; background:var(--espresso); color:var(--on-dark);
    display:flex; flex-direction:column; justify-content:center; padding:2rem 2rem;
    transform:translateX(100%); transition:transform .5s var(--ease); visibility:hidden;
  }
  .mobile-drawer.open{transform:none; visibility:visible}
  .mobile-drawer a{font-family:var(--display); font-size:clamp(1.7rem,7vw,2.4rem); padding:.5rem 0; border-bottom:1px solid rgba(243,236,223,.12)}
  .mobile-drawer .btn{margin-top:1.4rem; display:inline-flex}
  .drawer-close{position:absolute; top:1.4rem; right:1.5rem; font-size:2rem; width:46px; height:46px}
}
@media (min-width:941px){ .mobile-drawer{display:none} }

/* ---------- HERO ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; color:var(--cream); padding-bottom:clamp(3rem,7vh,6rem)}
.hero__scene{position:absolute; inset:0; z-index:0}
/* layered coastal sky */
.hero__scene .sky{position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 78% 6%, rgba(201,162,75,.42), transparent 46%),
    radial-gradient(140% 120% at 20% 0%, rgba(60,124,118,.55), transparent 55%),
    linear-gradient(180deg,#0c3a37 0%, #103f3b 30%, #1a2620 66%, #241b15 100%);
}
.hero__scene .fog{position:absolute; inset:0; opacity:.5; mix-blend-mode:screen;
  background:radial-gradient(60% 40% at 30% 78%, rgba(246,240,230,.5), transparent 70%),
            radial-gradient(50% 35% at 75% 86%, rgba(141,166,139,.45), transparent 70%);
  animation:fogDrift 26s ease-in-out infinite alternate;}
@keyframes fogDrift{from{transform:translate3d(-3%,0,0) scale(1.05)}to{transform:translate3d(4%,-2%,0) scale(1.12)}}
.hero__hills{position:absolute; left:0; right:0; bottom:0; z-index:1}
.hero__steam{position:absolute; z-index:1; left:50%; bottom:0; width:300px; height:60vh; transform:translateX(-50%); pointer-events:none; opacity:.0}
.hero__grain{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.5;
  background:radial-gradient(120% 100% at 50% 120%, rgba(36,27,21,.7), transparent 60%)}
.hero__inner{position:relative; z-index:3; width:min(100% - 2.5rem,var(--container)); margin-inline:auto}
.hero .eyebrow{color:var(--wheat)}
.hero h1{font-size:var(--step-5); max-width:15ch; margin:.6rem 0 0; font-weight:500}
.hero h1 .li{display:block; overflow:hidden}
.hero h1 .li > span{display:block}
.hero__sub{margin-top:1.4rem; max-width:46ch; font-size:var(--step-1); color:rgba(243,236,223,.85); line-height:1.5}
.hero__cta{margin-top:2rem}
.hero__meta{margin-top:2.6rem; display:flex; flex-wrap:wrap; gap:1.6rem 2.2rem; align-items:center}
.hero__meta .item{display:flex; flex-direction:column; gap:.1rem}
.hero__meta .num{font-family:var(--display); font-size:1.7rem; line-height:1; color:var(--cream)}
.hero__meta .lbl{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(243,236,223,.6)}
.hero__meta .div{width:1px; height:36px; background:rgba(243,236,223,.2)}
.scroll-hint{position:absolute; z-index:3; bottom:1.4rem; right:max(1.25rem,calc((100vw - var(--container))/2)); display:flex; align-items:center; gap:.6rem; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(243,236,223,.6)}
.scroll-hint .line{width:1px; height:42px; background:linear-gradient(var(--wheat),transparent); animation:scrollLine 2s ease-in-out infinite}
@keyframes scrollLine{0%,100%{transform:scaleY(.3);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}

/* page hero (inner pages) */
.page-hero{position:relative; padding:calc(var(--header-h) + clamp(3.5rem,8vw,6rem)) 0 clamp(3rem,6vw,5rem); color:var(--cream); overflow:hidden}
.page-hero .sky{position:absolute; inset:0; z-index:0;
  background:radial-gradient(120% 120% at 80% 0%, rgba(201,162,75,.3), transparent 50%),
            linear-gradient(160deg,#0e3e3b,#1a2620 70%,#241b15)}
.page-hero__inner{position:relative; z-index:2}
.page-hero .crumbs{font-size:.8rem; color:rgba(243,236,223,.7); margin-bottom:1rem; display:flex; gap:.5rem; flex-wrap:wrap}
.page-hero .crumbs a:hover{color:var(--wheat)}
.page-hero h1{font-size:var(--step-4); max-width:18ch; margin:.3rem 0}
.page-hero p{margin-top:1rem; max-width:54ch; color:rgba(243,236,223,.85); font-size:var(--step-1)}

/* ---------- trust strip ---------- */
.trust{border-block:1px solid var(--line); background:var(--surface)}
.trust .container{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 2.4rem; padding:1.4rem 0}
.trust .lbl{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.trust .name{font-family:var(--display); font-size:1.18rem; color:var(--roast); opacity:.85}

/* ---------- pillars / value cards ---------- */
.grid{display:grid; gap:1.4rem}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

.card{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.8rem; transition:transform .4s var(--ease),box-shadow .4s,border-color .4s; overflow:hidden}
.card::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--terra),var(--wheat)); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease)}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card .ico{width:48px; height:48px; display:grid; place-items:center; border-radius:12px; background:rgba(20,82,78,.08); color:var(--teal); margin-bottom:1.1rem}
.section--dark .card,.section--teal .card{background:rgba(255,255,255,.04); border-color:rgba(243,236,223,.12); color:var(--on-dark)}
.section--dark .card .ico,.section--teal .card .ico{background:rgba(201,162,75,.14); color:var(--wheat)}
.card h3{font-size:var(--step-1); margin-bottom:.5rem}
.card p{color:var(--muted); font-size:var(--step--1)}
.section--dark .card p,.section--teal .card p{color:var(--on-dark-muted)}
.card .proof{margin-top:1rem; font-size:.78rem; font-weight:600; letter-spacing:.04em; color:var(--terra-600); display:inline-flex; align-items:center; gap:.4rem}
.section--dark .card .proof{color:var(--wheat)}

/* ---------- coffee bag (CSS product illustration) ---------- */
.bag{
  --roast:#6B4329;
  position:relative; width:100%; aspect-ratio:3/4; max-width:240px; margin-inline:auto;
  border-radius:10px 10px 12px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 16%),
    linear-gradient(100deg, #d8c7a8, #cdb791 48%, #c0a87e);
  box-shadow:var(--shadow), inset 0 -22px 40px -28px rgba(0,0,0,.4);
  overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease), box-shadow .5s;
}
.bag::before{ /* top crimp fold */
  content:""; position:absolute; top:0; left:0; right:0; height:13%;
  background:linear-gradient(180deg,#7a6647,#9a8460);
  box-shadow:0 2px 5px rgba(0,0,0,.25);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 9px);
          mask:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 9px);
}
.bag::after{ /* paper sheen */
  content:""; position:absolute; inset:0; background:linear-gradient(75deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%); opacity:.7;
}
.bag .label{position:absolute; left:8%; right:8%; top:24%; bottom:10%; border-radius:8px;
  background:linear-gradient(180deg,#fbf7ef,#f1e8d6); box-shadow:0 6px 14px rgba(0,0,0,.18); z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center; padding:10% 9% 9%;}
.bag .roast-band{width:42px; height:42px; border-radius:50%; background:var(--roast); margin-bottom:.5rem;
  box-shadow:inset 0 -6px 10px rgba(0,0,0,.25), 0 3px 8px rgba(0,0,0,.2); position:relative}
.bag .roast-band::after{content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(255,255,255,.35)}
.bag .brandline{font-family:var(--sans); font-size:.5rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--teal)}
.bag .name{font-family:var(--display); font-weight:600; font-size:1rem; line-height:1.05; color:var(--espresso); margin:.25rem 0}
.bag .roastlvl{font-size:.52rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.bag .seal{margin-top:auto; font-size:.46rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--terra-600); border:1px solid currentColor; border-radius:999px; padding:.2rem .5rem}

/* product card */
.product{display:flex; flex-direction:column; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2rem 1.4rem 1.6rem; transition:transform .45s var(--ease),box-shadow .45s,border-color .45s}
.product:hover{transform:translateY(-7px); box-shadow:var(--shadow-lg); border-color:transparent}
.product:hover .bag{transform:translateY(-6px) rotate(-1.5deg)}
.product .meta-row{display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:1.3rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.product h3{font-size:var(--step-1); margin-top:.45rem}
.product .notes{color:var(--muted); font-size:var(--step--1); margin-top:.5rem; min-height:2.4em}
.product .origins{display:flex; flex-wrap:wrap; gap:.35rem; justify-content:center; margin-top:.9rem}
.product .origins span{font-size:.66rem; letter-spacing:.04em; padding:.22rem .6rem; border-radius:999px; background:rgba(141,166,139,.18); color:var(--teal)}
.product .price{margin-top:1rem; font-family:var(--display); font-size:1.3rem; color:var(--espresso)}
.product .price small{font-family:var(--sans); font-size:.72rem; color:var(--muted); letter-spacing:.04em}
.product .product-cta{margin-top:1.1rem; display:flex; gap:.5rem; justify-content:center}

/* ---------- split feature ---------- */
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.split.reverse .split__media{order:2}
@media (max-width:860px){.split{grid-template-columns:1fr} .split.reverse .split__media{order:0}}
.split__media{position:relative}
.media-frame{position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/5;
  background:linear-gradient(160deg,#0e3e3b,#241b15)}
.media-frame .scene-coast{position:absolute; inset:0}
.media-badge{position:absolute; z-index:3; background:var(--cream); color:var(--espresso); border-radius:16px; padding:1rem 1.2rem; box-shadow:var(--shadow); max-width:60%}
.media-badge.bl{left:-14px; bottom:24px} .media-badge.tr{right:-14px; top:28px}
.media-badge .big{font-family:var(--display); font-size:1.7rem; line-height:1; color:var(--teal)}
.media-badge .small{font-size:.74rem; color:var(--muted); margin-top:.25rem}
@media (max-width:600px){.media-badge{position:static; max-width:none; margin-top:1rem}}

/* ---------- timeline ---------- */
.timeline{position:relative; display:grid; gap:1.2rem; margin-top:2.5rem}
.timeline::before{content:""; position:absolute; left:13px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--terra),var(--wheat),transparent)}
.tl-item{position:relative; padding-left:3rem}
.tl-item .dot{position:absolute; left:6px; top:5px; width:16px; height:16px; border-radius:50%; background:var(--terra); box-shadow:0 0 0 5px rgba(200,98,60,.15)}
.tl-item .yr{font-family:var(--display); font-size:1.3rem; color:var(--teal)}
.section--dark .tl-item .yr{color:var(--wheat)}
.tl-item p{color:var(--muted); margin-top:.2rem; max-width:60ch}
.section--dark .tl-item p{color:var(--on-dark-muted)}

/* ---------- stats band ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center}
@media (max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat .n{font-family:var(--display); font-size:clamp(2.4rem,5vw,3.6rem); line-height:1; color:var(--wheat)}
.stat .l{margin-top:.5rem; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-muted)}

/* ---------- quote / press ---------- */
.quote{max-width:24ch}
.pressquote{font-family:var(--display); font-size:var(--step-2); line-height:1.3; color:var(--espresso)}
.section--dark .pressquote,.section--teal .pressquote{color:var(--cream)}
.pressquote .cite{display:block; font-family:var(--sans); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:1.2rem}
.section--dark .pressquote .cite{color:var(--on-dark-muted)}

/* ---------- AEO blocks ---------- */
.quick-answer{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--terra); border-radius:12px; padding:1.2rem 1.4rem; margin:1.4rem 0; max-width:70ch}
.quick-answer .qa-label{font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--terra-600); margin-bottom:.4rem}
.quick-answer p:last-child{margin:0}
.key-facts{width:100%; border-collapse:collapse; margin:1.4rem 0; background:var(--surface); border-radius:12px; overflow:hidden; border:1px solid var(--line)}
.key-facts th,.key-facts td{text-align:left; padding:.8rem 1.1rem; border-bottom:1px solid var(--line); font-size:var(--step--1)}
.key-facts th{width:40%; font-family:var(--sans); font-weight:700; color:var(--roast); background:rgba(107,67,41,.04)}
.key-facts tr:last-child th,.key-facts tr:last-child td{border-bottom:0}
table.compare{width:100%; border-collapse:collapse; margin:1.4rem 0; font-size:var(--step--1)}
table.compare th,table.compare td{padding:.85rem 1rem; border:1px solid var(--line); text-align:left}
table.compare thead th{background:var(--teal); color:var(--cream); font-weight:600}
table.compare tbody th{font-weight:600; background:var(--surface)}
.updated{font-size:.78rem; color:var(--muted)}

/* ---------- FAQ ---------- */
.faqs{display:grid; gap:.7rem; max-width:820px; margin-inline:auto}
.faqs details{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:.3rem 1.3rem; transition:border-color .3s,box-shadow .3s}
.faqs details[open]{border-color:var(--sage); box-shadow:var(--shadow-sm)}
.faqs summary{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.05rem 0; font-weight:600; font-size:var(--step-0); list-style:none; cursor:pointer}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"+"; font-family:var(--display); font-size:1.5rem; color:var(--terra); transition:transform .3s}
.faqs details[open] summary::after{transform:rotate(45deg)}
.faqs details p{padding:0 0 1.1rem; color:var(--muted); max-width:68ch}

/* ---------- CTA ---------- */
.cta-band{position:relative; overflow:hidden; background:var(--teal); color:var(--cream); text-align:center; border-radius:0}
.cta-band .sky{position:absolute; inset:0; opacity:.5; background:radial-gradient(80% 120% at 50% -20%,rgba(201,162,75,.5),transparent 60%)}
.cta-band .inner{position:relative; z-index:2; padding:clamp(3.5rem,7vw,6rem) 0}
.cta-band h2{font-size:var(--step-4); max-width:18ch; margin:0 auto 1rem}
.cta-band p{max-width:52ch; margin:0 auto 1.8rem; color:rgba(243,236,223,.85); font-size:var(--step-1)}

/* ---------- forms ---------- */
.form{display:grid; gap:1.1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.6rem,3vw,2.4rem)}
.field{display:grid; gap:.4rem}
.field label{font-size:.8rem; font-weight:600; letter-spacing:.04em; color:var(--roast)}
.field input,.field textarea,.field select{
  background:var(--bg); border:1.5px solid var(--line); border-radius:12px; padding:.85rem 1rem; transition:border-color .25s,box-shadow .25s; width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--teal); box-shadow:0 0 0 4px rgba(20,82,78,.1); outline:none}
.field textarea{min-height:130px; resize:vertical}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
@media (max-width:560px){.form .row{grid-template-columns:1fr}}
.form-note{font-size:.8rem; color:var(--muted)}
.form-status{font-size:.9rem; font-weight:600; padding:.6rem 0; min-height:1.5em}
.form-status.ok{color:var(--teal)} .form-status.err{color:var(--terra-600)}

/* ---------- contact aside ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(2rem,5vw,4rem); align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact-list{display:grid; gap:1.3rem; margin-top:1.6rem}
.contact-list .row{display:flex; gap:1rem; align-items:flex-start}
.contact-list .ico{flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(20,82,78,.08); color:var(--teal)}
.contact-list .row .k{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.contact-list .row .v{font-weight:600; font-size:1.05rem}

/* ---------- footer ---------- */
.site-footer{background:var(--espresso); color:var(--on-dark); padding:clamp(3.5rem,6vw,5rem) 0 2rem; position:relative; z-index:2}
.footer-top{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.5rem}
@media (max-width:860px){.footer-top{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1/-1}}
@media (max-width:520px){.footer-top{grid-template-columns:1fr}}
.footer-brand .brand{color:var(--cream)} .footer-brand .brand small{color:var(--on-dark-muted)}
.footer-brand p{margin-top:1rem; max-width:38ch; color:var(--on-dark-muted); font-size:var(--step--1)}
.footer-col h4{font-family:var(--sans); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--wheat); margin-bottom:1rem}
.footer-col a{display:block; padding:.32rem 0; color:var(--on-dark-muted); font-size:.94rem; transition:color .2s,transform .2s}
.footer-col a:hover{color:var(--cream); transform:translateX(3px)}
.footer-badges{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem}
.footer-badges span{font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-muted); border:1px solid rgba(243,236,223,.16); border-radius:999px; padding:.3rem .6rem}
.footer-bottom{margin-top:3rem; padding-top:1.6rem; border-top:1px solid rgba(243,236,223,.12); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; font-size:.82rem; color:var(--on-dark-muted)}
.footer-bottom a:hover{color:var(--cream)}

/* ---------- reveal animations ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal-stagger > *{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-stagger.in > *{opacity:1; transform:none}
.reveal-stagger.in > *:nth-child(2){transition-delay:.08s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.16s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.24s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.32s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.4s}

html.qa .reveal,html.qa .reveal-stagger > *{opacity:1 !important; transform:none !important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal,.reveal-stagger > *{opacity:1 !important; transform:none !important}
  .hero__scene .fog{animation:none}
  .cursor-dot,.cursor-ring{display:none}
}

/* ---------- utilities ---------- */
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.maxw-prose{max-width:68ch}
.prose p{margin-bottom:1.1rem; color:var(--ink)}
.prose p.lead{color:var(--muted)}
.prose h2{margin:2.4rem 0 1rem}.prose h3{margin:1.8rem 0 .7rem}
.prose ul.ticks{display:grid; gap:.6rem; margin:1.2rem 0}
.prose ul.ticks li{position:relative; padding-left:1.8rem; color:var(--ink)}
.prose ul.ticks li::before{content:"✦"; position:absolute; left:0; color:var(--terra)}
.tag{display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); background:rgba(20,82,78,.08); padding:.3rem .7rem; border-radius:999px}