/* =====================================================================
   terroir — 北海道 牧場直営チーズ工房
   Design DNA: RAEN Winery を忠実翻案（生成り紙地 × 額装シネマ × セリフ editorial）
   Palette:   生成り(牛乳/和紙) × 墨 × 大地テラコッタ
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* color — semantic roles */
  --paper:   #F6F0E4;   /* 地: 牛乳/和紙 */
  --paper-2: #EFE7D6;   /* 一段沈めた地 */
  --paper-3: #E7DDC8;   /* カード/罫の陰 */
  --ink:     #26221E;   /* 文字: 墨(温かい黒) */
  --text:    #3A342D;   /* 本文 */
  --mute:    #6E6458;   /* 補助 */
  --dim:     #948a7c;   /* 極淡 */
  --line:    rgba(38,34,30,.14);
  --line-2:  rgba(38,34,30,.08);
  --terra:   #A9502F;   /* アクセント: 大地テラコッタ */
  --terra-d: #8C3F22;   /* 濃 */
  --terra-s: #C0674A;   /* 明 */
  --sage:    #7A826A;   /* 牧草の差し（極控えめ） */
  --earth:   #241F1B;   /* 反転地 */
  --earth-2: #2E2823;

  /* on earth */
  --cream:   #F3ECDD;
  --cream-mute: rgba(243,236,221,.66);

  /* type */
  --mincho: "Shippori Mincho B1", "Noto Serif JP", serif;
  --sans:   "Noto Sans JP", system-ui, sans-serif;
  --serif:  "Cormorant Garamond", "Shippori Mincho B1", serif;
  --mono:   "JetBrains Mono", ui-monospace, monospace;

  /* spacing */
  --pad: clamp(20px, 5.2vw, 80px);
  --sec-y: clamp(88px, 12vw, 176px);
  --maxw: 1280px;
  --maxw-narrow: 760px;
  --frame: clamp(10px, 1.1vw, 18px);   /* 額装の余白 */

  /* motion */
  --e-out: cubic-bezier(.22,.61,.36,1);
  --e-io:  cubic-bezier(.65,.05,.36,1);
  --t: .7s var(--e-out);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.95;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; }
::selection{ background:var(--terra); color:#fff; }
:focus-visible{ outline:2px solid var(--terra); outline-offset:3px; }

/* 行頭禁則 */
h1,h2,h3,h4,p,li,dd,dt,figcaption,blockquote,.lead,.eyebrow{
  line-break:strict; word-break:normal; overflow-wrap:normal;
}
.can-break{ overflow-wrap:anywhere; }

/* ---------- Typography roles ---------- */
.eyebrow{
  font-family:var(--mono); font-size:clamp(10px,1.05vw,12px);
  letter-spacing:.34em; text-transform:uppercase; color:var(--terra);
  font-weight:500; display:inline-block;
}
.eyebrow--mute{ color:var(--mute); }
.idx{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--terra); }

.display{
  font-family:var(--mincho); font-weight:500; color:var(--ink);
  line-height:1.32; letter-spacing:.04em;
  font-size:clamp(28px, 4.4vw, 58px);
  text-wrap:balance;
}
.display--xl{ font-size:clamp(34px, 6vw, 82px); line-height:1.22; }
.serif-wm{ font-family:var(--serif); font-weight:500; letter-spacing:.02em; }

.h-sec{
  font-family:var(--mincho); font-weight:500; color:var(--ink);
  font-size:clamp(24px,3.2vw,40px); line-height:1.4; letter-spacing:.04em;
  text-wrap:balance;
}
.lead{
  font-family:var(--mincho); font-weight:500; color:var(--ink);
  font-size:clamp(17px,1.7vw,22px); line-height:2.15; letter-spacing:.03em;
  text-wrap:pretty;
}
.body{ color:var(--text); font-size:clamp(14.5px,1.05vw,16px); line-height:2.05; }
.body--mute{ color:var(--mute); }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:var(--maxw-narrow); }
.section{ padding-block:var(--sec-y); position:relative; }
.section--tight{ padding-block:clamp(56px,7vw,96px); }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* 額装フレーム（RAEN の bottom-border 翻案）— viewport を細罫で額装 */
.viewport-frame{
  position:fixed; inset:var(--frame); pointer-events:none; z-index:60;
  border:1px solid var(--line); mix-blend-mode:multiply;
}
@media (max-width:680px){ .viewport-frame{ display:none; } }

