/* =========================================================
   VERRE — 吹きガラス工房  |  Design System
   砂 → 光 : sand off-white × charcoal ink × amber light
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* color — sand to light */
  --paper:      #F4EFE6;   /* main ground : 砂・生成り */
  --paper-2:    #EBE3D3;   /* alternate section ground */
  --cream:      #FBF8F2;   /* warm white : light pool / card */
  --ink:        #2B2823;   /* warm charcoal : text */
  --ink-soft:   #574F45;   /* muted body */
  --ink-dim:    #8E8574;   /* labels / captions */
  --line:       rgba(43,40,35,.14);
  --line-soft:  rgba(43,40,35,.08);

  /* accent — the light */
  --amber:      #B8842A;
  --amber-deep: #966B1D;
  --amber-soft: #D7AC5A;
  --amber-glow: rgba(184,132,42,.14);

  /* dark ground (fire / craft nocturne) */
  --nocturne:   #211E19;
  --nocturne-2: #17140F;

  /* type */
  --f-mincho: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --f-serif:  "Cormorant Garamond", "Times New Roman", serif;
  --f-sans:   "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;

  /* spacing (fluid) */
  --pad:   clamp(20px, 5vw, 80px);
  --sec-y: clamp(82px, 12vw, 172px);
  --maxw:  1280px;
  --maxw-wide: 1520px;
  --maxw-read: 760px;

  /* misc */
  --r: 2px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
  --hd-h: 78px;
}

/* ---------- Reset-ish ---------- */
*{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(--ink);
  font-family:var(--f-sans);
  font-weight:400; line-height:1.9;
  font-size:15.5px; letter-spacing:.012em;
  -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; border:0; background:none}
::selection{background:var(--amber); color:var(--cream)}

/* kinsoku / wrapping */
h1,h2,h3,h4,p,li,dd,dt,figcaption,blockquote,span{
  line-break:strict; word-break:normal; overflow-wrap:break-word;
}
h1,h2,h3,h4,.balance{text-wrap:balance}
p{text-wrap:pretty}
.u-anywhere{overflow-wrap:anywhere; word-break:break-all}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ---------- Type roles ---------- */
.eyebrow{
  font-family:var(--f-serif);
  font-size:clamp(11px,1vw,12.5px);
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--amber-deep); font-weight:600;
  display:inline-flex; align-items:center; gap:.9em;
}
.eyebrow::before{
  content:""; width:clamp(22px,3vw,42px); height:1px;
  background:var(--amber); opacity:.7;
}
.eyebrow.is-center::after{
  content:""; width:clamp(22px,3vw,42px); height:1px;
  background:var(--amber); opacity:.7;
}
.eyebrow.is-plain{display:inline-block}
.eyebrow.is-plain::before{display:none}

.display{
  font-family:var(--f-mincho); font-weight:500;
  line-height:1.18; letter-spacing:.04em; color:var(--ink);
}
.jp-lead{
  font-family:var(--f-mincho); font-weight:500;
  line-height:2.05; letter-spacing:.06em;
  font-size:clamp(17px,2.1vw,23px);
}
.wordmark{
  font-family:var(--f-serif); font-weight:600;
  letter-spacing:.34em; text-transform:uppercase;
}

/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.wrap-wide{max-width:var(--maxw-wide); margin-inline:auto; padding-inline:var(--pad)}
.wrap-read{max-width:var(--maxw-read); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:var(--sec-y)}
.section-sm{padding-block:clamp(56px,8vw,104px)}
.dark{background:var(--nocturne); color:var(--cream)}
.dark .display{color:var(--cream)}
.dark .eyebrow{color:var(--amber-soft)}
.dark .eyebrow::before,.dark .eyebrow.is-center::after{background:var(--amber-soft)}
.dark .lead-muted,.dark p{color:rgba(251,248,242,.72)}
.paper-2{background:var(--paper-2)}
.lead-muted{color:var(--ink-soft)}
.center{text-align:center}
.mono-num{font-family:var(--f-serif); font-weight:600; letter-spacing:.1em}

/* ================= Progress bar ================= */
.progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--amber-soft),var(--amber-deep));
  z-index:120; transition:width .1s linear;
}

