/* ov-fineshield - /fineshield overlap pass (2026-09-30). Page-scoped, loaded last (front matter
   `css: fsb fsb-v2 chf fsb-d30 ov-fineshield`). Every rule sits under .ovf (the page root). Copy, films,
   the hero and the chf- figure are untouched; this only changes how the sections around them sit.
   Moments: What it is (ink block behind the photo, FineShield's real panel over its corner) · films
   (faint plates behind each screen, offset away from the text, alternating sides) · dashboard (photo beside the heading,
   the panel rising over its foot) · Why (heading card rising over the photo band, three staggered
   figure cards) · channels (the three channels as a card over the foot of the Zoom photo) · record
   (the log as a card over a photograph) · commitments (top-aligned cards over the office
   photograph) · FAQ (a portrait) · close (photo standing out of the blue band). */

.ovf{overflow-x:clip;
  --ovf-ink:#16285A;                 /* the accent, deepened, for blocks behind photos */
  --ovf-wash:#E7ECF7;                /* the accent at its palest, for plates */
  --ovf-plate:#F1F4FA;                /* fainter still, for the plates behind the films */
  --ovf-shadow:0 0 0 1px rgba(16,24,40,.05),0 30px 60px -24px rgba(16,24,40,.38),0 12px 24px -12px rgba(16,24,40,.16)}

