/* ==========================================================================
   Buy Hub Weld — Welding Consumables & Copper Stock
   Single stylesheet, no build step, no framework.
   Sections: 1 tokens · 2 reset · 3 type · 4 buttons · 5 header · 6 hero
             7 ticker · 8 caps · 9 catalogue · 10 specs
             11 process · 12 band · 13 quotes · 14 faq · 15 cta/form
             16 footer · 17 motion/reveal · 18 responsive
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* copper ramp — light sheen (100) → deep bronze (800); brand at 500.
     Kept monotonic so copper fills still read as polished metal; text
     accents point at 600/700 for contrast on the warm ground. */
  --cu-100:#F7DFC6;
  --cu-200:#F0BE93;
  --cu-300:#DA9A5E;
  --cu-400:#C9853F;
  --cu-500:#B87333;   /* brand copper */
  --cu-600:#8F5019;
  --cu-700:#6B3A11;
  --cu-800:#43220C;

  /* warm ivory ramp — 050 is the body (brightest); 000 the deepest sand
     (footer). 100–300 are progressively warmer card/section grounds. */
  --ink-000:#EBDFCB;
  --ink-050:#FBF6EF;
  --ink-100:#F5ECDD;
  --ink-150:#F0E5D3;
  --ink-200:#EADFC9;
  --ink-300:#E2D3B9;
  --ink-400:#D2BE9C;
  --ink-500:#6E5E47;

  --fg:#2A1D11;       /* espresso — primary ink */
  --fg-dim:#5C4E3E;   /* warm secondary */
  --fg-mute:#6E5E47;  /* warm tertiary — kept ≥4.5:1 on the sand grounds */

  --ok:#256E4E;
  --hot:#C5522A;

  --line:rgba(58,38,16,.12);
  --line-2:rgba(58,38,16,.20);
  --glass:rgba(140,92,44,.05);

  /* type */
  --f-disp:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* rhythm */
  --wrap:1240px;
  --gut:clamp(20px,4.4vw,52px);
  --sec-y:clamp(72px,10vw,148px);
  --r-sm:8px;
  --r:14px;
  --r-lg:22px;

  /* motion */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --t:.5s;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink-050);
  color:var(--fg);
  font:400 clamp(15px,1.02vw,16.5px)/1.68 var(--f-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
img,svg,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}

:focus-visible{
  outline:2px solid var(--cu-300);
  outline-offset:3px;
  border-radius:3px;
}
::selection{background:var(--cu-500);color:#fff}

.skip{
  position:fixed;left:14px;top:-70px;z-index:200;
  padding:11px 18px;border-radius:0 0 var(--r-sm) var(--r-sm);
  background:var(--cu-500);color:#fff;font-weight:600;
  transition:top .3s var(--e-out);
}
.skip:focus{top:0}

/* film grain — adds paper tooth to the flat ivory field */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* scroll progress bar */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none}
.progress i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--cu-700),var(--cu-400),var(--cu-200));
  box-shadow:0 0 14px rgba(184,115,51,.7);
}

.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}

/* ---------- 3. TYPE ---------- */
.h-display{
  font-family:var(--f-disp);
  font-size:clamp(2.55rem,7.1vw,5.5rem);
  font-weight:800;
  line-height:.97;
  letter-spacing:-.033em;
  font-stretch:105%;
  margin:0 0 clamp(18px,2.4vw,28px);
  text-wrap:balance;
}
.h2{
  font-family:var(--f-disp);
  font-size:clamp(1.85rem,3.9vw,3.05rem);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.024em;
  text-wrap:balance;
}
h3{font-family:var(--f-disp);font-weight:700;letter-spacing:-.012em}
.mono{font-family:var(--f-mono);font-size:.775rem;letter-spacing:.045em}
.dim{color:var(--fg-mute)}
.ok{color:var(--ok)}

/* Section label: a short copper rule then small caps — no pill, no border,
   so it reads as a typographic kicker rather than a UI chip. */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--f-mono);font-size:.715rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--cu-600);
  margin:0 0 16px;
}
.eyebrow::before{
  content:"";flex:0 0 auto;width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cu-500),var(--cu-700));
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(184,115,51,.6)}
  70%{box-shadow:0 0 0 9px rgba(184,115,51,0)}
  100%{box-shadow:0 0 0 0 rgba(184,115,51,0)}
}

.lede{font-size:clamp(1.02rem,1.42vw,1.2rem);color:var(--fg-dim);max-width:56ch;line-height:1.72}
.sub{color:var(--fg-dim);max-width:60ch;font-size:1.02rem;margin-top:14px}

.sec{padding:var(--sec-y) 0;position:relative;z-index:2}
.sec--alt{background:
  radial-gradient(1100px 460px at 50% -8%,rgba(184,115,51,.075),transparent 68%),
  var(--ink-100);
  border-block:1px solid var(--line);
}
.sechd{max-width:760px;margin-bottom:clamp(38px,5.4vw,66px)}
.sechd--row{
  max-width:none;display:grid;gap:22px clamp(30px,6vw,80px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end;
}
.sechd--left{max-width:420px;margin-bottom:0}

/* ---------- 4. BUTTONS ---------- */
.btn{
  --bg:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 24px;border-radius:100px;
  font-family:var(--f-body);font-weight:600;font-size:.925rem;letter-spacing:-.005em;
  border:1px solid var(--cu-500);
  color:var(--cu-700);
  background:var(--bg);
  overflow:hidden;isolation:isolate;
  transition:color .32s var(--e-out),border-color .32s var(--e-out),
             transform .32s var(--e-spring),box-shadow .32s var(--e-out);
  will-change:transform;
}
.btn svg{width:1.05em;height:1.05em;transition:transform .38s var(--e-out)}
/* liquid copper fill sweeps up from the base on hover */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--cu-500),var(--cu-700));
  transform:translateY(101%);
  transition:transform .46s var(--e-out);
}
.btn:hover{color:#FFF6EA;border-color:var(--cu-600);transform:translateY(-2px);
  box-shadow:0 12px 30px -12px rgba(184,115,51,.62)}
