/* ============================================================
   AHMED FINE — inner-page components & shared extras
   loads AFTER styles.css
   ============================================================ */

/* ============================================================
   LIGHT THEME  (body.theme-light)
   warm paper palette, navy accent kept
   ============================================================ */
body.theme-light{
  --ink:   #FBFAF7;
  --ink-2: #F4F2EC;
  --ink-3: #ECE9E1;
  --teal:       #15295C;
  --teal-bright:#1C3470;
  --teal-glow:  rgba(21,41,92,.22);
  --paper: #14181F;
  --text:  rgba(20,24,31,.86);
  --muted: rgba(20,24,31,.58);
  --faint: rgba(20,24,31,.46);
  --line:  rgba(20,24,31,.18);
  --line-2:rgba(20,24,31,.09);
  background:var(--ink);
}
body.theme-light ::selection{ background:var(--teal); color:#fff; }
body.theme-light ::-webkit-scrollbar-track{ background:var(--ink); }
body.theme-light ::-webkit-scrollbar-thumb{ background:#cfc8b8; }
body.theme-light ::-webkit-scrollbar-thumb:hover{ background:#bdb4a0; }
body.theme-light .nav.scrolled{ background:rgba(243,240,232,.78); border-bottom-color:var(--line-2); }
body.theme-light .nav-logo span{ color:var(--faint); }
body.theme-light .burger span{ background:var(--paper); }
body.theme-light .mobile-menu{ background:rgba(243,240,232,.97); }
/* image slot — light surface */
body.theme-light image-slot{
  border-color:var(--line);
  background:
    repeating-linear-gradient(90deg, rgba(30,63,143,.10) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(0deg, rgba(20,24,31,.05) 0 2px, transparent 2px 11px),
    linear-gradient(135deg, #e7e1d3, #d9d2c2);
  color:var(--muted);
}
body.theme-light .mf-cap{ background:rgba(243,240,232,.78); color:var(--paper); border-color:var(--line); }
body.theme-light .cta::before,
body.theme-light .statement::before{ background:radial-gradient(70% 120% at 50% 0%, rgba(35,71,168,.16), transparent 62%); }
body.theme-light .cta::after{ background:radial-gradient(closest-side, rgba(35,71,168,.10), transparent 70%); }
body.theme-light .field input,
body.theme-light .field select,
body.theme-light .field textarea{ background:#fff; }
body.theme-light .stat{ background:rgba(255,255,255,.55); }
body.theme-light .specbar{ background:rgba(255,255,255,.55); }
body.theme-light .form{ background:#fff; }
/* home solution cards on light — swap the dark woven gradient for a light paper pinstripe, dark text */
body.theme-light .sol-card{ background:var(--ink-2); border-color:var(--line); }
body.theme-light .sol-card .sol-weave{
  opacity:1;
  background:
    repeating-linear-gradient(90deg, rgba(35,71,168,.07) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(0deg, rgba(20,24,31,.03) 0 2px, transparent 2px 11px),
    linear-gradient(135deg, #e9e3d6, #ded7c6);
}
body.theme-light .sol-card::before{ background:linear-gradient(180deg, rgba(243,240,232,0) 35%, rgba(227,222,210,.78)); }
body.theme-light .sol-card:hover{ border-color:rgba(35,71,168,.4); }
body.theme-light .sol-card:hover .sol-weave{ opacity:1; }
body.theme-light .brand:hover{ background:var(--ink-3); }

/* ============================================================
   HOME HERO — light editorial, fabric-first (split: copy + media)
   ============================================================ */
.hero-home{ position:relative; overflow:hidden; padding:clamp(132px,18vh,180px) 0 clamp(56px,8vh,104px); }
.hero-home .hh-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(40px,5vw,84px); align-items:center; }
.hero-home .hh-eyebrow{ margin-bottom:26px; }
.hero-home .hh-title{
  font-family:var(--serif); font-weight:400; font-style:normal;
  font-size:clamp(2.7rem,5.6vw,5rem); line-height:1.04; letter-spacing:-.018em; color:var(--paper);
}
.hero-home .hh-title .serif{ color:var(--teal-bright); }
.hero-home .hh-sub{ margin-top:26px; max-width:46ch; color:var(--muted); font-size:clamp(1.05rem,1.3vw,1.24rem); line-height:1.62; }
.hero-home .hh-actions{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; }
.hero-home .hh-meta{ margin-top:42px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.hero-home .hh-meta .sep{ opacity:.45; }
.hero-home .hh-media{ position:relative; aspect-ratio:4/5; }
.hero-home .hh-media image-slot{ width:100%; height:100%; border-radius:4px; }
@media (max-width:1000px){
  .hero-home{ padding-top:clamp(120px,16vh,150px); }
  .hero-home .hh-grid{ grid-template-columns:1fr; gap:clamp(28px,5vw,40px); }
  .hero-home .hh-media{ aspect-ratio:16/10; }
}

/* ============================================================
   HERO ARCHETYPE A — FULL-BLEED IMAGE (dark)
   ============================================================ */
.hero-fb{ position:relative; min-height:90vh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-fb .fb-media{ position:absolute; inset:0; z-index:0; }
.hero-fb .fb-media image-slot{ width:100%; height:100%; border:none; border-radius:0; }
.hero-fb .fb-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(6,9,15,.62) 0%, rgba(6,9,15,.12) 36%, rgba(6,9,15,.55) 72%, rgba(6,9,15,.95) 100%), linear-gradient(90deg, rgba(6,9,15,.7) 0%, transparent 60%); }
.hero-fb .wrap{ position:relative; z-index:2; width:100%; padding-top:clamp(150px,22vh,220px); padding-bottom:clamp(54px,8vh,108px); }
.hero-fb .crumb a, .hero-fb .crumb span{ color:rgba(244,241,234,.6); }
.hero-fb h1{ color:#F4F1EA; font-size:clamp(2.8rem,7.4vw,6.6rem); line-height:.92; letter-spacing:-.04em; max-width:15ch; margin-top:22px; }
.hero-fb .sub{ margin-top:24px; max-width:50ch; color:rgba(244,241,234,.84); font-size:clamp(1.05rem,1.4vw,1.28rem); }
.hero-fb .ph-actions{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.hero-fb .fb-cap{ position:absolute; right:var(--pad); bottom:clamp(54px,8vh,108px); z-index:2; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,241,234,.5); writing-mode:vertical-rl; }

/* ============================================================
   HERO ARCHETYPE B — STACKED / CENTERED + WIDE MEDIA
   ============================================================ */
.hero-stk{ position:relative; overflow:hidden; padding:clamp(150px,21vh,220px) 0 0; text-align:center; }
.hero-stk .wrap{ position:relative; }
.hero-stk .crumb{ justify-content:center; }
.hero-stk .eyebrow{ margin-top:22px; }
.hero-stk h1{ font-size:clamp(2.6rem,6.6vw,5.8rem); line-height:.96; letter-spacing:-.035em; max-width:17ch; margin:20px auto 0; }
.hero-stk .sub{ margin:24px auto 0; max-width:56ch; font-size:clamp(1.05rem,1.4vw,1.26rem); }
.hero-stk .ph-actions{ margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero-stk-media{ margin-top:clamp(50px,7vh,92px); height:clamp(320px,46vh,560px); position:relative; }
.hero-stk-media > image-slot{ width:100%; height:100%; border-radius:22px 22px 0 0; }
.hero-stk-media.duo{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hero-stk-media.duo image-slot{ width:100%; height:100%; border-radius:22px 22px 0 0; }

/* ============================================================
   HERO ARCHETYPE C — EDITORIAL (big type + meta column, no photo)
   ============================================================ */
.hero-ed{ position:relative; overflow:hidden; padding:clamp(150px,21vh,230px) 0 clamp(60px,8vh,110px); }
.hero-ed .wrap{ position:relative; }
.hero-ed .ed-grid{ display:grid; grid-template-columns:1.45fr .55fr; gap:clamp(34px,5vw,80px); align-items:end; }
.hero-ed h1{ font-size:clamp(2.8rem,7.4vw,6.4rem); line-height:.9; letter-spacing:-.04em; margin-top:22px; }
.hero-ed .sub{ margin-top:28px; max-width:48ch; font-size:clamp(1.05rem,1.4vw,1.24rem); }
.hero-ed .ed-meta{ border-left:1px solid var(--line); padding-left:clamp(20px,2vw,30px); }
.hero-ed .ed-meta .m{ padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--line-2); }
.hero-ed .ed-meta .m:last-child{ border-bottom:none; margin-bottom:0; }
.hero-ed .ed-meta .m .k{ font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.hero-ed .ed-meta .m .v{ font-size:1.18rem; font-weight:600; color:var(--paper); letter-spacing:-.01em; margin-top:6px; }
.hero-ed .ed-meta .m .v .u{ color:var(--teal-bright); font-size:.7em; }

/* ============================================================
   HERO ARCHETYPE D — TECHNICAL / BLUEPRINT
   ============================================================ */
.hero-tech{ position:relative; overflow:hidden; padding:clamp(150px,21vh,220px) 0 clamp(54px,8vh,100px); }
.hero-tech .grid-bg{ position:absolute; inset:0; pointer-events:none; opacity:.7;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(95% 85% at 72% 18%, #000, transparent 82%);
  mask-image:radial-gradient(95% 85% at 72% 18%, #000, transparent 82%);
}
.hero-tech .wrap{ position:relative; }
.hero-tech h1{ font-size:clamp(2.6rem,6.6vw,5.8rem); line-height:.94; letter-spacing:-.035em; max-width:17ch; margin-top:22px; }
.hero-tech .sub{ margin-top:26px; max-width:52ch; font-size:clamp(1.05rem,1.4vw,1.24rem); }
.hero-tech .ph-actions{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.hero-tech .tech-readout{ margin-top:clamp(40px,5vh,64px); display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--ink-2); }
.hero-tech .tech-readout .tr{ padding:22px 24px; border-right:1px solid var(--line); }
.hero-tech .tech-readout .tr:last-child{ border-right:none; }
.hero-tech .tech-readout .tr .k{ font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.hero-tech .tech-readout .tr .v{ font-size:clamp(1.4rem,2.4vw,2rem); font-weight:600; letter-spacing:-.02em; color:var(--paper); margin-top:8px; line-height:1; }
.hero-tech .tech-readout .tr .v .u{ font-size:.5em; color:var(--teal-bright); margin-left:.2em; }

/* ============================================================
   HERO ARCHETYPE E — CERT WALL (dark)
   ============================================================ */
.hero-wall{ position:relative; overflow:hidden; padding:clamp(150px,21vh,220px) 0 0; text-align:center; }
.hero-wall .wrap{ position:relative; }
.hero-wall .crumb{ justify-content:center; }
.hero-wall .eyebrow{ margin-top:22px; }
.hero-wall h1{ font-size:clamp(2.6rem,6.6vw,5.6rem); line-height:.96; letter-spacing:-.035em; max-width:16ch; margin:20px auto 0; }
.hero-wall .sub{ margin:24px auto 0; max-width:54ch; }
.hero-wall .ph-actions{ margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cert-wall{ margin-top:clamp(48px,7vh,84px); display:flex; flex-wrap:wrap; justify-content:center; gap:1px; background:var(--line-2); border-top:1px solid var(--line-2); }
.cert-wall .cw{ background:var(--ink); flex:1 1 200px; min-width:160px; padding:30px 18px; font-family:var(--mono); font-size:.86rem; letter-spacing:.08em; color:var(--faint); transition:color .35s, background .35s; display:flex; align-items:center; justify-content:center; text-align:center; min-height:96px; }
.cert-wall .cw:hover{ color:var(--paper); background:var(--ink-2); }

/* flip the standard page-hero (image on the LEFT) + optional hero spec chips */
.page-hero.flip .ph-grid{ grid-template-columns:.9fr 1.1fr; }
.page-hero.flip .ph-media{ order:-1; aspect-ratio:3/4; }
.hero-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.hero-chips .hc{ font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; color:var(--text); border:1px solid var(--line); border-radius:100px; padding:8px 15px; }

/* ============================================================
   SOLUTIONS — EDITORIAL INDUSTRIES INDEX
   ============================================================ */
.ind-index{ margin-top:54px; border-top:1px solid var(--line); }
.ind-row{
  display:grid; grid-template-columns:72px 1fr 150px 44px; align-items:center;
  gap:clamp(16px,3vw,48px); padding:clamp(24px,3.2vw,44px) 0; border-bottom:1px solid var(--line);
  position:relative; isolation:isolate; transition:padding-left .55s var(--ease);
}
.ind-row::before{ content:""; position:absolute; inset:0; z-index:-1; width:0;
  background:linear-gradient(90deg, rgba(94,132,238,.14), transparent 80%); transition:width .6s var(--ease); }
.ind-row:hover::before{ width:100%; }
.ind-row:hover{ padding-left:18px; }
.ind-no{ font-family:var(--mono); font-size:.82rem; letter-spacing:.2em; color:var(--teal-bright); }
.ind-main h3{ font-size:clamp(1.55rem,3.6vw,2.8rem); line-height:1; letter-spacing:-.025em; color:var(--paper); transition:color .35s; }
.ind-main p{ color:var(--muted); margin-top:11px; font-size:1.02rem; line-height:1.5; max-width:54ch; }
.ind-row:hover .ind-main h3{ color:var(--teal-bright); }
.ind-thumb{ width:150px; height:96px; opacity:.45; transition:opacity .5s var(--ease), transform .5s var(--ease); }
.ind-thumb image-slot{ width:100%; height:100%; border-radius:10px; }
.ind-row:hover .ind-thumb{ opacity:1; transform:translateY(-2px); }
.ind-go{ width:44px; height:44px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--paper); font-size:1rem; transition:.4s var(--ease); }
.ind-row:hover .ind-go{ background:var(--teal); color:#fff; border-color:var(--teal); transform:translateX(3px); }

@media (max-width:860px){
  .hero-ed .ed-grid{ grid-template-columns:1fr; gap:34px; }
  .hero-ed .ed-meta{ border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:0 26px; }
  .hero-tech .tech-readout{ grid-template-columns:1fr 1fr; }
  .hero-tech .tech-readout .tr:nth-child(2){ border-right:none; }
  .hero-stk-media.duo{ grid-template-columns:1fr; }
  .ind-row{ grid-template-columns:48px 1fr 40px; }
  .ind-thumb{ display:none; }
  .page-hero.flip .ph-media{ display:none; }
}


/* ---------- image slots (user-fillable, "images to come") ---------- */
image-slot{
  --is-bg: var(--ink-3);
  border-radius:16px;
  border:1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, rgba(94,132,238,.10) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(0deg, rgba(244,241,234,.05) 0 2px, transparent 2px 11px),
    linear-gradient(135deg, #0c2150, #06121f);
  color:var(--faint);
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.media-figure{ position:relative; }
.media-figure .mf-cap{
  position:absolute; left:16px; bottom:16px; z-index:3;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper); background:rgba(6,9,15,.55); backdrop-filter:blur(8px);
  padding:7px 12px; border-radius:8px; border:1px solid var(--line); pointer-events:none;
}

/* ---------- breadcrumb ---------- */
.crumb{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; white-space:nowrap; font-family:var(--mono);
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
}
.crumb a{ color:var(--faint); transition:color .3s; }
.crumb a:hover{ color:var(--teal-bright); }
.crumb .sep{ opacity:.5; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero{
  position:relative; overflow:hidden; padding:clamp(140px,20vh,210px) 0 clamp(64px,9vh,108px);
  background:var(--ink-2); border-bottom:1px solid var(--line-2);
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(70% 90% at 82% 8%, rgba(16,58,134,.42), transparent 58%),
    radial-gradient(60% 80% at 0% 100%, rgba(94,132,238,.12), transparent 60%);
  pointer-events:none;
}
.page-hero .warp-lines{
  position:absolute; inset:0; opacity:.4; pointer-events:none;
  background-image:repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 52px);
  -webkit-mask-image:radial-gradient(80% 90% at 60% 30%, #000, transparent 80%);
  mask-image:radial-gradient(80% 90% at 60% 30%, #000, transparent 80%);
}
.page-hero .wrap{ position:relative; }
.ph-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,5vw,80px); align-items:end; }
.page-hero h1{
  font-size:clamp(2.6rem,6.4vw,5.6rem); line-height:.96; letter-spacing:-.035em; margin-top:24px; max-width:14ch;
}
.page-hero .sub{ margin-top:26px; max-width:50ch; font-size:clamp(1.05rem,1.4vw,1.28rem); color:rgba(244,241,234,.82); }
.page-hero .ph-actions{ margin-top:36px; display:flex; flex-wrap:wrap; gap:14px; }
.ph-media{ position:relative; aspect-ratio:4/5; }
.ph-media image-slot{ width:100%; height:100%; }

/* ============================================================
   SECTION wrappers / rhythm
   ============================================================ */
.sec{ padding:clamp(80px,11vh,138px) 0; position:relative; }
.sec-ink{ background:var(--ink); }
.sec-ink2{ background:var(--ink-2); }
.sec-ink3{ background:var(--ink-3); }
.lead{ font-size:clamp(1.3rem,2.4vw,1.9rem); line-height:1.4; letter-spacing:-.02em; color:var(--paper); max-width:24ch; font-weight:500; }
.lead .serif{ color:var(--teal-bright); }
.bodytext{ color:var(--muted); font-size:clamp(1.02rem,1.25vw,1.16rem); line-height:1.66; max-width:54ch; }
.bodytext + .bodytext{ margin-top:18px; }

/* split prose row: lead left, body right */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,96px); align-items:start; }
.split.center{ align-items:center; }

/* image + text alternating row */
.row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,84px); align-items:center; }
.row.media-right .row-media{ order:2; }
.row-media{ aspect-ratio:5/4; position:relative; }
.row-media image-slot{ width:100%; height:100%; }
.row-copy h2{ margin-top:18px; }
.row-copy .bodytext{ margin-top:22px; }
.row-copy .row-cta{ margin-top:30px; }

/* ============================================================
   FEATURE LIST  —  editorial spec ledger (index | title | desc)
   ============================================================ */
.flist{ margin-top:clamp(40px,5vh,60px); border-top:1px solid var(--line); }
.flist .fitem{
  border-bottom:1px solid var(--line); padding:clamp(22px,2.6vw,36px) 0;
  display:grid; grid-template-columns:84px minmax(180px,.95fr) 1.45fr; grid-template-rows:auto auto;
  gap:6px clamp(18px,3vw,52px); position:relative; isolation:isolate; transition:padding-left .55s var(--ease);
}
.flist .fitem::before{ content:""; position:absolute; inset:0; z-index:-1; width:0; background:linear-gradient(90deg, rgba(94,132,238,.12), transparent 78%); transition:width .6s var(--ease); }
.flist .fitem:hover::before{ width:100%; }
.flist .fitem:hover{ padding-left:18px; }
.flist .fitem .fnum{ grid-column:1; grid-row:1 / span 2; font-family:var(--mono); font-size:1rem; letter-spacing:.08em; color:var(--teal-bright); padding-top:4px; }
.flist .fitem h3{ grid-column:2; grid-row:1 / span 2; align-self:center; font-size:clamp(1.3rem,2.5vw,2rem); line-height:1.04; letter-spacing:-.02em; transition:color .35s; }
.flist .fitem:hover h3{ color:var(--teal-bright); }
.flist .fitem p{ grid-column:3; grid-row:1; color:var(--muted); font-size:1.04rem; line-height:1.58; align-self:center; }
.flist .fitem .gsm{ grid-column:3; grid-row:2; justify-self:start; margin-top:12px; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; color:var(--faint); border:1px solid var(--line); border-radius:100px; padding:5px 13px; }

/* ============================================================
   REASONS  —  asymmetric bento (varied tile widths + marks)
   ============================================================ */
.reasons{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:48px; grid-auto-flow:dense; }
.reason{ position:relative; overflow:hidden; border:1px solid var(--line-2); border-radius:18px; background:var(--ink-2); padding:clamp(28px,2.8vw,42px); transition:border-color .5s, transform .5s var(--ease), background .5s; display:flex; flex-direction:column; }
.reason:hover{ border-color:rgba(94,132,238,.45); transform:translateY(-4px); background:var(--ink-3); }
.reason::after{ content:""; position:absolute; right:16px; top:16px; width:14px; height:14px; border-top:1px solid var(--teal-bright); border-right:1px solid var(--teal-bright); opacity:.45; transition:opacity .4s, width .4s, height .4s; }
.reason:hover::after{ opacity:1; width:20px; height:20px; }
.reason .r-no{ font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; color:var(--teal-bright); }
.reason h3{ font-size:clamp(1.24rem,1.8vw,1.6rem); margin-top:auto; padding-top:30px; line-height:1.1; letter-spacing:-.01em; }
.reason p{ color:var(--muted); font-size:1rem; margin-top:13px; line-height:1.6; }
.reason:nth-child(1){ grid-column:span 4; }
.reason:nth-child(2){ grid-column:span 2; }
.reason:nth-child(3){ grid-column:span 2; }
.reason:nth-child(4){ grid-column:span 4; }
.reason:nth-child(5){ grid-column:span 3; }
.reason:nth-child(6){ grid-column:span 3; }

/* chips */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:40px; }
.chip{ font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--text); border:1px solid var(--line); border-radius:100px; padding:9px 16px; transition:all .35s var(--ease); }
.chip:hover{ border-color:var(--teal-bright); color:var(--teal-bright); transform:translateY(-2px); }

/* inline cert strip */
.cert-inline{ margin-top:46px; padding-top:28px; border-top:1px solid var(--line-2); }
.cert-inline .ci-lbl{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:18px; }
.cert-inline .ci-row{ display:flex; flex-wrap:wrap; gap:12px 30px; }
.cert-inline .ci-row span{ font-size:1.05rem; font-weight:500; color:var(--text); }

/* ============================================================
   SPEC NOTE bar
   ============================================================ */
.specbar{ margin-top:30px; display:flex; flex-wrap:wrap; gap:14px 40px; padding:22px 26px; border:1px solid var(--line-2); border-radius:14px; background:rgba(12,19,34,.5); }
.specbar .sp{ display:flex; flex-direction:column; gap:5px; }
.specbar .sp .k{ font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.specbar .sp .v{ font-size:1.12rem; font-weight:600; color:var(--paper); letter-spacing:-.01em; }
.specbar .sp .v .u{ font-size:.62em; color:var(--teal-bright); margin-left:.25em; }

/* ============================================================
   VALUES list (about)
   ============================================================ */
.values{ margin-top:52px; border-top:1px solid var(--line-2); }
.value{ display:grid; grid-template-columns:.34fr 1fr; gap:clamp(20px,4vw,60px); padding:clamp(26px,3vw,42px) 0; border-bottom:1px solid var(--line-2); align-items:baseline; }
.value .v-idx{ font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; color:var(--teal-bright); }
.value h3{ font-size:clamp(1.5rem,3vw,2.3rem); letter-spacing:-.02em; }
.value p{ color:var(--muted); font-size:1.04rem; line-height:1.62; max-width:50ch; }
.value:hover h3{ color:var(--teal-bright); transition:color .4s; }

/* ============================================================
   CERTIFICATIONS grid
   ============================================================ */
.cgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:52px; }
.ccard{ border:1px solid var(--line-2); border-radius:16px; background:var(--ink-2); padding:clamp(26px,2.6vw,38px); transition:border-color .5s, transform .5s var(--ease); display:flex; flex-direction:column; gap:14px; }
.ccard:hover{ border-color:rgba(94,132,238,.4); transform:translateY(-4px); }
.ccard .cc-top{ display:flex; align-items:center; gap:16px; }
.ccard .cc-logo{ width:52px; height:52px; flex:none; border-radius:10px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; color:var(--teal-bright); background:rgba(94,132,238,.08); text-align:center; padding:4px; }
.ccard h3{ font-size:1.24rem; line-height:1.12; }
.ccard .cc-by{ font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; color:var(--faint); margin-top:4px; }
.ccard .cc-scope{ color:var(--text); font-size:.97rem; line-height:1.55; }
.ccard .cc-scope b{ color:var(--paper); font-weight:600; }
.ccard .cc-why{ color:var(--muted); font-size:.94rem; line-height:1.55; padding-top:14px; border-top:1px solid var(--line-2); margin-top:auto; }
.ccard .cc-why .lbl{ font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--teal-bright); display:block; margin-bottom:6px; }

/* ============================================================
   ACCORDION (FAQ)
   ============================================================ */
.acc{ margin-top:48px; border-top:1px solid var(--line-2); }
.acc details{ border-bottom:1px solid var(--line-2); }
.acc summary{
  list-style:none; cursor:pointer; padding:26px 0; display:flex; align-items:center; justify-content:space-between; gap:24px;
  font-size:clamp(1.1rem,1.8vw,1.4rem); font-weight:500; color:var(--paper); letter-spacing:-.01em; transition:color .35s;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary:hover{ color:var(--teal-bright); }
.acc summary .ic{ flex:none; width:26px; height:26px; position:relative; }
.acc summary .ic::before,.acc summary .ic::after{ content:""; position:absolute; background:var(--teal-bright); transition:transform .4s var(--ease); }
.acc summary .ic::before{ top:50%; left:0; width:100%; height:1.5px; transform:translateY(-50%); }
.acc summary .ic::after{ left:50%; top:0; height:100%; width:1.5px; transform:translateX(-50%); }
.acc details[open] summary .ic::after{ transform:translateX(-50%) scaleY(0); }
.acc .acc-body{ overflow:hidden; max-height:0; transition:max-height .5s var(--ease), opacity .4s; opacity:0; }
.acc details[open] .acc-body{ max-height:340px; opacity:1; padding-bottom:26px; }
.acc .acc-body p{ color:var(--muted); font-size:1.04rem; line-height:1.66; max-width:62ch; }

/* ============================================================
   RFQ FORM
   ============================================================ */
.rfq-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:start; }
.rfq-intro h2{ margin-top:18px; }
.rfq-intro .bodytext{ margin-top:22px; }
.rfq-contact{ margin-top:40px; border-top:1px solid var(--line-2); padding-top:30px; }
.rfq-contact .rc-row{ margin-bottom:22px; }
.rfq-contact .rc-k{ font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:7px; }
.rfq-contact .rc-v{ color:var(--text); font-size:1.04rem; line-height:1.6; }
.rfq-contact .rc-v a{ color:var(--teal-bright); }

.form{ border:1px solid var(--line-2); border-radius:18px; background:var(--ink-2); padding:clamp(26px,3vw,44px); }
.form .f-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form .f-row.one{ grid-template-columns:1fr; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.field label .req{ color:var(--teal-bright); }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:1rem; color:var(--paper); background:var(--ink-3);
  border:1px solid var(--line); border-radius:10px; padding:13px 15px; transition:border-color .35s, box-shadow .35s; width:100%;
}
.field textarea{ resize:vertical; min-height:120px; line-height:1.5; }
.field input::placeholder, .field textarea::placeholder{ color:var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--teal-bright); box-shadow:0 0 0 3px rgba(94,132,238,.16); }
.field select{ appearance:none; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%); background-position:calc(100% - 20px) center, calc(100% - 15px) center; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.field .file{ border:1px dashed var(--line); border-radius:10px; padding:18px 15px; color:var(--faint); font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; cursor:pointer; transition:border-color .35s, color .35s; text-align:center; }
.field .file:hover{ border-color:var(--teal-bright); color:var(--teal-bright); }
.form .f-submit{ margin-top:8px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.form .f-note{ font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; color:var(--faint); }
.form button.btn{ border:none; font-family:var(--sans); }

/* ============================================================
   PROCESS / steps (custom development, traceability)
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:18px; overflow:hidden; margin-top:52px; }
.step{ background:var(--ink-2); padding:clamp(26px,2.4vw,38px); transition:background .5s; }
.step:hover{ background:var(--ink-3); }
.step .s-no{ font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; color:var(--teal-bright); }
.step .s-line{ width:100%; height:1px; background:var(--line); margin:20px 0; position:relative; overflow:hidden; }
.step .s-line::after{ content:""; position:absolute; inset:0; width:0; background:var(--teal-bright); transition:width .8s var(--ease); }
.step:hover .s-line::after{ width:60%; }
.step h3{ font-size:1.18rem; line-height:1.16; }
.step p{ color:var(--muted); font-size:.95rem; margin-top:12px; line-height:1.55; }

/* full-bleed quote / statement band */
.statement{ padding:clamp(90px,14vh,170px) 0; background:var(--ink); position:relative; overflow:hidden; text-align:center; }
.statement::before{ content:""; position:absolute; inset:0; background:radial-gradient(70% 100% at 50% 0%, rgba(16,58,134,.34), transparent 62%); pointer-events:none; }
.statement .wrap{ position:relative; }
.statement .big{ font-size:clamp(2rem,5vw,4rem); line-height:1.08; letter-spacing:-.03em; color:var(--paper); max-width:20ch; margin:0 auto; }
.statement .big .serif{ color:var(--teal-bright); }
.statement .stmt-sub{ margin:28px auto 0; max-width:52ch; color:var(--muted); font-size:clamp(1.02rem,1.3vw,1.18rem); }

/* gallery strip of slots — varied masonry, mixed rounding */
.gallery{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(170px,21vh); gap:16px; margin-top:clamp(40px,5vh,60px); }
.gallery .media-figure{ position:relative; height:100%; }
.gallery image-slot{ width:100%; height:100%; }
.gallery .media-figure:nth-child(1){ grid-column:span 4; grid-row:span 2; }
.gallery .media-figure:nth-child(1) image-slot{ border-radius:30px; }
.gallery .media-figure:nth-child(2){ grid-column:span 2; grid-row:span 1; }
.gallery .media-figure:nth-child(2) image-slot{ border-radius:6px; }
.gallery .media-figure:nth-child(3){ grid-column:span 2; grid-row:span 1; }
.gallery .media-figure:nth-child(3) image-slot{ border-radius:30px 6px 30px 6px; }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .ph-grid{ grid-template-columns:1fr; }
  .ph-media{ display:none; }
  .split, .row{ grid-template-columns:1fr; }
  .row.media-right .row-media{ order:0; }
  .flist .fitem{ grid-template-columns:54px 1fr; gap:4px 18px; }
  .flist .fitem h3{ grid-column:2; grid-row:1; align-self:start; }
  .flist .fitem p{ grid-column:2; grid-row:2; }
  .flist .fitem .gsm{ grid-column:2; grid-row:3; }
  .flist .fitem .fnum{ grid-column:1; grid-row:1 / span 3; }
  .reasons{ grid-template-columns:1fr; }
  .reasons .reason{ grid-column:1 / -1 !important; }
  .cgrid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .rfq-wrap{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr 1fr; grid-auto-rows:minmax(150px,20vh); }
  .gallery .media-figure:nth-child(1){ grid-column:span 2; grid-row:span 2; }
  .gallery .media-figure:nth-child(2),.gallery .media-figure:nth-child(3){ grid-column:span 1; }
  .value{ grid-template-columns:1fr; gap:10px; }
}
@media (max-width:560px){
  .form .f-row{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr; }
  .gallery .media-figure:nth-child(1){ grid-row:span 1; }
  .specbar{ gap:14px 24px; }
}

/* ============================================================
   PREMIUM SECTION COMPONENTS  (solutions / sustainability / home)
   ============================================================ */
/* section-head alignment variants */
.sec-head.center{ flex-direction:column; align-items:center; text-align:center; justify-content:center; max-width:760px; margin-inline:auto; }
.sec-head.right{ justify-content:flex-end; text-align:right; }
.sec-head.right .sh-l{ align-items:flex-end; }

/* oversized editorial intro paragraph */
.bigtext{ font-size:clamp(1.5rem,3.2vw,2.6rem); line-height:1.24; letter-spacing:-.02em; color:var(--paper); font-weight:500; max-width:20ch; }
.bigtext .serif{ color:var(--teal-bright); }
.intro-split{ display:grid; grid-template-columns:.42fr .58fr; gap:clamp(34px,5vw,80px); align-items:start; }
.intro-split .is-side{ position:sticky; top:120px; }
.intro-split .is-side .eyebrow{ margin-bottom:18px; }
.intro-split .is-body p{ color:var(--muted); font-size:clamp(1.05rem,1.35vw,1.22rem); line-height:1.66; }
.intro-split .is-body p + p{ margin-top:20px; }

/* inline stat ribbon */
.stat-ribbon{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; margin-top:44px; border:1px solid var(--line-2); border-radius:16px; overflow:hidden; }
.stat-ribbon .sr{ padding:26px clamp(18px,2vw,30px); border-right:1px solid var(--line-2); }
.stat-ribbon .sr:last-child{ border-right:none; }
.stat-ribbon .sr .n{ font-size:clamp(1.8rem,3vw,2.6rem); font-weight:600; letter-spacing:-.03em; color:var(--paper); line-height:1; display:flex; align-items:baseline; gap:.12em; }
.stat-ribbon .sr .n .u{ font-size:.4em; color:var(--teal-bright); }
.stat-ribbon .sr .l{ margin-top:12px; font-size:.92rem; color:var(--muted); line-height:1.4; }

/* alternating editorial industry bands (varied media shapes/angles) */
.ind-band{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,82px); align-items:center; padding:clamp(48px,8vh,104px) 0; border-bottom:1px solid var(--line-2); position:relative; }
.ind-band:nth-child(even) .ib-media{ order:2; }
.ib-media{ position:relative; }
.ib-media image-slot{ width:100%; height:100%; }
.ind-band:nth-child(4n+1) .ib-media{ aspect-ratio:4/5; }
.ind-band:nth-child(4n+1) .ib-media image-slot{ border-radius:30px; }
.ind-band:nth-child(4n+2) .ib-media{ aspect-ratio:5/4; }
.ind-band:nth-child(4n+2) .ib-media image-slot{ border-radius:8px; }
.ind-band:nth-child(4n+3) .ib-media{ aspect-ratio:1/1; max-width:480px; }
.ind-band:nth-child(4n+3) .ib-media image-slot{ border-radius:50%; }
.ind-band:nth-child(4n) .ib-media{ aspect-ratio:5/4; }
.ind-band:nth-child(4n) .ib-media image-slot{ border-radius:30px 8px 30px 8px; }
.ib-wm{ position:absolute; top:-.3em; left:-.04em; font-size:clamp(7rem,16vw,15rem); font-weight:700; line-height:.8; color:transparent; -webkit-text-stroke:1px var(--line-2); z-index:0; pointer-events:none; }
.ib-copy{ position:relative; z-index:1; }
.ib-copy .ib-eye{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-bright); }
.ib-copy h3{ font-size:clamp(1.9rem,4vw,3.2rem); line-height:1; letter-spacing:-.03em; margin-top:16px; }
.ib-copy p{ color:var(--muted); font-size:1.06rem; line-height:1.62; margin-top:18px; max-width:46ch; }
.ib-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.ib-tags span{ font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--text); border:1px solid var(--line); border-radius:100px; padding:7px 13px; }
.ib-link{ margin-top:28px; display:inline-flex; align-items:center; gap:12px; font-weight:500; color:var(--paper); }
.ib-link .ic{ width:42px; height:42px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.4s var(--ease); }
.ib-band-hover:hover .ib-link .ic, .ib-link:hover .ic{ background:var(--teal); color:#fff; border-color:var(--teal); }

/* greige / finished comparison */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:48px; }
.compare .cmp{ position:relative; border:1px solid var(--line-2); border-radius:20px; padding:clamp(30px,3vw,46px); overflow:hidden; background:var(--ink-2); min-height:300px; display:flex; flex-direction:column; }
.compare .cmp .cmp-k{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-bright); }
.compare .cmp h3{ font-size:clamp(1.6rem,2.6vw,2.2rem); margin-top:14px; letter-spacing:-.02em; }
.compare .cmp p{ color:var(--muted); margin-top:16px; line-height:1.62; font-size:1.02rem; max-width:38ch; }
.compare .cmp .cmp-no{ margin-top:auto; padding-top:30px; font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; color:var(--faint); }
.compare .cmp .glow{ width:340px; height:340px; right:-120px; bottom:-140px; }

/* vertical numbered timeline (sustainability commitments) */
.timeline{ margin-top:52px; }
.tl{ display:grid; grid-template-columns:clamp(70px,8vw,120px) 1fr; gap:clamp(20px,3vw,52px); padding:clamp(28px,3.6vw,52px) 0; border-top:1px solid var(--line); position:relative; }
.tl:last-child{ border-bottom:1px solid var(--line); }
.tl .tl-no{ font-family:var(--mono); font-size:.9rem; color:var(--teal-bright); letter-spacing:.1em; position:relative; }
.tl .tl-no::after{ content:""; position:absolute; left:6px; top:34px; bottom:-52px; width:1px; background:var(--line); }
.tl:last-child .tl-no::after{ display:none; }
.tl .tl-body h3{ font-size:clamp(1.5rem,2.8vw,2.3rem); letter-spacing:-.02em; line-height:1.04; }
.tl .tl-body p{ color:var(--muted); font-size:1.05rem; line-height:1.64; margin-top:16px; max-width:58ch; }
.tl .tl-body .tl-meta{ margin-top:18px; display:flex; flex-wrap:wrap; gap:10px; }
.tl .tl-body .tl-meta span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; color:var(--text); border:1px solid var(--line); border-radius:100px; padding:6px 13px; }

/* full-bleed feature band with overlaid stat */
.feature-band{ position:relative; min-height:80vh; display:flex; align-items:flex-end; overflow:hidden; }
.feature-band .fb-img{ position:absolute; inset:0; z-index:0; }
.feature-band .fb-img image-slot{ width:100%; height:100%; border:none; border-radius:0; }
.feature-band .fb-ov{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(6,9,15,.5), rgba(6,9,15,.15) 40%, rgba(6,9,15,.9)); }
.feature-band .wrap{ position:relative; z-index:2; width:100%; padding-block:clamp(48px,7vh,96px); }
.feature-band .fb-eye{ color:#9ab4ff; font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; }
.feature-band h2{ color:#F4F1EA; font-size:clamp(2.2rem,5vw,4rem); line-height:1; letter-spacing:-.03em; max-width:18ch; margin-top:18px; }
.feature-band p{ color:rgba(244,241,234,.82); margin-top:22px; max-width:48ch; font-size:1.08rem; line-height:1.62; }

/* big metric ribbon */
.metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:50px; }
.metric{ border:1px solid var(--line-2); border-radius:18px; padding:clamp(28px,3vw,42px); background:var(--ink-2); position:relative; overflow:hidden; }
.metric .m-n{ font-size:clamp(2.6rem,5vw,4rem); font-weight:600; letter-spacing:-.04em; line-height:.92; color:var(--paper); }
.metric .m-n .u{ font-size:.32em; color:var(--teal-bright); margin-left:.15em; letter-spacing:0; }
.metric .m-l{ margin-top:16px; color:var(--muted); font-size:1rem; line-height:1.5; }

@media (max-width:1000px){
  .intro-split{ grid-template-columns:1fr; }
  .intro-split .is-side{ position:static; }
  .ind-band{ grid-template-columns:1fr; gap:30px; }
  .ind-band:nth-child(even) .ib-media{ order:0; }
  .ind-band:nth-child(4n+3) .ib-media{ max-width:none; }
  .compare{ grid-template-columns:1fr; }
  .metrics{ grid-template-columns:1fr; }
  .stat-ribbon{ grid-auto-flow:row; grid-auto-columns:auto; }
  .stat-ribbon .sr{ border-right:none; border-bottom:1px solid var(--line-2); }
  .stat-ribbon .sr:last-child{ border-bottom:none; }
  .feature-band{ min-height:62vh; }
}

/* ============================================================
   ALBINI-INSPIRED EDITORIAL SECTIONS (light, fabric-first)
   ============================================================ */
.ed-h{ font-family:var(--sans); font-weight:700; font-size:clamp(1.5rem,2.4vw,2.1rem); letter-spacing:.01em; color:var(--paper); }
.ed-h.upper{ text-transform:uppercase; letter-spacing:.05em; }
.link-underline{ display:inline-block; font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding-bottom:5px; border-bottom:1px solid var(--paper); transition:color .3s,border-color .3s; }
.link-underline:hover{ color:var(--teal-bright); border-color:var(--teal-bright); }

/* RAW MATERIALS — copy left, two square images right */
.rawmat .rawmat-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(32px,5vw,72px); align-items:center; }
.rawmat .rm-copy .bodytext{ margin-top:24px; }
.rawmat .rm-copy .link-underline{ margin-top:34px; }
.rawmat .rm-media{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.rawmat .rm-media .media-figure{ aspect-ratio:1/1; }
.rawmat .rm-media image-slot{ width:100%; height:100%; border-radius:3px; }
@media (max-width:860px){ .rawmat .rawmat-grid{ grid-template-columns:1fr; gap:34px; } }

/* OFFSET FEATURE — editorial head + two overlapping offset images */
.offset-feature .of-head{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,80px); align-items:start; margin-bottom:clamp(40px,5vh,64px); }
.offset-feature .of-title{ font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,3.4vw,3rem); line-height:1.12; letter-spacing:-.01em; color:var(--paper); max-width:18ch; }
.offset-feature .of-body p{ color:var(--muted); font-size:clamp(1.02rem,1.25vw,1.16rem); line-height:1.66; }
.offset-feature .of-body p + p{ margin-top:18px; }
.offset-feature .of-body .link-underline{ margin-top:28px; }
.offset-feature .of-media{ position:relative; padding-bottom:9%; }
.offset-feature .of-img-a{ width:64%; aspect-ratio:4/3; }
.offset-feature .of-img-a image-slot{ width:100%; height:100%; border-radius:3px; }
.offset-feature .of-img-b{ position:absolute; right:0; bottom:0; width:48%; aspect-ratio:4/3; z-index:2; }
.offset-feature .of-img-b image-slot{ width:100%; height:100%; border-radius:3px; box-shadow:0 34px 64px -34px rgba(20,24,31,.45); }
@media (max-width:860px){
  .offset-feature .of-head{ grid-template-columns:1fr; gap:22px; }
  .offset-feature .of-img-a{ width:80%; } .offset-feature .of-img-b{ width:56%; }
}

/* TRIPTYCH — three portrait images, center taller, sides offset */
.triptych .tri-grid{ display:grid; grid-template-columns:1fr 1.12fr 1fr; gap:clamp(16px,2.4vw,40px); align-items:start; }
.triptych .tri{ position:relative; }
.triptych .tri image-slot{ width:100%; height:100%; border-radius:3px; }
.triptych .tri-l{ aspect-ratio:3/4; margin-top:9%; }
.triptych .tri-c{ aspect-ratio:5/7; }
.triptych .tri-r{ aspect-ratio:3/4; margin-top:16%; }
@media (max-width:860px){ .triptych .tri-grid{ grid-template-columns:1fr; gap:18px; } .triptych .tri{ margin-top:0 !important; aspect-ratio:4/3; } }

/* PULLQUOTE — big serif statement */
.pullquote{ padding:clamp(84px,13vh,160px) 0; }
.pullquote .pq{ font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,3.4vw,2.9rem); line-height:1.3; letter-spacing:-.01em; color:var(--paper); max-width:26ch; }
.pullquote .pq-by{ margin-top:30px; font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }

