/* ============================================================
   HELIO — research-first components (light, navy, champagne)
   ============================================================ */

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em; font-family:var(--sans); font-weight:500;
  font-size:.86rem; letter-spacing:.005em; padding:.9em 1.6em; border-radius:var(--r-sm);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background var(--t), color var(--t), transform var(--t), border-color var(--t), box-shadow var(--t);
}
.btn:focus-visible{outline:none; box-shadow:var(--focus)}
.btn__arrow{transition:transform var(--t)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn-navy{background:var(--navy); color:var(--on-navy)}
.btn-navy:hover{background:var(--navy-2)}
.btn-gold{background:var(--gold); color:#fff}
.btn-gold:hover{background:var(--gold-deep)}
.btn-line{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-line:hover{border-color:var(--ink); background:var(--white)}
.btn-line--on-navy{color:var(--on-navy); border-color:var(--line-navy)}
.btn-line--on-navy:hover{border-color:var(--on-navy); background:rgba(255,255,255,.05)}
.btn-block{width:100%; justify-content:center}
.btn-lg{padding:1.05em 2em; font-size:.92rem}

.link-arrow{
  font-family:var(--mono); font-weight:500; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); display:inline-flex; align-items:center; gap:.6em; transition:gap var(--t), color var(--t);
}
.link-arrow em{font-style:normal; color:var(--gold-deep)}
.link-arrow:hover{gap:1em; color:var(--gold-deep)}

/* ---------------- top utility bar ---------------- */
.topbar{background:var(--navy-2); color:var(--on-navy-mute)}
.topbar__inner{max-width:var(--wrap-wide); margin:0 auto; padding:8px var(--gutter);
  display:flex; align-items:center; justify-content:center; gap:1.4em;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase}
.topbar b{color:var(--on-navy); font-weight:500}
.topbar__sep{color:var(--gold); opacity:.8}
@media(max-width:680px){.topbar__inner span:nth-child(n+4){display:none}}

/* ---------------- navigation ---------------- */
.nav{position:sticky; top:0; z-index:100; background:rgba(251,250,246,.9); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line)}
.nav__inner{max-width:var(--wrap-wide); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; height:76px}

.nav__logo{display:inline-flex; align-items:center; gap:11px; color:var(--ink); justify-self:start}
.nav__mark{color:var(--navy); flex:none}
.nav__word{font-family:var(--serif); font-weight:500; font-size:1.7rem; letter-spacing:-.01em; line-height:1}
.nav__logoimg{height:34px; width:auto; display:block}
@media(max-width:1000px){.nav__logoimg{height:30px}}
.nav__reg{font-family:var(--mono); font-size:.86rem; color:var(--gold-deep); vertical-align:.5em; margin-left:1px}

.nav__links{display:flex; gap:6px; list-style:none; margin:0; padding:0; justify-self:center; height:100%}
.nav__item{position:relative; display:flex; align-items:center}
.nav__item>a{
  font-family:var(--sans); font-size:.82rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-2); padding:0 16px; height:100%; display:inline-flex; align-items:center; gap:.4em;
  transition:color var(--t); position:relative;
}
.nav__item>a::after{content:""; position:absolute; left:16px; right:16px; bottom:22px; height:1.5px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform var(--t)}
.nav__item:hover>a{color:var(--ink)} .nav__item:hover>a::after{transform:scaleX(1)}
.nav__caret{width:8px; height:8px; opacity:.5; transition:transform var(--t)}
.nav__item:hover .nav__caret{transform:rotate(180deg)}

/* dropdown */
.nav__drop{
  position:absolute; top:100%; left:50%; transform:translate(-50%,8px);
  min-width:248px; background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--e2); padding:10px; opacity:0; visibility:hidden; transition:all var(--t); z-index:50;
}
.nav__item:hover .nav__drop{opacity:1; visibility:visible; transform:translate(-50%,4px)}
.nav__drop a{display:block; padding:10px 14px; border-radius:var(--r-sm); font-size:.9rem; color:var(--ink-2);
  transition:background var(--t), color var(--t)}
.nav__drop a small{display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--ink-faint); margin-top:2px; text-transform:uppercase}
.nav__drop a:hover{background:var(--lab); color:var(--ink)}

.nav__util{display:flex; gap:4px; align-items:center; justify-self:end}
.util{display:inline-flex; align-items:center; gap:7px; color:var(--ink-2); font-size:.78rem; font-weight:500;
  letter-spacing:.02em; padding:9px 12px; border-radius:var(--r-sm); transition:color var(--t), background var(--t)}
.util svg{width:19px; height:19px; flex:none}
.util:hover{color:var(--ink); background:var(--lab)}
.util__ic{position:relative; display:inline-flex}
.util--cart .count{position:absolute; top:-7px; right:-8px; min-width:16px; height:16px; padding:0 4px;
  background:var(--gold); color:#fff; border-radius:999px; font-size:.6rem; font-weight:600;
  display:flex; align-items:center; justify-content:center; line-height:1; font-family:var(--mono)}
.util--cart .count[data-count="0"]{display:none}
.util span{display:none}
@media(min-width:1120px){.util span{display:inline}}
.nav__burger{display:none; background:none; border:0; cursor:pointer; color:var(--ink); padding:8px}
.nav__burger svg{width:22px; height:22px}

@media(max-width:1000px){
  .nav__inner{grid-template-columns:auto 1fr auto; height:64px}
  .nav__links{display:none}
  .nav__util .util:not(.util--cart):not(.util--search){display:none}
  .nav__burger{display:block}
  .nav__links.open{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background:var(--white); padding:12px 20px 24px; gap:2px; border-bottom:1px solid var(--line); box-shadow:var(--e2); height:auto}
  .nav__links.open .nav__item{display:block}
  .nav__links.open .nav__item>a{height:auto; padding:14px 4px; font-size:.9rem}
  .nav__links.open .nav__drop{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; border-left:2px solid var(--line-2); border-radius:0; margin:0 0 8px 8px; padding:0 0 0 10px}
  .nav__caret{display:none}
}