.btn:hover::before{transform:translateY(0)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(0) scale(.985)}

.btn--solid{background:linear-gradient(180deg,var(--cu-600),var(--cu-700));color:#FFF6EA;border-color:transparent;
  box-shadow:0 10px 26px -14px rgba(107,58,17,.85)}
.btn--solid::before{background:linear-gradient(180deg,var(--cu-500),var(--cu-600))}
.btn--solid:hover{color:#FFF6EA}

.btn--ghost{border-color:var(--line-2);color:var(--fg)}
.btn--ghost::before{background:linear-gradient(180deg,rgba(184,115,51,.14),rgba(184,115,51,.05))}
.btn--ghost:hover{color:var(--fg);border-color:var(--cu-400)}

/* outline button that sits on the hero photograph */
.btn--ondark{border-color:rgba(255,255,255,.42);color:#FFF8EE}
.btn--ondark::before{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,248,238,.9))}
.btn--ondark:hover{color:#2A1D11;border-color:#FFF8EE}

.btn--sm{padding:9px 17px;font-size:.83rem}
.btn--lg{padding:16px 32px;font-size:1rem}
.btn--full{width:100%}

.lnk{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--cu-600);font-weight:600;font-size:.87rem;
  transition:gap .3s var(--e-out),color .3s var(--e-out);
}
.lnk svg{width:15px;height:15px}
.lnk:hover{gap:11px;color:var(--cu-500)}

/* ---------- 5. HEADER ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:transform .45s var(--e-out),background .4s ease,
             border-color .4s ease,backdrop-filter .4s ease;
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(251,246,239,.86);
  backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  border-bottom-color:var(--line);
}
.hdr.is-hidden{transform:translateY(-102%)}
.hdr__in{display:flex;align-items:center;gap:26px;height:74px}


.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand__mark{width:34px;height:34px;flex-shrink:0;transition:transform .6s var(--e-spring)}
.brand:hover .brand__mark{transform:rotate(-90deg) scale(1.06)}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__txt b{font-family:var(--f-disp);font-size:1.08rem;font-weight:800;letter-spacing:-.022em}
.brand__txt b em{font-style:normal;color:var(--cu-600)}
.brand__txt i{font-family:var(--f-mono);font-style:normal;font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-mute);margin-top:4px}

.nav{display:flex;gap:4px;margin-left:auto}
.nav a{
  position:relative;padding:9px 14px;border-radius:100px;
  font-size:.9rem;color:var(--fg-dim);
  transition:color .28s ease,background .28s ease;
}
.nav a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px;
  background:var(--cu-400);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .38s var(--e-out);
}
.nav a:hover,.nav a.is-active{color:var(--fg);background:rgba(140,92,44,.08)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1);transform-origin:0 50%}

.hdr__act{display:flex;align-items:center;gap:12px;margin-left:auto}
.nav+.hdr__act{margin-left:0}

.tel{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:.78rem;
  color:var(--fg-dim);transition:color .28s ease}
.tel svg{width:14px;height:14px;flex-shrink:0;color:var(--cu-600)}
.tel:hover{color:var(--cu-700)}
.tel--lg{font-size:.92rem;color:var(--fg)}
.tel--lg svg{width:17px;height:17px}

.burger{display:none;width:42px;height:42px;border:1px solid var(--line-2);border-radius:11px;
  position:relative;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:17px;height:1.6px;background:var(--fg);border-radius:2px;
  transition:transform .38s var(--e-out),opacity .25s ease}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg)}

/* ---------- 6. HERO ---------- */
/* Warm sunset photograph, bright on both sides. Rather than muddying it with
   a heavy dark scrim, the left third is washed to ivory so espresso type sits
   on the page ground and the image stays lit where the product is. Measured:
   ~11:1 for the headline, ~5.4:1 for the lede. */
.hero{
  position:relative;padding:clamp(128px,15vw,178px) 0 clamp(78px,9vw,116px);
  overflow:hidden;isolation:isolate;
  background:var(--ink-050);
}
.hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero__bg img{
  position:absolute;top:-9%;left:0;width:100%;height:118%;object-fit:cover;
  object-position:70% 50%;will-change:transform;
}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(251,246,239,.97) 0%,
      rgba(251,246,239,.94) 26%,
      rgba(251,246,239,.86) 40%,
      rgba(251,246,239,.42) 60%,
      rgba(251,246,239,.10) 78%,
      rgba(251,246,239,0) 100%),
    linear-gradient(180deg,rgba(251,246,239,.5) 0%,transparent 22%,transparent 68%,rgba(251,246,239,.85) 100%);
}

.hero__in{position:relative;display:block}
.hero__copy{max-width:36rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:clamp(26px,3.4vw,38px)}

.hero .h-display{margin-bottom:clamp(20px,2.4vw,26px)}
.hero .lede{color:var(--fg-dim)}