/* VALUE CHAIN — editorial heading + paragraph */
.valuechain .vc-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(34px,5vw,80px); align-items:start; }
.valuechain h2{ font-family:var(--serif); font-weight:400; font-size:clamp(2rem,3.8vw,3.2rem); line-height:1.08; letter-spacing:-.015em; color:var(--paper); }
.valuechain h2 .serif{ color:var(--teal-bright); }
.valuechain p{ color:var(--muted); font-size:clamp(1.05rem,1.3vw,1.2rem); line-height:1.7; }
@media (max-width:860px){ .valuechain .vc-grid{ grid-template-columns:1fr; gap:20px; } }

/* ============================================================
   COVER HERO — full-bleed fabric image + centered serif title
   (Albini-1876 "Our fabrics" register) — used on Solutions + editorial pages
   ============================================================ */
.hero-cover{ position:relative; min-height:74vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.hero-cover .hc-img{ position:absolute; inset:0; z-index:0; }
.hero-cover .hc-img image-slot{ width:100%; height:100%; border:none; border-radius:0; }
.hero-cover .hc-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(18,22,28,.30), rgba(18,22,28,.40)); }
.hero-cover .wrap{ position:relative; z-index:2; width:100%; }
.hero-cover .crumb{ justify-content:center; color:rgba(255,255,255,.7); }
.hero-cover .crumb a, .hero-cover .crumb span{ color:rgba(255,255,255,.72); }
.hero-cover .eyebrow{ color:#fff; justify-content:center; margin-top:18px; }
.hero-cover .eyebrow::before{ background:linear-gradient(90deg,#fff,transparent); }
.hero-cover h1{ font-family:var(--serif); font-weight:400; color:#fff; font-size:clamp(2.7rem,6.2vw,5.4rem); line-height:1.04; letter-spacing:-.01em; margin:18px auto 0; max-width:18ch; }
.hero-cover h1 .serif{ font-style:italic; }
.hero-cover .hc-sub{ color:rgba(255,255,255,.92); max-width:62ch; margin:24px auto 0; font-size:clamp(1.05rem,1.3vw,1.22rem); line-height:1.62; }
.hero-cover .ph-actions{ margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* PROCESS / EDITORIAL narrative: section intro + alternating image/text rows already
   use .split and .row / .row.media-right. Step heading marker: */
.pstep-eyebrow{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-bright); display:block; margin-bottom:14px; }
.narr-intro{ max-width:60ch; }
.narr-intro p{ color:var(--muted); font-size:clamp(1.08rem,1.4vw,1.32rem); line-height:1.6; }
.narr-intro p + p{ margin-top:20px; }

/* ============================================================
   REVISION PASS — full-screen heroes, editorial spacing, darker CTAs,
   clearer outlines + visuals, page transition
   ============================================================ */
/* full-screen cover heroes (Albini-style, minimal words) */
.hero-cover{ min-height:100vh; }
.hero-cover .hc-scrim{ background:linear-gradient(180deg, rgba(16,20,26,.36) 0%, rgba(16,20,26,.18) 42%, rgba(16,20,26,.55) 100%); }
.hero-cover h1{ font-size:clamp(2.9rem,6.6vw,6rem); }

/* more editorial breathing room + longer, more cinematic sections */
.sec{ padding:clamp(112px,16vh,212px) 0; }
.split{ gap:clamp(48px,7vw,120px); }
.row{ gap:clamp(48px,6vw,112px); }
.row-media{ aspect-ratio:4/5; }
.sec-head{ margin-bottom:clamp(56px,7vh,96px); }
.statement{ padding:clamp(120px,18vh,230px) 0; }

/* clearer button outlines */
.btn-ghost{ border-color:rgba(244,241,234,.34); }
body.theme-light .btn-ghost{ border-color:rgba(20,24,31,.36); }
body.theme-light .btn-ghost:hover{ border-color:var(--paper); background:rgba(20,24,31,.045); }

/* hero CTAs: darker navy (de-brighten) */
.hero-actions .btn-teal,.hero-cover .btn-teal{ background:linear-gradient(135deg,#274a92,#15295c); box-shadow:0 12px 38px -8px rgba(21,41,92,.5),0 2px 12px rgba(0,0,0,.4); }
.hero-actions .btn-teal:hover,.hero-cover .btn-teal:hover{ background:linear-gradient(135deg,#30559f,#1c3470); }

/* clarity: lift faint / over-opaque visuals */
body.theme-light .glow{ opacity:.38; }
.watermark{ -webkit-text-stroke:1.4px var(--line); opacity:1; }
.ib-wm{ -webkit-text-stroke:1.5px rgba(20,24,31,.16); }
body.theme-light .mf-cap{ background:rgba(251,250,247,.86); }

/* ---------- page transition ---------- */
/* opacity-only — a transform on body would make it the containing block for fixed elements and inflate document height */
@keyframes pageIn{ from{ opacity:0; } to{ opacity:1; } }
body{ animation:pageIn .5s var(--ease-out) both; }
.page-cover{ position:fixed; inset:0; z-index:9999; background:var(--ink); opacity:0; pointer-events:none; transition:opacity .42s var(--ease); }
.page-cover.show{ opacity:1; pointer-events:auto; }
@media (prefers-reduced-motion:reduce){ body{ animation:none; } .page-cover{ display:none; } }

/* ============================================================
   HOME HERO — full-bleed background image, copy bottom-left, certs at base
   ============================================================ */
.hero-home-full{ position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-home-full .hhf-img{ position:absolute; inset:0; z-index:0; }
.hero-home-full .hhf-img image-slot{ width:100%; height:100%; border:none; border-radius:0; }
.hero-home-full .hhf-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(16,20,26,.40) 0%, rgba(16,20,26,.10) 36%, rgba(16,20,26,.70) 100%), linear-gradient(90deg, rgba(16,20,26,.55) 0%, transparent 64%); }
.hero-home-full .wrap{ position:relative; z-index:2; width:100%; padding-bottom:clamp(34px,5vh,64px); }
.hero-home-full .hhf-title{ font-family:var(--serif); font-weight:400; color:#fff; font-size:clamp(3.2rem,8.4vw,7.4rem); line-height:1; letter-spacing:-.02em; max-width:16ch; }
.hero-home-full .hhf-title .serif{ font-style:italic; }
.hero-home-full .hhf-sub{ margin-top:26px; max-width:52ch; color:rgba(255,255,255,.92); font-size:clamp(1.08rem,1.4vw,1.36rem); line-height:1.58; }
.hero-home-full .hhf-actions{ margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; }
.hero-home-full .hhf-certs{ margin-top:clamp(34px,6vh,64px); padding-top:22px; border-top:1px solid rgba(255,255,255,.16); font-family:var(--mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.48); }
@media (max-width:700px){ .hero-home-full .hhf-title{ font-size:clamp(2.6rem,11vw,3.6rem); } }

/* ghost buttons sit on DARK image heroes — give them a light outline */
.hero-home-full .btn-ghost,.hero-cover .btn-ghost{ border-color:rgba(255,255,255,.42); color:#fff; background:rgba(16,20,26,.18); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.hero-home-full .btn-ghost:hover,.hero-cover .btn-ghost:hover{ border-color:#fff; background:rgba(16,20,26,.34); }

/* proof points (replaces brand-name grid) */
.proofpts{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:4px; overflow:hidden; }
.proofpts .ppt{ background:var(--ink-2); padding:clamp(26px,2.6vw,40px); min-height:140px; display:flex; flex-direction:column; justify-content:center; transition:background .4s; }
.proofpts .ppt:hover{ background:var(--ink-3); }
.proofpts .ppt-k{ font-family:var(--serif); font-size:clamp(1.4rem,2.3vw,2rem); color:var(--paper); line-height:1.02; letter-spacing:-.01em; }
.proofpts .ppt-v{ margin-top:11px; color:var(--muted); font-size:.96rem; line-height:1.46; }
@media (max-width:560px){ .proofpts{ grid-template-columns:1fr; } }

/* stats — featured 50M + diverse stacked side rows */
.stats-feature{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,92px); align-items:center; margin-top:clamp(50px,6vh,82px); }
.sf-big .sf-num{ display:flex; align-items:flex-start; font-weight:600; line-height:.82; letter-spacing:-.05em; color:var(--paper); font-size:clamp(6rem,16vw,15rem); }
.sf-big .sf-num .u{ font-size:.26em; color:var(--teal-bright); margin:.35em 0 0 .08em; letter-spacing:0; }
.sf-big .sf-lbl{ margin-top:22px; font-size:clamp(1.1rem,1.7vw,1.55rem); color:var(--muted); max-width:20ch; line-height:1.34; }
.sf-side{ border-top:1px solid var(--line); }
.sf-row{ display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,2.4vw,34px); align-items:baseline; padding:clamp(22px,3vh,36px) 0; border-bottom:1px solid var(--line); }
.sf-row .sf-n{ font-size:clamp(1.8rem,3vw,2.7rem); font-weight:600; color:var(--paper); letter-spacing:-.02em; white-space:nowrap; }
.sf-row .sf-n .u{ font-size:.4em; color:var(--teal-bright); margin-left:.15em; }
.sf-row .sf-l{ color:var(--muted); font-size:1rem; line-height:1.4; }
@media (max-width:900px){ .stats-feature{ grid-template-columns:1fr; gap:38px; } }

/* ============================================================
   DARK-IMAGE HEROES on light pages — nav reads white at top, navy when scrolled
   (body.hero-dark marks pages whose hero is a full-bleed dark image)
   ============================================================ */
body.hero-dark .nav:not(.scrolled) .nav-logo img{ filter:brightness(0) invert(1); }
body.hero-dark .nav:not(.scrolled) .nav-logo b{ color:#fff; }
body.hero-dark .nav:not(.scrolled) .nav-logo span{ color:rgba(255,255,255,.6); }
body.hero-dark .nav:not(.scrolled) .nav-links a{ color:rgba(255,255,255,.9); }
body.hero-dark .nav:not(.scrolled) .nav-links a:hover{ color:#fff; }
body.hero-dark .nav:not(.scrolled) .burger span{ background:#fff; }

/* dark-designed heroes (page-hero / hero-fb) made safe on a light body */
body.theme-light .page-hero .sub{ color:rgba(244,241,234,.86); }
body.theme-light .page-hero h1{ color:#F4F1EA; }
body.theme-light .page-hero{ background:#10141b; }
body.theme-light .page-hero .crumb a, body.theme-light .page-hero .crumb span{ color:rgba(244,241,234,.6); }
body.theme-light .page-hero .hero-chips .hc{ color:rgba(244,241,234,.82); border-color:rgba(244,241,234,.2); }

/* ============================================================
   NAV DROPDOWN — Offering pages under Capabilities
   ============================================================ */
.nav-drop{ position:relative; display:inline-flex; align-items:center; }
.nav-drop-t::after{ content:""; display:inline-block; width:5px; height:5px; margin-left:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.55; }
.nav-drop-menu{ position:absolute; top:100%; left:-16px; padding-top:18px; min-width:248px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s; }
.nav-drop:hover .nav-drop-menu{ opacity:1; visibility:visible; transform:none; }
.nav-drop-menu{ }
.nav-drop-menu > a{ display:block; padding:13px 18px; font-size:.9rem; color:var(--paper) !important; background:rgba(251,250,247,.98); border-bottom:1px solid var(--line-2); transition:background .25s, color .25s; white-space:nowrap; }
.nav-drop-menu{ border:1px solid var(--line-2); border-radius:10px; box-shadow:0 26px 64px -26px rgba(20,24,31,.34); overflow:hidden; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.nav-drop-menu > a:first-child{ border-radius:10px 10px 0 0; }
.nav-drop-menu > a:last-child{ border-bottom:none; border-radius:0 0 10px 10px; }
.nav-drop-menu > a:hover{ background:var(--ink-2); color:var(--teal-bright) !important; }
.nav-drop-menu > a::after{ display:none; }

/* solutions: bold post-hero statement + varied big figures */
.solhero-stats .ss-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(44px,6vw,96px); align-items:center; }
.solhero-stats .ss-h{ font-family:var(--serif); font-weight:400; font-size:clamp(2rem,4.2vw,3.6rem); line-height:1.1; letter-spacing:-.015em; color:var(--paper); margin-top:18px; max-width:18ch; }
.solhero-stats .ss-h .serif{ color:var(--teal-bright); }
.solhero-stats .ss-figs{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3vw,42px); }
.solhero-stats .ssf{ }
.solhero-stats .ssf.big{ grid-column:1 / -1; border-bottom:1px solid var(--line); padding-bottom:clamp(20px,2.6vh,30px); }
.solhero-stats .ssf-n{ font-size:clamp(2.6rem,4.6vw,4.4rem); font-weight:600; color:var(--paper); letter-spacing:-.03em; line-height:.9; }
.solhero-stats .ssf.big .ssf-n{ font-size:clamp(4.4rem,9vw,7.4rem); }
.solhero-stats .ssf-n .u{ font-size:.34em; color:var(--teal-bright); margin-left:.1em; letter-spacing:0; }
.solhero-stats .ssf-l{ margin-top:12px; color:var(--muted); font-size:1.02rem; line-height:1.4; }
@media (max-width:900px){ .solhero-stats .ss-grid{ grid-template-columns:1fr; gap:40px; } }

/* ============================================================
   HOME INDUSTRY CARDS as real images
   ============================================================ */
body.theme-light .sol-card.imgc{ background-size:cover; background-position:center; }
body.theme-light .sol-card.imgc .sol-weave{ display:none; }
body.theme-light .sol-card.imgc::before{ background:linear-gradient(180deg, rgba(16,20,26,.12) 0%, rgba(16,20,26,.5) 52%, rgba(16,20,26,.9) 100%); }
body.theme-light .sol-card.imgc h3, body.theme-light .sol-card.imgc .s-eye, body.theme-light .sol-card.imgc .s-go{ color:#fff; }
body.theme-light .sol-card.imgc p{ color:rgba(255,255,255,.85); }
body.theme-light .sol-card.imgc:hover{ border-color:rgba(255,255,255,.45); transform:translateY(-6px); }

/* ============================================================
   CERTIFICATION SEAL BADGES (original typographic marks)
   ============================================================ */
.cert-seals{ display:flex; flex-wrap:wrap; gap:clamp(14px,1.8vw,26px); justify-content:center; }
.cseal{ width:clamp(98px,9.5vw,138px); height:clamp(98px,9.5vw,138px); border-radius:50%; border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:5px; background:var(--ink-2); position:relative; transition:.45s var(--ease); }
.cseal::before{ content:""; position:absolute; inset:8px; border-radius:50%; border:1px solid var(--line-2); transition:border-color .4s; }
.cseal:hover{ border-color:var(--teal-bright); transform:translateY(-4px); }
.cseal:hover::before{ border-color:rgba(35,71,168,.3); }
.cseal .cs-mark{ font-family:var(--mono); font-size:.48rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-bright); }
.cseal .cs-name{ font-family:var(--serif); font-size:clamp(.92rem,1.3vw,1.2rem); color:var(--paper); line-height:1; padding:0 8px; }
.cseal .cs-sub{ font-family:var(--mono); font-size:.46rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }

/* ============================================================
   EXPLORE  —  Fabric Studio + Collection feature (home)
   ============================================================ */
body.theme-light .explore{ padding:clamp(96px,14vh,184px) 0; background:var(--ink); position:relative; }
.explore-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.2vw,32px); margin-top:clamp(40px,6vh,68px); }
.xcard{
  position:relative; display:flex; flex-direction:column; text-decoration:none; overflow:hidden;
  border-radius:20px; background:#0B1730; color:#F4F1EA;
  border:1px solid rgba(244,241,234,.08);
  box-shadow:0 24px 60px -34px rgba(8,18,40,.5);
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .6s var(--ease-out);
}
.xcard:hover{ transform:translateY(-7px); box-shadow:0 38px 90px -34px rgba(8,18,40,.6); border-color:rgba(94,132,238,.42); }
.xc-visual{ position:relative; height:clamp(190px,26vh,288px); overflow:hidden; background:#0E1F3F; }
.xc-visual image-slot, .xc-visual img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s var(--ease-out); }
.xcard:hover .xc-visual img{ transform:scale(1.05); }
.xc-visual::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,23,48,0) 42%, rgba(11,23,48,.92)); pointer-events:none; }
/* procedural woven preview for the Studio card */
.xc-weave{
  position:absolute; inset:0;
  background-color:#0C1D3C;
  background-image:
    repeating-linear-gradient(90deg, rgba(94,132,238,.62) 0 3px, transparent 3px 13px),
    repeating-linear-gradient(0deg, rgba(244,241,234,.16) 0 3px, transparent 3px 13px),
    linear-gradient(135deg, #16315F 0%, #0A1730 100%);
  background-size:13px 13px, 13px 13px, 100% 100%;
  transition:background-size 1s var(--ease-out);
}
.xcard:hover .xc-weave{ background-size:17px 17px, 17px 17px, 100% 100%; }
.xc-live{
  position:absolute; left:18px; top:18px; z-index:2; display:inline-flex; align-items:center; gap:8px;
  padding:7px 13px; border-radius:100px; background:rgba(8,16,34,.62); backdrop-filter:blur(8px);
  border:1px solid rgba(244,241,234,.14);
  font-family:var(--mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:#F4F1EA;
}
.xc-dot{ width:7px; height:7px; border-radius:50%; background:#5E84EE; box-shadow:0 0 0 0 rgba(94,132,238,.6); animation:xcPulse 2.2s var(--ease-out) infinite; }
@keyframes xcPulse{ 0%{ box-shadow:0 0 0 0 rgba(94,132,238,.55); } 70%{ box-shadow:0 0 0 9px rgba(94,132,238,0); } 100%{ box-shadow:0 0 0 0 rgba(94,132,238,0); } }
.xc-body{ padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; flex:1; }
.xc-eye{ font-family:var(--mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:#5E84EE; }
.xc-body h3{ font-size:clamp(1.6rem,2.6vw,2.2rem); font-weight:600; line-height:1.04; margin-top:12px; color:#F7F5EF; }
.xc-body h3 .serif{ font-family:var(--serif); font-weight:400; font-style:italic; }
.xc-body > p{ color:rgba(244,241,234,.66); font-size:1rem; line-height:1.56; margin-top:14px; max-width:46ch; }
.xc-pts{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.xc-pts li{ position:relative; padding-left:24px; font-size:.92rem; color:rgba(244,241,234,.82); line-height:1.4; }
.xc-pts li::before{
  content:""; position:absolute; left:0; top:.46em; width:11px; height:11px;
  background:
    repeating-linear-gradient(90deg, #5E84EE 0 1.5px, transparent 1.5px 4px),
    repeating-linear-gradient(0deg, rgba(244,241,234,.5) 0 1.5px, transparent 1.5px 4px);
}
.xc-go{
  margin-top:auto; padding-top:26px; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:#F4F1EA;
}
.xc-go .ar{ transition:transform .45s var(--ease-out); }
.xcard:hover .xc-go .ar{ transform:translateX(5px); }
@media (max-width:840px){ .explore-grid{ grid-template-columns:1fr; } }

/* ============================================================
   INDUSTRY REBALANCE  —  sector strip + by-sector mapping grids
   ============================================================ */
/* reverse-funnel chip row (Collection) */
.sector-strip{ border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); background:var(--ink-2); }
.sector-strip .wrap{ padding-top:clamp(36px,5vh,58px); padding-bottom:clamp(36px,5vh,58px); }
.sector-strip .ss-eye{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-bright); }
.sector-strip h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,2.4vw,2rem); color:var(--paper); margin-top:10px; letter-spacing:-.01em; }
.ss-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.ss-chip{ display:inline-flex; align-items:center; gap:9px; padding:11px 17px; border-radius:100px; border:1px solid var(--line); background:transparent; text-decoration:none; color:var(--text); font-size:.92rem; transition:border-color .4s var(--ease-out), color .4s var(--ease-out), background .4s var(--ease-out), transform .4s var(--ease-out); }
.ss-chip .n{ font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; color:var(--faint); }
.ss-chip:hover{ border-color:var(--teal-bright); color:var(--paper); background:rgba(28,52,112,.06); transform:translateY(-2px); }
.ss-chip .ar{ transition:transform .4s var(--ease-out); }
.ss-chip:hover .ar{ transform:translateX(3px); }

/* by-sector mapping grid (Certifications + Sustainability) */
.secgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:16px; overflow:hidden; margin-top:clamp(38px,5vh,60px); }
.seccard{ background:var(--ink); padding:clamp(24px,2.6vw,34px); display:flex; flex-direction:column; text-decoration:none; transition:background .4s var(--ease-out); }
.seccard:hover{ background:var(--ink-2); }
.seccard .sc-n{ font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--teal-bright); }
.seccard h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.24rem,1.8vw,1.5rem); color:var(--paper); margin-top:9px; line-height:1.1; }
.seccard p{ color:var(--muted); font-size:.92rem; line-height:1.52; margin-top:11px; flex:1; }
.sc-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }
.sc-tags span{ font-family:var(--mono); font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text); border:1px solid var(--line); border-radius:100px; padding:4px 10px; white-space:nowrap; }
.seccard .sc-go{ margin-top:18px; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); display:inline-flex; align-items:center; gap:8px; transition:color .4s; }
.seccard:hover .sc-go{ color:var(--teal-bright); }
.seccard .sc-go .ar{ transition:transform .4s var(--ease-out); }
.seccard:hover .sc-go .ar{ transform:translateX(3px); }
@media (max-width:860px){ .secgrid{ grid-template-columns:1fr; } }

/* ============================================================
   HERO ENTRANCE MOTION — word-by-word "write-in" + staggered fades
   (namespaced .af-*; only fires once main.js wraps the words,
    so no-JS pages still render the heading normally)
   ============================================================ */
@keyframes afWordIn{ from{ opacity:0; transform:translateY(.55em); } to{ opacity:1; transform:translateY(0); } }
@keyframes afFadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes afKen{ from{ transform:scale(1.09); } to{ transform:scale(1); } }

.af-h .af-word{ display:inline-block; opacity:0; will-change:transform,opacity;
  animation:afWordIn .72s var(--ease-out) both; animation-delay:calc(.12s + var(--i,0)*.05s); }

/* supporting hero elements fade up shortly after the heading starts (scoped to .af-on hero) */
.af-on .eyebrow, .af-on .crumb, .af-on .hhf-sub, .af-on .hhf-actions, .af-on .hhf-certs,
.af-on .ch-sub, .af-on .sub, .af-on .ph-actions, .af-on .metrics, .af-on .st-eye, .af-on .st-h{
  opacity:0; animation:afFadeUp .8s var(--ease-out) forwards; }
.af-on .crumb, .af-on .eyebrow, .af-on .st-eye{ animation-delay:.1s; }
.af-on .st-h{ animation-delay:.26s; }
.af-on .hhf-sub, .af-on .ch-sub, .af-on .sub{ animation-delay:.48s; }
.af-on .hhf-actions, .af-on .ph-actions{ animation-delay:.64s; }
.af-on .hhf-certs, .af-on .metrics{ animation-delay:.8s; }

/* full-bleed hero image: gentle zoom-in on load */
.hhf-img image-slot, .hc-img image-slot{ animation:afKen 2.1s var(--ease-out) both; transform-origin:50% 50%; }

@media (prefers-reduced-motion: reduce){
  .af-h .af-word,
  .af-on .eyebrow, .af-on .crumb, .af-on .hhf-sub, .af-on .hhf-actions, .af-on .hhf-certs,
  .af-on .ch-sub, .af-on .sub, .af-on .ph-actions, .af-on .metrics, .af-on .st-eye{
    opacity:1 !important; animation:none !important; transform:none !important; }
  .hhf-img image-slot, .hc-img image-slot{ animation:none !important; }
}