/* ================= HERO ================= */
/* short hero: photo background + HTML text/buttons overlay (I control the height) */
.hero{position:relative; min-height:clamp(210px,26vh,300px); overflow:hidden; background:var(--navy);
  display:flex; align-items:center; padding:clamp(16px,2.2vw,28px) 0}
.hero__bg{position:absolute; inset:0; background-size:cover; background-position:center right}
.hero__scrim{position:absolute; inset:0; background:linear-gradient(90deg,
  rgba(8,26,50,.9) 0%, rgba(8,26,50,.66) 36%, rgba(8,26,50,.16) 64%, rgba(8,26,50,0) 100%)}
.hero__content{position:relative; z-index:2; width:100%}
.hero__textblock{max-width:560px}
.hero__h{font-family:var(--serif); color:#fff; font-weight:500; font-size:clamp(1.6rem,2.7vw,2.3rem);
  line-height:1.08; letter-spacing:-.015em; margin:9px 0 9px}
.hero__h em{font-style:italic; font-weight:440; color:#E7CDA6}
.hero__sub{color:#C6D4E2; font-size:clamp(.86rem,1.15vw,.96rem); line-height:1.45; margin:0 0 16px; max-width:46ch}
.hero__actions{display:flex; gap:12px; flex-wrap:wrap}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
@media(max-width:600px){
  .hero__scrim{background:linear-gradient(0deg, rgba(8,26,50,.92) 22%, rgba(8,26,50,.5) 100%)}
  .hero__textblock{max-width:none}
}
/* ---- legacy hero (unused after redesign) ---- */
.hero__grid{position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(120% 90% at 70% 10%,#000 0%,transparent 70%)}
.hero__inner{max-width:var(--wrap-wide); margin:0 auto; padding:clamp(28px,3.5vw,52px) var(--gutter) clamp(28px,3.5vw,48px);
  position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center}
.hero__eyebrow{margin-bottom:18px}
.hero__title{margin:0 0 20px; font-size:clamp(2.4rem,4.8vw,3.9rem)}
.hero__title .thin{display:block; color:var(--ink-mute); font-weight:300; font-style:italic}
.hero__lede{max-width:46ch; margin:0 0 26px}
.hero__cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.hero__meta{margin-top:44px; display:flex; gap:36px; flex-wrap:wrap; padding-top:26px; border-top:1px solid var(--line)}
.hero__stat .n{font-family:var(--serif); font-size:1.9rem; line-height:1; color:var(--ink)}
.hero__stat .l{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin-top:8px}
@media(max-width:900px){
  .hero__inner{grid-template-columns:1fr; gap:40px}
  .hero__visual{order:-1}
}

/* hero analytical visual — SVG instrument panel (swap bg image slot if desired) */
.instrument{position:relative; border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--white);
  box-shadow:var(--e2); overflow:hidden}
.instrument__bar{display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  border-bottom:1px solid var(--line); background:var(--lab); font-family:var(--mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute)}
.instrument__dot{width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px var(--gold-soft)}
.instrument__body{padding:22px 22px 8px}
.instrument__svg{width:100%; height:auto; display:block}
.instrument__foot{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line)}
.instrument__foot div{padding:14px 18px; border-right:1px solid var(--line)}
.instrument__foot div:last-child{border-right:0}
.instrument__foot .k{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint)}
.instrument__foot .v{font-family:var(--mono); font-size:.86rem; color:var(--ink); margin-top:5px; font-weight:500}
.trace{fill:none; stroke:var(--signal); stroke-width:2; stroke-linejoin:round;
  stroke-dasharray:1400; stroke-dashoffset:1400; animation:trace 2.6s var(--t-slow) forwards .3s}
.trace-fill{fill:url(#tg); opacity:0; animation:tracefill 1.2s ease forwards 1.8s}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes tracefill{to{opacity:.5}}
@media(prefers-reduced-motion:reduce){.trace{stroke-dashoffset:0; animation:none}.trace-fill{opacity:.5; animation:none}}

/* ================= HERO PROOF RIBBON ================= */
.ribbon{position:relative; z-index:2; border-top:1px solid var(--line); background:rgba(255,255,255,.6)}
.ribbon__in{max-width:var(--wrap-wide); margin:0 auto; padding:16px var(--gutter);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 32px}
.ribbon__in span{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute);
  display:inline-flex; align-items:center; gap:.6em}
.ribbon__in b{color:var(--ink); font-weight:600}
.ribbon__in span::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gold)}
@media(max-width:720px){.ribbon__in{justify-content:flex-start}}

/* ================= PURITY HIGHLIGHT ================= */
.purity{background:
  radial-gradient(90% 120% at 12% 20%, var(--gold-soft) 0%, transparent 45%),
  radial-gradient(80% 120% at 95% 90%, var(--lab-2) 0%, transparent 50%), var(--paper)}
.purity__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,5vw,80px); align-items:center}
.purity__fig{font-family:var(--sans); font-weight:600; font-size:clamp(4.4rem,9.5vw,8rem); line-height:1;
  margin:12px 0 0; color:var(--ink); letter-spacing:-.045em; font-variant-numeric:tabular-nums}
.purity__fig span{color:var(--gold); font-weight:500; letter-spacing:-.02em}
.purity__sub{margin:6px 0 20px; color:var(--ink-2)}
.purity__chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.chip{font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--ink-2);
  border:1px solid var(--line-2); border-radius:var(--r-pill); padding:8px 15px; background:var(--white)}
.chip b{color:var(--gold-deep); font-weight:600; margin-right:.4em}
/* framed lab photo + floating purity data card */
.purity__media{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--e3);
  aspect-ratio:4/3.4; background:var(--lab-2)}