/* ============================================================
   Splash
   ============================================================ */
#splash{
  position:fixed; inset:0; z-index:120; background:var(--paper);
  display:grid; place-items:center;
  transition:opacity .9s var(--e-out), visibility .9s;
}
#splash.done{ opacity:0; visibility:hidden; }
.splash-inner{ text-align:center; }
.splash-wm{
  font-family:var(--serif); font-size:clamp(40px,8vw,84px); color:var(--ink);
  letter-spacing:.08em; opacity:0; transform:translateY(10px);
  animation:spwm 1.1s var(--e-out) .1s forwards;
}
.splash-sub{
  font-family:var(--mono); font-size:11px; letter-spacing:.36em; text-transform:uppercase;
  color:var(--mute); margin-top:14px; opacity:0; animation:spwm 1s var(--e-out) .5s forwards;
}
.splash-bar{ width:min(220px,42vw); height:1px; background:var(--line); margin:26px auto 0; overflow:hidden; }
.splash-bar > i{ display:block; height:100%; width:0; background:var(--terra); transition:width .1s linear; }
@keyframes spwm{ to{ opacity:1; transform:none; } }
.no-js #splash{ display:none; }

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:80;
  padding:22px var(--pad); display:flex; align-items:center; justify-content:space-between;
  transition:padding .5s var(--e-out), background .5s var(--e-out), box-shadow .5s;
}
.site-header.is-scrolled{
  padding:13px var(--pad); background:rgba(246,240,228,.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
}
.brand{ font-family:var(--serif); font-size:clamp(23px,2.4vw,30px); color:var(--ink); letter-spacing:.04em; line-height:1; display:inline-flex; align-items:center; }
.brand .tld{ color:var(--terra); }
/* Brand logo (supplied emblem, recolored to brand palette) */
.brand-logo{ height:50px; width:auto; max-width:none; display:block; transition:height .5s var(--e-out); }
.site-header.is-scrolled .brand-logo{ height:40px; }
.drawer-logo{ height:48px; }
.footer-logo{ width:clamp(150px,20vw,208px); height:auto; max-width:none; display:block; }
.splash-logo{ width:min(230px,56vw); height:auto; max-width:none; margin-inline:auto; opacity:0; transform:translateY(10px); animation:spwm 1.15s var(--e-out) .1s forwards; }
.nav{ display:flex; align-items:center; gap:clamp(16px,1.9vw,30px); }
.nav a{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text); position:relative; padding-block:6px; transition:color .3s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--terra); transition:width .4s var(--e-out);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after,.nav a.active::after{ width:100%; }
.nav a.active{ color:var(--terra); }