.hero__stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 20px;
  margin-top:clamp(38px,5vw,56px);padding-top:26px;
  border-top:1px solid var(--line-2);
  max-width:42rem;
}
.hero__stats dt{font-family:var(--f-mono);font-size:.665rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-mute);margin-bottom:7px}
.hero__stats dd{font-family:var(--f-disp);font-size:clamp(1.4rem,2.5vw,1.95rem);
  font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--fg)}
.hero__stats dd i{font-style:normal;font-size:.56em;color:var(--cu-600);margin-left:2px}

/* -- floating spec card -- */
.specard{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(168deg,#FFFDFA,var(--ink-100));
  border:1px solid var(--line-2);
  box-shadow:0 34px 80px -38px rgba(74,45,16,.42),inset 0 1px 0 rgba(255,255,255,.9);
  animation:bob 7.5s ease-in-out infinite;
  transform-style:preserve-3d;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
.specard::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(150deg,rgba(184,115,51,.55),transparent 42%,transparent 62%,rgba(184,115,51,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.specard__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px;border-bottom:1px solid var(--line)}
.specard__hd .mono{color:var(--fg-mute)}
.tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ok)}
.tag--live i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:blink 1.7s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.24}}

.specard__body{padding:22px 20px 6px;text-align:center}
.specard__kicker{color:var(--cu-600);display:block;margin-bottom:6px}
.specard__ttl{font-family:var(--f-disp);font-size:1.62rem;font-weight:800;letter-spacing:-.022em;
  line-height:1.08;margin-bottom:16px}

.specard__art{
  width:min(300px,90%);margin:0 auto 18px;border-radius:14px;overflow:hidden;
  background:var(--ink-100);border:1px solid var(--line);
}
.specard__art img{width:100%;height:auto;display:block;
  animation:artfloat 7s ease-in-out infinite}
@keyframes artfloat{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

.mini{font-size:.83rem;text-align:left}
.mini th{color:var(--fg-mute);font-weight:400;text-align:left;padding:8px 0;border-bottom:1px solid var(--line)}
.mini td{text-align:right;padding:8px 0;border-bottom:1px solid var(--line);color:var(--fg)}
.mini tr:last-child th,.mini tr:last-child td{border-bottom:0}

.specard__ft{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 20px;background:rgba(140,92,44,.07);border-top:1px solid var(--line)}
.specard__ft strong{display:block;font-family:var(--f-disp);font-size:1.4rem;font-weight:800;letter-spacing:-.02em}
.specard__ft strong em{font-style:normal;font-size:.5em;color:var(--fg-mute)}

.scrollcue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  color:var(--fg-mute);transition:color .3s ease;
}
.scrollcue .mono{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase}
.scrollcue i{display:block;width:1px;height:38px;background:linear-gradient(var(--cu-500),transparent);
  position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;top:-38px;left:0;width:1px;height:38px;
  background:linear-gradient(transparent,var(--cu-700));animation:cue 1.9s var(--e-io) infinite}
@keyframes cue{to{top:38px}}
.scrollcue:hover{color:var(--cu-700)}

/* ---------- 7. TICKER ---------- */
.ticker{
  padding:17px 0;border-block:1px solid var(--line);
  background:linear-gradient(90deg,var(--ink-150),var(--ink-100));
  overflow:hidden;position:relative;z-index:2;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.ticker__track{display:flex;width:max-content;animation:march 38s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__set{display:flex;align-items:center;gap:34px;padding-right:34px;flex-shrink:0}
.ticker__set span{font-family:var(--f-mono);font-size:.775rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-mute);white-space:nowrap}
.ticker__set span[aria-hidden]{color:var(--cu-600);font-size:.55rem}
@keyframes march{to{transform:translateX(-50%)}}

/* ---------- 8. CAPABILITIES ---------- */
.caps{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
.cap{
  position:relative;padding:30px 24px 26px;border-radius:var(--r);
  background:linear-gradient(168deg,var(--glass),transparent);
  border:1px solid var(--line);overflow:hidden;
  transition:border-color .4s ease,transform .4s var(--e-out),background .4s ease;
}
.cap::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--cu-400),transparent);
  transform:scaleX(0);transition:transform .55s var(--e-out);
}
.cap:hover{border-color:rgba(184,115,51,.36);transform:translateY(-5px);background:linear-gradient(168deg,rgba(184,115,51,.07),transparent)}
.cap:hover::after{transform:scaleX(1)}
.cap__ico{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;margin-bottom:18px;
  color:var(--cu-600);background:rgba(184,115,51,.11);border:1px solid rgba(184,115,51,.24);
  transition:transform .5s var(--e-spring),background .4s ease}
.cap__ico svg{width:25px;height:25px}
.cap:hover .cap__ico{transform:translateY(-3px) rotate(-6deg);background:rgba(184,115,51,.2)}
.cap h3{font-size:1.08rem;margin-bottom:9px}
.cap p{font-size:.9rem;color:var(--fg-dim);line-height:1.62}
.cap__n{position:absolute;top:18px;right:20px;color:var(--ink-500);font-size:.72rem;transition:color .4s ease}
.cap:hover .cap__n{color:var(--cu-600)}

/* ---------- 9. CATALOGUE / CATEGORY TILES ---------- */
/* The home page leads with four family tiles; the full grid, search and chips
   live on the per-category pages (category/*.html). */