.purity__media img{width:100%; height:100%; object-fit:cover; display:block}
.purity__media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(12,35,64,0) 40%, rgba(12,35,64,.55) 100%)}
.purity__badge{position:absolute; top:16px; left:16px; z-index:2; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--navy); background:rgba(255,255,255,.9);
  border-radius:var(--r-pill); padding:7px 13px; backdrop-filter:blur(4px)}
.purity__card{position:absolute; z-index:3; left:20px; bottom:20px; right:20px; max-width:320px;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(1.3) blur(14px);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--r); box-shadow:var(--e2); padding:20px 22px}
.purity__card-fig{font-family:var(--sans); font-weight:600; font-size:2.5rem; line-height:1; color:var(--ink); letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.purity__card-sub{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); margin:8px 0 2px}
.purity__card ul{list-style:none; margin:14px 0 0; padding:14px 0 0; border-top:1px solid var(--line-2)}
.purity__card li{display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:.8rem}
.purity__card li span{font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint)}
.purity__card li b{font-weight:500; color:var(--ink-2)}
@media(max-width:860px){.purity__grid{grid-template-columns:1fr; gap:40px}.purity__media{max-width:560px; aspect-ratio:16/11}}
@media(max-width:420px){.purity__card{left:14px; right:14px; bottom:14px; padding:16px 18px}.purity__card-fig{font-size:2.3rem}}

/* headline gold accent */
.hero__title .accent{font-family:var(--serif); font-style:italic; font-weight:440; color:var(--gold)}

/* faint molecular motif behind the headline */
.hero__mol{position:absolute; z-index:1; top:5%; left:-2%; width:min(68%,740px); height:auto;
  color:var(--navy); opacity:.07; pointer-events:none}

/* featured-compound data tag (top-left of photo) */
.hero__tag{position:absolute; z-index:2; top:16px; left:16px; max-width:236px;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(1.3) blur(14px);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--r-sm); box-shadow:var(--e1); padding:11px 14px}
.hero__tag-k{display:block; font-family:var(--mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:5px}
.hero__tag b{display:block; font-family:var(--serif); font-size:1.2rem; font-weight:500; color:var(--ink); line-height:1}
.hero__tag-d{display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.02em; color:var(--ink-mute); margin-top:6px}

/* live compound + CAS ticker */
.ticker{position:relative; z-index:2; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--white); overflow:hidden}
.ticker__track{display:inline-flex; align-items:center; white-space:nowrap; will-change:transform; animation:ticker 44s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker__track{animation:none; transform:none}}
.ticker__item{display:inline-flex; align-items:center; gap:.55em; padding:12px 24px; position:relative;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; color:var(--ink-mute)}
.ticker__item::after{content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:13px; background:var(--line)}
.ticker__item b{color:var(--ink); font-weight:600; letter-spacing:.03em}
.ticker__item i{font-style:normal; color:var(--ink-faint)}
.ticker__item em{font-style:normal; color:var(--gold-deep); font-weight:500}
.ticker__tag{text-transform:uppercase; letter-spacing:.1em; font-size:.66rem; color:var(--gold-deep)}

/* hero photo + floating chromatogram chip */
.hero__media{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--e3); background:var(--lab-2)}
/* show the full image at its natural ratio — no cover-crop, nothing cut off */
.hero__media img{width:100%; height:auto; display:block}
.hero__chip{position:absolute; z-index:2; left:18px; bottom:18px; right:18px; max-width:300px;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(1.3) blur(16px);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--r); box-shadow:var(--e2); padding:14px 16px}
.hero__chip-bar{display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:8px}
.hero__chip-svg{width:100%; height:auto; display:block}
.hero__chip-foot{margin-top:8px; font-family:var(--mono); font-size:.64rem; letter-spacing:.01em; color:var(--ink-2)}
.hero__chip-foot b{color:var(--gold-deep); font-weight:600}

/* ================= PRODUCT CAROUSEL (storefront) ================= */
.shopstrip{padding-top:clamp(36px,4vw,56px)}
.caro__nav{display:flex; align-items:center; gap:8px}
.caro__btn{width:40px; height:40px; border-radius:50%; border:1px solid var(--line-2); background:var(--white);
  cursor:pointer; font-size:1.35rem; line-height:1; color:var(--ink); display:inline-flex; align-items:center;
  justify-content:center; transition:all var(--t); flex:none; padding-bottom:2px}