.btn{
  display:inline-flex; align-items:center; gap:.6em; border-radius:999px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:.85em 1.5em; transition:transform .4s var(--e-out), background .4s, color .4s, border-color .4s;
  border:1px solid var(--ink); color:var(--ink);
}
.btn .arw{ transition:transform .4s var(--e-out); }
.btn:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }
.btn:hover .arw{ transform:translateX(4px); }
.btn--terra{ background:var(--terra); border-color:var(--terra); color:#fff; }
.btn--terra:hover{ background:var(--terra-d); border-color:var(--terra-d); color:#fff; }
.btn--ghost{ border-color:var(--line); color:var(--text); }
.btn--ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.btn--lg{ padding:1.05em 2em; font-size:12px; }
.btn--cream{ border-color:rgba(243,236,221,.4); color:var(--cream); }
.btn--cream:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }

.header-cta{ display:inline-flex; }
.burger{ display:none; width:30px; height:20px; position:relative; }
.burger span{ position:absolute; left:0; width:100%; height:1.5px; background:var(--ink); transition:.4s var(--e-out); }
.burger span:nth-child(1){ top:2px; } .burger span:nth-child(2){ top:9px; } .burger span:nth-child(3){ top:16px; }

/* ---------- Drawer (mobile) ---------- */
.drawer{
  position:fixed; inset:0; z-index:100; background:var(--paper);
  transform:translateY(-100%); transition:transform .6s var(--e-io); visibility:hidden;
  display:flex; flex-direction:column; padding:clamp(20px,6vw,40px);
  overflow-y:auto;
}
.drawer.open{ transform:none; visibility:visible; }
.drawer-top{ display:flex; justify-content:space-between; align-items:center; }
.drawer-close{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); display:flex; align-items:center; gap:.5em; }
.drawer-close .x{ font-size:22px; line-height:1; }
.drawer-nav{ margin-top:clamp(28px,7vw,54px); display:flex; flex-direction:column; gap:2px; }
.drawer-nav a{ display:flex; align-items:baseline; gap:16px; padding:14px 0; border-bottom:1px solid var(--line-2); }
.drawer-nav .idx{ font-size:11px; opacity:.8; min-width:2.4em; }
.drawer-nav .lbl{ font-family:var(--mincho); font-size:clamp(22px,7vw,32px); color:var(--ink); }
.drawer-nav .en{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); margin-left:auto; }
.drawer-foot{ margin-top:auto; padding-top:28px; display:flex; flex-direction:column; gap:12px; }
.drawer-foot .btn{ justify-content:center; }
.drawer-foot .meta{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--mute); }

/* ============================================================
   Hero — 額装シネマ
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; padding-top:clamp(96px,13vh,150px); }
.hero-head{ text-align:center; padding-inline:var(--pad); }
.hero-head .eyebrow{ opacity:0; transform:translateY(12px); }
.hero-wm{
  font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:clamp(52px,10vw,140px); line-height:.92; letter-spacing:.02em; margin:.18em 0 0;
  opacity:0; transform:translateY(14px);
}
.hero-tag{
  font-family:var(--mincho); color:var(--ink); font-size:clamp(16px,2.1vw,26px);
  letter-spacing:.1em; margin-top:.5em; opacity:0; transform:translateY(14px);
}
.hero-frame{
  position:relative; margin:clamp(24px,4vh,48px) var(--pad) 0; flex:1;
  border-radius:2px; overflow:hidden; min-height:44svh;
  opacity:0; transform:scale(1.03); background:var(--paper-2);
}
.hero-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,17,14,.12),transparent 30%,transparent 70%,rgba(20,17,14,.28)); }
.hero-frame .frame-cap{
  position:absolute; left:clamp(16px,2.5vw,34px); bottom:clamp(16px,2.5vw,30px); z-index:2;
  font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream);
}
.hero-frame .frame-scroll{
  position:absolute; right:clamp(16px,2.5vw,34px); bottom:clamp(16px,2.5vw,30px); z-index:2;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--cream-mute); text-transform:uppercase;
}
.is-ready .hero-head .eyebrow{ animation:rise .9s var(--e-out) .25s forwards; }
.is-ready .hero-wm{ animation:rise 1s var(--e-out) .38s forwards; }
.is-ready .hero-tag{ animation:rise 1s var(--e-out) .54s forwards; }
.is-ready .hero-frame{ animation:heroImg 1.3s var(--e-out) .5s forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }
@keyframes heroImg{ to{ opacity:1; transform:none; } }

/* ============================================================
   Intro / editorial two-column
   ============================================================ */
.intro-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(32px,6vw,90px); align-items:start; }
.intro-grid .col-label .eyebrow{ margin-bottom:18px; }
.stack-lg > * + *{ margin-top:1.4em; }