/* ---------- What it is: ink block behind the photo, the real FineShield panel over its corner ---------- */
.ovf .fsd-what-p{position:relative;isolation:isolate}
.ovf .fsd-what-p::before{content:"";position:absolute;z-index:-1;left:-1.75rem;bottom:-1.75rem;width:58%;height:64%;border-radius:var(--fsd-r);background:var(--ovf-ink)}
.ovf .ovf-flag{position:absolute;z-index:2;display:block;width:min(15.5rem,40%);right:-3.25rem;bottom:-3.5rem}
.ovf .fsd-what-p .ovf-flag img{display:block;width:100%;height:auto;aspect-ratio:525/832;border-radius:12px;box-shadow:var(--ovf-shadow);background:#13212C}
.ovf .fsd-what-g{align-items:center}
.ovf .fsd-what-t{grid-column:9 / span 4;padding-top:3rem}
@media (prefers-reduced-motion:no-preference){
  .fsb-anim.ovf .fsd-what-p.fsb-rv .ovf-flag{opacity:0;transform:translateY(20px);transition:opacity 800ms var(--fsb-ease) 260ms,transform 800ms var(--fsb-ease) 260ms}
  .fsb-anim.ovf .fsd-what-p.fsb-in .ovf-flag{opacity:1;transform:none}
}

/* ---------- films: a faint plate behind each screen, offset outward (away from the text), alternating sides.
   The plate stays inside the screen's own columns, so it never runs under the headings or the copy (founder 0930). ---------- */
.ovf .fsb-film-g{position:relative;isolation:isolate}
.ovf .fsb-film-g::before{content:"";z-index:-1;grid-row:1;align-self:stretch;border-radius:calc(var(--fsd-r) + 4px);background:var(--ovf-plate);
  grid-column:1 / span 7;margin:2.5rem 2.5rem -2rem -2rem}
.ovf .fsb-flip .fsb-film-g::before{grid-column:6 / span 7;margin:-2rem -2rem 2.5rem 2.5rem}
.ovf .fsb-tall .fsb-film-g::before{grid-column:8 / span 4;margin:3rem -2rem 3rem 2.5rem}
.ovf .fsb-film-v.fsb-screen{box-shadow:var(--ovf-shadow)}

/* ---------- dashboard: photo beside the heading, the panel rises over its foot ---------- */
.ovf .ovf-dash-top{align-items:start}
.ovf .ovf-dash-top .fsb-head{grid-column:1 / span 7;align-self:center}
.ovf .ovf-dash-p{grid-column:9 / span 4;margin:0 0 calc(-1 * clamp(9rem,5rem + 8vw,15rem));position:relative}
.ovf .ovf-dash-p img{aspect-ratio:3/4;object-position:40% 50%}
.ovf .ovf-dash-p::before{content:"";position:absolute;z-index:-1;top:-1.5rem;right:-1.5rem;width:70%;height:55%;border-radius:var(--fsd-r);background:var(--ovf-wash)}
.ovf .ovf-dash-panel{position:relative;z-index:1;margin-top:clamp(2rem,1rem + 2vw,3rem);margin-right:clamp(2rem,1rem + 6vw,7rem);box-shadow:var(--ovf-shadow);background:#fff}
.ovf .ovf-dash-panel .fsb-shot + .fsb-shot{margin-left:clamp(0rem,6vw,5rem)}
.ovf .ovf-dash-panel .fsb-shot:first-child{margin-right:clamp(0rem,6vw,5rem)}

/* ---------- Why: the heading card rises over the photo band; the three figures as staggered cards ---------- */
.ovf .fsd-why{padding-top:0}
.ovf .fsd-why .fsd-pair-h{position:relative;z-index:1;margin-top:calc(-1 * clamp(6rem,3rem + 7vw,10rem));padding:clamp(2rem,1rem + 3vw,3.5rem) clamp(1.5rem,1rem + 2.5vw,3rem) 0 0;background:var(--fsb-bg);border-radius:0 var(--fsd-r) 0 0}
.ovf .fsd-why .fsd-pair-h::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;right:100%;width:100vw;background:var(--fsb-bg)}
.ovf .fsd-why .fsd-pair-t{padding-top:clamp(2rem,1rem + 3vw,3.5rem)}
.ovf .fsd-why .fsb-big{align-items:start;gap:var(--fsb-gap)}
.ovf .fsd-why .fsb-big li{border:0;padding:clamp(1.5rem,1rem + 1.6vw,2.5rem);border-radius:var(--fsd-r);background:var(--fsd-tint)}
.ovf .fsd-why .fsb-big li:first-child{padding-left:clamp(1.5rem,1rem + 1.6vw,2.5rem);background:var(--fsb-accent)}
.ovf .fsd-why .fsb-big li:first-child .fsb-big-n{color:#fff}
.ovf .fsd-why .fsb-big li:first-child .fsb-big-l{color:var(--fsb-band-text)}
.ovf .fsd-why .fsb-big li:nth-child(2){background:var(--ovf-wash)}
.ovf .fsd-why .fsb-big-n{font-size:clamp(44px,5vw,80px)}

/* ---------- channels: heading pair, the Zoom photo, the three channels as a card over its foot ---------- */
.ovf .ovf-ch .fsb-split-t{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--fsb-gap);align-items:end}
.ovf .ovf-ch .fsb-split-t > .fsb-eyebrow,.ovf .ovf-ch .fsb-split-t > .fsb-h2{grid-column:1 / span 6}
.ovf .ovf-ch .fsb-split-t > .fsb-h2{max-width:14ch}
.ovf .ovf-ch .fsb-split-t > .fsb-sub{grid-column:8 / span 5;grid-row:1 / span 2;margin:0}
.ovf .ovf-ch-p{margin-top:clamp(48px,5vw,80px)}
.ovf .ovf-ch-p img{object-position:50% 40%}
.ovf .ovf-ch-card{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin:calc(-1 * clamp(4rem,2rem + 5vw,8rem)) clamp(1rem,4vw,4rem) 0 auto;width:min(100%,64rem);
  background:#fff;border-radius:var(--fsd-r);box-shadow:var(--ovf-shadow);padding:.5rem}
.ovf .ovf-ch-card li{grid-template-columns:40px minmax(0,1fr);padding:clamp(1.25rem,1rem + 1vw,2rem);border:0}
.ovf .ovf-ch-card li:last-child{border:0}
.ovf .ovf-ch-card li + li{border-left:1px solid var(--fsb-hair-2)}
.ovf .ovf-ch-card .fsb-six-i{background:var(--ovf-wash)}

/* ---------- record: a photograph, with the log as a card over its corner ---------- */
.ovf .ovf-kept-m{position:relative;isolation:isolate}
.ovf .ovf-kept-p{margin:0 0 0 clamp(1.5rem,1rem + 3vw,4rem)}
.ovf .ovf-kept-p img{aspect-ratio:5/4}
.ovf .ovf-kept-p::before{content:"";position:absolute;z-index:-1;top:-1.5rem;right:-1.5rem;width:46%;height:46%;border-radius:var(--fsd-r);background:var(--ovf-wash)}
.ovf .ovf-kept-card{position:relative;z-index:1;width:min(30rem,88%);margin:calc(-1 * clamp(4rem,2rem + 4vw,6.5rem)) 0 0 calc(-1 * clamp(0rem,2vw,2rem));
  background:#fff;border-radius:var(--fsd-r);box-shadow:var(--ovf-shadow);padding:.75rem clamp(1.25rem,1rem + 1vw,2rem)}
.ovf .ovf-kept-card div:first-child{border-top:0}
.ovf .ovf-kept-card div:last-child{border-bottom:0}
.ovf #kept .fsb-split{align-items:center}

/* ---------- commitments: top-aligned cards over the office photograph ---------- */
.ovf #commitments{position:relative;z-index:1;padding-bottom:0}
.ovf .fsd-commits{align-items:start}
.ovf .fsd-commits li{border:0;background:#fff;border-radius:var(--fsd-r);padding:clamp(1.25rem,.8rem + 1.2vw,2rem);box-shadow:var(--ovf-shadow)}
.ovf .fsd-commits li:nth-child(5){background:var(--fsb-accent)}
.ovf .fsd-commits li:nth-child(5) :is(h3,.fsb-num-s){color:#fff}
.ovf .fsd-commits li:nth-child(5) p{color:var(--fsb-band-text)}
.ovf .fsd-commits{margin-bottom:calc(-1 * clamp(6rem,3rem + 6vw,10rem))}
.ovf .fsd-edit{position:relative;z-index:0}

/* ---------- FAQ: a portrait under the heading ---------- */
.ovf .ovf-faq-c{position:relative;margin-top:clamp(2.5rem,1.5rem + 3vw,4rem);max-width:22rem}
.ovf .ovf-faq-c picture{display:block}
.ovf .ovf-faq-c img{display:block;width:100%;height:auto;border-radius:var(--fsd-r)}
.ovf .ovf-faq-a img{aspect-ratio:4/5;object-fit:cover}
@media (min-width:901px){.ovf .fsb-faq-h{position:sticky;top:6rem}}

/* ---------- close: the photograph stands out of the blue band ---------- */
.ovf .ovf-band{position:relative;padding-right:calc(clamp(24px,6vw,96px) + 32%)}
.ovf .ovf-band-p{position:absolute;right:clamp(1.5rem,1rem + 2vw,3rem);top:-3rem;bottom:clamp(1.5rem,1rem + 2vw,3rem);width:30%}
.ovf .ovf-band-p img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;border-radius:var(--fsd-r);box-shadow:0 30px 60px -20px rgba(8,14,40,.55)}
.ovf .fsb-close{padding-top:3rem}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .ovf .ovf-flag{right:-1.5rem;width:min(13rem,38%)}
  .ovf .fsd-commits li:nth-child(n){margin-top:0}
  .ovf .fsd-commits{margin-bottom:calc(-1 * clamp(4rem,2rem + 4vw,6rem))}
}
@media (max-width:1000px){
  .ovf .fsd-commits li:nth-child(5){grid-column:span 2}
}
@media (max-width:900px){
  .ovf .fsd-what-t{grid-column:1 / -1;padding-top:3.5rem}
  .ovf .fsd-what-p{margin-right:1rem}
  .ovf .ovf-flag{right:-1rem;bottom:-2.5rem;width:min(12rem,36%)}
  .ovf .fsb-film-g::before{display:none}
  .ovf .ovf-dash-top .fsb-head{grid-column:1 / -1}
  .ovf .ovf-dash-p{grid-column:4 / -1;margin:var(--fsb-s4) 0 calc(-1 * 6rem)}
  .ovf .ovf-dash-p img{aspect-ratio:4/3}
  .ovf .ovf-dash-panel{margin-right:0}
  .ovf .ovf-dash-panel .fsb-shot:first-child,.ovf .ovf-dash-panel .fsb-shot + .fsb-shot{margin-inline:0}
  .ovf .fsd-why .fsd-pair-h{margin-top:-4rem;padding-top:2rem}
  .ovf .fsd-why .fsd-pair-t{padding-top:0}
  .ovf .ovf-ch .fsb-split-t > .fsb-eyebrow,.ovf .ovf-ch .fsb-split-t > .fsb-h2,.ovf .ovf-ch .fsb-split-t > .fsb-sub{grid-column:1 / -1;grid-row:auto}
  .ovf .ovf-ch .fsb-split-t > .fsb-sub{margin-top:var(--fsb-s3)}
  .ovf .ovf-ch-card{grid-template-columns:minmax(0,1fr);margin:-3rem .75rem 0;width:auto}
  .ovf .ovf-ch-card li + li{border-left:0;border-top:1px solid var(--fsb-hair-2)}
  .ovf .ovf-kept-m{max-width:640px}
  .ovf .ovf-kept-p{margin-left:1.5rem}
  .ovf .ovf-kept-card{margin-top:-5rem}
  .ovf .ovf-faq-c{display:none}
  .ovf .ovf-band{padding-right:clamp(24px,6vw,96px);padding-top:calc(clamp(56px,8vw,128px) + 10rem)}
  .ovf .ovf-band-p{top:-3rem;left:auto;right:clamp(1rem,4vw,3rem);bottom:auto;width:min(14rem,48%);height:auto}
  .ovf .ovf-band-p img{aspect-ratio:4/5;height:auto}
  .ovf .fsb-close{padding-top:4rem}
}

/* ---------- phone ---------- */
@media (max-width:700px){
  .ovf .fsd-what-p::before{left:-.75rem;bottom:-.75rem}
  .ovf .fsd-what-p{margin-right:2.5rem}
  .ovf .ovf-flag{right:-2.5rem;bottom:-2.25rem;width:44%}
  .ovf .ovf-dash-p{grid-column:3 / -1;margin-bottom:-4rem}
  .ovf .ovf-dash-p::before{top:-.75rem;right:-.75rem}
  .ovf .fsd-why .fsd-pair-h{margin-top:-3rem;padding:1.5rem 1.25rem 0 0}
  .ovf .fsd-why .fsb-big{row-gap:var(--fsb-s3)}
  .ovf .fsd-why .fsb-big li + li{margin-top:0}
  .ovf .fsd-why .fsb-big li:nth-child(2){margin-left:1.5rem}
  .ovf .fsd-why .fsb-big li:nth-child(3){margin-top:0;margin-left:3rem}
  .ovf .fsd-why .fsb-big li{border-top:0}
  .ovf .ovf-ch-card{margin:-2rem .5rem 0}
  .ovf .ovf-kept-p{margin-left:1rem}
  .ovf .ovf-kept-p::before{top:-.75rem;right:-.75rem}
  .ovf .ovf-kept-card{width:auto;margin:-3rem 1.5rem 0 0}
  .ovf .fsd-commits li:nth-child(5){grid-column:auto}
  .ovf .fsd-commits{row-gap:.75rem;gap:.75rem;margin-bottom:-3rem}
  .ovf .fsd-commits li{display:grid;grid-template-columns:44px minmax(0,1fr);border-top:0}
  .ovf .fsd-commits li:last-child{border-bottom:0}
  .ovf .ovf-band{padding-top:calc(56px + 8rem)}
  .ovf .ovf-band-p{width:min(11rem,50%)}
}