.caro__btn:hover{background:var(--navy); color:#fff; border-color:var(--navy)}
.caro{overflow:hidden; padding:6px 0 10px}
.caro__track{display:flex; width:max-content; animation:caroscroll 60s linear infinite}
.caro:hover .caro__track{animation-play-state:paused}
.caro__track .mcard{flex:0 0 clamp(240px,23vw,290px); margin-right:22px}
@keyframes caroscroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
/* cards always visible (they're off-screen horizontally, so reveal must not hide them) */
.js .caro__track .mcard.reveal{opacity:1; transform:none; transition:none}
.caro__nav,.caro__btn{display:none}
@media(prefers-reduced-motion:reduce){.caro{overflow-x:auto; scrollbar-width:none}.caro__track{animation:none; width:auto}}
@media(max-width:520px){.caro__track .mcard{flex:0 0 78vw}}

/* ================= RESEARCH MATERIALS (categories as fields) ================= */
.fields{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.field{position:relative; background:var(--white); padding:26px 24px 22px; min-height:230px;
  display:flex; flex-direction:column; transition:background var(--t)}
.field:hover{background:var(--lab)}
.field__idx{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--gold-deep)}
.field__media{height:78px; margin:6px 0 16px; display:flex; align-items:center; justify-content:flex-start}
.field__media img{height:100%; width:auto; object-fit:contain; mix-blend-mode:multiply;
  filter:saturate(.92); transition:transform var(--t)}
.field:hover .field__media img{transform:translateY(-4px)}
.field__name{font-family:var(--serif); font-size:1.28rem; font-weight:500; margin:0 0 6px; line-height:1.1}
.field__desc{font-size:.82rem; color:var(--ink-mute); line-height:1.45; margin:0 0 16px}
.field__go{margin-top:auto; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); display:inline-flex; align-items:center; gap:.6em; transition:gap var(--t), color var(--t)}
.field__go em{font-style:normal; color:var(--gold-deep)}
.field:hover .field__go{gap:1em; color:var(--gold-deep)}
.field__count{position:absolute; top:26px; right:24px; font-family:var(--mono); font-size:.62rem; color:var(--ink-faint)}
@media(max-width:1000px){.fields{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fields{grid-template-columns:1fr}}

/* ================= THE HELIO STANDARD (3-stage workflow) ================= */
.workflow{display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative}
.stage{padding:36px 34px 40px; position:relative; border-left:1px solid var(--line-navy)}
.stage:first-child{border-left:0}
.stage__n{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--gold); margin-bottom:20px; display:block}
.stage__line{height:1px; background:linear-gradient(90deg,var(--gold),transparent); margin-bottom:24px; position:relative}
.stage__line::before{content:""; position:absolute; left:0; top:-2px; width:5px; height:5px; border-radius:50%; background:var(--gold)}
.stage h3{font-family:var(--serif); font-size:1.5rem; font-weight:500; color:var(--on-navy); margin:0 0 14px}
.stage p{color:var(--on-navy-mute); font-size:.92rem; line-height:1.62; margin:0}
.stage__ico{margin-bottom:22px; color:var(--gold); opacity:.9}
.stage__ico svg{width:30px; height:30px}
.workflow--4{grid-template-columns:repeat(4,1fr)}
.stage__pts{list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--line-navy)}
.stage__pts li{position:relative; padding:6px 0 6px 20px; color:var(--on-navy-mute); font-size:.84rem; line-height:1.4}
.stage__pts li::before{content:""; position:absolute; left:0; top:12px; width:8px; height:1px; background:var(--gold)}
@media(max-width:960px){.workflow--4{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.workflow{grid-template-columns:1fr}
  .stage{border-left:0; border-top:1px solid var(--line-navy); padding:32px 0}
  .stage:first-child{border-top:0}}
@media(max-width:560px){.workflow--4{grid-template-columns:1fr}}

/* ================= TRUST & PROOF ================= */
.proof__stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin-bottom:22px}
.pstat{background:var(--white); padding:30px 26px}
.pstat__n{font-family:var(--serif); font-size:clamp(2rem,3.4vw,2.8rem); line-height:1; color:var(--ink); letter-spacing:-.02em}
.pstat__n span{color:var(--gold)}
.pstat__l{font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); margin-top:12px; line-height:1.4}
.proof__points{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.ppoint{padding:24px 26px; background:var(--white); border:1px solid var(--line); border-radius:var(--r)}
.ppoint h4{font-family:var(--sans); font-size:1rem; font-weight:600; margin:0 0 8px; color:var(--ink)}
.ppoint p{margin:0; font-size:.9rem; color:var(--ink-mute); line-height:1.55}
@media(max-width:900px){.proof__stats{grid-template-columns:1fr 1fr}.proof__points{grid-template-columns:1fr}}

/* ================= HOW-TO / RESOURCES ================= */
.howto{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.howcard{position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:30px 28px 26px; display:flex; flex-direction:column; overflow:hidden;
  transition:border-color var(--t), transform var(--t), box-shadow var(--t)}
.howcard::after{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--gold); transform:scaleY(0); transform-origin:top; transition:transform var(--t)}
.howcard:hover{border-color:var(--line-2); transform:translateY(-4px); box-shadow:var(--e2)}
.howcard:hover::after{transform:scaleY(1)}
.howcard__n{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--gold-deep); margin-bottom:16px}
.howcard h3{font-family:var(--serif); font-size:1.3rem; font-weight:500; margin:0 0 10px; line-height:1.15}
.howcard p{font-size:.9rem; color:var(--ink-mute); line-height:1.6; margin:0 0 22px}
.howcard__go{margin-top:auto; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); display:inline-flex; gap:.5em; align-items:center}
.howcard__go em{font-style:normal; color:var(--gold-deep); transition:transform var(--t)}
.howcard:hover .howcard__go em{transform:translateX(4px)}
@media(max-width:820px){.howto{grid-template-columns:1fr}}

/* ================= FAQ ================= */
.faq{border-top:1px solid var(--line-2); max-width:920px}
.faq__i{border-bottom:1px solid var(--line-2)}
.faq__i summary{list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:var(--serif); font-size:clamp(1.1rem,1.8vw,1.35rem); font-weight:500; color:var(--ink); transition:color var(--t)}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{content:""; position:absolute; right:6px; top:50%; width:12px; height:12px; margin-top:-6px;
  background:no-repeat center/contain; transition:transform var(--t);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238C6C36' stroke-width='1.6'%3E%3Cpath d='M6 1v10M1 6h10'/%3E%3C/svg%3E")}
.faq__i[open] summary::after{transform:rotate(135deg)}
.faq__i summary:hover{color:var(--gold-deep)}
.faq__a{padding:0 44px 24px 0}
.faq__a p{margin:0; color:var(--ink-mute); font-size:.96rem; line-height:1.65; max-width:80ch}
.faq__a a{color:var(--gold-deep); border-bottom:1px solid var(--gold-soft)}
.faq__contact{margin-top:32px; font-size:.92rem; color:var(--ink-mute)}
.faq__contact a{color:var(--gold-deep); font-weight:500}

/* ================= ANALYTICAL QUALITY ================= */
.analytic{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,5vw,72px); align-items:center}
.methods{list-style:none; margin:26px 0 0; padding:0; border-top:1px solid var(--line)}
.methods li{display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
  padding:18px 0; border-bottom:1px solid var(--line)}