/* pull quote */
.pull{ text-align:center; max-width:20em; margin-inline:auto; }
.pull q{ font-family:var(--mincho); font-size:clamp(22px,3.4vw,42px); line-height:1.6; color:var(--ink); quotes:none; letter-spacing:.05em; }

/* two-col media + text */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; }
.feature--rev .feat-media{ order:2; }
.feat-media{ position:relative; overflow:hidden; border-radius:2px; }
.feat-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/2; }
.feat-media.portrait img{ aspect-ratio:4/5; }
.feat-body .h-sec{ margin:.4em 0 .7em; }
.feat-link{
  display:inline-flex; align-items:center; gap:.7em; margin-top:1.6em;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--terra);
}
.feat-link .arw{ transition:transform .4s var(--e-out); }
.feat-link:hover .arw{ transform:translateX(5px); }

/* ============================================================
   Trace story — この一切れを、遡ると（pinned scroll sequence）
   ============================================================ */
.trace{ background:var(--earth); color:var(--cream); position:relative; }
.trace .trace-intro{ text-align:center; padding:var(--sec-y) var(--pad) clamp(20px,5vh,60px); }
.trace .trace-intro .h-sec,.trace .trace-intro .display{ color:var(--cream); }
.trace .trace-intro .eyebrow{ color:var(--terra-s); }
.trace-stage{ position:relative; }
.trace-sticky{ position:sticky; top:0; height:100svh; display:grid; grid-template-columns:1fr 1fr; align-items:center; overflow:hidden; }
.trace-visual{ position:absolute; inset:0; }
.trace-visual .layer{ position:absolute; inset:0; opacity:0; transition:opacity .8s var(--e-out); }
.trace-visual .layer img{ width:100%; height:100%; object-fit:cover; filter:brightness(.7) saturate(.92); }
.trace-visual .layer::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(36,31,27,.72),rgba(36,31,27,.34)); }
.trace-visual .layer.active{ opacity:1; }
.trace-captions{ position:relative; z-index:2; grid-column:1; }
.trace-step{ position:absolute; inset:0; padding-inline:clamp(28px,7vw,110px); display:flex; flex-direction:column; justify-content:center; opacity:0; transform:translateY(24px); transition:opacity .6s var(--e-out), transform .6s var(--e-out); pointer-events:none; }
.trace-step.active{ opacity:1; transform:none; pointer-events:auto; }
.trace-step .num{ font-family:var(--mono); font-size:12px; letter-spacing:.3em; color:var(--terra-s); }
.trace-step .from{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream-mute); margin-top:8px; }
.trace-step .word{ font-family:var(--mincho); font-size:clamp(38px,6vw,84px); line-height:1.05; color:var(--cream); margin:.14em 0 .2em; letter-spacing:.04em; }
.trace-step .desc{ font-size:clamp(14px,1.1vw,16px); line-height:2; color:var(--cream-mute); max-width:24em; }
/* progress rail */
.trace-rail{ position:absolute; right:clamp(20px,3vw,44px); top:50%; transform:translateY(-50%); z-index:3; display:flex; flex-direction:column; gap:12px; }
.trace-rail i{ width:1px; height:30px; background:rgba(243,236,221,.22); position:relative; overflow:hidden; }
.trace-rail i::after{ content:""; position:absolute; inset:0; height:0; background:var(--terra-s); transition:height .4s var(--e-out); }
.trace-rail i.on::after{ height:100%; }
.trace-land{ text-align:center; padding:clamp(64px,12vh,150px) var(--pad); }
.trace-land .display{ color:var(--cream); }
/* per-step image (mobile/no-pin only) */
.step-img{ display:none; }
/* no-JS / reduced / mobile fallback: stack each step with its own image */
.trace.no-pin .trace-sticky{ position:relative; height:auto; grid-template-columns:1fr; display:block; }
.trace.no-pin .trace-visual{ display:none; }
.trace.no-pin .trace-step{ position:relative; opacity:1; transform:none; padding-block:clamp(30px,7vw,56px); border-top:1px solid rgba(243,236,221,.12); }
.trace.no-pin .trace-step:first-child{ border-top:0; }
.trace.no-pin .step-img{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; margin-bottom:20px; border-radius:2px; filter:brightness(.82) saturate(.95); }