/* ================= Header ================= */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--hd-h);
  display:flex; align-items:center;
  transition:height .4s var(--ease), background .4s var(--ease), backdrop-filter .4s var(--ease), box-shadow .4s var(--ease);
}
.hd__inner{
  width:100%; max-width:var(--maxw-wide); margin-inline:auto;
  padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.hd__logo{
  font-family:var(--f-serif); font-weight:600;
  font-size:clamp(22px,2.4vw,27px); letter-spacing:.36em;
  text-transform:uppercase; color:var(--ink);
  transition:color .4s var(--ease); padding-left:.36em;
}
.hd__nav{display:flex; align-items:center; gap:clamp(18px,2vw,32px)}
.hd__link{
  font-family:var(--f-serif); font-weight:600;
  font-size:14px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); position:relative; padding-block:6px;
  transition:color .3s var(--ease), opacity .3s;
}
.hd__link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--amber); transition:width .35s var(--ease);
}
.hd__link:hover{color:var(--amber-deep)}
.hd__link:hover::after,.hd__link.is-active::after{width:100%}
.hd__link.is-active{color:var(--amber-deep)}
.btn-contact{
  font-family:var(--f-serif); font-weight:600;
  font-size:13.5px; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid var(--ink); border-radius:999px;
  padding:.62em 1.5em; color:var(--ink);
  transition:all .35s var(--ease); position:relative; overflow:hidden;
}
.btn-contact:hover{background:var(--ink); color:var(--cream); border-color:var(--ink)}

/* header states */
.hd.is-solid{
  height:64px; background:rgba(244,239,230,.82);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 var(--line-soft);
}
/* over-hero (transparent, light text) */
.hd.on-hero:not(.is-solid) .hd__logo,
.hd.on-hero:not(.is-solid) .hd__link{color:var(--cream)}
.hd.on-hero:not(.is-solid) .btn-contact{border-color:rgba(251,248,242,.6); color:var(--cream)}
.hd.on-hero:not(.is-solid) .btn-contact:hover{background:var(--cream); color:var(--ink)}
.hd.on-hero:not(.is-solid) .burger span{background:var(--cream)}

/* burger */
.burger{display:none; width:30px; height:20px; position:relative; z-index:121}
.burger span{
  position:absolute; left:0; height:1.5px; width:100%; background:var(--ink);
  transition:transform .4s var(--ease), opacity .3s, background .4s;
}
.burger span:nth-child(1){top:2px}
.burger span:nth-child(2){top:9px}
.burger span:nth-child(3){top:16px}
body.nav-open .burger span{background:var(--cream)}
body.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ================= Mobile drawer ================= */
.drawer{
  position:fixed; inset:0; z-index:110;
  background:var(--nocturne);
  color:var(--cream);
  display:flex; flex-direction:column;
  padding:calc(var(--hd-h) + 12px) var(--pad) 40px;
  transform:translateY(-100%); visibility:hidden;
  transition:transform .6s var(--ease), visibility 0s .6s;
  overflow-y:auto;
}
body.nav-open .drawer{transform:translateY(0); visibility:visible; transition:transform .6s var(--ease)}
.drawer__close{
  position:absolute; top:20px; right:var(--pad);
  width:44px; height:44px; border:1px solid rgba(251,248,242,.3); border-radius:999px;
  display:flex; align-items:center; justify-content:center; color:var(--cream);
  font-size:20px; line-height:1;
}
.drawer__nav{display:flex; flex-direction:column; gap:2px; margin-top:auto; margin-bottom:auto}
.drawer__link{
  display:flex; align-items:baseline; gap:1em;
  font-family:var(--f-mincho); font-weight:500;
  font-size:clamp(26px,7vw,40px); letter-spacing:.05em;
  padding-block:.28em; border-bottom:1px solid rgba(251,248,242,.1);
  color:var(--cream); opacity:0; transform:translateY(14px);
}
body.nav-open .drawer__link{animation:drawerIn .6s var(--ease) forwards}
.drawer__link .n{font-family:var(--f-serif); font-size:.42em; letter-spacing:.2em; color:var(--amber-soft)}
.drawer__link .en{font-family:var(--f-serif); font-size:.34em; letter-spacing:.24em; text-transform:uppercase; color:rgba(251,248,242,.4); margin-left:auto}
@keyframes drawerIn{to{opacity:1; transform:translateY(0)}}
.drawer__foot{margin-top:26px; font-size:12.5px; letter-spacing:.06em; color:rgba(251,248,242,.55); line-height:2}