.methods .m-tag{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--gold-deep);
  border:1px solid var(--line-2); border-radius:var(--r-xs); padding:5px 9px; min-width:64px; text-align:center}
.methods .m-name{font-weight:500; font-size:1rem; color:var(--ink)}
.methods .m-name small{display:block; font-weight:400; font-size:.82rem; color:var(--ink-mute); margin-top:2px; font-family:var(--sans)}
.methods .m-dim{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)}
.spectrum{border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--white); box-shadow:var(--e2); overflow:hidden}
.spectrum__bar{padding:14px 20px; border-bottom:1px solid var(--line); background:var(--lab);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute);
  display:flex; justify-content:space-between}
.spectrum__body{padding:26px 24px}
.spectrum svg{width:100%; height:auto}
@media(max-width:860px){.analytic{grid-template-columns:1fr; gap:40px}}

/* ================= BATCH TRANSPARENCY ================= */
.batch{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(36px,5vw,64px); align-items:center}
.batch__flow{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.bstep{background:var(--navy-3); border:1px solid var(--line-navy); border-radius:var(--r); padding:20px 18px; position:relative}
.bstep__n{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; color:var(--gold); text-transform:uppercase}
.bstep h4{font-family:var(--sans); font-size:.94rem; font-weight:500; color:var(--on-navy); margin:12px 0 6px}
.bstep p{font-size:.78rem; color:var(--on-navy-mute); margin:0; line-height:1.5}
.bstep__arrow{position:absolute; right:-11px; top:50%; transform:translateY(-50%); z-index:2; color:var(--gold); opacity:.7}
.bstep:last-child .bstep__arrow{display:none}
.batch__panel{background:var(--navy-3); border:1px solid var(--line-navy); border-radius:var(--r); overflow:hidden;
  font-family:var(--mono); font-size:.82rem}
.batch__panel .row{display:flex; justify-content:space-between; gap:16px; padding:13px 20px; border-bottom:1px solid var(--line-navy)}
.batch__panel .row:last-child{border-bottom:0}
.batch__panel .k{color:var(--on-navy-mute); letter-spacing:.04em}
.batch__panel .v{color:var(--on-navy)}
.batch__panel .v.ok{color:#93C7A8}
.batch__head{padding:14px 20px; background:var(--navy-2); border-bottom:1px solid var(--line-navy);
  color:var(--on-navy-mute); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; display:flex; justify-content:space-between}
@media(max-width:900px){.batch{grid-template-columns:1fr; gap:36px}
  .batch__flow{grid-template-columns:1fr 1fr}
  .bstep__arrow{display:none}}

/* ================= RESEARCH LIBRARY ================= */
.library{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.libcard{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:28px 26px 26px;
  display:flex; flex-direction:column; transition:border-color var(--t), transform var(--t), box-shadow var(--t)}
.libcard:hover{border-color:var(--line-2); transform:translateY(-4px); box-shadow:var(--e2)}
.libcard__k{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:20px}
.libcard h3{font-family:var(--serif); font-size:1.32rem; font-weight:500; margin:0 0 10px; line-height:1.15}
.libcard p{font-size:.88rem; color:var(--ink-mute); margin:0 0 22px; line-height:1.55}
.libcard__go{margin-top:auto; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); display:inline-flex; gap:.6em; align-items:center}
.libcard__go em{font-style:normal; color:var(--gold-deep); transition:transform var(--t)}
.libcard:hover .libcard__go em{transform:translateX(4px)}
.libcard__soon{margin-top:auto; font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
@media(max-width:900px){.library{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.library{grid-template-columns:1fr}}

/* library filter tabs */
.libfilter{position:sticky; top:76px; z-index:40; background:rgba(251,250,246,.92); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
.libfilter__row{display:flex; gap:8px; padding:16px 0; overflow-x:auto; scrollbar-width:none}
.libfilter__row::-webkit-scrollbar{display:none}
.libtab{flex:none; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); background:var(--white); border:1px solid var(--line-2); border-radius:var(--r-pill);
  padding:9px 16px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:.6em; transition:all var(--t)}
.libtab .c{font-size:.66rem; color:var(--ink-faint)}
.libtab:hover{border-color:var(--ink-2)}
.libtab.is-active{background:var(--navy); color:var(--on-navy); border-color:var(--navy)}
.libtab.is-active .c{color:var(--gold)}
@media(max-width:1000px){.libfilter{top:64px}}

/* library sections */
.libsection{padding-top:clamp(40px,5vw,64px)}
.libsection:first-child{padding-top:clamp(28px,3vw,40px)}
.libsection__head{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:32px;
  padding-bottom:20px; border-bottom:1px solid var(--line)}
.libsection__intro{max-width:46ch; color:var(--ink-mute); font-size:.95rem; line-height:1.55; margin:0}
@media(max-width:760px){.libsection__head{flex-direction:column; align-items:flex-start; gap:12px}}

/* ================= PRODUCT / MATERIAL CARDS (research catalog) ================= */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
@media(max-width:1080px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.grid{grid-template-columns:1fr}}

.mcard{background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  display:flex; flex-direction:column; overflow:hidden; transition:border-color var(--t), box-shadow var(--t), transform var(--t)}
.mcard:hover{border-color:var(--line-2); box-shadow:var(--e2); transform:translateY(-4px)}
.mcard__media{position:relative; aspect-ratio:5/4; background:
  linear-gradient(180deg,var(--white),var(--lab));
  display:flex; align-items:center; justify-content:center; padding:22px; border-bottom:1px solid var(--line)}
.mcard__media::before{content:""; position:absolute; inset:0; opacity:.4;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:28px 28px; mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent 78%)}
.mcard__media img{position:relative; width:auto; height:100%; max-width:72%; object-fit:contain; mix-blend-mode:multiply;
  transition:transform var(--t-slow)}
.mcard:hover .mcard__media img{transform:scale(1.04)}
.mcard__tag{position:absolute; top:12px; left:12px; font-family:var(--mono); font-size:.58rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-deep); background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-xs); padding:4px 8px}
.mcard__doc{position:absolute; top:12px; right:12px; font-family:var(--mono); font-size:.56rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--signal); display:inline-flex; align-items:center; gap:5px}
.mcard__doc::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--signal)}
.mcard__b{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1}
.mcard__name{font-family:var(--serif); font-weight:500; font-size:1.22rem; margin:0 0 4px; line-height:1.12; color:var(--ink)}
.mcard__sub{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px}
.mcard__specs{list-style:none; margin:0 0 16px; padding:0; border-top:1px solid var(--line)}
.mcard__specs li{display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); font-size:.78rem}
.mcard__specs .k{font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint)}
.mcard__specs .v{color:var(--ink-2); font-weight:500}
.mcard__foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:4px}
.mcard__price{font-family:var(--mono); font-size:.95rem; color:var(--ink); font-weight:500}
.mcard__price .from{font-size:.62rem; color:var(--ink-faint); letter-spacing:.08em; text-transform:uppercase; margin-right:5px}
.mcard__view{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
  display:inline-flex; gap:.5em; align-items:center; transition:gap var(--t), color var(--t)}