/* ============================================================
   Cheese list
   ============================================================ */
.cheese-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); }
.cheese-card{ background:var(--paper); padding:clamp(20px,2vw,30px); display:flex; flex-direction:column; }
.cheese-card .ph{ position:relative; overflow:hidden; border-radius:2px; margin-bottom:22px; }
.cheese-card .ph img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform 1s var(--e-out); }
.cheese-card:hover .ph img{ transform:scale(1.05); }
.cheese-card .tag{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--terra); }
.cheese-card .nm{ font-family:var(--mincho); font-size:clamp(20px,2vw,26px); color:var(--ink); margin:.35em 0 .5em; }
.cheese-card .dc{ font-size:14px; line-height:1.95; color:var(--mute); }
.note{ font-family:var(--sans); font-size:12.5px; color:var(--mute); letter-spacing:.02em; }

/* ============================================================
   Reversed / dark impact band
   ============================================================ */
.band-dark{ background:var(--earth); color:var(--cream); }
.band-dark .h-sec,.band-dark .display,.band-dark .lead{ color:var(--cream); }
.band-dark .body{ color:var(--cream-mute); }
.band-dark .eyebrow{ color:var(--terra-s); }
.impact{ text-align:center; }
.impact .display{ max-width:16em; margin-inline:auto; }

/* CTA final */
.cta{ background:var(--earth); color:var(--cream); position:relative; overflow:hidden; text-align:center; }
.cta .bg{ position:absolute; inset:0; z-index:0; }
.cta .bg img{ width:100%; height:100%; object-fit:cover; opacity:.28; filter:saturate(.9); }
.cta .bg::after{ content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 50% 40%,rgba(36,31,27,.5),var(--earth)); }
.cta .inner{ position:relative; z-index:1; }
.cta .display{ color:var(--cream); }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:2.4em; }

/* ============================================================
   Store options
   ============================================================ */
.store-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.store-item{ background:var(--paper); padding:clamp(26px,3vw,46px); display:flex; flex-direction:column; gap:12px; min-height:200px; }
.store-item .idx{ margin-bottom:6px; }
.store-item .nm{ font-family:var(--mincho); font-size:clamp(19px,2vw,24px); color:var(--ink); }
.store-item .dc{ font-size:14px; color:var(--mute); line-height:1.9; }
.store-item .go{ margin-top:auto; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--terra); display:inline-flex; gap:.6em; }

/* ============================================================
   Company / dl table
   ============================================================ */
.spec{ border-top:1px solid var(--line); }
.spec .row{ display:grid; grid-template-columns:minmax(160px,1fr) 2.4fr; gap:24px; padding:20px 4px; border-bottom:1px solid var(--line); }
.spec dt{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }
.spec dd{ margin:0; color:var(--ink); font-size:15px; }

/* enjoy list */
.enjoy-list{ list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
.enjoy-list li{ display:flex; gap:20px; padding:20px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.enjoy-list .k{ font-family:var(--mono); font-size:12px; color:var(--terra); letter-spacing:.2em; min-width:2.4em; }
.enjoy-list .v{ font-size:clamp(15px,1.3vw,17px); color:var(--ink); line-height:1.9; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ background:var(--earth); color:var(--cream); padding:clamp(64px,8vw,110px) 0 40px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(30px,5vw,70px); }
.footer-wm{ font-family:var(--serif); font-size:clamp(40px,6vw,72px); color:var(--cream); letter-spacing:.03em; line-height:1; }
.footer-wm .tld{ color:var(--terra-s); }
.footer-tag{ font-family:var(--mincho); color:var(--cream-mute); margin-top:1em; font-size:15px; letter-spacing:.06em; }
.fcol h4{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--terra-s); margin:0 0 18px; font-weight:500; }
.fcol a,.fcol p{ display:block; color:var(--cream-mute); font-size:14px; margin:0 0 11px; transition:color .3s; line-height:1.7; }
.fcol a:hover{ color:var(--cream); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:clamp(48px,6vw,80px); padding-top:26px; border-top:1px solid rgba(243,236,221,.14); }
.footer-bottom small,.footer-bottom a{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--cream-mute); }
.footer-bottom a{ text-transform:uppercase; }