/* ================= Buttons ================= */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--f-serif); font-weight:600;
  font-size:14px; letter-spacing:.2em; text-transform:uppercase;
  border-radius:999px; padding:.95em 2.1em;
  transition:all .4s var(--ease); position:relative; overflow:hidden;
}
.btn .arw{transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}
.btn--fill{background:var(--ink); color:var(--cream)}
.btn--fill:hover{background:var(--amber-deep)}
.btn--amber{background:var(--amber); color:var(--cream)}
.btn--amber:hover{background:var(--amber-deep)}
.btn--ghost{border:1px solid var(--ink); color:var(--ink)}
.btn--ghost:hover{background:var(--ink); color:var(--cream)}
.dark .btn--ghost{border-color:rgba(251,248,242,.5); color:var(--cream)}
.dark .btn--ghost:hover{background:var(--cream); color:var(--ink)}

.textlink{
  font-family:var(--f-serif); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  font-size:13.5px; display:inline-flex; align-items:center; gap:.7em;
  padding-bottom:4px; border-bottom:1px solid var(--line);
  transition:border-color .3s, color .3s;
}
.textlink .arw{transition:transform .4s var(--ease)}
.textlink:hover{color:var(--amber-deep); border-color:var(--amber)}
.textlink:hover .arw{transform:translateX(5px)}

/* ================= Reveal ================= */
.reveal{opacity:0; transform:translateY(28px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal-img{clip-path:inset(0 0 100% 0); transition:clip-path 1.3s var(--ease-io)}
.reveal-img.in{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-img{opacity:1 !important; transform:none !important; clip-path:none !important; transition:none}
}

/* ================= Hero ================= */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  color:var(--cream); overflow:hidden;
  padding-top:calc(var(--hd-h) + 12px);
}
.hero__bg{position:absolute; inset:0; z-index:0}
.hero__bg img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:heroZoom 14s var(--ease) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero__bg::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(20,16,11,.34) 0%, rgba(20,16,11,.05) 32%, rgba(20,16,11,.08) 60%, rgba(20,16,11,.62) 100%);
}
/* light caustics overlay (WebGL) — painted above the tint, below all text layers */
.caustics{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:3; pointer-events:none;
  mix-blend-mode:screen; opacity:.66;
}
.phead__bg .caustics{opacity:.5}
.hero__inner{position:relative; z-index:2; width:100%; padding-bottom:clamp(56px,8vw,104px)}
.hero__eyebrow{color:var(--amber-soft); margin-bottom:1.6em}
.hero__eyebrow::before{background:var(--amber-soft)}
.hero__title{
  font-family:var(--f-mincho); font-weight:500;
  font-size:clamp(44px,8.6vw,124px); line-height:1.08; letter-spacing:.05em;
  text-shadow:0 2px 40px rgba(20,16,11,.35);
}
.hero__title .en{
  display:block; font-family:var(--f-serif); font-weight:500;
  font-size:clamp(15px,1.8vw,22px); letter-spacing:.5em; text-transform:uppercase;
  color:rgba(251,248,242,.82); margin-top:1.8em; text-shadow:none;
}
.hero__sub{
  max-width:34em; margin-top:1.7em;
  font-family:var(--f-mincho); font-size:clamp(15px,1.7vw,18.5px);
  line-height:2.1; letter-spacing:.05em; color:rgba(251,248,242,.9);
}

/* ================= Section heading ================= */
.sec-head{margin-bottom:clamp(40px,5.5vw,76px)}
.sec-head .eyebrow{margin-bottom:1.5em}
.sec-head__title{
  font-family:var(--f-mincho); font-weight:500;
  font-size:clamp(28px,4.4vw,54px); line-height:1.28; letter-spacing:.045em;
}
.sec-head__title .en{
  display:block; font-family:var(--f-serif); font-weight:500;
  font-size:clamp(12px,1.2vw,15px); letter-spacing:.4em; text-transform:uppercase;
  color:var(--ink-dim); margin-top:1.3em;
}
.sec-head p{margin-top:1.6em; max-width:40em; color:var(--ink-soft)}
.sec-head.is-center{text-align:center}
.sec-head.is-center .eyebrow{justify-content:center}
.sec-head.is-center p{margin-inline:auto}