.mcard__view em{font-style:normal; color:var(--gold-deep)}
.mcard:hover .mcard__view{gap:.9em; color:var(--gold-deep)}
.mcard__add{border:1px solid var(--line-2); background:var(--white); color:var(--ink); border-radius:var(--r-sm);
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  font-size:1.1rem; line-height:1; transition:all var(--t); flex:none}
.mcard__add:hover{background:var(--navy); color:#fff; border-color:var(--navy)}
.badge-oos{font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep)}

/* ================= CATALOG / COLLECTION ================= */
.catalog{display:grid; grid-template-columns:250px 1fr; gap:clamp(28px,4vw,52px); align-items:start}
.filters{position:sticky; top:96px}
.filters__group{border-top:1px solid var(--line); padding:20px 0}
.filters__group:first-child{border-top:0; padding-top:0}
.filters__h{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 14px}
.filters a{display:flex; justify-content:space-between; gap:8px; padding:7px 0; font-size:.9rem; color:var(--ink-2); transition:color var(--t)}
.filters a .c{font-family:var(--mono); font-size:.7rem; color:var(--ink-faint)}
.filters a:hover{color:var(--gold-deep)}
.filters a.active{color:var(--ink); font-weight:600}
.filters a.active .c{color:var(--gold-deep)}
.catalog__main{min-width:0}
.catalog__bar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-bottom:20px; margin-bottom:28px; border-bottom:1px solid var(--line)}
.catalog__count{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--ink-mute)}
.catalog__count b{color:var(--ink)}
.searchbox{position:relative; flex:1; max-width:320px}
.searchbox input{width:100%; font-family:var(--sans); font-size:.9rem; padding:11px 14px 11px 38px;
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--white); color:var(--ink)}
.searchbox input:focus{outline:none; border-color:var(--gold); box-shadow:var(--focus)}
.searchbox svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--ink-faint)}
.azbar{display:flex; flex-wrap:wrap; gap:2px; margin-bottom:26px}
.azbar a{font-family:var(--mono); font-size:.72rem; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-xs); color:var(--ink-mute); transition:all var(--t)}
.azbar a:hover{background:var(--navy); color:#fff}
.azbar a.dim{color:var(--line-2); pointer-events:none}
.catalog__empty{grid-column:1/-1; padding:60px 0; text-align:center; color:var(--ink-mute); font-family:var(--mono); font-size:.8rem}
.mobile-filters{display:none}
@media(max-width:860px){
  .catalog{grid-template-columns:1fr}
  .filters{display:none}
  .mobile-filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px}
  .mobile-filters a{font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; text-transform:uppercase;
    padding:8px 14px; border:1px solid var(--line-2); border-radius:var(--r-pill); color:var(--ink-2)}
  .mobile-filters a.active{background:var(--navy); color:#fff; border-color:var(--navy)}
}

/* ================= PRODUCT DETAIL — technical record ================= */
.record{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(32px,4vw,64px); align-items:start}
.record__media{position:sticky; top:96px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--white)}
.record__stage{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:40px; position:relative;
  background:radial-gradient(120% 100% at 50% 12%,var(--white),var(--lab))}
.record__stage::before{content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:36px 36px; mask-image:radial-gradient(70% 70% at 50% 45%,#000,transparent 75%)}
.record__stage img{position:relative; width:auto; height:100%; max-width:62%; object-fit:contain; mix-blend-mode:multiply;
  filter:drop-shadow(0 24px 34px rgba(12,35,64,.16))}
.record__cap{border-top:1px solid var(--line); padding:14px 20px; display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)}
.record__crumbs{font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--ink-mute); margin-bottom:20px}
.record__crumbs a:hover{color:var(--gold-deep)}
.record__cat{margin-bottom:14px}
.record__title{margin:0 0 8px}
.record__intro{font-size:1.02rem; color:var(--ink-mute); line-height:1.6; margin:0 0 8px}

.spec-block{margin-top:36px}
.spec-block__h{display:flex; align-items:center; gap:14px; margin-bottom:8px}
.spec-block__h .eyebrow{margin:0}
.spec-block__h::after{content:""; flex:1; height:1px; background:var(--line)}
.spec-table{list-style:none; margin:0; padding:0}
.spec-table li{display:grid; grid-template-columns:180px 1fr; gap:16px; padding:13px 0; border-bottom:1px solid var(--line)}
.spec-table .k{font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); padding-top:2px}
.spec-table .v{color:var(--ink-2); font-size:.94rem}
.spec-table .v a{color:var(--gold-deep); border-bottom:1px solid var(--gold-soft)}
.spec-table .v .ok{color:var(--signal)}
@media(max-width:520px){.spec-table li{grid-template-columns:1fr; gap:2px}}

