/* ==========================================================================
   KNS Solutions Inc. — homepage
   GT Studios base layer (Design Hub §2) + the KNS design-DNA brief:
   full-width editorial sections, asymmetric splits on one left grid,
   oversized display heads, flat surfaces, no cards, understated CTAs.
   Identity: accent = oxide amber; type = Libre Franklin + IBM Plex Mono.
   ========================================================================== */

:root{
  /* ---- neutrals — near-black, deliberately not tinted ---- */
  --bg:      #F7F7F8;
  --sand:    #ECECEE;
  --ink:     #17181C;
  --ink-2:   #52545C;
  --muted:   #8A8D95;
  --line:    rgba(23,24,28,.16);
  --line-2:  rgba(23,24,28,.09);
  --dark:    #17181C;
  --dark-2:  #101115;
  --on-dark: #EFEFF1;
  --on-dark-2: rgba(239,239,241,.66);
  --line-dark: rgba(239,239,241,.17);

  /* ---- identity — from the KNS brand sheet ---- */
  --accent:      #F59A3C;   /* naranja — CTAs and highlights only (6.8:1 on --dark) */
  --accent-deep: #3C5BA9;   /* azul profundo — the working accent on light (5.9:1) */
  --accent-lt:   #5FAFE8;   /* azul claro — sparingly, on dark only */
  --font-display: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-brand:   "Manrope", "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---- structure ---- */
  --wrap: 1280px;
  --wide: 1480px;
  --gutter: clamp(20px, 5.2vw, 84px);
  --nav-h: 74px;

  /* deliberately uneven vertical rhythm — each section names its own */
  --y-loose: clamp(84px, 13vw, 176px);
  --y-mid:   clamp(64px, 9vw, 120px);
  --y-tight: clamp(52px, 6vw, 84px);

  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l3.1 6.9 7.5.8-5.6 5 1.6 7.4-6.6-3.8-6.6 3.8 1.6-7.4-5.6-5 7.5-.8z'/%3E%3C/svg%3E");
  --ease: cubic-bezier(.22,.61,.36,1);
  --grade: saturate(.76) contrast(1.05);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:clamp(15.5px,.42vw + 14.4px,17px);
  line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img,svg,picture{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{ margin:0; }
ul,ol{ list-style:none; padding:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
/* the hidden attribute must beat any display rule a component sets */
[hidden]{ display:none !important; }

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:var(--on-dark); padding:.8em 1.4em; }
.skip:focus{ left:12px; top:12px; }
:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:3px; }
.hero :focus-visible,.s-ordering :focus-visible,
.s-contact :focus-visible,.foot :focus-visible{ outline-color:var(--accent); }

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

/* ---------- type primitives ---------- */
.label{
  font-family:var(--font-mono); font-size:.68rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent-deep);
  margin:0 0 1.3rem;
}
.hero .label,.s-ordering .label,.s-contact .label{ color:var(--accent); }

.h-lg{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.15rem,4.5vw,3.9rem); line-height:1.015; letter-spacing:-.035em;
  max-width:15ch;
}
.h-md{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.7rem,2.7vw,2.5rem); line-height:1.05; letter-spacing:-.03em;
  max-width:16ch;
}
p{ color:var(--ink-2); max-width:62ch; }
.lead-p{ font-size:1.14em; color:var(--ink); }