.ctiles{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ctile{
  position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  border-radius:var(--r-lg);overflow:hidden;background:#FFFDFA;border:1px solid var(--line);
  transition:transform .45s var(--e-out),border-color .4s ease,box-shadow .4s ease;
}
.ctile:hover{transform:translateY(-5px);border-color:rgba(184,115,51,.4);
  box-shadow:0 26px 54px -30px rgba(74,45,16,.32)}
.ctile__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-100)}
.ctile__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--e-out)}
.ctile:hover .ctile__media img{transform:scale(1.05)}
.ctile__body{display:flex;flex-direction:column;justify-content:center;gap:9px;padding:26px 26px 24px}
.ctile__n{color:var(--cu-700);font-size:.66rem}
.ctile__ttl{font-family:var(--f-disp);font-size:clamp(1.25rem,1.9vw,1.5rem);font-weight:800;letter-spacing:-.02em}
.ctile__txt{color:var(--fg-dim);font-size:.9rem;line-height:1.6}
.ctile__eg{color:var(--fg-mute);font-size:.68rem;line-height:1.6}
.ctile__go{
  display:inline-flex;align-items:center;gap:7px;margin-top:7px;
  color:var(--cu-700);font-weight:600;font-size:.86rem;
  transition:gap .3s var(--e-out),color .3s ease;
}
.ctile__go svg{width:14px;height:14px}
.ctile:hover .ctile__go{gap:12px;color:var(--cu-500)}

.ctiles__note{margin-top:26px;text-align:center;color:var(--fg-mute);font-size:.9rem}
.ctiles__note a{color:var(--cu-700);text-decoration:underline}

/* category listing pages */
.catlinks{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
.catlinks a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;border-radius:var(--r);background:#FFFDFA;border:1px solid var(--line);
  font-family:var(--f-disp);font-weight:700;letter-spacing:-.012em;
  transition:border-color .3s ease,transform .3s var(--e-out);
}
.catlinks a::after{content:"";width:8px;height:8px;border-top:1.6px solid var(--cu-600);
  border-right:1.6px solid var(--cu-600);transform:rotate(45deg);flex-shrink:0}
.catlinks a:hover{border-color:rgba(184,115,51,.4);transform:translateX(4px)}

/* full grid + search on category pages */
.catbar{display:grid;gap:18px;margin-bottom:26px}
.catbar .filters{margin-bottom:0}

.search{position:relative;display:flex;align-items:center;max-width:520px;width:100%}
.search__ico{
  position:absolute;left:16px;width:17px;height:17px;pointer-events:none;
  color:var(--fg-mute);transition:color .3s ease;
}
.search__in{
  width:100%;padding:13px 44px 13px 44px;border-radius:100px;
  background:#FFFDFA;border:1px solid var(--line-2);color:var(--fg);font-size:.94rem;
  appearance:none;
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
.search__in::placeholder{color:var(--fg-mute)}
.search__in::-webkit-search-cancel-button{display:none}
.search__in:focus{
  outline:none;border-color:var(--cu-400);background:#fff;
  box-shadow:0 0 0 3px rgba(184,115,51,.17);
}
.search:focus-within .search__ico{color:var(--cu-600)}
.search__x{
  position:absolute;right:9px;display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;color:var(--fg-mute);
  transition:background .25s ease,color .25s ease;
}
.search__x svg{width:14px;height:14px}
.search__x:hover{background:rgba(140,92,44,.1);color:var(--cu-700)}
.search__x[hidden]{display:none}

.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.chip-btn{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:9px 17px;border-radius:100px;border:1px solid var(--line-2);
  background:var(--ink-150);color:var(--fg-dim);font-size:.88rem;font-weight:500;
  transition:border-color .3s ease,color .3s ease,background .3s ease,transform .3s var(--e-out);
}
.chip-btn i{font-style:normal;font-size:.66rem;letter-spacing:.05em;color:var(--fg-mute);
  background:var(--ink-300);border-radius:100px;padding:2px 8px;transition:background .3s ease,color .3s ease}
.chip-btn:hover{border-color:var(--cu-500);color:var(--fg);transform:translateY(-2px)}
.chip-btn.is-on{background:linear-gradient(120deg,var(--cu-600),var(--cu-700));
  border-color:transparent;color:#FFF6EA;font-weight:600;
  box-shadow:0 10px 24px -12px rgba(107,58,17,.7)}
.chip-btn.is-on i{background:rgba(0,0,0,.22);color:#FFEEDB}

.pcount{color:var(--fg-mute);margin-bottom:30px}

.pgrid{display:grid;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr))}
.pgrid .pcard[hidden]{display:none}

/* product cards — used on the category listing pages */
.pcard{
  position:relative;display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;
  background:#FFFDFA;border:1px solid var(--line);
  transition:transform .45s var(--e-out),border-color .4s ease,box-shadow .4s ease;
}
.pcard:hover{transform:translateY(-5px);border-color:rgba(184,115,51,.4);
  box-shadow:0 22px 46px -28px rgba(74,45,16,.32)}
/* the title link covers the whole card, so anywhere is clickable while the
   accessible name still comes from the heading */
.pcard__link::after{content:"";position:absolute;inset:0;z-index:3}

