/* fsb-d30 - /fineshield design pass (2026-09-30). Copy frozen; layout, imagery and rhythm only.
   Loaded after fsb.css + fsb-v2.css; every rule is scoped to .fsb-d30 (classes fsd-*).
   Rhythm: hero (held card on a tinted plate) · What it is (headline, then photo + text) · films ·
   dashboard (tinted panel) · Lawyer-trained (ink band, the five-channel figure) · photo band ·
   Why (pair + three figures + the moment) · channels (tinted band, Zoom photo) · record ·
   commitments (five columns) · office photo, full bleed · FAQ · close.
   The figure is chf.css (generated, untouched). Light page only. */

.fsb-d30{
  --fsd-ink-band:#0C1A24;          /* matches the chf plate, so the figure sits flush */
  --fsd-ink-title:#F2EDE3;
  --fsd-ink-body:#C3CED6;          /* 11.4:1 on the band */
  --fsd-ink-muted:#8C9CA6;         /* 6.2:1 on the band */
  --fsd-accent-on-ink:#A9BBEA;     /* the ink-blue accent, lifted for the dark band (8.9:1) */
  --fsd-tint:#F4F5F8;
  --fsd-r:20px;
}

/* ---------- shared: photographs ---------- */
.fsb-d30 .fsd-ph{margin:0}
.fsb-d30 .fsd-ph img{display:block;width:100%;height:auto;border-radius:var(--fsd-r);object-fit:cover;background:#E9E6E0}

/* ---------- the moments: each aha line, centred, with a short accent rule ---------- */
.fsb-d30 .fsb-aha{position:relative;margin:clamp(72px,8vw,128px) auto 0;max-width:22ch;padding:clamp(28px,2.4vw,36px) 0 0;border:0;
  text-align:center;font-size:clamp(30px,3.7vw,56px);line-height:1.1;letter-spacing:-.02em}
.fsb-d30 .fsb-aha::before{content:"";position:absolute;top:0;left:50%;width:48px;height:2px;margin-left:-24px;background:var(--fsb-accent)}

/* ---------- pair: heading left, text right ---------- */
.fsb-d30 .fsd-pair{align-items:end;row-gap:var(--fsb-s4)}
.fsb-d30 .fsd-pair-h{grid-column:1 / span 6}
.fsb-d30 .fsd-pair-t{grid-column:8 / span 5;margin-top:0}
.fsb-d30 .fsd-pair .fsb-h2{max-width:14ch}
.fsb-d30 .fsd-why .fsd-pair{align-items:start}

/* ---------- hero: two photos with the held message floating across them ---------- */
.fsb-d30 .fsb-hero-t{grid-column:1 / span 6}
.fsb-d30 .fsb-hero-p{grid-column:7 / span 6;margin:0;position:relative;padding:0;background:none}
.fsd-stage-a,.fsd-stage-b{position:absolute;overflow:hidden;background:var(--fsd-tint)}
.fsd-stage-a{top:0;right:0;width:76%;aspect-ratio:4/5;border-radius:calc(var(--fsd-r) + 6px)}
.fsd-stage-b{top:clamp(18px,2.4vw,36px);left:0;width:34%;aspect-ratio:1/1;border-radius:var(--fsd-r);border:6px solid #fff;box-shadow:0 18px 40px rgba(16,24,40,.16);z-index:1}
.fsd-stage-a img,.fsd-stage-b img{display:block;width:100%;height:100%;object-fit:cover}
.fsb-d30 .fsb-hero-p .fsb-hold{position:relative;z-index:2;width:74%;max-width:460px;margin:46% 0 0;box-shadow:0 2px 4px rgba(16,24,40,.06),0 28px 64px rgba(16,24,40,.22)}
.fsb-d30 .fsb-hero-p .fsb-cap{position:relative;z-index:2;max-width:460px;margin:14px 0 0}
@media (prefers-reduced-motion:no-preference){
  .fsb-anim .fsd-stage.fsb-rv .fsd-stage-b{transform:translateY(14px);opacity:0;transition:transform 700ms var(--fsb-ease) 160ms,opacity 700ms var(--fsb-ease) 160ms}
  .fsb-anim .fsd-stage.fsb-rv .fsb-hold{transform:translateY(22px);transition:transform 800ms var(--fsb-ease) 260ms}
  .fsb-anim .fsd-stage.fsb-in .fsd-stage-b,.fsb-anim .fsd-stage.fsb-in .fsb-hold{transform:none;opacity:1}
}
.fsb-d30 .fsb-h1{font-size:clamp(42px,5vw,72px)}

/* ---------- What it is: headline across, then photograph + paragraph ---------- */
.fsb-d30 .fsd-what{padding-top:clamp(56px,7vw,112px)}
.fsb-d30 .fsd-what-h{max-width:none}
.fsb-d30 .fsd-what .fsb-h2-w{max-width:26ch}
.fsb-d30 .fsd-what-g{margin-top:clamp(48px,5vw,80px);align-items:end;row-gap:var(--fsb-s4)}
.fsb-d30 .fsd-what-p{grid-column:1 / span 7}
.fsb-d30 .fsd-what-p img{aspect-ratio:3 / 2}
.fsb-d30 .fsd-what-t{grid-column:9 / span 4}
.fsb-d30 .fsd-what-t .fsb-sub{margin-top:0;font-size:var(--fsb-fs-lede);line-height:1.62;color:var(--fsb-ink)}

/* ---------- films: the statement opens on whitespace, not a rule ---------- */
.fsb-d30 .fsb-statement{border-top:0}

/* ---------- Lawyer-trained: the ink band and the five-channel figure ---------- */
.fsb-d30 .fsd-dark{background:var(--fsd-ink-band);color:var(--fsd-ink-body)}
.fsb-d30 .fsd-dark :is(h2,h3){color:var(--fsd-ink-title)}
.fsb-d30 .fsd-dark h2 em{color:var(--fsd-accent-on-ink)}
.fsb-d30 .fsd-dark .fsb-eyebrow{color:var(--fsd-ink-muted)}
.fsb-d30 .fsd-dark .fsb-sub{color:var(--fsd-ink-body)}
.fsb-d30 .fsd-dark .fsb-aha{color:var(--fsd-ink-title)}
.fsb-d30 .fsd-dark .fsb-aha::before{background:var(--fsd-accent-on-ink)}
.fsb-d30 .fsd-fig{margin:clamp(56px,6vw,96px) 0 0}
.fsb-d30 .fsd-fig .chf-fig{overflow:hidden}

/* ---------- photograph band before Why (full bleed) ---------- */
.fsb-d30 .fsd-band figure{margin:0}
.fsb-d30 .fsd-band img{display:block;width:100%;height:auto;aspect-ratio:1680 / 720;max-height:78vh;object-fit:cover;object-position:62% 40%}

/* ---------- Why: pair, three figures with vertical rules, the moment ---------- */
.fsb-d30 .fsd-why .fsb-why{max-width:none}
.fsb-d30 .fsb-big{margin-top:clamp(64px,7vw,112px);gap:0}
.fsb-d30 .fsb-big li{padding:4px clamp(16px,2.4vw,40px) 0;border-top:0;border-left:1px solid var(--fsb-hair-2)}
.fsb-d30 .fsb-big li:first-child{padding-left:0;border-left:0}
.fsb-d30 .fsb-big-n{font-size:clamp(52px,6.2vw,94px)}
.fsb-d30 .fsb-big-l{margin-top:18px}

/* ---------- channels: tinted band, wide Zoom photograph ---------- */
.fsb-d30 .fsd-tint{background:var(--fsd-tint)}
.fsb-d30 .fsd-tint .fsb-six-i{background:#fff}
.fsb-d30 .fsd-wide{margin-top:clamp(56px,6vw,96px)}
.fsb-d30 .fsd-wide img{aspect-ratio:1680 / 720}

/* ---------- commitments: heading pair, then five columns ---------- */
.fsb-d30 .fsd-commits{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--fsb-gap);margin-top:clamp(56px,6vw,88px)}
.fsb-d30 .fsd-commits li{display:block;padding:var(--fsb-s3) 0 0;border-top:1px solid var(--fsb-ink);border-bottom:0}
.fsb-d30 .fsd-commits li:last-child{border-bottom:0}
.fsb-d30 .fsd-commits .fsb-num-s{display:block;font-size:clamp(40px,3.6vw,56px);margin-bottom:var(--fsb-s3)}
.fsb-d30 .fsd-commits h3{font-size:17px}
.fsb-d30 .fsd-commits p{margin-top:8px;font-size:15.5px}

/* ---------- office photograph, full bleed ---------- */
.fsb-d30 .fsd-edit figure{margin:0}
.fsb-d30 .fsd-edit img{border-radius:0;aspect-ratio:1952 / 608;max-height:72vh}
.fsb-d30 .fsd-edit .fsb-cap{margin-top:14px}

/* ---------- tablet ---------- */
@media (max-width:1000px){
  .fsb-d30 .fsd-commits{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--fsb-s5)}
}
@media (max-width:900px){
  .fsb-d30 .fsb-hero-t,.fsb-d30 .fsb-hero-p,
  .fsb-d30 .fsd-pair-h,.fsb-d30 .fsd-pair-t,
  .fsb-d30 .fsd-what-p,.fsb-d30 .fsd-what-t{grid-column:1 / -1}
  .fsb-d30 .fsb-hero-p{max-width:640px}
  .fsb-d30 .fsd-pair-t,.fsb-d30 .fsd-what-t{max-width:62ch}
  .fsb-d30 .fsd-pair .fsb-h2{max-width:18ch}
}

/* ---------- phone ---------- */
@media (max-width:700px){
  .fsb-d30 .fsd-what-p img{aspect-ratio:3 / 2}
  .fsb-d30 .fsd-band img{aspect-ratio:4 / 3;max-height:none;object-position:50% 40%}
  .fsb-d30 .fsd-wide img{aspect-ratio:880 / 528}
  .fsb-d30 .fsd-edit img{aspect-ratio:4 / 3;max-height:none}
  .fsb-d30 .fsb-big{gap:0}
  .fsb-d30 .fsb-big li{padding:var(--fsb-s3) 0 0;border-left:0;border-top:1px solid var(--fsb-hair-2)}
  .fsb-d30 .fsb-big li + li{margin-top:var(--fsb-s4)}
  .fsb-d30 .fsd-commits{grid-template-columns:minmax(0,1fr);row-gap:0;gap:0}
  .fsb-d30 .fsd-commits li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:var(--fsb-s2);padding:18px 0;border-top:1px solid var(--fsb-hair-2)}
  .fsb-d30 .fsd-commits li:last-child{border-bottom:1px solid var(--fsb-hair-2)}
  .fsb-d30 .fsd-commits .fsb-num-s{font-size:30px;margin:0}
  .fsb-d30 .fsb-aha{text-align:left;margin-left:0;font-size:clamp(28px,8vw,36px)}
  .fsb-d30 .fsb-aha::before{left:0;margin-left:0}
}

/* hero stage below 1100px: photo full width of its column, card overlapping its foot */
@media (max-width:1100px){
  .fsd-stage-a{position:relative;width:100%;aspect-ratio:4/3}
  .fsd-stage-b{display:none}
  .fsb-d30 .fsb-hero-p .fsb-hold{width:auto;max-width:520px;margin:-72px 12px 0}
  .fsb-d30 .fsb-hero-p .fsb-cap{margin-left:12px}
}