/* =========================================================
   VOLKIN — Controlled Energy
   Brand system from the creative direction.
   Display: BBH Hegarty · Body: LT Superior · Mono: LT Superior Mono
   (free fallbacks: Archivo / Hanken Grotesk / IBM Plex Mono until the
    licensed files are dropped into assets/fonts/ — see assets/fonts/README.txt)
   ========================================================= */

/* ---- Brand fonts (licensed — files in assets/fonts/) ---- */
/* BBH Hegarty — display. Single weight; the range lets headings use it at any weight
   without faux-bold synthesis. */
@font-face{
  font-family:"BBH Hegarty";
  src:url("assets/fonts/BBHHegarty.woff2") format("woff2");
  font-weight:400 900; font-style:normal; font-display:swap;
}
/* LT Superior — body */
@font-face{ font-family:"LT Superior"; src:url("assets/fonts/LTSuperior-Regular.woff2") format("woff2");  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"LT Superior"; src:url("assets/fonts/LTSuperior-Medium.woff2") format("woff2");   font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"LT Superior"; src:url("assets/fonts/LTSuperior-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"LT Superior"; src:url("assets/fonts/LTSuperior-Bold.woff2") format("woff2");     font-weight:700; font-style:normal; font-display:swap; }
/* LT Superior Mono — labels / specs */
@font-face{ font-family:"LT Superior Mono"; src:url("assets/fonts/LTSuperiorMono-Regular.woff2") format("woff2");  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"LT Superior Mono"; src:url("assets/fonts/LTSuperiorMono-Medium.woff2") format("woff2");   font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"LT Superior Mono"; src:url("assets/fonts/LTSuperiorMono-Semibold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }

:root{
  /* Primary palette */
  --sand:    #F0DEBA;
  --taupe:   #C78D71;
  --copper:  #AE583F;
  --walnut:  #492D2A;
  --merino:  #F5EEE3;
  --black:   #0A0809;
  --charcoal:#1E1920;

  /* Secondary — product color-coding */
  --blue:  #5B86A6;
  --green: #6FA873;
  --pink:  #BC8AA6;

  /* Roles */
  --bg-dark:  var(--black);
  --bg-cream: var(--merino);
  --ink:      var(--black);
  --ink-soft: #5b5048;
  --line-dark: rgba(245,238,227,.12);
  --line-light: rgba(73,45,42,.16);

  --copper-grad: linear-gradient(135deg, var(--sand) 0%, var(--taupe) 45%, var(--copper) 100%);
  --metal-grad:  linear-gradient(180deg, #f7e9c8, var(--taupe) 40%, var(--copper) 70%, var(--walnut));

  --maxw: 1240px;
  --pad: clamp(1.25rem, 4vw, 4rem);
  --r: 14px;

  --ff-display: "BBH Hegarty", "Archivo", system-ui, sans-serif;
  --ff-body: "LT Superior", "Hanken Grotesk", system-ui, sans-serif;
  --ff-mono: "LT Superior Mono", "IBM Plex Mono", ui-monospace, monospace;
}

/* ---------- Reset ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--ff-body);
  background:var(--bg-dark);
  color:var(--merino);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,canvas,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:var(--copper); color:var(--merino); }

/* ---------- Type primitives ---------- */
.eyebrow{
  font-family:var(--ff-mono);
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--taupe);
  font-weight:500;
}
.eyebrow--copper{ color:var(--copper); }

.h-display{
  font-family:var(--ff-display);
  font-weight:900;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:-.02em;
  font-size:clamp(2.4rem, 6vw, 5rem);
}

.section{ padding:clamp(4.5rem, 10vw, 9rem) var(--pad); }
.section > *{ max-width:var(--maxw); margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--ff-mono);
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  padding:.95em 1.7em; border-radius:999px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background .3s, color .3s, box-shadow .3s;
  position:relative; white-space:nowrap;
}
.btn--solid{ background:var(--copper); color:var(--merino); }
.btn--solid:hover{ background:var(--taupe); transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(174,88,63,.6); }
.btn--ghost{ border:1px solid currentColor; color:inherit; }
.btn--ghost:hover{ background:rgba(245,238,227,.08); transform:translateY(-2px); }
.btn--lg{ padding:1.1em 2.2em; font-size:.82rem; }

/* ===========================================================
   NAV
   =========================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  padding:1.15rem var(--pad);
  /* slides up out of view on scroll-down, back on scroll-up; fades with it */
  transition:background .4s, backdrop-filter .4s, padding .4s, border-color .4s,
             transform .5s cubic-bezier(.4,0,.2,1), opacity .45s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(10,8,9,.78);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line-dark);
  padding-block:.85rem;
}
.nav--hidden{ transform:translateY(-115%); opacity:0; pointer-events:none; }
.nav__inner{
  max-width:var(--maxw); margin-inline:auto;
  display:flex; align-items:center; gap:2.4rem;
  padding-right:clamp(6rem, 11vw, 8.5rem);   /* reserve room for the fixed Inquire button */
}
.brand{ position:relative; display:inline-flex; align-items:center; color:var(--merino); }
.brand__icon{ height:42px; width:42px; display:block; color:var(--merino); position:relative; z-index:2; flex:none; }
/* wordmark sits in an overflow-clipped slot anchored at the icon; it SLIDES out to the
   right (and fades in) only when scrolled all the way to the top */
.brand__word-wrap{ position:absolute; left:54px; top:50%; transform:translateY(-50%);
  width:118px; height:30px; overflow:hidden; pointer-events:none; }
.brand__word{ display:block; height:30px; width:auto; color:var(--merino);
  transform:translateX(-118%); opacity:0;
  transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .45s ease; }
.nav--top .brand__word{ transform:translateX(0); opacity:1; }
.brand__logo{ height:42px; width:auto; display:block; color:var(--merino); }
.brand--lg .brand__logo{ height:34px; }
.nav__links{ display:flex; gap:2.4rem; margin-left:auto; }
.nav__links a{
  font-family:var(--ff-mono); font-size:.86rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(245,238,227,.78); position:relative; padding:.2em 0;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--copper);
  transition:width .35s cubic-bezier(.2,.8,.2,1);
}
.nav__links a:hover{ color:var(--merino); }
.nav__links a:hover::after{ width:100%; }
.nav__links a.is-current{ color:var(--merino); }
.nav__links a.is-current::after{ width:100%; background:var(--taupe); }
/* fixed so it stays put while the bar hides; sits where the bar's right edge is */
.nav__cta{
  position:fixed; top:1.05rem; right:var(--pad); z-index:62;
  font-size:.82rem; padding:.85em 1.6em;
}
/* Inquire button stays put on hover — colour/shadow change only, no movement */
.nav__cta:hover{ transform:none; }
.nav__burger{ display:none; flex-direction:column; gap:5px; padding:.5rem; margin-left:auto; }
.nav__burger span{ width:24px; height:2px; background:var(--merino); transition:.3s; }

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:17rem var(--pad) 3rem;   /* top-heavy padding biases the content down to the line center */
  background:
    radial-gradient(120% 90% at 70% 10%, #2a1c19 0%, var(--black) 55%),
    var(--black);
  overflow:hidden;
}
.hero__wires{ position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:.95; }
.hero__grain{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.5;
  background:
    linear-gradient(180deg, rgba(10,8,9,.5) 0%, transparent 25%, transparent 70%, var(--black) 100%);
}
.hero__content{ position:relative; z-index:3; max-width:var(--maxw); margin-inline:auto; width:100%; text-align:center; }
.hero__title{
  font-family:var(--ff-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(2.5rem, 10.5vw, 9.5rem); line-height:.86; letter-spacing:-.035em;
  margin:.15em 0 .35em;
}
.hero__title span{ display:block; }
.hero__title span:last-child{
  background:var(--copper-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__lead{
  max-width:52ch; margin-inline:auto; text-align:center;
  font-size:clamp(1rem,1.4vw,1.2rem); color:rgba(245,238,227,.88);
  /* soft dark glow lifts the copy off the flowing lines for legibility */
  text-shadow:0 0 16px rgba(10,8,9,.95), 0 0 5px rgba(10,8,9,.9), 0 1px 2px rgba(10,8,9,.85);
}
.hero__actions{ display:flex; flex-direction:column; align-items:center; gap:.85rem; margin-top:2.2rem; }
.hero__actions .btn{ min-width:16rem; justify-content:center; }
.hero__scroll{
  position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(245,238,227,.5);
}
.hero__scroll i{ width:1px; height:34px; background:linear-gradient(var(--copper),transparent); animation:scrolly 1.8s ease-in-out infinite; }
@keyframes scrolly{ 0%,100%{ transform:scaleY(.4); transform-origin:top; opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }

/* Narrow windows: the wires converge right behind the body copy. Drop the
   content into the lower half and deepen the wash there so the lines recede
   behind the words and they read cleanly. */
@media (max-width:640px){
  .hero{ justify-content:center; padding:6.5rem var(--pad); }
  /* scale the title down so the longest word ("Communities") always fits the
     viewport with margin — otherwise it overflows and reads as off-centre */
  .hero__title{ font-size:clamp(1.9rem, 8.5vw, 3.4rem); }
  .hero__grain{
    background:linear-gradient(180deg,
      rgba(10,8,9,.55) 0%, transparent 20%, transparent 40%,
      rgba(10,8,9,.85) 70%, var(--black) 100%);
  }
  .hero__lead{ font-size:1.02rem; }
}

/* ===========================================================
   MARQUEE
   =========================================================== */
.marquee{ background:var(--charcoal); border-block:1px solid var(--line-dark); overflow:hidden; padding:1.1rem 0; }
.marquee__track{ display:flex; width:max-content; animation:scrollx 32s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__set{ display:flex; align-items:center; }
.marquee__set b{
  font-family:var(--ff-mono); font-weight:500; font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(245,238,227,.72); padding:0 2.4rem; position:relative; white-space:nowrap;
}
.marquee__set b::after{ content:"●"; position:absolute; right:-.35rem; color:var(--copper); font-size:.4rem; top:50%; transform:translateY(-50%); }
@keyframes scrollx{ to{ transform:translateX(-50%) } }

/* ===========================================================
   PRODUCTS (dark)
   =========================================================== */
.products{ background:var(--bg-dark); position:relative; }
.products__head{ max-width:640px; margin-bottom:3rem; display:grid; gap:1rem; }
.products__head p:last-child{ color:rgba(245,238,227,.72); }

/* Package strip — horizontal scroll, arrows each end, edge-hover auto-scroll */
.packstrip{ position:relative; }
.packstrip__track{
  display:flex; gap:clamp(1.2rem,3vw,2.2rem);
  overflow-x:auto;   /* no scroll-snap / no CSS smooth — they fought the rAF auto-scroll;
                        arrow clicks request smooth per-call instead */
  padding:.5rem clamp(3rem,6vw,4.8rem);       /* room so cards clear the arrows */
  scrollbar-width:none; -ms-overflow-style:none;
}
.packstrip__track::-webkit-scrollbar{ display:none; }
.packcard{ margin:0; flex:0 0 auto; width:min(360px, 80vw);
  display:flex; flex-direction:column; gap:1.1rem; }
.packcard .pack{ transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, filter .35s; }
.packcard:hover .pack{ transform:scale(1.03); filter:brightness(1.07);
  box-shadow:0 32px 64px -30px rgba(0,0,0,.75); }
.packcard__cap{ font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(245,238,227,.72); text-align:center; }
.packcard--soon .pack{ opacity:.7; }
.pack__gauge--soon{ font-size:clamp(1.4rem,3.4vw,2rem) !important; letter-spacing:.04em;
  text-transform:uppercase; color:rgba(245,238,227,.8); }

.packstrip__arrow{
  position:absolute; top:43%; transform:translateY(-50%); z-index:5;
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  color:var(--merino); background:rgba(20,16,17,.72); border:1px solid var(--line-dark);
  backdrop-filter:blur(8px); transition:background .25s, transform .25s, opacity .25s;
}
.packstrip__arrow:hover{ background:var(--copper); }
/* lit while the strip is auto-scrolling that direction */
.packstrip__arrow.is-active{ background:var(--copper); border-color:var(--copper); color:var(--merino);
  box-shadow:0 0 18px -2px rgba(174,88,63,.7); }
.packstrip__arrow svg{ width:22px; height:22px; }
.packstrip__arrow--prev{ left:0; }
.packstrip__arrow--next{ right:0; }
.packstrip__arrow[disabled]{ opacity:.25; pointer-events:none; }

.products__cta{ display:flex; justify-content:center; margin-top:clamp(2rem,5vw,3.2rem); }
.cta__actions{ display:flex; justify-content:center; margin-top:clamp(1.8rem,4vw,2.6rem); }
/* CTA button stays still on hover — colour/shadow only, no movement */
.cta .btn:hover{ transform:none; }
.products__tabs{ display:flex; gap:.6rem; margin-bottom:2.5rem; flex-wrap:wrap; }
.ptab{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--ff-mono); font-size:.8rem; letter-spacing:.12em;
  padding:.7em 1.3em; border-radius:999px; border:1px solid var(--line-dark);
  color:rgba(245,238,227,.7); transition:.3s;
}
.ptab__dot{ width:8px; height:8px; border-radius:50%; background:var(--copper); transition:.3s; }
.ptab:hover{ color:var(--merino); border-color:rgba(245,238,227,.3); }
.ptab.is-active{ background:var(--merino); color:var(--black); border-color:var(--merino); }
.ptab.is-active .ptab__dot{ background:var(--copper); }

.product{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.product__visual{ perspective:1200px; }

/* Packaging mock */
.pack{
  aspect-ratio:1/1; border-radius:18px; padding:1.4rem; position:relative; overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%, #2a2230, var(--black) 70%);
  border:1px solid var(--line-dark);
  display:flex; flex-direction:column;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
  transition:transform .4s ease;
}
.pack__top{ display:flex; justify-content:space-between; align-items:center; z-index:2; position:relative; }
.pack__brand{ display:inline-flex; align-items:center; }
.pack__logo{ height:20px; width:auto; display:block; }
.pack__badges{ display:flex; gap:.7rem; }
.pack__badges svg{ width:18px; height:18px; color:rgba(245,238,227,.6); }
.pack__wires{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.pack__foot{ margin-top:auto; z-index:2; position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.pack__gauge{ font-family:var(--ff-display); font-weight:900; font-size:clamp(2.6rem,7vw,4rem); line-height:.85; }
.pack__meta{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.1em; color:rgba(245,238,227,.7); text-align:right; max-width:14ch; }
.pack__flag{ position:absolute; left:1.4rem; bottom:.45rem; font-family:var(--ff-mono); font-size:.5rem; letter-spacing:.06em; color:rgba(245,238,227,.28); z-index:2; }

.product__series{ font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--copper); margin-bottom:.8rem; }
.product__name{ font-family:var(--ff-display); font-weight:900; text-transform:uppercase; font-size:clamp(2rem,4.5vw,3.2rem); line-height:.9; letter-spacing:-.02em; margin-bottom:1.1rem; }
.product__desc{ color:rgba(245,238,227,.78); max-width:46ch; margin-bottom:1.8rem; }
.spec{ border-top:1px solid var(--line-dark); margin-bottom:2rem; }
.spec > div{ display:grid; grid-template-columns:minmax(120px,.4fr) 1fr; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line-dark); }
.spec dt{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,238,227,.5); }
.spec dd{ font-size:.95rem; color:var(--merino); }

/* ===========================================================
   ANATOMY (cream)
   =========================================================== */
.anatomy{ background:var(--bg-cream); color:var(--ink); }
/* tall track + sticky inner = pin & scrub without scroll-jacking libraries */
.anatomy__scroll{ position:relative; height:140vh; }
.anatomy__pin{ position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden; }
.anatomy__inner{ width:100%; max-width:var(--maxw); margin-inline:auto; padding:0 var(--pad);
  display:grid; gap:clamp(1.4rem,3vw,2.6rem); }
.anatomy__head{ max-width:640px; display:grid; gap:.5rem; }
.anatomy__head .h-display{ color:var(--ink); font-size:clamp(1.7rem,3.2vw,2.9rem); }
.anatomy__grid{ display:grid; grid-template-columns:.82fr 1.05fr 1fr; gap:clamp(1.4rem,3.5vw,3.4rem); align-items:center; }

/* LEFT · static cross-section map */
.anatomy__map{ display:grid; gap:.9rem; justify-items:center; }
.cross{ width:min(290px,100%); height:auto; display:block; }
.cross [class^="cx-"]{ transition:filter .4s, stroke .4s, stroke-width .4s; }
.cross[data-layer="0"] .cx-copper{ filter:drop-shadow(0 0 11px rgba(255,205,140,.95)); }
.cross[data-layer="1"] .cx-pvc{ stroke:var(--copper); stroke-width:6; }
.cross[data-layer="2"] .cx-jacket{ stroke:var(--copper); stroke-width:6; }
.anatomy__mapcap{ font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }

/* MIDDLE · layer text (inactive layers dim during the scrub) */
.layers{ list-style:none; display:grid; gap:.5rem; }
.layer{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; padding:1rem 1.2rem; border-radius:12px;
  border:1px solid transparent; opacity:.4; transition:background .4s, transform .4s, opacity .4s, border-color .4s; }
.layer.is-active{ background:var(--sand); border-color:var(--line-light); transform:translateX(6px); opacity:1; }
.layer__no{ font-family:var(--ff-mono); font-size:.78rem; color:var(--copper); letter-spacing:.1em; padding-top:.2rem; }
.layer h4{ font-family:var(--ff-display); font-weight:800; text-transform:uppercase; font-size:1.05rem; color:var(--walnut); margin-bottom:.3rem; }
.layer p{ color:var(--ink-soft); font-size:.92rem; }

/* RIGHT · x-ray scanner panel */
.anatomy__xray{ position:relative; width:100%; max-width:460px; aspect-ratio:1; margin-inline:auto;
  border-radius:18px; overflow:hidden;
  background:radial-gradient(120% 120% at 50% 38%, #1d1722 0%, var(--black) 72%);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.6), inset 0 0 0 1px rgba(245,238,227,.07); }
/* stacked layer shots; scroll fades the OUTER layer out to reveal the inner (no CSS
   transition so opacity tracks the scrub continuously) */
/* contain (not cover) so the whole cable + its cut cross-section stays visible (zoomed out) */
.xray__shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; will-change:opacity; }
.xray__scan{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.22;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 4px); }
/* subtle vignette so the render seats into the panel */
.anatomy__xray::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  box-shadow:inset 0 0 60px rgba(10,8,9,.6); border-radius:inherit; }
.xray__cap{ position:absolute; left:1.1rem; bottom:.95rem; z-index:2;
  font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(245,238,227,.72); }

/* Three Layers — small intro line under the heading */
.anatomy__intro{ margin-top:1rem; max-width:52ch; color:var(--ink-soft);
  font-size:clamp(.9rem,1.05vw,1rem); line-height:1.65; }

/* ===========================================================
   ABOUT · ENGINEERED FOR RELIABILITY (cream, fanning wires)
   =========================================================== */
.about2{ position:relative; color:var(--ink); overflow:hidden; background:var(--sand); }
.about2__fan{ display:none; }   /* replaced by the line graphic anchored to the photo below */
.about2__inner{ position:relative; max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2.5rem,6vw,6rem); align-items:center; }
.about2__media{ position:relative; z-index:1; }
/* copper line fountain anchored to the PHOTO so it stays centred on it at every width;
   transparent PNG → no rectangle, sits behind the photo and fans down around it */
.about2__media::before{
  content:""; position:absolute; z-index:-1; left:50%; top:50%;
  transform:translate(-50%,-50%); width:154%; aspect-ratio:908 / 893;
  background:url("assets/about-lines.webp") center / contain no-repeat; pointer-events:none;
}
.about2__content{ position:relative; z-index:3; }
.about2__media img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:6px; display:block;
  box-shadow:0 40px 80px -28px rgba(73,45,42,.55), 0 0 0 1px rgba(73,45,42,.08); }
.about2__content .eyebrow{ margin-bottom:1.3rem; }
.about2__content .h-display{ color:var(--ink); font-size:clamp(2rem,3.9vw,3.4rem); line-height:.98; margin-bottom:1.5rem; white-space:nowrap; }
.about2__lead{ color:var(--ink-soft); max-width:48ch; font-size:clamp(1rem,1.25vw,1.12rem); line-height:1.7; margin-bottom:2.3rem; }
.about2__cta{ font-family:var(--ff-mono); letter-spacing:.16em; text-transform:uppercase; font-size:.78rem; }

/* ===========================================================
   STATS / STANDARDS (dark)
   =========================================================== */
.stats{ position:relative; overflow:hidden; color:var(--merino); background:var(--black); }
.stats__lines{ display:none; }   /* old canvas corner-fan */
/* lines only: the image is a LUMINANCE MASK over a copper gradient, so the bright wires
   show and the dark background becomes fully transparent — pure-black section, no rectangle,
   and the heading stays clear (empty areas mask out to nothing) */
.stats::before{
  content:""; position:absolute; left:0; bottom:0; z-index:0; pointer-events:none;
  width:min(64%, 880px); aspect-ratio:1400 / 756;
  background:url("assets/lines-engineered.webp") left bottom / contain no-repeat;
}
/* as the window narrows, shrink the fan so it never runs under the text;
   once the standards list stacks to full width, hide it entirely */
@media (max-width:1180px){ .stats::before{ width:min(54%, 560px); } }
@media (max-width:900px){ .stats::before{ display:none; } }
/* narrow: the desktop lines hide, leaving the right half of the stat block empty.
   Drop the uploaded copper-line graphic into that top-right space. mix-blend:screen
   makes its black vanish (seamless, no rectangle); text sits above (z-index:1) so the
   lines only fill the empty area and never cover words. */
@media (max-width:900px){
  .stats::after{
    content:""; position:absolute; top:-10%; right:0; z-index:0; pointer-events:none;
    width:min(94%, 760px); aspect-ratio:1;
    background:url("assets/engineered-bg.webp") top right / contain no-repeat;
    opacity:.82;
  }
}
.stats > .section, .stats__grid, .standards{ position:relative; z-index:1; }
.stats__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-bottom:5rem; }
.stat__num{ font-family:var(--ff-display); font-weight:900; font-size:clamp(3rem,7vw,5.5rem); line-height:1; background:var(--copper-grad); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; }
.stat__label{ font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe); display:block; margin:.6rem 0 .8rem; }
.stat p{ color:rgba(245,238,227,.62); font-size:.92rem; max-width:30ch; }
.standards{ display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.standards__title{ font-family:var(--ff-display); font-weight:900; text-transform:uppercase; font-size:clamp(2rem,4vw,3.2rem); line-height:.92; letter-spacing:-.02em; }
.standards__list{ display:grid; }
.standards__list > div{ display:grid; grid-template-columns:minmax(140px,.5fr) 1fr; gap:1.5rem; padding:1.1rem 0; border-top:1px solid var(--line-dark); }
.standards__list dt{ font-family:var(--ff-mono); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--copper); }
.standards__list dd{ color:rgba(245,238,227,.78); }