.pcard__media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--ink-100)}
.pcard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--e-out)}
.pcard:hover .pcard__media img{transform:scale(1.05)}
.pcard__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(24,12,3,.62) 0%,rgba(24,12,3,.16) 34%,transparent 62%)}
.pcard__tag{
  position:absolute;left:12px;bottom:10px;z-index:2;
  padding:4px 10px;border-radius:100px;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:#FBF6EF;background:rgba(24,12,3,.62);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.pcard__badge{
  position:absolute;top:12px;left:12px;z-index:2;
  padding:4px 11px;border-radius:100px;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cu-100);background:rgba(24,12,3,.78);border:1px solid rgba(184,115,51,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

.pcard__body{padding:16px 17px 17px;display:flex;flex-direction:column;flex:1}
.pcard__ttl{font-size:1rem;letter-spacing:-.014em;line-height:1.28;margin-bottom:5px}
.pcard__link{color:inherit;transition:color .28s ease}
.pcard:hover .pcard__link{color:var(--cu-700)}
.pcard__grade{color:var(--cu-700);font-size:.68rem;margin-bottom:8px}
/* three lines keeps every card in a row the same height */
.pcard__txt{font-size:.845rem;color:var(--fg-dim);line-height:1.56;margin-bottom:14px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.pcard__cta{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;
  color:var(--cu-700);font-weight:600;font-size:.82rem;
  padding-top:13px;border-top:1px solid var(--line);
  transition:gap .3s var(--e-out),color .3s ease;
}
.pcard__cta svg{width:14px;height:14px}
.pcard:hover .pcard__cta{gap:12px;color:var(--cu-500)}

/* spec rows — product detail pages */
.pspec{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;margin-bottom:18px}
.pspec__r{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:9px 13px;background:var(--ink-150)}
.pspec__r dt{font-size:.78rem;color:var(--fg-mute);padding-top:2px}
.pspec__r dd{font-size:.78rem;color:var(--fg);text-align:right;line-height:1.5;word-break:break-word}

.pgrid__none{grid-column:1/-1;text-align:center;color:var(--fg-dim);padding:48px 0;
  border:1px dashed var(--line-2);border-radius:var(--r)}
.pgrid__none a{color:var(--cu-700);text-decoration:underline}

/* ---------- 10. SPECS / BLUEPRINT ---------- */
.specs__in{display:grid;gap:clamp(38px,6vw,80px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.docs{display:grid;gap:2px;margin:30px 0}
.docs__r{
  display:grid;grid-template-columns:auto 1fr;gap:3px 16px;align-items:baseline;
  padding:15px 2px;border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--e-out),border-color .35s ease;
}
.docs__r:hover{padding-left:10px;border-bottom-color:rgba(184,115,51,.4)}
.docs__n{grid-row:1/3;align-self:center;color:var(--cu-600);font-size:.8rem;transition:color .35s ease}
.docs__r:hover .docs__n{color:var(--cu-700)}
.docs__r b{font-weight:600;font-size:.95rem}
.docs__d{color:var(--fg-dim);font-size:.87rem;grid-column:2}

.blueprint{
  position:relative;padding:30px;border-radius:var(--r-lg);
  background:
    linear-gradient(rgba(184,115,51,.055) 1px,transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg,rgba(184,115,51,.055) 1px,transparent 1px) 0 0/26px 26px,
    linear-gradient(168deg,var(--ink-200),var(--ink-100));
  border:1px solid var(--line-2);
  color:var(--cu-700);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 26px 60px -38px rgba(74,45,16,.4);
}
.blueprint svg{width:100%;height:auto}
.blueprint text{font-family:var(--f-mono);font-size:11px;fill:currentColor;opacity:.82}
.blueprint figcaption{margin-top:16px;padding-top:14px;border-top:1px dashed rgba(184,115,51,.3);
  color:var(--fg-mute);font-size:.7rem;text-align:center}
/* self-drawing schematic lines */
.bp__ln path,.bp__ln circle{
  stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);
}
.blueprint.is-in .bp__ln path,.blueprint.is-in .bp__ln circle{
  animation:draw 1.5s var(--e-out) forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.blueprint .bp__tx{opacity:0}
.blueprint.is-in .bp__tx{animation:fadein .7s ease 1.05s forwards}
@keyframes fadein{to{opacity:1}}

/* ---------- 12. PROCESS ---------- */
/* The rail lives outside the <ol> — a <span> is not a valid child of a list. */
.steps-wrap{position:relative}
.steps{display:grid;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr))}
.steps__rail{position:absolute;left:0;right:0;top:26px;height:1px;background:var(--line);z-index:0}
.steps__rail i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--cu-700),var(--cu-500));transition:transform 1.1s var(--e-out)}
.step{position:relative;z-index:1;padding-top:66px}
.step__n{
  position:absolute;top:0;left:0;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--ink-150);border:1px solid var(--line-2);color:var(--cu-700);
  font-size:.85rem;transition:border-color .4s ease,transform .5s var(--e-spring),background .4s ease;
}
.step:hover .step__n{border-color:var(--cu-400);transform:scale(1.09);background:rgba(184,115,51,.14)}
.step h3{font-size:1.06rem;margin-bottom:9px}
.step p{font-size:.89rem;color:var(--fg-dim);line-height:1.62}

/* ---------- 13. NUMBERS BAND ---------- */
.band{
  padding:clamp(44px,6vw,68px) 0;position:relative;z-index:2;
  background:
    radial-gradient(760px 300px at 50% 50%,rgba(184,115,51,.14),transparent 70%),
    linear-gradient(180deg,var(--ink-100),var(--ink-050));
  border-block:1px solid var(--line);
}
.band__in{display:grid;gap:26px;grid-template-columns:repeat(4,minmax(0,1fr));text-align:center}
.band b{display:block;font-family:var(--f-disp);font-size:clamp(1.85rem,3.6vw,2.9rem);
  font-weight:800;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(180deg,var(--cu-500),var(--cu-700));
  -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:9px}