/* ================= Intro / statement ================= */
.statement__lead{
  font-family:var(--f-mincho); font-weight:500;
  font-size:clamp(21px,3vw,38px); line-height:1.7; letter-spacing:.05em;
}
.statement__lead .amber{color:var(--amber-deep)}
.statement__body{margin-top:2em; color:var(--ink-soft); max-width:38em}
.statement__body p+p{margin-top:1.3em}

/* ================= Craft process (signature) ================= */
.craft-step{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(30px,5vw,84px);
}
.craft-step + .craft-step{margin-top:clamp(64px,9vw,150px)}
.craft-step:nth-child(even) .craft-step__media{order:2}
.craft-step__media{position:relative; overflow:hidden; border-radius:var(--r)}
.craft-step__media img{width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform 1.6s var(--ease)}
.craft-step:hover .craft-step__media img{transform:scale(1.04)}
.craft-step__media.is-portrait img{aspect-ratio:4/5}
.craft-step__num{
  font-family:var(--f-serif); font-weight:600;
  font-size:clamp(46px,7vw,96px); line-height:1; color:var(--amber);
  letter-spacing:.02em; display:block; margin-bottom:.2em; opacity:.9;
}
.craft-step__num .slash{color:var(--ink-dim); font-size:.42em; letter-spacing:.1em; margin-left:.3em}
.craft-step__title{
  font-family:var(--f-mincho); font-weight:500;
  font-size:clamp(24px,3.2vw,40px); line-height:1.35; letter-spacing:.04em; margin-bottom:.9em;
}
.craft-step__pull{
  font-family:var(--f-mincho); font-weight:500; color:var(--amber-deep);
  font-size:clamp(16px,1.8vw,21px); line-height:1.9; letter-spacing:.05em;
  margin:1.1em 0; padding-left:1em; border-left:2px solid var(--amber);
}
.craft-step__body{color:var(--ink-soft); font-size:15px}
.dark .craft-step__body{color:rgba(251,248,242,.72)}
.dark .craft-step__title{color:var(--cream)}

/* ================= Products ================= */
.prod-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line)}
.prod-card{
  position:relative; background:var(--paper); overflow:hidden;
  display:block; aspect-ratio:4/3;
}
.prod-card img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease)}
.prod-card:hover img{transform:scale(1.05)}
.prod-card__body{
  position:absolute; inset:auto 0 0 0; padding:clamp(22px,3vw,38px);
  background:linear-gradient(0deg, rgba(20,16,11,.78) 0%, rgba(20,16,11,.15) 70%, transparent 100%);
  color:var(--cream);
}
.prod-card__jp{font-family:var(--f-mincho); font-weight:500; font-size:clamp(19px,2.3vw,26px); letter-spacing:.06em}
.prod-card__en{font-family:var(--f-serif); font-weight:600; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--amber-soft); margin-top:.5em; display:block}
.prod-card__desc{font-size:13.5px; color:rgba(251,248,242,.8); margin-top:.8em; line-height:1.85; max-width:26em}

/* generic card list (values / features) */
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line)}
.feature{background:var(--paper); padding:clamp(28px,3.4vw,48px)}
.paper-2 .feature{background:var(--paper-2)}
.feature__num{font-family:var(--f-serif); font-weight:600; color:var(--amber); letter-spacing:.16em; font-size:14px}
.feature__title{font-family:var(--f-mincho); font-weight:500; font-size:clamp(19px,2vw,24px); margin:1em 0 .7em; letter-spacing:.04em; line-height:1.5}
.feature__body{color:var(--ink-soft); font-size:14.5px}

/* ================= Split feature (image + text) ================= */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,80px); align-items:center}
.split.rev .split__media{order:2}
.split__media{overflow:hidden; border-radius:var(--r)}
.split__media img{width:100%; aspect-ratio:3/2; object-fit:cover}
.split__media.is-tall img{aspect-ratio:4/5}
.split__body .display{font-size:clamp(25px,3.6vw,44px); line-height:1.3; margin-bottom:.7em}

/* ================= List (usage / notes) ================= */
.tick-list{list-style:none; padding:0; margin:1.5em 0 0; display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line)}
.tick-list li{
  background:var(--paper); padding:1.15em 0 1.15em 2.4em; position:relative;
  color:var(--ink-soft); font-size:15px; padding-inline-end:1em;
}
.paper-2 .tick-list li{background:var(--paper-2)}
.tick-list li::before{
  content:""; position:absolute; left:.7em; top:1.75em; width:9px; height:9px;
  border-radius:999px; background:var(--amber); box-shadow:0 0 0 4px var(--amber-glow);
}