/* ============================================================
   Mobile bottom CTA bar
   ============================================================ */
.mbar{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; background:rgba(36,31,27,.96);
  backdrop-filter:blur(8px); padding:10px 12px calc(10px + env(safe-area-inset-bottom)); gap:10px; border-top:1px solid rgba(243,236,221,.12); }
.mbar a{ flex:1; text-align:center; justify-content:center; }

/* ============================================================
   Reveal
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--e-out), transform .9s var(--e-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; } .reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; } .reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal,.hero-head .eyebrow,.hero-wm,.hero-tag,.hero-frame,.splash-wm,.splash-sub{ opacity:1 !important; transform:none !important; animation:none !important; }
  .trace-step{ opacity:1 !important; transform:none !important; }
}

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(36px,6vw,90px); align-items:start; }
.contact-info{ display:flex; flex-direction:column; gap:clamp(24px,3vw,40px); }
.ci-block .eyebrow{ margin-bottom:12px; }
.ci-lg{ font-family:var(--mincho); font-size:clamp(20px,2.4vw,28px); color:var(--ink); display:inline-block; border-bottom:1px solid var(--line); padding-bottom:4px; transition:border-color .3s; }
.ci-lg:hover{ border-color:var(--terra); }
.contact-form{ display:flex; flex-direction:column; gap:22px; background:var(--paper-2); padding:clamp(24px,3.5vw,48px); border-radius:2px; border:1px solid var(--line); }
.field{ display:flex; flex-direction:column; gap:9px; }
.field label{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:2px; padding:13px 15px; width:100%; transition:border-color .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--terra); }
.field textarea{ resize:vertical; line-height:1.8; }
.contact-form .btn{ align-self:flex-start; }

/* page hero (sub pages) */
.page-hero{ padding:clamp(140px,20vh,220px) 0 clamp(40px,6vw,72px); border-bottom:1px solid var(--line); }
.page-hero .display{ margin-top:.3em; }
.page-hero .crumb{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
  .nav, .header-cta{ display:none; }
  .burger{ display:block; }
  .trace-sticky{ grid-template-columns:1fr; }
  .trace-step{ padding-inline:clamp(24px,7vw,60px); }
}
@media (max-width:880px){
  .intro-grid{ grid-template-columns:1fr; gap:28px; }
  .feature{ grid-template-columns:1fr; gap:24px; }
  .feature--rev .feat-media{ order:0; }
  .cheese-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-wm{ grid-column:1 / -1; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  body{ font-size:15.5px; }
  .mbar{ display:flex; }
  .store-grid{ grid-template-columns:1fr; }
  .cheese-grid{ grid-template-columns:1fr; }
  .spec .row{ grid-template-columns:1fr; gap:6px; padding:16px 2px; }
  .hero{ padding-top:clamp(88px,12vh,120px); }
  .hero-frame{ min-height:52svh; }
  .footer-top{ grid-template-columns:1fr; }
  .trace-rail{ display:none; }
  .hero-frame .frame-scroll{ display:none; }
  .hero-frame .frame-cap{ font-size:10px; }
  .brand-logo{ height:42px; }
  .site-header.is-scrolled .brand-logo{ height:36px; }
}
@media (max-width:420px){
  :root{ --pad:18px; }
}