.band span{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--fg-mute)}

/* ---------- 14. TESTIMONIALS ---------- */
.quotes{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
.quote{
  position:relative;padding:30px 26px;border-radius:var(--r-lg);
  background:linear-gradient(172deg,var(--glass),transparent);border:1px solid var(--line);
  transition:transform .45s var(--e-out),border-color .45s ease;
}
.quote:hover{transform:translateY(-5px);border-color:rgba(184,115,51,.32)}
.quote__mk{width:29px;height:22px;color:var(--cu-600);margin-bottom:17px;opacity:.85}
.quote p{font-size:1rem;line-height:1.68;color:var(--fg);margin-bottom:20px}
.quote figcaption{display:flex;flex-direction:column;gap:3px;padding-top:16px;border-top:1px solid var(--line)}
.quote figcaption b{font-weight:600;font-size:.93rem}
.quote figcaption span{font-size:.79rem;color:var(--fg-mute)}

/* ---------- 15. FAQ ---------- */
.faq__in{display:grid;gap:clamp(34px,5vw,66px);grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:start}
.acc{display:grid;gap:9px}
.acc__item{border:1px solid var(--line);border-radius:var(--r);background:var(--glass);
  overflow:hidden;transition:border-color .38s ease,background .38s ease}
.acc__item.is-open{border-color:rgba(184,115,51,.4);background:rgba(184,115,51,.05)}
.acc__item h3{margin:0;font-size:1rem}
.acc__item button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 22px;text-align:left;font:inherit;font-weight:600;color:var(--fg);
  transition:color .3s ease;
}
.acc__item button:hover{color:var(--cu-700)}
.acc__item button i{position:relative;flex-shrink:0;width:16px;height:16px}
.acc__item button i::before,.acc__item button i::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--cu-600);border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .42s var(--e-out),opacity .3s ease;
}
.acc__item button i::before{width:14px;height:1.7px}
.acc__item button i::after{width:1.7px;height:14px}
.acc__item.is-open button i::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.acc__p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .48s var(--e-out)}
.acc__item.is-open .acc__p{grid-template-rows:1fr}
.acc__p>div{overflow:hidden}
.acc__p p{padding:0 22px 21px;color:var(--fg-dim);font-size:.93rem;line-height:1.7;max-width:64ch}

/* ---------- 16. CTA / FORM ---------- */
.cta{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--ink-100),var(--ink-050))}
.cta__glow{
  position:absolute;left:50%;top:-30%;width:900px;height:900px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(184,115,51,.19),transparent 62%);
  filter:blur(40px);pointer-events:none;animation:breathe 11s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.65;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.13)}}