/* ---------- CTA: one solid button, otherwise text links ---------- */
.btn{
  display:inline-block; background:var(--accent-deep); color:#FFFFFF;
  font-weight:600; font-size:.9rem; letter-spacing:.005em;
  padding:1.02em 1.85em; border:0;
  transition:background .3s var(--ease);
}
.btn:hover{ background:#31498A; }
.btn-on-dark{ background:var(--accent); color:#1B1C20; }
.btn-on-dark:hover{ background:#FFAE58; }

.tlink{
  display:inline-flex; align-items:baseline; gap:.6em;
  font-weight:600; font-size:.9rem; color:var(--accent-deep);
  padding-bottom:.28em; border-bottom:1px solid currentColor;
  transition:opacity .3s var(--ease);
}
.tlink::after{ content:"\2192"; transition:transform .3s var(--ease); }
.tlink:hover::after{ transform:translateX(.22em); }
.hero .tlink,.s-ordering .tlink{ color:var(--accent); }

/* ==========================================================================
   NAV — flat, no pills
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto; z-index:90; height:var(--nav-h);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.nav-in{
  width:min(100% - var(--gutter)*2, var(--wide)); margin-inline:auto; height:100%;
  display:flex; align-items:center; gap:clamp(18px,3vw,48px);
}
.nav.scrolled,.nav.solid{
  background:rgba(247,247,248,.94); backdrop-filter:saturate(1.3) blur(10px);
  -webkit-backdrop-filter:saturate(1.3) blur(10px); border-bottom-color:var(--line);
}
.nav.hide{ transform:translateY(-100%); }

.brand{ display:flex; align-items:baseline; gap:.55rem; color:var(--on-dark); transition:color .35s var(--ease); }
.nav.scrolled .brand,.nav.solid .brand{ color:var(--ink); }
.brand img{ width:88px; height:auto; }
.brand-sub{
  font-family:var(--font-brand); font-weight:600; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; opacity:.72;
}

.nav-links{ display:flex; gap:clamp(16px,2.1vw,32px); margin-left:auto; }
.nav-links a{
  position:relative; font-size:.875rem; font-weight:500; color:var(--on-dark);
  padding:.4em 0; transition:color .3s var(--ease);
}
.nav.scrolled .nav-links a,.nav.solid .nav-links a{ color:var(--ink-2); }
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .34s var(--ease);
}
.nav.scrolled .nav-links a::after,.nav.solid .nav-links a::after{ background:var(--accent-deep); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav.scrolled .nav-links a:hover,.nav.solid .nav-links a:hover{ color:var(--ink); }

.nav-act{ display:flex; align-items:center; gap:clamp(10px,1.4vw,18px); }

/* cart icon + count */
.nav-cart{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; color:var(--on-dark);
  transition:color .3s var(--ease);
}
.nav.scrolled .nav-cart,.nav.solid .nav-cart{ color:var(--ink); }
.nav-cart svg{ width:23px; height:23px; }
.nav-cart:hover{ color:var(--accent); }
.nav.scrolled .nav-cart:hover,.nav.solid .nav-cart:hover{ color:var(--accent-deep); }
.cart-badge{
  position:absolute; top:1px; right:-1px; min-width:19px; height:19px;
  display:flex; align-items:center; justify-content:center; padding:0 5px;
  border-radius:999px; background:var(--accent); color:#1B1C20;
  font-family:var(--font-brand); font-weight:800; font-size:.66rem; line-height:1;
}
.cart-badge.is-empty{ display:none; }

/* nav CTA — a real button, not a text link */
.btn-nav{
  background:var(--accent); color:#1B1C20;
  font-family:var(--font-brand); font-weight:800; font-size:.82rem;
  letter-spacing:.02em; padding:.82em 1.35em;
}
.btn-nav:hover{ background:#FFAE58; }

.burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; flex-direction:column; gap:6px; }
.burger span{ display:block; width:22px; height:1.5px; background:var(--on-dark); transition:transform .3s var(--ease); }
.nav.scrolled .burger span,.nav.solid .burger span{ background:var(--ink); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:80; background:var(--dark); color:var(--on-dark);
  padding:calc(var(--nav-h) + 6vh) var(--gutter) var(--gutter);
  display:flex; flex-direction:column; justify-content:space-between; gap:6vh;
  transform:translateY(-100%); transition:transform .5s var(--ease);
}
.drawer.open{ transform:none; }
.drawer nav{ display:flex; flex-direction:column; }
.drawer nav a{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(2rem,9vw,3rem); line-height:1.16;
  border-bottom:1px solid var(--line-dark); padding:.3em 0;
}
.drawer-foot{ display:flex; flex-direction:column; gap:.5rem; }
.drawer-tel,.drawer-mail{ font-family:var(--font-mono); font-size:.86rem; letter-spacing:.06em; color:var(--accent); }

/* ==========================================================================
   01 · HERO — full-bleed photograph, copy bottom-anchored on the left grid
   ========================================================================== */
.hero{
  position:relative; overflow:clip;
  background:var(--dark-2); color:var(--on-dark);
  min-height:100svh; padding-top:var(--nav-h);
  display:flex; flex-direction:column; justify-content:flex-end;
  border-bottom:1px solid var(--line-dark);
}
.hero-bg{ position:absolute; inset:0; z-index:0; background:#000; }
.hero-bg picture,.hero-bg video{ position:absolute; inset:0; }
.hero-bg img,.hero-bg video{
  width:100%; height:100%; object-fit:cover; object-position:62% 48%;
  filter:saturate(1.06) contrast(1.04) brightness(1.1);
}
/* the globe sits dead centre in the source; widen the media box past the
   right edge so its centre moves right and the left type column stays clear.
   Widening (rather than scaling) keeps the globe at its natural size. */
@media (min-width:961px){
  .hero-bg{ width:128%; }
}
.hero-bg video{ opacity:0; transition:opacity .9s var(--ease); }
.hero-bg video.ready{ opacity:1; }
.hero-bg video.ready + .hero-still,
.hero-bg.playing .hero-still{ opacity:0; transition:opacity .9s var(--ease); }
/* two scrims: a vertical one for the copy block, a left-weighted one for the type */
.hero::before,.hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero::before{
  background:linear-gradient(to top,
    rgba(10,10,12,.9) 0%, rgba(10,10,12,.55) 22%,
    rgba(10,10,12,.08) 54%, rgba(10,10,12,.34) 100%);
}
.hero::after{
  background:linear-gradient(100deg, rgba(10,10,12,.72) 0%, rgba(10,10,12,.34) 32%, transparent 62%);
}
.hero-in{
  position:relative; z-index:2;
  width:min(100% - var(--gutter)*2, var(--wide)); margin-inline:auto;
}
.hero-copy{
  max-width:min(46rem, 100%);
  padding-block:clamp(40px,6vw,76px) clamp(26px,3.2vw,42px);
}
.hero-h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.05rem,5.1vw,4.35rem); line-height:1; letter-spacing:-.042em;
  text-wrap:nowrap;
  margin:0 0 1.5rem;
}
.hero-h1 .line{ display:block; overflow:hidden; }
.hero-h1 .line > span{ display:block; }
.hero-lead{ font-size:1.06em; color:var(--on-dark-2); max-width:44ch; }
.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(18px,2.4vw,34px); margin-top:2.4rem; }

/* ---------- 01b · facts rail — thin centred band, ruled top and bottom ---------- */
.s-facts{ background:var(--bg); border-bottom:1px solid var(--line); }
.facts{
  width:min(100% - var(--gutter)*2, var(--wrap)); margin-inline:auto;
  display:grid; grid-template-columns:repeat(6,1fr);
  padding-block:clamp(20px,2.4vw,30px);
}
.facts > div{
  display:flex; flex-direction:column-reverse; align-items:center; gap:.4rem;
  text-align:center; padding-inline:clamp(12px,2vw,28px);
  border-right:1px solid var(--line);
}
.facts > div:last-child{ border-right:0; }
.facts dt{
  font-family:var(--font-mono); font-size:.63rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--accent-deep);
}
.facts dd{ margin:0; font-size:.95rem; font-weight:600; color:var(--ink); text-wrap:balance; }
.fact-fig dd{
  font-family:var(--font-display); font-size:1.32rem; font-weight:700;
  letter-spacing:-.025em; color:var(--accent-deep);
}

/* ==========================================================================
   02 · POSITION — generous, 42/58
   ========================================================================== */
.s-position{ padding-block:var(--y-loose) var(--y-mid); }
.pos{ display:grid; grid-template-columns:minmax(0,42fr) minmax(0,58fr); gap:clamp(28px,5vw,96px); }
.pos-orn{ margin-top:clamp(30px,4vw,58px); }
.pos-orn img{ width:min(100%, 460px); height:auto; }
.pos-r > p + p{ margin-top:1.15rem; }
.spec{ margin-top:2.8rem; border-top:1px solid var(--line); }
.spec > div{
  display:grid; grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);
  gap:clamp(12px,2vw,34px); padding:1.1rem 0; border-bottom:1px solid var(--line-2);
}
.spec dt{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); padding-top:.24em;
}
.spec dd{ margin:0; font-size:.97em; }

/* ==========================================================================
   03 · CATALOG — 3x2 grid of flat category cards
   ========================================================================== */