/* purchase — present but quiet */
.buy{margin-top:36px; border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--lab); padding:24px}
.buy__row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.buy__price{font-family:var(--serif); font-size:2rem; color:var(--ink); line-height:1}
.buy__price small{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:4px}
.buy__form{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:18px}
.select{position:relative}
.select select{appearance:none; font-family:var(--mono); font-size:.86rem; padding:.85em 2.6em .85em 1.1em;
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--white); color:var(--ink); cursor:pointer}
.select select:focus{outline:none; border-color:var(--gold); box-shadow:var(--focus)}
.select::after{content:"▾"; position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--ink-mute)}
.buy__note{margin-top:14px; font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; color:var(--ink-faint)}

/* ================= COA table ================= */
.coa-table{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--white)}
.coa-row{display:grid; grid-template-columns:2fr 1.1fr 1.2fr auto; gap:20px; align-items:center;
  padding:16px 22px; border-bottom:1px solid var(--line); transition:background var(--t)}
.coa-row:last-child{border-bottom:0}
a.coa-row:hover{background:var(--lab)}
.coa-row--head{background:var(--lab); font-family:var(--mono); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint)}
.coa-mat{font-weight:500; color:var(--ink); display:flex; align-items:center; gap:9px}
.coa-dot{width:6px; height:6px; border-radius:50%; background:var(--signal); flex:none}
.coa-lot{font-size:.8rem; color:var(--ink-2)}
.coa-an{font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint)}
.coa-view{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
  display:inline-flex; gap:.5em; align-items:center; justify-self:end; white-space:nowrap}
.coa-view em{font-style:normal; color:var(--gold-deep)}
a.coa-row:hover .coa-view{color:var(--gold-deep)}
@media(max-width:720px){
  .coa-row{grid-template-columns:1fr auto; gap:6px 16px; padding:14px 16px}
  .coa-an{display:none}
  .coa-row--head{display:none}
  .coa-lot{grid-row:2; font-size:.72rem; color:var(--ink-faint)}
  .coa-view{grid-row:1/3}
}

/* ================= PRODUCT RESEARCH DOSSIER ================= */
.record__over{margin:0 0 8px; font-size:1rem}
.record__over p:first-child{font-size:1.06rem; color:var(--ink-2)}
.dossier{margin-top:clamp(48px,6vw,88px); padding-top:clamp(40px,5vw,64px); border-top:1px solid var(--line-2)}
.doss{margin-bottom:clamp(40px,5vw,64px)}
.doss:last-child{margin-bottom:0}
.doss--split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,60px)}
.doss--split .spec-block__h{margin-top:0}
@media(max-width:820px){.doss--split{grid-template-columns:1fr; gap:36px}}

/* key characteristics cards */
.kchars{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.kchar{background:var(--white); padding:18px 20px; display:flex; flex-direction:column; gap:7px}
.kchar__k{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
.kchar__v{font-size:.94rem; color:var(--ink); font-weight:500; line-height:1.35}
@media(max-width:900px){.kchars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.kchars{grid-template-columns:1fr}}

/* component profiles (blends) */
.profiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.profile{border:1px solid var(--line); border-radius:var(--r); padding:22px 22px 12px; background:var(--white)}
.profile h4{font-family:var(--serif); font-size:1.2rem; font-weight:500; margin:0 0 12px; color:var(--ink)}
.profile ul{list-style:none; margin:0; padding:0}
.profile li{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-top:1px solid var(--line); font-size:.84rem}
.profile li span{font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); flex:none}
.profile li b{font-weight:500; color:var(--ink-2); text-align:right}

/* research areas */
.areas{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.area{background:var(--white); padding:18px 22px; display:grid; grid-template-columns:130px 1fr; gap:16px; align-items:baseline}
.area__k{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep)}
.area__d{font-size:.9rem; color:var(--ink-2); line-height:1.5}
@media(max-width:820px){.areas{grid-template-columns:1fr}.area{grid-template-columns:120px 1fr}}

/* references */
.refs{margin:0; padding-left:1.4em; counter-reset:none}
.refs li{font-size:.86rem; color:var(--ink-mute); line-height:1.6; margin-bottom:10px; padding-left:6px}
.refs li::marker{font-family:var(--mono); font-size:.72rem; color:var(--gold-deep)}
.refs__pc{margin:20px 0 0}
.refs__pc a{font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; color:var(--gold-deep); border-bottom:1px solid var(--gold-soft); padding-bottom:2px}
.refs__ruo{margin:18px 0 0; font-family:var(--mono); font-size:.68rem; line-height:1.6; color:var(--ink-faint); max-width:80ch}

/* why helio band */
.whyhelio{background:var(--navy); border-radius:var(--r-lg); padding:clamp(28px,3.5vw,44px); position:relative; overflow:hidden}
.whyhelio__h{margin-bottom:24px}
.whyhelio__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
.whyhelio__grid b{display:block; color:var(--on-navy); font-size:1rem; font-weight:600; margin-bottom:5px}
.whyhelio__grid span{color:var(--on-navy-mute); font-size:.84rem; line-height:1.45}
@media(max-width:820px){.whyhelio__grid{grid-template-columns:1fr 1fr; gap:22px}}

/* ================= generic page hero ================= */
.phero{padding:clamp(26px,3.2vw,44px) 0 clamp(26px,3vw,40px); border-bottom:1px solid var(--line);
  background:radial-gradient(110% 90% at 85% 0%,var(--lab-2),transparent 60%)}
.phero .crumbs{font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--ink-mute); margin-bottom:22px}
.phero .crumbs a:hover{color:var(--gold-deep)}
.phero h1{margin:16px 0 18px}
.prose{max-width:72ch}
.prose p{color:var(--ink-2); margin:0 0 1.15em; line-height:1.72}
.prose h2{font-family:var(--serif); font-weight:500; font-size:clamp(1.4rem,2.4vw,1.9rem); margin:1.6em 0 .5em; letter-spacing:-.01em}
.prose h3{font-family:var(--serif); font-weight:500; font-size:1.25rem; margin:1.4em 0 .4em}
.prose h4{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); margin:1.6em 0 .6em}
.prose ul,.prose ol{margin:0 0 1.2em; padding-left:1.2em; color:var(--ink-2)}
.prose li{margin:.35em 0; line-height:1.6}
.prose a{color:var(--gold-deep); border-bottom:1px solid var(--gold-soft)}
.prose a:hover{border-color:var(--gold)}
.prose strong{color:var(--ink); font-weight:600}
.prose blockquote{margin:1.4em 0; padding:4px 0 4px 20px; border-left:2px solid var(--gold); font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--ink)}
.prose table{width:100%; border-collapse:collapse; margin:1.4em 0; font-size:.9rem}
.prose th,.prose td{text-align:left; padding:11px 14px; border:1px solid var(--line); vertical-align:top}
.prose thead th,.prose tr:first-child td{background:var(--lab); font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); font-weight:500}
.prose img{border-radius:var(--r-sm); margin:1.2em 0}
/* record body slightly tighter/smaller */
.prose--record{font-size:.95rem}
.prose--record h2{font-size:clamp(1.3rem,2vw,1.6rem)}