.cta__in{position:relative;display:grid;gap:clamp(38px,5vw,72px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.cta__pts{display:grid;gap:13px;margin:28px 0}
.cta__pts>div{display:flex;align-items:flex-start;gap:12px;font-size:.94rem;color:var(--fg-dim)}
.cta__pts i{flex-shrink:0;width:19px;height:19px;border-radius:50%;margin-top:2px;
  background:rgba(184,115,51,.16);border:1px solid rgba(184,115,51,.4);position:relative}
.cta__pts i::after{content:"";position:absolute;left:5.5px;top:7px;width:7px;height:4px;
  border-left:1.6px solid var(--cu-700);border-bottom:1.6px solid var(--cu-700);transform:rotate(-45deg)}
.cta__alt{display:flex;flex-wrap:wrap;gap:12px 26px;padding-top:24px;border-top:1px solid var(--line)}

.form{
  padding:clamp(24px,3vw,32px);border-radius:var(--r-lg);
  background:linear-gradient(168deg,#FFFDFA,var(--ink-100));
  border:1px solid var(--line-2);
  box-shadow:0 34px 80px -40px rgba(74,45,16,.4),inset 0 1px 0 rgba(255,255,255,.9);
}
.form__hd{color:var(--cu-700);padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--line);
  text-transform:uppercase;letter-spacing:.15em;font-size:.68rem}
.f2{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.fld{display:block;margin-bottom:14px}
.fld>span{display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--fg-mute);margin-bottom:7px}
.fld>span i{color:var(--cu-600);font-style:normal}
.fld input,.fld select,.fld textarea{
  width:100%;padding:12px 14px;border-radius:10px;
  background:#FFFDFA;border:1px solid var(--line-2);color:var(--fg);font-size:.93rem;
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
.fld textarea{resize:vertical;min-height:96px;font-family:inherit}
.fld select{
  appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23B87333' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:11px;
}
.fld select option{background:var(--ink-200);color:var(--fg)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-500)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--cu-400);background:#fff;
  box-shadow:0 0 0 3px rgba(184,115,51,.17);
}
.fld.is-bad input,.fld.is-bad select,.fld.is-bad textarea{border-color:#B23A22;box-shadow:0 0 0 3px rgba(178,58,34,.13)}
.err{display:block;font-style:normal;font-size:.76rem;color:#B23A22;margin-top:6px;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .3s ease}
.fld.is-bad .err{max-height:44px;opacity:1}

.chk{display:flex;align-items:center;gap:11px;margin:6px 0 20px;cursor:pointer;font-size:.89rem;color:var(--fg-dim)}
.chk input{position:absolute;opacity:0;width:0;height:0}
.chk i{flex-shrink:0;width:19px;height:19px;border-radius:6px;border:1px solid var(--line-2);
  background:#FFFDFA;position:relative;transition:background .28s ease,border-color .28s ease}
.chk i::after{content:"";position:absolute;left:5.5px;top:4.5px;width:6px;height:10px;
  border-right:2px solid #FFF6EA;border-bottom:2px solid #FFF6EA;transform:rotate(45deg) scale(0);
  transition:transform .28s var(--e-spring)}
.chk input:checked+i{background:var(--cu-600);border-color:var(--cu-600)}
.chk input:checked+i::after{transform:rotate(45deg) scale(1)}
.chk input:focus-visible+i{outline:2px solid var(--cu-300);outline-offset:3px}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__note{font-size:.76rem;color:var(--fg-mute);text-align:center;margin-top:14px}
.form__msg{margin-top:14px;padding:0 14px;border-radius:10px;font-size:.88rem;text-align:center;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease,opacity .4s ease,padding .4s ease}
.form__msg.is-on{max-height:120px;opacity:1;padding:13px 14px}
.form__msg.is-ok{background:rgba(37,110,78,.09);border:1px solid rgba(37,110,78,.3);color:var(--ok)}
.form__msg.is-bad{background:rgba(178,58,34,.08);border:1px solid rgba(178,58,34,.3);color:#B23A22}

/* ---------- 17. FOOTER ---------- */
.ft{background:var(--ink-000);border-top:1px solid var(--line);padding-top:clamp(50px,6vw,76px);position:relative;z-index:2}
.ft__in{display:grid;gap:36px;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));
  padding-bottom:clamp(36px,4vw,52px)}
.ft__brand p{color:var(--fg-mute);font-size:.88rem;margin-top:16px;max-width:38ch;line-height:1.68}
.ft__addr{font-size:.74rem!important;line-height:1.9;color:var(--ink-500)!important}
.ft__nav{display:flex;flex-direction:column;gap:11px}
.ft__nav h3{font-family:var(--f-mono);font-size:.68rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cu-700);margin-bottom:5px}
.ft__nav a{font-size:.89rem;color:var(--fg-dim);width:fit-content;
  transition:color .28s ease,transform .28s var(--e-out)}
.ft__nav a:hover{color:var(--cu-700);transform:translateX(4px)}
.ft__btn{margin-top:6px}
.ft__btn:hover{transform:translateY(-2px)}
.ft__base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 0;border-top:1px solid var(--line);color:var(--ink-500)}
.ft__legal{display:flex;gap:20px}
.ft__legal a{transition:color .28s ease}
.ft__legal a:hover{color:var(--cu-700)}

.totop{
  position:fixed;right:22px;bottom:22px;z-index:90;
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:rgba(184,115,51,.14);border:1px solid rgba(184,115,51,.44);
  color:var(--cu-700);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.86);
  transition:opacity .4s ease,transform .4s var(--e-spring),visibility .4s,background .3s ease;
}
.totop svg{width:19px;height:19px}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--cu-500);color:#fff}

/* ---------- 18. UTILITIES ---------- */

/* ---------- 19. MOTION / REVEAL ---------- */
/* Elements start hidden only when JS is confirmed present, so a JS failure
   or an old browser still shows every word. */
.js [data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .82s var(--e-out),transform .82s var(--e-out);
  transition-delay:calc(var(--d,0) * 88ms);
}
.js [data-reveal].is-in{opacity:1;transform:none}

/* kinetic headline: each word rises and un-blurs in sequence */
.kinetic .w{display:inline-block;overflow:hidden;vertical-align:top}
.kinetic .w>span{
  display:inline-block;
  transform:translateY(112%) rotate(4deg);
  opacity:0;filter:blur(7px);
  transition:transform .96s var(--e-out),opacity .8s ease,filter .8s ease;
  transition-delay:calc(var(--i,0) * 62ms);
}
.kinetic.is-in .w>span{transform:none;opacity:1;filter:blur(0)}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .js [data-reveal]{opacity:1!important;transform:none!important}
  .kinetic .w>span{opacity:1!important;transform:none!important;filter:none!important}
  .ticker__track,.cta__glow{animation:none!important}
  .blueprint .bp__ln path,.blueprint .bp__ln circle{stroke-dashoffset:0!important}
  .blueprint .bp__tx{opacity:1!important}
}

/* ---------- 20. RESPONSIVE ---------- */
@media (max-width:1080px){
  .caps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ctiles{grid-template-columns:1fr}
  .quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px}
  .steps__rail{display:none}
  .ft__in{grid-template-columns:1fr 1fr;gap:32px}
  .ft__brand{grid-column:1/-1}
}