/* ================= Quote / message ================= */
.quote{font-family:var(--f-mincho); font-weight:500; font-size:clamp(22px,3.4vw,40px); line-height:1.7; letter-spacing:.05em}
.dark .quote{color:var(--cream)}

/* ================= CTA band ================= */
.cta{position:relative; overflow:hidden; text-align:center; color:var(--cream)}
.cta__bg{position:absolute; inset:0; z-index:0}
.cta__bg img{width:100%; height:100%; object-fit:cover}
.cta__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,16,11,.66),rgba(20,16,11,.78))}
.cta__inner{position:relative; z-index:2; padding-block:clamp(80px,11vw,150px)}
.cta__title{font-family:var(--f-mincho); font-weight:500; font-size:clamp(28px,4.6vw,58px); line-height:1.3; letter-spacing:.05em}
.cta__actions{margin-top:2.6em; display:flex; gap:1em; justify-content:center; flex-wrap:wrap}

/* ================= Footer ================= */
.ft{background:var(--nocturne); color:rgba(251,248,242,.66); padding-top:clamp(64px,8vw,110px)}
.ft__top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(32px,4vw,60px); padding-bottom:clamp(48px,6vw,80px); border-bottom:1px solid rgba(251,248,242,.12)}
.ft__brand .wordmark{font-size:clamp(30px,4vw,46px); color:var(--cream); display:block}
.ft__tag{font-family:var(--f-mincho); margin-top:1.2em; color:rgba(251,248,242,.8); letter-spacing:.08em; font-size:15px}
.ft__addr{margin-top:1.8em; font-size:13.5px; line-height:2; letter-spacing:.04em}
.ft__col h4{font-family:var(--f-serif); font-weight:600; letter-spacing:.24em; text-transform:uppercase; font-size:12px; color:var(--amber-soft); margin:0 0 1.4em}
.ft__col ul{list-style:none; margin:0; padding:0; display:grid; gap:.85em}
.ft__col a{font-size:14px; letter-spacing:.05em; color:rgba(251,248,242,.72); transition:color .3s}
.ft__col a:hover{color:var(--amber-soft)}
.ft__bottom{display:flex; justify-content:space-between; align-items:center; gap:1em; flex-wrap:wrap; padding-block:28px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-family:var(--f-serif); font-weight:600}
.ft__bottom .en{color:rgba(251,248,242,.4)}

/* ================= Page hero (sub pages) ================= */
.phead{position:relative; padding-top:calc(var(--hd-h) + clamp(56px,9vw,120px)); padding-bottom:clamp(44px,6vw,84px); overflow:hidden}
.phead.has-img{color:var(--cream); min-height:56svh; display:flex; align-items:flex-end}
.phead__bg{position:absolute; inset:0; z-index:0}
.phead__bg img{width:100%; height:100%; object-fit:cover}
.phead__bg::after{content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(180deg,rgba(20,16,11,.34),rgba(20,16,11,.58))}
.phead__inner{position:relative; z-index:2; width:100%}
.phead__title{font-family:var(--f-mincho); font-weight:500; font-size:clamp(34px,6vw,78px); line-height:1.14; letter-spacing:.05em}
.phead__title .en{display:block; font-family:var(--f-serif); font-weight:600; font-size:clamp(11px,1.1vw,14px); letter-spacing:.44em; text-transform:uppercase; color:var(--amber-deep); margin-bottom:1.4em}
.phead.has-img .phead__title .en{color:var(--amber-soft)}
.phead__sub{margin-top:1.4em; max-width:38em; color:var(--ink-soft)}
.phead.has-img .phead__sub{color:rgba(251,248,242,.85)}

/* breadcrumb */
.crumb{font-family:var(--f-serif); font-weight:600; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:1.8em; display:flex; gap:.7em; align-items:center}
.phead.has-img .crumb{color:rgba(251,248,242,.7)}
.crumb a:hover{color:var(--amber-deep)}

/* ================= Forms ================= */
.form{display:grid; gap:1.5em}
.field{display:grid; gap:.6em}
.field label{font-family:var(--f-serif); font-weight:600; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim)}
.field label .req{color:var(--amber-deep)}
.field input,.field textarea,.field select{
  font-family:var(--f-sans); font-size:15px; color:var(--ink);
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:.9em 1em; transition:border-color .3s, box-shadow .3s;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-glow);
}
.field textarea{min-height:150px; resize:vertical}
.form__note{font-size:12.5px; color:var(--ink-dim); line-height:1.8}