.s-catalog{ background:var(--sand); padding-block:var(--y-tight) clamp(56px,6.5vw,92px); }
.cat-head{
  display:grid; grid-template-columns:minmax(0,55fr) minmax(0,45fr);
  gap:clamp(20px,4vw,72px); align-items:end;
  padding-bottom:clamp(34px,4.4vw,56px);
}
.cat-note{ max-width:34ch; }

.cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,26px); }
.cat{ position:relative; background:var(--dark-2); overflow:clip; }
.cat > a{ display:block; position:relative; }
.cat-img{ display:block; }
.cat-img img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  filter:saturate(.92) brightness(.52);
  transition:transform .7s var(--ease),filter .5s var(--ease);
}
.cat::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,12,.9) 0%, rgba(10,10,12,.44) 48%, rgba(10,10,12,.14) 100%);
}
.cat-body{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:clamp(18px,2vw,28px) clamp(18px,2.1vw,30px) clamp(20px,2.2vw,30px);
  color:var(--on-dark);
}
.cat-name{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.08rem,1.5vw,1.35rem); line-height:1.1; letter-spacing:-.024em;
  color:var(--on-dark);
}
.cat-desc{
  display:block; margin-top:.45rem; font-size:.9rem; color:var(--on-dark-2); max-width:40ch;
}
.cat-go{
  display:inline-block; margin-top:.95rem;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
}
.cat-go::after{ content:" →"; }
.cat:hover .cat-img img{ transform:scale(1.045); filter:saturate(.92) brightness(.6); }

.cat-foot{ margin-top:clamp(28px,3.4vw,46px); }

/* ==========================================================================
   04 · ORDERING — interactive stepper on a connected path
   ========================================================================== */
.s-ordering{
  position:relative; overflow:clip;
  background:var(--dark); color:var(--on-dark); padding-block:var(--y-mid);
}
/* ambient ornament: concentric hairline rings, faded at the edges */
.s-ordering::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:52%; width:min(1020px,104vw); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(245,154,60,.5) 0 1px, transparent 1px clamp(38px,4.4vw,64px));
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 12%, rgba(0,0,0,.5) 46%, transparent 70%);
  mask-image:radial-gradient(circle at 50% 50%, #000 12%, rgba(0,0,0,.5) 46%, transparent 70%);
  opacity:.17;
}
.s-ordering > .wrap{ position:relative; z-index:1; }
.s-ordering p{ color:var(--on-dark-2); }
.ord-head{ text-align:center; }
.ord-head .h-lg{
  max-width:none; margin-inline:auto; white-space:nowrap;
  font-size:clamp(1.55rem,4.5vw,3.9rem);
}

.stepper{ margin-top:clamp(46px,5.5vw,78px); }
.stepper-nav{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2vw,30px);
}
.stepper-nav::before{
  content:""; position:absolute; z-index:0; left:0; right:0; top:27px; height:1px;
  background:linear-gradient(to right,
    transparent 0, var(--s1) 8%, var(--s2) 36%, var(--s3) 64%, var(--s4) 92%, transparent 100%);
  opacity:.45;
}
.step{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:0 0 .2rem;
}
.step-node{
  display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; border:1px solid var(--line-dark); border-radius:50%;
  background:var(--dark); color:var(--on-dark-2);
  transition:border-color .35s var(--ease),color .35s var(--ease);
}
.step-node svg{ width:24px; height:24px; }
.step-n{
  display:block; margin-top:1.1rem;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; color:var(--muted);
  transition:color .35s var(--ease);
}
.step-t{
  display:block; margin-top:.4rem;
  font-family:var(--font-display); font-weight:600; font-size:1.05rem;
  letter-spacing:-.018em; color:var(--on-dark-2);
  transition:color .35s var(--ease);
}
/* each step carries one hue from the logo gradient, in order */
.stepper{
  --s1:#5FAFE8;  /* azul claro   */
  --s2:#9B72D0;  /* púrpura, lifted for dark grounds  */
  --s3:#E0699F;  /* magenta, lifted for dark grounds  */
  --s4:#F59A3C;  /* naranja      */
}
.step:nth-child(1){ --step-c:var(--s1); }
.step:nth-child(2){ --step-c:var(--s2); }
.step:nth-child(3){ --step-c:var(--s3); }
.step:nth-child(4){ --step-c:var(--s4); }
.step:hover .step-node{ border-color:var(--step-c); color:var(--on-dark); }
.step[aria-selected="true"] .step-node{ border-color:var(--step-c); color:var(--step-c); }
.step[aria-selected="true"] .step-n{ color:var(--step-c); }
.step[aria-selected="true"] .step-t{ color:var(--on-dark); }