@media (max-width:900px){
  .specs__in,.cta__in,.faq__in,.sechd--row{grid-template-columns:1fr}
  .sechd--left{max-width:none}
  .blueprint{order:-1;max-width:480px;margin-inline:auto}
  .band__in{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .scrollcue{display:none}
  .hero__bg img{object-position:64% 50%}
  .hero__scrim{
    background:
      linear-gradient(90deg,rgba(251,246,239,.97) 0%,rgba(251,246,239,.93) 46%,rgba(251,246,239,.74) 72%,rgba(251,246,239,.5) 100%),
      linear-gradient(180deg,rgba(251,246,239,.6) 0%,transparent 24%,transparent 58%,rgba(251,246,239,.92) 100%);
  }

  /* mobile drawer */
  .nav{
    position:fixed;inset:74px 0 auto;flex-direction:column;gap:0;margin:0;
    padding:14px var(--gut) 26px;
    background:rgba(251,246,239,.97);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    clip-path:inset(0 0 100% 0);
    /* visibility keeps clipped links out of the tab order */
    visibility:hidden;
    transition:clip-path .52s var(--e-out),visibility .52s;
  }
  .nav.is-open{clip-path:inset(0 0 0 0);visibility:visible}
  .nav a{padding:15px 4px;border-bottom:1px solid var(--line);border-radius:0;font-size:1.02rem;
    opacity:0;transform:translateY(-12px);transition:opacity .4s ease,transform .4s var(--e-out)}
  .nav.is-open a{opacity:1;transform:none}
  .nav.is-open a:nth-child(1){transition-delay:.08s}
  .nav.is-open a:nth-child(2){transition-delay:.14s}
  .nav.is-open a:nth-child(3){transition-delay:.2s}
  .nav.is-open a:nth-child(4){transition-delay:.26s}
  .nav.is-open a:nth-child(5){transition-delay:.32s}
  .nav a::after{display:none}
  .burger{display:flex}
  .hdr:not(.is-stuck) .nav.is-open{background:rgba(251,246,239,.98)}
}

@media (max-width:680px){
  .caps,.quotes{grid-template-columns:1fr}
  .ctile{grid-template-columns:1fr}
  .ctile__media{aspect-ratio:16/9}
  .catlinks{grid-template-columns:1fr}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .hero__stats{grid-template-columns:1fr 1fr;gap:20px}
  .f2{grid-template-columns:1fr;gap:0}
  .tel span{display:none}
  .hdr__in{height:66px;gap:12px}
  .nav{inset-block-start:66px}
  .ft__in{grid-template-columns:1fr}
  .ft__base{flex-direction:column;align-items:flex-start;gap:12px}
  .steps{grid-template-columns:1fr}
  .cta__alt{flex-direction:column;gap:12px}
}

@media (max-width:420px){
  .pgrid{grid-template-columns:1fr}
  .band__in{grid-template-columns:1fr}
  .hero__cta .btn{width:100%}
}

/* ---------- 21. PRODUCT DETAIL PAGE ---------- */
/* Inner pages have no hero, so the fixed header needs clearance. */
.page main{padding-top:74px}
.page .sec:first-child{padding-top:clamp(38px,5vw,58px)}

.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;color:var(--fg-mute);margin-bottom:clamp(26px,3.4vw,40px)}
.crumb a{color:var(--cu-700);transition:color .25s ease}
.crumb a:hover{color:var(--cu-500);text-decoration:underline}
.crumb span[aria-current]{color:var(--fg-dim)}

.prod__in{
  display:grid;gap:clamp(30px,4.4vw,62px);
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:start;
}
.prod__shot{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--ink-100);border:1px solid var(--line);
  box-shadow:0 30px 66px -38px rgba(74,45,16,.4);
}
.prod__shot img{width:100%;height:auto;display:block}

.prod__ttl{margin:0 0 14px}
.prod__lede{margin-bottom:clamp(22px,2.8vw,30px);max-width:52ch}
.prod__spec{margin-bottom:clamp(24px,3vw,32px)}
.prod .pspec__r{grid-template-columns:132px 1fr}

.prod__cta{display:flex;flex-wrap:wrap;gap:13px}
.prod__note{color:var(--fg-mute);margin-top:16px}

.prod__detail{
  display:grid;gap:clamp(26px,3.4vw,44px);
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(52px,7vw,88px);padding-top:clamp(38px,4.6vw,56px);
  border-top:1px solid var(--line);
}
.prod__h3{font-family:var(--f-disp);font-size:1.1rem;font-weight:700;letter-spacing:-.014em;margin-bottom:12px}
.prod__block p{color:var(--fg-dim);font-size:.93rem;line-height:1.72;margin-bottom:12px;max-width:46ch}
.prod__block p:last-child{margin-bottom:0}

/* related items */
.rels{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
.rel{
  display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(172deg,#FFFDFA,var(--ink-100));border:1px solid var(--line);
  transition:transform .45s var(--e-out),border-color .4s ease,box-shadow .4s ease;
}
.rel:hover{transform:translateY(-5px);border-color:rgba(184,115,51,.42);
  box-shadow:0 24px 50px -30px rgba(74,45,16,.34)}
.rel__media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--ink-100)}
.rel__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--e-out)}
.rel:hover .rel__media img{transform:scale(1.05)}
.rel__body{display:flex;flex-direction:column;gap:5px;padding:16px 18px 18px}
.rel__ttl{font-family:var(--f-disp);font-weight:700;font-size:1rem;letter-spacing:-.012em;color:var(--fg)}
.rel__meta{color:var(--fg-mute)}

@media (max-width:900px){
  .prod__in{grid-template-columns:1fr}
  .prod__detail{grid-template-columns:1fr;gap:28px}
  .rels{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .rels{grid-template-columns:1fr}
  .prod__cta .btn{width:100%}
}

/* ---------- PRINT ---------- */
@media print{
  .hdr,.totop,.scrollcue,.ticker,.grain,.progress,.hero__bg,.cta__glow{display:none!important}
  body{background:#fff;color:#000}
  .sec{padding:20px 0}
  a{color:#000;text-decoration:underline}
}