/* ================= Company table ================= */
.spec{border-top:1px solid var(--line)}
.spec__row{display:grid; grid-template-columns:230px 1fr; gap:1.5em; padding:1.35em 0; border-bottom:1px solid var(--line)}
.spec__row dt{font-family:var(--f-mincho); font-weight:500; letter-spacing:.06em; color:var(--ink)}
.spec__row dd{margin:0; color:var(--ink-soft); font-size:15px}

/* ================= Misc ================= */
.divider-word{display:flex; align-items:center; gap:1.4em; color:var(--ink-dim)}
.divider-word::before,.divider-word::after{content:""; flex:1; height:1px; background:var(--line)}
.divider-word span{font-family:var(--f-serif); font-weight:600; letter-spacing:.34em; text-transform:uppercase; font-size:12px}

.note-band{background:var(--paper-2); border-radius:var(--r); padding:clamp(20px,2.6vw,32px) clamp(22px,3vw,40px); font-size:14px; color:var(--ink-soft); line-height:1.9}
.note-band strong{color:var(--ink); font-weight:600}

.two-col-list{columns:2; column-gap:clamp(30px,5vw,70px)}
.two-col-list > *{break-inside:avoid}

/* ================= Loader ================= */
.loader{
  position:fixed; inset:0; z-index:200; background:var(--paper);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition:opacity .9s var(--ease), visibility 0s .9s;
}
.loader.done{opacity:0; visibility:hidden}
.loader__mark{
  font-family:var(--f-serif); font-weight:600; font-size:clamp(34px,6vw,60px);
  letter-spacing:.5em; text-transform:uppercase; color:var(--ink);
  padding-left:.5em; position:relative;
  -webkit-background-clip:text; background-clip:text;
  background-image:linear-gradient(100deg, var(--ink) 0%, var(--ink) 38%, var(--amber-soft) 50%, var(--ink) 62%, var(--ink) 100%);
  background-size:250% 100%; -webkit-text-fill-color:transparent;
  animation:loaderShine 2.2s var(--ease) infinite;
}
@keyframes loaderShine{0%{background-position:130% 0}100%{background-position:-130% 0}}
.loader__bar{margin-top:26px; width:min(180px,40vw); height:1px; background:var(--line); position:relative; overflow:hidden}
.loader__bar::after{content:""; position:absolute; inset:0; width:40%; background:var(--amber); animation:loaderBar 1.3s var(--ease-io) infinite}
@keyframes loaderBar{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.loader__cap{margin-top:16px; font-family:var(--f-serif); font-weight:600; letter-spacing:.34em; text-transform:uppercase; font-size:10.5px; color:var(--ink-dim)}
.no-js .loader{display:none}

/* ================= Responsive ================= */
@media (max-width:1080px){
  .hd__nav{display:none}
  .burger{display:block}
  .ft__top{grid-template-columns:1fr 1fr}
  .ft__brand{grid-column:1 / -1}
}
@media (max-width:920px){
  :root{--hd-h:70px}
  .feature-grid{grid-template-columns:1fr; }
  .craft-step{grid-template-columns:1fr; gap:26px}
  .craft-step:nth-child(even) .craft-step__media{order:0}
  .craft-step__media img,.craft-step__media.is-portrait img{aspect-ratio:16/10}
  .split{grid-template-columns:1fr; gap:26px}
  .split.rev .split__media{order:0}
  .split__media.is-tall img{aspect-ratio:16/11}
  .spec__row{grid-template-columns:150px 1fr; gap:1em}
}
@media (max-width:680px){
  body{font-size:15px}
  .prod-grid{grid-template-columns:1fr}
  .two-col-list{columns:1}
  .ft__top{grid-template-columns:1fr; gap:34px}
  .hero{min-height:92svh}
  .spec__row{grid-template-columns:1fr; gap:.35em; padding:1.1em 0}
  .spec__row dt{font-size:14px; color:var(--ink-dim)}
  .cta__actions{flex-direction:column; align-items:stretch}
  .cta__actions .btn{justify-content:center}
}
@media (max-width:430px){
  :root{--pad:22px}
  .hero__title{font-size:clamp(38px,11vw,54px)}
  .drawer__link{font-size:26px}
}