.stepper-panels{ margin-top:clamp(30px,3.4vw,48px); }
.step-panel{
  --pc:#F59A3C; --pcr:245,154,60;
  max-width:78ch; margin-inline:auto;
  background:linear-gradient(180deg, rgba(var(--pcr),.16) 0%, rgba(var(--pcr),.07) 100%);
  border:1px solid rgba(var(--pcr),.5);
  box-shadow:0 0 0 1px rgba(var(--pcr),.1), 0 18px 46px -30px rgba(var(--pcr),.55);
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
/* each panel takes the hue of the step it belongs to */
.stepper-panels > .step-panel:nth-child(1){ --pc:#5FAFE8; --pcr:95,175,232; }
.stepper-panels > .step-panel:nth-child(2){ --pc:#9B72D0; --pcr:155,114,208; }
.stepper-panels > .step-panel:nth-child(3){ --pc:#E0699F; --pcr:224,105,159; }
.stepper-panels > .step-panel:nth-child(4){ --pc:#F59A3C; --pcr:245,154,60; }
.panel-link{ display:flex; align-items:stretch; width:100%; }
.panel-copy{
  flex:1; display:flex; align-items:center;
  padding:clamp(20px,2.2vw,30px) clamp(22px,2.6vw,38px);
  font-size:1.04em; color:var(--on-dark); text-align:left;
}
.panel-cta{
  display:flex; align-items:center; gap:.7em; flex:none;
  padding:0 clamp(20px,2.2vw,34px);
  background:var(--pc); color:#1B1C20;
  font-weight:600; font-size:.9rem; white-space:nowrap;
  transition:filter .3s var(--ease);
}
.panel-cta::after{
  content:""; width:.6em; height:.6em; flex:none;
  border-top:1.7px solid currentColor; border-right:1.7px solid currentColor;
  transform:rotate(45deg) translate(-.05em,.05em);
  transition:transform .3s var(--ease);
}
.step-panel:hover{
  border-color:rgba(var(--pcr),.8);
  background:linear-gradient(180deg, rgba(var(--pcr),.24) 0%, rgba(var(--pcr),.1) 100%);
}
.step-panel:hover .panel-cta{ filter:brightness(1.1); }
.step-panel:hover .panel-cta::after{ transform:rotate(45deg) translate(.12em,-.12em); }

/* ==========================================================================
   04b · NETWORK — domestic and international distribution
   ========================================================================== */
.s-network{
  background:var(--sand);
  display:grid; grid-template-columns:minmax(0,34fr) minmax(0,66fr);
  align-items:stretch;
}
.net-plate{ position:relative; margin:0; overflow:clip; }
.net-plate picture{ position:absolute; inset:0; display:block; }
.net-plate img{ width:100%; height:100%; object-fit:cover; object-position:48% 40%; filter:var(--grade) brightness(1.04); }
.net-in{
  padding:var(--y-tight) clamp(20px,5.2vw,84px) var(--y-tight) clamp(30px,4.6vw,76px);
}
.net-head{
  display:flex; align-items:center; gap:clamp(14px,1.8vw,26px); flex-wrap:wrap;
}
.net-head .h-md{ max-width:18ch; }
.net-note{ max-width:46ch; }
.net-note-2{
  margin-top:clamp(20px,2.2vw,30px); padding-top:clamp(20px,2.2vw,30px);
  border-top:1px solid var(--line); max-width:62ch;
}

.net-modes{
  position:relative; display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.4vw,38px); align-items:start;
  margin-top:clamp(30px,3.4vw,46px);
}
.net-modes::before{
  content:""; position:absolute; z-index:0; left:0; right:0; top:23px; height:1px;
  background:repeating-linear-gradient(to right, var(--accent-deep) 0 6px, transparent 6px 13px);
  opacity:.45;
}
.net-modes li{ position:relative; z-index:1; display:block; }
.net-node{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border:1px solid var(--line);
  border-radius:50%; background:var(--sand); color:var(--accent-deep);
}
.net-node svg{ width:21px; height:21px; }
.net-mode{
  display:block; margin-top:1rem;
  font-family:var(--font-display); font-weight:600; font-size:1.02rem;
  letter-spacing:-.018em; color:var(--ink);
}
.net-mode-d{ display:block; margin-top:.42rem; font-size:.92rem; color:var(--ink-2); max-width:32ch; }

.net-figs{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:clamp(28px,3.2vw,44px); padding-top:clamp(24px,2.6vw,34px);
  border-top:1px solid var(--line);
}
.net-figs > div{
  display:flex; flex-direction:column-reverse; align-items:center; gap:.42rem;
  text-align:center; padding-inline:clamp(12px,2vw,28px);
  border-right:1px solid var(--line);
}
.net-figs > div:last-child{ border-right:0; }
.net-figs dt{
  font-family:var(--font-mono); font-size:.63rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--muted);
}
.net-figs dd{
  margin:0; font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.5rem,2.4vw,2.1rem); letter-spacing:-.03em;
}
.net-figs > div:nth-child(1) dd{ color:#3C5BA9; }
.net-figs > div:nth-child(2) dd{ color:#6A3FA0; }
.net-figs > div:nth-child(3) dd{ color:#B23A78; }

/* ==========================================================================
   05 · TERMS — dense spec grid, arc ornament off the right edge
   ========================================================================== */
.s-terms{
  position:relative; overflow:clip;
  padding-block:var(--y-tight) clamp(64px,7vw,104px);
}
.s-terms > .wrap{ position:relative; z-index:1; }
.terms-head{ position:relative; }

.terms-head{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,3vw,56px); align-items:end;
  padding-bottom:clamp(30px,3.4vw,48px);
}
.terms-head .h-md{ max-width:none; white-space:nowrap; }
.terms-note{ max-width:44ch; }

.terms-grid{
  position:relative;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
/* ornament, bound to the grid itself: a hairline plate offset behind the cells,
   with registration ticks at its free corner */
.terms-grid::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset:clamp(10px,1.1vw,16px) calc(clamp(10px,1.1vw,16px) * -1)
        calc(clamp(10px,1.1vw,16px) * -1) clamp(10px,1.1vw,16px);
  border:1px solid var(--accent-deep); opacity:.34;
}
.terms-grid::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:calc(clamp(10px,1.1vw,16px) * -1); bottom:calc(clamp(10px,1.1vw,16px) * -1);
  width:56px; height:56px;
  border-right:2px solid var(--accent-deep); border-bottom:2px solid var(--accent-deep);
  opacity:.55;
}
.term{
  padding:clamp(22px,2.4vw,32px) clamp(20px,2.2vw,30px) clamp(26px,2.8vw,36px);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.term{ position:relative; z-index:1; background:var(--bg); transition:background .35s var(--ease); }
/* each card carries one hue from the logo gradient, deepened for the light ground */
.term:nth-child(1){ --tc:#1F72AE; }
.term:nth-child(2){ --tc:#3C5BA9; }
.term:nth-child(3){ --tc:#6A3FA0; }
.term:nth-child(4){ --tc:#93357F; }
.term:nth-child(5){ --tc:#B23A78; }
.term:nth-child(6){ --tc:#C25A2E; }
.term-ic{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; margin-bottom:1.05rem;
  border:1px solid var(--line); border-radius:50%;
  color:var(--tc, var(--accent-deep)); background:transparent;
  transition:border-color .35s var(--ease),background .35s var(--ease),
             color .35s var(--ease),transform .35s var(--ease);
}
.term-ic svg{ width:20px; height:20px; }
.term:hover{ background:#EDEDEF; }
.term:hover .term-ic{
  border-color:var(--tc); background:var(--tc);
  color:#FFFFFF; transform:translateY(-2px);
}
.term:hover dt{ color:var(--tc); }
.term dt{
  font-family:var(--font-display); font-weight:600;
  font-size:1.02rem; letter-spacing:-.018em; color:var(--ink);
  margin-bottom:.5rem; transition:color .3s var(--ease);
}
.term dd{ margin:0; font-size:.93rem; color:var(--ink-2); max-width:36ch; }

/* ==========================================================================
   07 · CONTACT
   ========================================================================== */
.s-contact{
  position:relative; overflow:clip;
  background:var(--dark-2); color:var(--on-dark); padding-block:var(--y-mid);
}
.contact-bg{ position:absolute; inset:0; z-index:0; }
.contact-bg img{
  width:100%; height:100%; object-fit:cover; object-position:50% 46%;
  filter:saturate(1.1) contrast(1.1) brightness(1.3);
}
.s-contact::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(105deg, rgba(12,12,14,.92) 0%, rgba(12,12,14,.62) 46%, rgba(12,12,14,.36) 100%);
}
.s-contact > .wrap{ position:relative; z-index:2; }
.s-contact p{ color:var(--on-dark-2); }
.contact{ display:grid; grid-template-columns:minmax(0,50fr) minmax(0,50fr); gap:clamp(28px,5vw,88px); align-items:start; }
.contact-r > p{ max-width:40ch; margin-bottom:1.9rem; }
.contact-d{ margin-top:2.6rem; border-top:1px solid var(--line-dark); }
.contact-d > div{
  display:grid; grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr); gap:clamp(12px,2vw,28px);
  padding:.85rem 0; border-bottom:1px solid var(--line-dark);
}
.contact-d dt{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--muted); padding-top:.22em;
}
.contact-d dd{ margin:0; font-size:.95rem; color:var(--on-dark); }
.contact-d a{ color:var(--accent); transition:opacity .3s var(--ease); }
.contact-d a:hover{ opacity:.75; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ background:var(--dark); color:var(--on-dark); padding-top:clamp(52px,6vw,86px); border-top:1px solid var(--line-dark); }
.foot-in{
  display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,3.4vw,56px); padding-bottom:clamp(40px,4.6vw,68px);
}
.foot-lockup{ margin-bottom:1rem; }
.foot-lockup img{ width:150px; height:auto; }
.foot-lockup span{
  display:block; width:150px; margin-top:.5rem;
  font-family:var(--font-brand); font-weight:800; font-size:.88rem; letter-spacing:.185em;
  text-transform:uppercase; color:var(--on-dark);
}
.foot-blurb{ font-size:.91em; color:var(--on-dark-2); max-width:36ch; }
.foot-col h3{
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1.05rem; font-weight:500;
}
.foot-col a,.foot-addr{
  display:block; font-size:.91em; color:var(--on-dark-2); padding:.22em 0;
  transition:color .3s var(--ease); max-width:none;
}
.foot-col a:hover{ color:var(--on-dark); }
.foot-addr{ margin-bottom:.5rem; }
.foot-base{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px solid var(--line-dark); padding-block:1.4rem 1.6rem;
}
.foot-base p{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(239,237,232,.42); }

/* ==========================================================================
   MOTION — hero entrance, and one staggered moment on the catalog index.
   Nothing else fades up.
   ========================================================================== */
html.js .reveal{ opacity:0; }
html.js .reveal.in{
  opacity:1; transition:opacity .6s var(--ease);
  transition-delay:calc(var(--d,0) * 55ms);
}
html.js .hero-h1 .line > span,
html.js .hero .label,
html.js .hero-lead,
html.js .hero-cta{ opacity:0; }
html.js .hero-h1 .line > span{ transform:translateY(105%); }
html.js .hero.lit .hero-h1 .line > span{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease),transform .95s var(--ease);
}
html.js .hero.lit .hero-h1 .line:nth-child(2) > span{ transition-delay:.08s; }
html.js .hero.lit .hero-h1 .line:nth-child(3) > span{ transition-delay:.16s; }
html.js .hero.lit .label,
html.js .hero.lit .hero-lead,
html.js .hero.lit .hero-cta{ opacity:1; transition:opacity .9s var(--ease); }
html.js .hero.lit .hero-lead{ transition-delay:.28s; }
html.js .hero.lit .hero-cta{ transition-delay:.38s; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  .btn-nav{ padding:.78em 1.05em; font-size:.76rem; }
  .nav-act{ margin-left:auto; }
}

@media (max-width:960px){
  .hero-copy{ max-width:none; padding-block:clamp(52px,10vw,88px) clamp(28px,4vw,40px); }
}
@media (max-width:900px){
  .pos,.contact{ grid-template-columns:1fr; }
  .cat-head{ grid-template-columns:1fr; align-items:start; gap:1.2rem; }
  .cat-head .label,.cat-head .h-lg,.cat-note{ grid-column:1; grid-row:auto; }
  .foot-in{ grid-template-columns:repeat(2,1fr); }
  .foot-brand{ grid-column:1 / -1; }
}
@media (max-width:760px){
  .cat-bleed img{ height:clamp(190px,42vw,240px); }
}
@media (max-width:560px){
  .brand-sub{ display:none; }
}
@media (max-width:700px){
  .spec > div,.contact-d > div{ grid-template-columns:1fr; gap:.3rem; }
  .hero-cta{ align-items:flex-start; flex-direction:column; gap:1.4rem; }
  .hero-cta .btn{ width:100%; text-align:center; }
  .foot-in{ grid-template-columns:1fr; }
}

/* ==========================================================================
   REDUCED MOTION — honoured, never defeated
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  html.js .reveal{ opacity:1; }
  html.js .hero-h1 .line > span,
  html.js .hero .label,
  html.js .hero-lead,
  html.js .hero-cta{ opacity:1; transform:none; }
}

@media (max-width:960px){
  .hero::before{
    background:linear-gradient(to top,
      rgba(10,10,12,.94) 0%, rgba(10,10,12,.8) 34%,
      rgba(10,10,12,.44) 68%, rgba(10,10,12,.42) 100%);
  }
  .hero::after{ background:none; }
}

@media (max-width:1080px){
  .facts{ grid-template-columns:repeat(3,1fr); row-gap:clamp(16px,2vw,24px); }
  .facts > div:nth-child(3n){ border-right:0; }
  .facts > div:nth-child(n+4){ border-top:1px solid var(--line); padding-top:clamp(16px,2vw,24px); }
}
@media (max-width:620px){
  .facts{ grid-template-columns:repeat(2,1fr); }
  .facts > div{ border-right:1px solid var(--line); }
  .facts > div:nth-child(2n){ border-right:0; }
  .facts > div:nth-child(3n){ border-right:1px solid var(--line); }
  .facts > div:nth-child(6n){ border-right:0; }
  .facts > div:nth-child(n+3){ border-top:1px solid var(--line); padding-top:clamp(14px,3vw,20px); }
}

@media (max-width:1024px){
  .cats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:700px){
  .cats{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  .stepper-nav{ grid-template-columns:repeat(2,1fr); gap:clamp(20px,4vw,32px); }
  .stepper-nav::before{ display:none; }
  .step-t{ font-size:.98rem; }
}

@media (max-width:620px){
  .panel-link{ flex-direction:column; align-items:stretch; }
  .panel-copy{ text-align:center; }
  .panel-cta{ justify-content:center; padding:1em 1.4em; }
}

@media (max-width:900px){
  .s-network{ grid-template-columns:1fr; }
  .net-plate{ position:static; }
  .net-plate picture{ position:static; }
  .net-plate img{ height:clamp(240px,44vw,380px); }
  .net-in{ padding:var(--y-mid) var(--gutter); }
  .net-head{ grid-template-columns:1fr; align-items:start; gap:1.2rem; }
  .net-route{ grid-template-columns:1fr; gap:clamp(26px,4vw,40px); }
  .net-end-r{ text-align:left; }
  .net-modes::before{ display:none; }
}
@media (max-width:620px){
  .net-modes{ grid-template-columns:1fr; gap:1.4rem; }
  .net-modes li{ flex-direction:row; gap:1rem; }
  .net-mode{ text-align:left; }
  .net-figs{ grid-template-columns:1fr; }
  .net-figs > div{
    border-right:0; border-bottom:1px solid var(--line); padding-block:.9rem;
  }
  .net-figs > div:last-child{ border-bottom:0; }
}

@media (max-width:1024px){
  .terms-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .terms-head{ grid-template-columns:1fr; align-items:start; gap:1.2rem; }
  .terms-head .h-md{ white-space:normal; }
}
@media (max-width:620px){
  .terms-grid{ grid-template-columns:1fr; }
}

@media (max-width:620px){
  .net-modes{ grid-template-columns:1fr; gap:1.6rem; }
  .net-modes::before{ display:none; }
}

@media (max-width:620px){
  .net-figs{ grid-template-columns:1fr; }
  .net-figs > div{ border-right:0; border-bottom:1px solid var(--line); padding-block:.9rem; }
  .net-figs > div:last-child{ border-bottom:0; }
}

/* ==========================================================================
   INTERIOR PAGES — catalog + request list
   ========================================================================== */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.nav.solid{
  background:var(--bg); border-bottom-color:var(--line);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.h-sm{
  font-family:var(--font-display); font-weight:700;
  font-size:1.12rem; letter-spacing:-.02em; color:var(--ink);
}
.btn-sm{ padding:.78em 1.3em; font-size:.84rem; }
.btn-wide{ width:100%; text-align:center; }
.tlink-sm{ font-size:.78rem; padding-bottom:.2em; }

.page-head{
  background:var(--bg); padding-top:calc(var(--nav-h) + clamp(46px,6vw,86px));
  padding-bottom:clamp(30px,3.6vw,50px);
}

.page-head .h-lg{ max-width:none; }
.page-note{ margin-top:1.2rem; max-width:62ch; }

/* header band — dark ground with the logo's faceted shards on the right */
.page-head-media{
  position:relative; overflow:clip;
  background:var(--dark-2); color:var(--on-dark);
  padding-top:calc(var(--nav-h) + clamp(28px,3.4vw,52px));
  padding-bottom:clamp(30px,3.6vw,54px);
}
.page-head-orn{
  position:absolute; z-index:0; inset:0 0 0 auto;
  width:min(62%, 900px);
  background:url("img/facets.svg") right center / cover no-repeat;
  opacity:.9;
}
.page-head-media > .wrap{ position:relative; z-index:2; }
.page-head-media .h-lg{
  color:var(--on-dark);
  font-size:clamp(2.7rem,6vw,5.2rem); letter-spacing:-.04em;
}
.page-head-media .info-btn{ border-color:var(--line-dark); color:var(--on-dark); }
.page-head-media .info-btn:hover,
.page-head-media .info-wrap:focus-within .info-btn{
  border-color:var(--accent); background:var(--accent); color:#1B1C20;
}
.page-head-media .info-pop{ background:#08080A; }
.page-head-media .info-pop::before{ border-bottom-color:#08080A; }

/* title + hover-revealed information */
.page-title{ display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; }
.info-wrap{ position:relative; display:inline-flex; }
.info-btn{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border:1.5px solid var(--line); border-radius:50%;
  font-family:var(--font-brand); font-weight:800; font-size:.86rem; line-height:1;
  color:var(--ink-2); background:transparent;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.info-btn:hover,.info-wrap:focus-within .info-btn{
  border-color:var(--accent-deep); background:var(--accent-deep); color:#FFFFFF;
}
.info-pop{
  position:absolute; z-index:20; top:calc(100% + 12px); left:50%;
  width:min(38ch, 78vw); transform:translate(-50%, 4px);
  padding:clamp(14px,1.5vw,18px) clamp(15px,1.7vw,20px);
  background:var(--dark); color:var(--on-dark-2);
  font-size:.88rem; line-height:1.62;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
}
.info-pop::before{
  content:""; position:absolute; bottom:100%; left:50%; margin-left:-6px;
  border:6px solid transparent; border-bottom-color:var(--dark);
}
.info-wrap:hover .info-pop,.info-wrap:focus-within .info-pop{
  opacity:1; visibility:visible; transform:translate(-50%, 0);
}
@media (max-width:560px){
  .info-pop{ left:0; transform:translate(0,4px); }
  .info-pop::before{ left:14px; margin-left:0; }
  .info-wrap:hover .info-pop,.info-wrap:focus-within .info-pop{ transform:translate(0,0); }
}

/* ---------- filters ---------- */
.s-products{
  background:var(--bg);
  padding-top:clamp(34px,4.2vw,60px);
  padding-bottom:clamp(56px,6.5vw,96px);
}
.filters{
  display:flex; flex-direction:column; gap:clamp(14px,1.6vw,20px);
  padding-bottom:clamp(18px,2vw,26px);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(28px,3.2vw,44px);
}
.chips{
  display:flex; flex-wrap:nowrap; gap:.45rem; min-width:0;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:2px;
}
.chips::-webkit-scrollbar{ display:none; }
.chip{ flex:none; }
.chip{
  font-family:var(--font-mono); font-size:.655rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-2); padding:.68em .92em; border:1px solid var(--line); background:transparent;
  white-space:nowrap;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.chip:hover{ border-color:var(--ink-2); color:var(--ink); }
.chip.is-on{ background:var(--accent-deep); border-color:var(--accent-deep); color:#FFFFFF; }

.filters-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px,2.2vw,36px);
}
.filter-count{
  font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.sortby{ display:flex; align-items:center; gap:.55rem; }
.sortby label{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.sortby select{
  font:inherit; font-size:.84rem; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); padding:.62em 2.1em .62em .8em;
  -webkit-appearance:none; appearance:none;
  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.5 11 1.5' fill='none' stroke='%2352545C' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75em center; background-size:11px;
}
.sortby select:hover{ border-color:var(--ink-2); }
.sortby select:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:1px; }

/* ---------- product grid ---------- */
.prods{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,24px); }
.prod{
  display:flex; flex-direction:column;
  border:1px solid var(--line); background:#FFFFFF;
  padding:clamp(16px,1.7vw,22px);
}
.prod.is-target{ outline:2px solid var(--accent-deep); outline-offset:3px; }
.prod-img{
  background:#FFFFFF; border:1px solid var(--line-2);
  margin-bottom:1rem; overflow:clip;
}
.prod-img img{
  width:100%; aspect-ratio:1; object-fit:contain; background:#FFFFFF;
  transition:transform .6s var(--ease);
}
.prod:hover .prod-img img{ transform:scale(1.035); }

.prod-badges{ display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.7rem; }
.badge{
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.36em .7em; border:1px solid currentColor;
}
.b-best{ color:#6A3FA0; }
.b-lim{ color:#B23A78; }

.prod-brand{
  margin-top:.35rem; font-size:.86rem; color:var(--muted);
}
.prod-rate{
  display:flex; align-items:center; gap:.45rem; margin-top:.6rem;
  font-size:.82rem; color:var(--ink-2);
}
.stars{ display:inline-flex; gap:1px; }
.stars .s{
  width:11px; height:11px; background:var(--line);
  -webkit-mask:var(--star) center/contain no-repeat; mask:var(--star) center/contain no-repeat;
}
.stars .s.on{ background:#6A3FA0; }
.stars .s.half{ background:linear-gradient(to right,#6A3FA0 50%,var(--line) 50%); }
.rate-n{ font-weight:600; color:var(--ink); }
.rate-c{ color:var(--muted); }

.prod-tags{ display:flex; flex-wrap:wrap; gap:.32rem; margin-top:.8rem; }
.prod-tags li{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em;
  color:var(--ink-2); padding:.34em .6em; border:1px solid var(--line-2); background:var(--bg);
}
.prod-cat{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--accent-deep); margin-bottom:.55rem;
}
.prod-name{
  font-family:var(--font-display); font-weight:600; font-size:1.04rem;
  letter-spacing:-.02em; line-height:1.2; color:var(--ink);
}
.prod-spec{ margin-top:.45rem; font-size:.9rem; color:var(--ink-2); }
.prod-meta{ margin-top:1rem; border-top:1px solid var(--line-2); }
.prod-meta > div{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.42rem 0; border-bottom:1px solid var(--line-2);
}
.prod-meta dt{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.prod-meta dd{ margin:0; font-size:.85rem; font-weight:500; color:var(--ink); }
.prod-add{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  margin-top:auto; padding-top:1.1rem;
}
.qty{
  width:5.4rem; padding:.72em .7em; font:inherit; font-size:.9rem;
  color:var(--ink); background:var(--bg); border:1px solid var(--line);
}
.qty:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:1px; }
.prod-said{
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-deep); opacity:0; transition:opacity .3s var(--ease);
}
.prod-said.on{ opacity:1; }
html.js .prod-detail{ display:none; }
.prod{ position:relative; }
.prod-open{
  position:absolute; inset:0; z-index:2; width:100%; height:100%;
  background:none; border:0; cursor:pointer;
}
.prod-open:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:-3px; }
.prod-add{ position:relative; z-index:3; }

/* popout */
.pdlg{
  width:min(880px, calc(100vw - 2*var(--gutter))); max-width:none;
  padding:0; border:1px solid var(--line); background:var(--bg); color:var(--ink);
}
.pdlg::backdrop{ background:rgba(10,10,12,.72); }
.pdlg-in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.pdlg-img{ background:#FFFFFF; border-right:1px solid var(--line-2); }
.pdlg-img img{ width:100%; aspect-ratio:1; object-fit:contain; }
.pdlg-body{ padding:clamp(22px,2.6vw,38px); }
.pdlg-badges{ display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.8rem; }
.pdlg-name{
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.2rem,2vw,1.6rem);
  line-height:1.15; letter-spacing:-.025em; color:var(--ink);
}
.pdlg .prod-tags{ margin-top:1.1rem; }
.pdlg .prod-meta{ margin-top:1.2rem; }
.pdlg-add{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-top:1.6rem; }
.pdlg-x{
  position:absolute; top:8px; right:10px; z-index:4;
  width:38px; height:38px; font-size:1.5rem; line-height:1; color:var(--ink-2);
}
.pdlg-x:hover{ color:var(--ink); }
@media (max-width:700px){
  .pdlg-in{ grid-template-columns:1fr; }
  .pdlg-img{ border-right:0; border-bottom:1px solid var(--line-2); }
}

.toast{
  position:fixed; z-index:95; top:calc(var(--nav-h) + 14px); right:var(--gutter);
  width:min(340px, calc(100vw - 2*var(--gutter)));
  display:flex; flex-direction:column; align-items:flex-start; gap:.9rem;
  padding:clamp(16px,1.6vw,20px);
  background:var(--dark); color:var(--on-dark);
  border-left:3px solid var(--accent);
  box-shadow:0 22px 50px -26px rgba(10,10,12,.8);
  opacity:0; transform:translateY(-8px);
  transition:opacity .32s var(--ease), transform .32s var(--ease);
}
.toast.on{ opacity:1; transform:none; }
.toast-msg{ color:var(--on-dark-2); font-size:.9rem; max-width:none; }
.toast-msg strong{ color:var(--on-dark); font-weight:600; }
.toast .btn{ background:var(--accent); color:#1B1C20; }
.toast .btn:hover{ background:#FFAE58; }
@media (prefers-reduced-motion:reduce){
  .toast{ transition:none; }
}

.prods-empty{ padding-block:clamp(40px,5vw,70px); text-align:center; color:var(--muted); }

.s-catcta{ background:var(--sand); padding-block:clamp(44px,5vw,72px); }
.catcta{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px,3vw,52px); flex-wrap:wrap;
}
.catcta p{ margin-top:.8rem; max-width:52ch; }

/* ---------- request list ---------- */
.s-cart{ background:var(--bg); padding-bottom:clamp(60px,7vw,104px); }
.cart-empty{ padding-block:clamp(40px,5vw,70px); border-top:1px solid var(--line); }
.cart-empty p{ margin-bottom:1.4rem; }
.cart-grid{
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px); align-items:start;
}
.cart-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-bottom:.9rem; border-bottom:1px solid var(--line);
}
.cart-line{
  display:grid;
  grid-template-columns:76px minmax(0,1fr) auto auto;
  gap:clamp(12px,1.6vw,22px); align-items:center;
  padding:clamp(16px,1.8vw,22px) 0; border-bottom:1px solid var(--line-2);
}
.line-img{
  width:76px; aspect-ratio:1; background:#FFFFFF; border:1px solid var(--line-2); overflow:clip;
}
.line-img img{ width:100%; height:100%; object-fit:contain; }
.line-img.is-blank{
  display:flex; align-items:center; justify-content:center;
  background:var(--sand); border:1px dashed var(--line);
}
.line-img span{
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.line-cat{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-deep); margin-bottom:.35rem;
}
.line-name{
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  letter-spacing:-.018em; color:var(--ink);
}
.line-meta{
  margin-top:.3rem; font-family:var(--font-mono); font-size:.63rem;
  letter-spacing:.08em; color:var(--muted);
}
.line-qty{ display:flex; align-items:center; }
.qstep{
  width:34px; height:38px; border:1px solid var(--line); background:var(--bg);
  color:var(--ink-2); font-size:1rem; line-height:1;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.qstep:hover{ border-color:var(--ink-2); color:var(--ink); }
.cart-line .line-qty .qty{ width:4.4rem; text-align:center; border-inline:0; }
.line-x{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); transition:color .3s var(--ease);
}
.line-x:hover{ color:#B23A78; }

.cart-form{
  border:1px solid var(--line); background:#FFFFFF;
  padding:clamp(20px,2.4vw,32px);
}
.cart-form .h-sm{ padding-bottom:1rem; margin-bottom:1.2rem; border-bottom:1px solid var(--line); }
.f-row{ margin-bottom:1rem; }
.f-row label{
  display:block; margin-bottom:.4rem;
  font-family:var(--font-mono); font-size:.63rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.f-row label span{ color:var(--accent-deep); }
.f-row input,.f-row textarea{
  width:100%; padding:.78em .85em; font:inherit; font-size:.94rem;
  color:var(--ink); background:var(--bg); border:1px solid var(--line);
}
.f-row textarea{ resize:vertical; }
.f-row input:focus-visible,.f-row textarea:focus-visible{
  outline:2px solid var(--accent-deep); outline-offset:1px;
}
.f-error{
  margin-bottom:1rem; padding:.7em .85em; font-size:.88rem;
  color:#8E1F4F; background:rgba(178,58,120,.08); border:1px solid rgba(178,58,120,.4);
}
.f-note{ margin-top:.9rem; font-size:.82rem; color:var(--muted); }

.cart-done{ padding-block:clamp(36px,4.5vw,64px); border-top:1px solid var(--line); }
.cart-done p{ margin-top:1.1rem; max-width:58ch; }
.done-acts{ display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); flex-wrap:wrap; margin-top:2rem; }
.done-copy{ margin-top:2.4rem; }
.done-copy summary{
  cursor:pointer; font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.done-copy pre{
  margin-top:1rem; padding:clamp(16px,1.8vw,24px); overflow-x:auto;
  background:var(--sand); border:1px solid var(--line);
  font-family:var(--font-mono); font-size:.78rem; line-height:1.7; color:var(--ink-2);
  white-space:pre-wrap;
}

@media (max-width:1200px){
  .prods{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1024px){
  .prods{ grid-template-columns:repeat(2,1fr); }
  .cart-grid{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .prods{ grid-template-columns:1fr; }
  .cart-line{ grid-template-columns:64px minmax(0,1fr); row-gap:.9rem; }
  .line-img{ width:64px; }
  .line-qty{ grid-column:2; }
  .line-x{ grid-column:2; justify-self:start; }
  .catcta .btn{ width:100%; text-align:center; }
}



/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.s-contactpage{ background:var(--bg); padding-block:clamp(44px,5vw,76px) clamp(60px,7vw,104px); }
.contact-cols{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(30px,4.5vw,84px); align-items:start;
}
.cinfo-lockup img{ width:170px; height:auto; }
.cinfo-lockup span{
  display:block; width:170px; margin-top:.55rem;
  font-family:var(--font-brand); font-weight:800; font-size:.92rem; letter-spacing:.185em;
  text-transform:uppercase; color:var(--ink);
}
.cinfo-blurb{ margin-top:1.6rem; max-width:44ch; }
.cinfo-list{ margin-top:2.2rem; border-top:1px solid var(--line); }
.cinfo-list > div{
  display:grid; grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);
  gap:clamp(12px,2vw,26px); padding:1rem 0; border-bottom:1px solid var(--line-2);
}
.cinfo-list dt{
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); padding-top:.2em;
}
.cinfo-list dd{ margin:0; font-size:.96rem; color:var(--ink); }
.cinfo-list a{ color:var(--accent-deep); }
.cinfo-list a:hover{ opacity:.75; }
.cform-done{ padding:clamp(24px,3vw,40px); border:1px solid var(--line); background:#FFFFFF; }
.cform-done p{ margin-top:1rem; }

@media (max-width:900px){
  .contact-cols{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .cinfo-list > div{ grid-template-columns:1fr; gap:.3rem; }
}