/* ================= trust strip ================= */
.trust{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border-block:1px solid var(--line)}
.trust__i{background:var(--paper); padding:26px 24px; display:flex; gap:14px; align-items:flex-start}
.trust__ic{color:var(--gold-deep); flex:none; margin-top:2px}
.trust__ic svg{width:22px; height:22px}
.trust__i b{font-weight:600; font-size:.94rem; color:var(--ink)}
.trust__i span{display:block; color:var(--ink-mute); font-size:.82rem; margin-top:3px}
@media(max-width:820px){.trust{grid-template-columns:1fr 1fr}}

/* ================= CTA band ================= */
.cta{position:relative; overflow:hidden}
.cta__grid{position:absolute; inset:0; opacity:.14;
  background-image:linear-gradient(var(--on-navy) 1px,transparent 1px),linear-gradient(90deg,var(--on-navy) 1px,transparent 1px);
  background-size:56px 56px; mask-image:radial-gradient(90% 120% at 50% 0%,#000,transparent 70%)}
.cta__inner{position:relative; z-index:2; text-align:center; padding:clamp(64px,8vw,120px) 0}
.cta h2{color:var(--on-navy); margin:0 auto 18px; max-width:20ch}
.cta p{color:var(--on-navy-mute); max-width:52ch; margin:0 auto 34px}
.cta__btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ================= about split ================= */
.about{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center}
.about__media{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-2); background:var(--lab-2);
  aspect-ratio:4/5; position:relative; display:flex; align-items:center; justify-content:center}
.about__media .imgslot{position:absolute; inset:0; background-size:cover; background-position:center}
.about__media .imgnote{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
.about__vals{list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:2px 28px}
.about__vals li{padding:16px 0; border-top:1px solid var(--line)}
.about__vals .k{font-family:var(--serif); font-size:1.1rem; color:var(--ink)}
.about__vals .d{font-size:.84rem; color:var(--ink-mute); margin-top:2px}
@media(max-width:820px){.about{grid-template-columns:1fr; gap:36px}.about__media{aspect-ratio:16/10}}

/* ================= footer ================= */
.footer{background:var(--navy); color:var(--on-navy)}
.footer__top{max-width:var(--wrap-wide); margin:0 auto; padding:clamp(56px,7vw,88px) var(--gutter) 48px;
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1.4fr; gap:40px}
.footer__brand .m{font-family:var(--serif); font-size:1.9rem; display:inline-flex; align-items:baseline; gap:2px}
.footer__brand .m .reg{font-family:var(--mono); font-size:.9rem; color:var(--gold)}
.footer__brand p{color:var(--on-navy-mute); font-size:.86rem; max-width:34ch; margin:16px 0 0; line-height:1.6}
.footer h4{font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:0 0 18px}
.footer ul{list-style:none; margin:0; padding:0}
.footer li{margin-bottom:11px}
.footer li a{font-size:.88rem; color:var(--on-navy-mute); transition:color var(--t)}
.footer li a:hover{color:var(--on-navy)}
.footer__news p{color:var(--on-navy-mute); font-size:.84rem; margin:0 0 14px}
.footer__news form{display:flex; flex-direction:column; gap:12px}
.footer__news input{width:100%; background:var(--navy-3); border:1px solid var(--line-navy); color:var(--on-navy);
  padding:12px 14px; font-family:var(--sans); font-size:.86rem; border-radius:var(--r-sm); outline:none}
.footer__news input:focus{border-color:var(--gold)}
.footer__legal{border-top:1px solid var(--line-navy)}
.footer__legal .in{max-width:var(--wrap-wide); margin:0 auto; padding:26px var(--gutter) 40px;
  font-family:var(--mono); font-size:.66rem; line-height:1.7; color:var(--on-navy-mute)}
.footer__ruo{display:inline-block; font-weight:500; color:var(--gold); letter-spacing:.1em; margin-bottom:8px}
@media(max-width:960px){.footer__top{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:600px){.footer__top{grid-template-columns:1fr 1fr}.footer__brand,.footer__news{grid-column:1/-1}}

/* utility */
.center{text-align:center}
.mt-s{margin-top:14px}.mt{margin-top:26px}.mt-l{margin-top:44px}
.imgslot-note{position:absolute; bottom:10px; right:12px; font-family:var(--mono); font-size:.58rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); background:rgba(255,255,255,.7); padding:3px 7px; border-radius:var(--r-xs)}