/* ===========================================================
   RESOURCES (cream)
   =========================================================== */
.resources{ background:var(--bg-cream); color:var(--ink); }
.resources__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:2.6rem; flex-wrap:wrap; }
.resources__head .h-display{ color:var(--ink); margin-top:.6rem; }
.resources__head .btn{ color:var(--walnut); border-color:var(--walnut); }
/* light background → the faint cream ghost-hover is invisible here, so fill with
   copper and lift like the solid buttons */
.resources__head .btn:hover{
  background:var(--copper); border-color:var(--copper); color:var(--merino);
  transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(174,88,63,.55);
}
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.card{ cursor:pointer; }
.card__img{
  aspect-ratio:4/3; border-radius:12px; margin-bottom:1.1rem; overflow:hidden; position:relative;
  background:linear-gradient(135deg, var(--taupe), var(--copper));
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
}
.card__img--b{ background:linear-gradient(135deg, var(--blue), #34526b); }
.card__img--c{ background:linear-gradient(135deg, var(--walnut), var(--copper)); }
.card__img::after{
  content:attr(data-ph); position:absolute; inset:auto 0 0 0; padding:.7rem .9rem;
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(245,238,227,.85); background:linear-gradient(transparent,rgba(0,0,0,.45));
}
.card:hover .card__img{ transform:translateY(-5px); box-shadow:0 24px 44px -22px rgba(73,45,42,.5); }
.card__tag{ font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--merino); background:var(--walnut); padding:.3em .7em; border-radius:4px; }
.card h3{ font-family:var(--ff-display); font-weight:800; text-transform:uppercase; font-size:1.2rem; line-height:1.05; color:var(--walnut); margin:.9rem 0 .5rem; }
.card time{ font-family:var(--ff-mono); font-size:.72rem; color:var(--ink-soft); letter-spacing:.08em; }

/* ===========================================================
   CTA / INQUIRE (dark + wires)
   =========================================================== */
.cta{ position:relative; padding:clamp(4.5rem,9vw,8rem) var(--pad) clamp(8rem,16vw,13rem); overflow:hidden;
  background:
    linear-gradient(180deg, rgba(10,8,9,.55) 0%, rgba(10,8,9,.12) 42%, rgba(10,8,9,0) 72%),
    url("assets/inquire-bg.jpg") center bottom / cover no-repeat,
    var(--black); }
/* ripple variant (index-ripple.html) — dark gradient so the animated wires read */
.cta--ripple{ background:radial-gradient(120% 120% at 50% 118%, #3a221b 0%, var(--black) 62%), var(--black); }
.cta__wires{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.cta__inner{ position:relative; z-index:2; max-width:760px; margin-inline:auto; text-align:center; }
.cta__title{ font-family:var(--ff-display); font-weight:900; text-transform:uppercase; font-size:clamp(2.2rem,6vw,4.6rem); line-height:.92; letter-spacing:-.02em; margin:.4rem 0 1rem; }
.cta__lead{ color:rgba(245,238,227,.78); max-width:52ch; margin:0 auto 2.6rem; }
.quote{ display:grid; gap:1rem; text-align:left; }
.quote__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.quote label{ display:grid; gap:.5rem; font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,238,227,.6); }
.quote label span{ color:var(--copper); }
.quote input, .quote textarea{
  font-family:var(--ff-body); font-size:.95rem; letter-spacing:0; text-transform:none;
  color:var(--merino); background:rgba(245,238,227,.05); border:1px solid var(--line-dark);
  border-radius:10px; padding:.85rem 1rem; transition:border-color .3s, background .3s;
  resize:vertical;
}
.quote input::placeholder, .quote textarea::placeholder{ color:rgba(245,238,227,.32); }
.quote input:focus, .quote textarea:focus{ outline:none; border-color:var(--copper); background:rgba(245,238,227,.08); }
.quote .btn{ justify-self:start; margin-top:.5rem; }
.quote__note{ font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.04em; text-transform:none; color:var(--green); min-height:1.2em; }
.quote__note.is-error{ color:var(--copper); }

/* ===========================================================
   FOOTER
   =========================================================== */
.footer{ background:var(--charcoal); padding:clamp(3rem,6vw,5rem) var(--pad) 2rem; }
.footer__top{ max-width:var(--maxw); margin-inline:auto; display:flex; justify-content:space-between; gap:3rem; flex-wrap:wrap; padding-bottom:3rem; border-bottom:1px solid var(--line-dark); }
.footer__cols{ display:grid; grid-template-columns:repeat(4,auto); gap:3rem; }
.footer__cols h5{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe); margin-bottom:1rem; font-weight:500; }
.footer__cols a{ display:block; font-size:.9rem; color:rgba(245,238,227,.7); padding:.3rem 0; transition:color .25s; }
.footer__cols a:hover{ color:var(--copper); }
.footer__meta{ max-width:var(--maxw); margin:2rem auto 0; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.08em; color:rgba(245,238,227,.45); }
.footer__meta a:hover{ color:var(--copper); }
.footer__disclaimer{ max-width:var(--maxw); margin:1.4rem auto 0; font-size:.7rem; color:rgba(245,238,227,.28); font-family:var(--ff-mono); letter-spacing:.04em; }

/* ===========================================================
   LOADER
   =========================================================== */
.loader{ position:fixed; inset:0; z-index:100; background:var(--black); display:grid; place-content:center; gap:1.5rem; justify-items:center; transition:opacity .6s, visibility .6s; }
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__mark{ color:var(--copper); }
.loader__logo{ display:block; }
.loader__bar{ width:140px; height:2px; background:var(--line-dark); overflow:hidden; border-radius:2px; }
.loader__bar span{ display:block; height:100%; width:0; background:var(--copper-grad); animation:load 1.1s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes load{ to{ width:100% } }
/* the square stays put; the monogram strokes draw along their length as the bar fills.
   ld-1 (diagonal) + ld-2 (U→K) are the two top-left strokes, drawn first. */
.loader__draw path{ stroke-dasharray:100; stroke-dashoffset:100; }
.loader__draw .ld-1{ animation:loaderDraw .72s ease-out .1s forwards; }
.loader__draw .ld-2{ animation:loaderDraw .85s ease-out .1s forwards; }
.loader__draw .ld-3{ animation:loaderDraw .45s ease-out .6s forwards; }
@keyframes loaderDraw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce){
  .loader__draw path{ stroke-dashoffset:0; animation:none; }
}

/* ===========================================================
   REVEAL ANIMATION
   =========================================================== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.8,.2,1) var(--d,0s), transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0s); }
.reveal.is-in{ opacity:1; transform:none; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__cta{ top:.9rem; padding:.7em 1.25em; font-size:.76rem; }   /* stays visible on mobile too */
  .nav__burger{ display:flex; }
  .nav.is-open .nav__links{
    display:flex; position:absolute; inset:100% 0 auto 0; flex-direction:column; gap:0;
    background:rgba(10,8,9,.96); backdrop-filter:blur(12px); padding:1rem var(--pad) 1.5rem; border-bottom:1px solid var(--line-dark);
  }
  .nav.is-open .nav__links a{ padding:.9rem 0; border-bottom:1px solid var(--line-dark); }
  .nav.is-open .nav__burger span:first-child{ transform:translateY(3.5px) rotate(45deg); }
  .nav.is-open .nav__burger span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

  .product{ grid-template-columns:1fr; }
  /* below the breakpoint: drop the pin/scrub, stack and show everything static */
  .anatomy__scroll{ height:auto; }
  .anatomy__pin{ position:static; height:auto; padding:5.5rem 0; }
  .anatomy__grid{ grid-template-columns:1fr; gap:2.2rem; }
  .layer{ opacity:1; }
  /* stacked: keep the line-fountain visible, but fade it out in the gap below the photo
     so it's cut off before it reaches the "About VOLKIN" eyebrow */
  .about2__inner{ grid-template-columns:1fr; gap:clamp(3rem, 12vw, 7rem); }
  .about2__media::before{
    -webkit-mask-image:linear-gradient(to bottom, #000 78%, transparent 88%);
            mask-image:linear-gradient(to bottom, #000 78%, transparent 88%);
  }
  .stats__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .standards{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .footer__top{ flex-direction:column; }
  .footer__cols{ grid-template-columns:1fr 1fr; gap:2rem; }
}
@media (max-width:540px){
  .quote__row{ grid-template-columns:1fr; }
  .spec > div{ grid-template-columns:1fr; gap:.2rem; }
  .standards__list > div{ grid-template-columns:1fr; gap:.3rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ===========================================================
   INNER PAGES — about / products / resources / inquire / article
   =========================================================== */
.bg-cream{ background:var(--bg-cream); color:var(--ink); }
.bg-sand{ background:var(--sand); color:var(--ink); }
.bg-dark{ background:var(--bg-dark); color:var(--merino); }

/* page hero — dark, copper valley lines, centred */
.pagehero{ position:relative; padding:clamp(8rem,15vh,11rem) var(--pad) max(5.5rem, calc(5.3vw + 2.5rem));
  text-align:center; overflow:hidden; color:var(--merino);
  /* inner-pages hero graphic: full-bleed line band along the bottom; bright lines start
     ~17vw up, so the bottom padding lifts the copy to just above them */
  background:
    linear-gradient(180deg, rgba(10,8,9,.62) 0%, rgba(10,8,9,.12) 38%, rgba(10,8,9,0) 62%),
    url("assets/hero-inner.jpg") center bottom / 100% auto no-repeat, var(--black); }
.pagehero__inner{ position:relative; z-index:2; max-width:920px; margin-inline:auto; }
.pagehero h1{ font-family:var(--ff-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(2.6rem,8vw,6rem); line-height:.9; letter-spacing:-.03em; margin:.22em 0 .42em; }
.pagehero__lead{ max-width:60ch; margin:0 auto; color:rgba(245,238,227,.82); font-size:clamp(1rem,1.3vw,1.18rem); }

/* About — mission two-col */
.mission{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.mission .h-display{ color:var(--ink); }
.mission__body p{ color:var(--ink); margin-bottom:1.1rem; max-width:56ch; }
.mission__body p:last-child{ margin-bottom:0; }

/* stat band on sand */
.statband{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.statband .snum{ font-family:var(--ff-display); font-weight:900; font-size:clamp(2.8rem,6vw,4.6rem); line-height:1; color:var(--copper); display:block; }
.statband .slabel{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--copper); display:block; margin:.5rem 0 .55rem; }
.statband p{ color:var(--ink); font-size:.92rem; max-width:30ch; }

/* value / layer cards */
.vcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.vcard{ background:var(--sand); border:1px solid var(--line-light); border-radius:var(--r); padding:2rem 1.8rem; }
.bg-sand .vcard{ background:rgba(245,238,227,.55); }
.vcard__icon{ width:36px; height:36px; color:var(--copper); margin-bottom:1.1rem; }
.vcard__no{ font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.2em; color:var(--copper); }
.vcard h3{ font-family:var(--ff-display); font-weight:800; text-transform:uppercase; font-size:1.3rem; color:var(--ink); margin:.5rem 0 .6rem; }
.vcard p{ color:var(--ink); font-size:.94rem; }

/* Products — detail row (reuses .spec, .pack) */
.prod{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.prod + .prod{ margin-top:clamp(2.5rem,6vw,4.5rem); }
.prod--rev .prod__visual{ order:2; }
.prod__series{ font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--copper); margin-bottom:.7rem; }
.prod__name{ font-family:var(--ff-display); font-weight:900; text-transform:uppercase; font-size:clamp(2rem,4.5vw,3.2rem); line-height:.9; letter-spacing:-.02em; color:var(--walnut); margin-bottom:1rem; }
.prod__desc{ color:var(--ink-soft); max-width:46ch; margin-bottom:1.6rem; }
.prod .spec{ border-top-color:var(--line-light); }
.prod .spec > div{ border-bottom-color:var(--line-light); }
.prod .spec dt{ color:var(--ink-soft); }
.prod .spec dd{ color:var(--ink); }
.prod__flag{ display:block; margin-top:.7rem; font-family:var(--ff-mono); font-size:.58rem; letter-spacing:.08em; color:rgba(73,45,42,.5); text-align:center; }

/* Resources — toolbar + grid (reuses .cards/.card) */
.rtools{ display:flex; justify-content:flex-end; gap:1.6rem; margin-bottom:2rem; font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.rtools span{ color:var(--copper); }

/* Article page */
.articlehero{ position:relative; min-height:60vh; display:flex; align-items:flex-end; justify-content:center; text-align:center; padding:8rem var(--pad) 3.5rem; overflow:hidden; color:var(--merino); }
.articlehero__img{ position:absolute; inset:0; background:linear-gradient(135deg,#6b3b2c,#241712); }
.articlehero__img--b{ background:linear-gradient(135deg,#34526b,#16242f); }
.articlehero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,8,9,.3) 0%, rgba(10,8,9,.82) 100%); }
.articlehero__inner{ position:relative; z-index:2; max-width:820px; }
.articlehero h1{ font-family:var(--ff-display); font-weight:900; text-transform:uppercase; font-size:clamp(2rem,5vw,3.6rem); line-height:.98; letter-spacing:-.02em; margin:.5rem 0; }
.articlehero time{ font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.1em; color:rgba(245,238,227,.72); }
.article{ max-width:740px; margin-inline:auto; padding:clamp(3rem,7vw,5rem) var(--pad); color:var(--ink); }
.article p{ color:var(--ink-soft); margin-bottom:1.2rem; line-height:1.75; }
.article h2{ font-family:var(--ff-display); font-weight:800; text-transform:uppercase; font-size:1.5rem; color:var(--walnut); margin:2.2rem 0 .8rem; }
.article__fig{ margin:2.2rem 0; }
.article__fig .ph{ aspect-ratio:16/9; border-radius:12px; background:linear-gradient(135deg,var(--taupe),var(--copper)); }
.article__fig figcaption{ font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.08em; color:var(--ink-soft); margin-top:.6rem; }
.article__back{ font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--copper); display:inline-block; margin-bottom:1.5rem; }

/* Inquire — quotation form + contact card */
.qwrap{ display:grid; grid-template-columns:1.35fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.qform{ display:grid; gap:1.1rem; }
.qform h2{ font-family:var(--ff-display); font-weight:900; text-transform:uppercase; font-size:clamp(1.8rem,3.6vw,2.6rem); color:var(--walnut); margin-bottom:.3rem; }
.qrow{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.qform label{ display:grid; gap:.5rem; font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.qform label span{ color:var(--copper); }
.qform input, .qform select, .qform textarea{ font-family:var(--ff-body); font-size:.95rem; text-transform:none; letter-spacing:0; color:var(--ink); background:#fff; border:1px solid var(--line-light); border-radius:10px; padding:.8rem 1rem; width:100%; }
.qform textarea{ resize:vertical; }
.qform .btn{ justify-self:start; margin-top:.4rem; }
.qnote{ font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.04em; text-transform:none; color:var(--green); min-height:1.1em; }
.qnote.is-error{ color:var(--copper); }
.qcard{ background:var(--sand); border:1px solid var(--line-light); border-radius:var(--r); padding:1.9rem; }
.qcard h3{ font-family:var(--ff-display); font-weight:800; text-transform:uppercase; font-size:1.2rem; color:var(--walnut); margin-bottom:1.3rem; }
.qcard dl > div{ margin-bottom:1rem; }
.qcard dt{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--copper); margin-bottom:.15rem; }
.qcard dd{ color:var(--ink); font-size:.95rem; }
.qcard a{ color:var(--ink); }

@media (max-width:900px){
  .mission, .prod, .qwrap{ grid-template-columns:1fr; }
  .prod--rev .prod__visual{ order:0; }
  .qrow{ grid-template-columns:1fr; }
  .statband, .vcards, .cards{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .statband, .vcards, .cards{ grid-template-columns:1fr; }
  .rtools{ justify-content:flex-start; flex-wrap:wrap; gap:1rem; }
}

/* ===========================================================
   $10K INNER-PAGE POLISH (about / products / resources / articles)
   =========================================================== */
/* photo-backed images */
.card__img, .rfeatured__img, .articlehero__img{ background-size:cover; background-position:center; }

/* resources cards — hover lift + image zoom */
.cards .card{ transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.cards .card:hover{ transform:translateY(-6px); }
.cards .card .card__img{ overflow:hidden; }
.cards .card .card__img{ transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.cards .card:hover .card__img{ transform:scale(1.05); }

/* resources — featured lead story */
.rfeatured{ position:relative; display:flex; align-items:flex-end; overflow:hidden;
  border-radius:16px; min-height:clamp(320px,42vw,480px); margin-bottom:2.4rem;
  border:1px solid var(--line-light); }
.rfeatured__img{ position:absolute; inset:0; transition:transform .9s cubic-bezier(.2,.8,.2,1); }
.rfeatured:hover .rfeatured__img{ transform:scale(1.04); }
.rfeatured::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,8,9,.15) 0%, rgba(10,8,9,.45) 55%, rgba(10,8,9,.88) 100%); }
.rfeatured__body{ position:relative; z-index:2; padding:clamp(1.6rem,3.5vw,3rem); color:var(--merino); max-width:680px; }
.rfeatured__body h3{ font-family:var(--ff-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.7rem,3.6vw,3rem); line-height:.98; margin:.6rem 0 .5rem; }
.rfeatured__body p{ color:rgba(245,238,227,.82); max-width:54ch; margin-bottom:1.2rem; }
.rfeatured__body time{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.1em; color:rgba(245,238,227,.65); }

/* article — editorial reading experience */
.articlehero{ min-height:68vh; }
.article__meta{ display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center;
  font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); border-block:1px solid var(--line-light); padding:1rem 0; margin-bottom:2.2rem; }
.article__meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--copper); }
.article__lead{ font-size:clamp(1.15rem,1.7vw,1.42rem); line-height:1.6; color:var(--ink); margin-bottom:1.6rem; }
.pullquote{ font-family:var(--ff-display); font-weight:800; font-size:clamp(1.4rem,2.7vw,2.05rem);
  line-height:1.18; color:var(--walnut); border-left:3px solid var(--copper); padding-left:1.4rem;
  margin:2.4rem 0; text-transform:none; }
.article__end{ margin-top:3rem; padding-top:1.8rem; border-top:1px solid var(--line-light);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.article__end .article__back{ margin:0; }

/* =========================================================
   $10K POLISH II — editorial image bands + reassurance strip
   ========================================================= */
/* full-bleed cinematic image band with copy seated bottom-left */
.imgband{ position:relative; height:clamp(340px,52vh,580px); overflow:hidden; isolation:isolate; }
.imgband__img{ position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.03); transition:transform 1.2s cubic-bezier(.2,.8,.2,1); }
.imgband:hover .imgband__img{ transform:scale(1.07); }
.imgband::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(10,8,9,.82) 0%, rgba(10,8,9,.5) 42%, rgba(10,8,9,.05) 78%, transparent 100%),
             linear-gradient(0deg, rgba(10,8,9,.55) 0%, transparent 45%); }
.imgband__cap{ position:absolute; z-index:2; left:0; bottom:0;
  padding:clamp(1.8rem,5vw,3.6rem); max-width:620px; color:var(--merino); }
.imgband__cap .eyebrow{ margin-bottom:.7rem; }
.imgband__cap h2{ font-family:var(--ff-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.7rem,3.8vw,2.9rem); line-height:.98; color:var(--merino); }
.imgband__cap p{ color:rgba(245,238,227,.85); max-width:44ch; margin-top:.9rem;
  font-size:clamp(.98rem,1.2vw,1.1rem); line-height:1.55; }

/* reassurance / "what happens next" strip */
.qstrip{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3rem);
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:clamp(2rem,4vw,2.8rem);
  border-top:1px solid var(--line-light); }
.qstrip__item{ }
.qstrip__no{ font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.14em; color:var(--copper); }
.qstrip__item h4{ font-family:var(--ff-display); font-weight:800; text-transform:uppercase;
  color:var(--walnut); font-size:1.05rem; margin:.5rem 0 .4rem; }
.qstrip__item p{ color:var(--ink-soft); font-size:.94rem; line-height:1.5; max-width:34ch; }
@media (max-width:760px){ .qstrip{ grid-template-columns:1fr; gap:1.6rem; } }