/* ============================================================
   AdFin — site stylesheet (index.html). Tokens are an excerpt of
   ../claude-adfin-brand/tokens/adfin.tokens.css; legal pages load this
   file first and add css/legal.css on top.
   ============================================================ */
@font-face{
  font-family:"InterVariable";
  src:url("/fonts/InterVariable.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --af-chalk:#E8EAEC; --af-paper:#FFFFFF; --af-charcoal:#2F3337; --af-charcoal-deep:#23272A;
  --af-navy:#0A2540; --af-slate:#4C5F76; --af-dusk:#75879D; --af-mist:#ABB6C4;
  --af-sage:#7B9C77; --af-sage-tint:#AEC3AC;

  --ground:var(--af-chalk);
  --ground-raised:var(--af-paper);
  --ink:var(--af-navy);
  --ink-secondary:var(--af-slate);
  --ink-quiet:var(--af-dusk);
  --rule:rgba(10,37,64,.12);
  --rule-strong:var(--af-slate);
  --accent:var(--af-sage);
  --logo-ink:var(--af-navy);

  --font-sans:"InterVariable","Inter","Helvetica Neue",Arial,sans-serif;
  --weight-regular:400; --weight-medium:500; --weight-semi:600;
  --track-tight:-0.015em; --track-eyebrow:0.09em;
  --lead-display:1.14; --lead-body:1.55;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem;
  --s8:2rem; --s10:2.5rem; --s14:3.5rem; --s18:4.5rem; --s24:6rem;

  --radius-sm:2px; --radius-md:3px;
  --container:1120px; --measure:66ch;

  --dur-fast:120ms; --dur-base:180ms;
  --ease:cubic-bezier(0.2,0,0.2,1);

  --head-pad:22px;      /* full header vertical padding */
  --mark:30px;          /* full mark size */
  --word:1.35rem;       /* full wordmark size */
}

[data-surface="charcoal"]{
  --ground:var(--af-charcoal);
  --ground-raised:var(--af-charcoal-deep);
  --ink:var(--af-chalk);
  --ink-secondary:var(--af-mist);
  --ink-quiet:var(--af-dusk);
  --rule:#3A4046;
  --rule-strong:var(--af-slate);
  --accent:var(--af-sage);
  --logo-ink:var(--af-chalk);
}

/* ============================================================
   Base
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  background:var(--af-chalk);
  color:var(--af-navy);
  font-family:var(--font-sans);
  font-size:1.0625rem;
  line-height:var(--lead-body);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}
a{color:inherit}
::selection{background:var(--af-sage-tint);color:var(--af-navy)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:1px}
img,svg{display:block;max-width:100%}

.wrap{max-width:var(--container);margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:10px;z-index:30;background:var(--af-navy);color:var(--af-chalk);
  padding:10px 16px;border-radius:var(--radius-md);font-size:.875rem}

/* ============================================================
   Header — full by default, compacts while scrolling down
   ============================================================ */
.site-head{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb, var(--af-chalk) 90%, transparent);
  backdrop-filter:saturate(1.1) blur(9px);
  -webkit-backdrop-filter:saturate(1.1) blur(9px);
  border-bottom:1px solid var(--rule);
  transition:box-shadow var(--dur-base) var(--ease);
}
.site-head.compact{--head-pad:11px;--mark:22px;--word:1.05rem;
  box-shadow:0 1px 0 var(--rule), 0 6px 18px rgba(10,37,64,.06)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);
  padding-top:var(--head-pad);padding-bottom:var(--head-pad);
  transition:padding var(--dur-base) var(--ease)}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand .mark{height:var(--mark);width:var(--mark);margin-right:.55em;
  transition:height var(--dur-base) var(--ease),width var(--dur-base) var(--ease)}
.brand .word{font-weight:var(--weight-semi);font-size:var(--word);letter-spacing:-.02em;
  color:var(--af-navy);display:inline-flex;align-items:baseline;
  transition:font-size var(--dur-base) var(--ease)}
.brand .dot{width:.2em;height:.2em;background:var(--af-navy);margin-left:.09em;flex:none}
.nav{display:flex;gap:clamp(14px,2.4vw,30px);list-style:none;font-size:.9rem}
.nav a{color:var(--af-slate);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.nav a:hover{color:var(--af-navy);border-bottom-color:var(--af-navy)}
@media (max-width:720px){
  .site-head .wrap{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .nav{width:100%;flex-wrap:wrap;gap:var(--s2) var(--s5);font-size:.8125rem}
  .nav a{padding:2px 0}
  .site-head.compact{--word:1.05rem;--mark:22px}
}

/* ============================================================
   Section shell
   ============================================================ */
.sec{
  background:var(--ground);color:var(--ink);
  padding:clamp(88px,15vh,168px) 0;
  border-top:1px solid var(--rule);
  scroll-margin-top:120px;
}
.sec:first-child{border-top:0}

.sec__index{
  display:flex;align-items:baseline;gap:var(--s4);
  font-size:.75rem;font-weight:var(--weight-medium);letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;color:var(--ink-secondary);
  margin-bottom:var(--s8);
}
.sec__index .n{
  font-size:clamp(2.25rem,6vw,3.75rem);line-height:.8;letter-spacing:-.03em;
  font-weight:var(--weight-medium);color:var(--af-mist);
  font-variant-numeric:tabular-nums;
  transform-origin:0 100%;will-change:transform;
}
[data-surface="charcoal"] .sec__index .n{color:var(--af-dusk)}   /* large display only (BDM §4) */
.sec__index .label{display:inline-block;transform-origin:0 50%;will-change:transform}
.sec__index .tick{width:7px;height:7px;background:var(--accent);flex:none;transform:translateY(-2px)}

h1,h2,h3{font-weight:var(--weight-medium);letter-spacing:var(--track-tight)}
.h-lead{
  font-size:clamp(1.9rem,4.4vw,3.25rem);
  line-height:var(--lead-display);
  max-width:18ch;
  margin-bottom:var(--s6);
}
h2.h-lead{max-width:20ch}
.sub{
  font-size:clamp(1.0625rem,1.6vw,1.3125rem);
  line-height:1.5;color:var(--ink-secondary);
  max-width:var(--measure);
}
.sub strong{color:var(--ink);font-weight:var(--weight-medium)}

.prose{margin-top:var(--s6);max-width:var(--measure)}
.prose p{margin-top:var(--s4);color:var(--ink-secondary)}
.prose p:first-child{margin-top:0}
.prose strong{color:var(--ink);font-weight:var(--weight-medium)}

/* scroll-write */
.js [data-write] .w{opacity:.12}
[data-write] .w{opacity:1}                 /* no-JS / crawlers: fully readable */

.js [data-fade]{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js [data-fade].in{opacity:1;transform:none}
.js .hero h1[data-fade]{transition-delay:40ms}
.js .hero .sub[data-fade]{transition-delay:130ms}

@media (prefers-reduced-motion:reduce){
  .js [data-write] .w{opacity:1 !important}
  .js [data-fade]{opacity:1 !important;transform:none !important;transition:none}
  /* still give text some life: one gentle per-block fade, not scroll-linked */
  .js.reduce [data-write]{opacity:0;transition:opacity .5s ease}
  .js.reduce [data-write].shown{opacity:1}
}

/* ============================================================
   Hero
   ============================================================ */
.hero{padding-top:clamp(56px,9vh,104px)}
.hero .eyebrow{font-size:.75rem;font-weight:var(--weight-medium);letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;color:var(--af-slate);margin-bottom:var(--s6);
  display:flex;align-items:center;gap:var(--s3)}
.hero .eyebrow::before{content:"";width:7px;height:7px;background:var(--af-sage)}
.hero h1{
  font-size:clamp(2rem,5.6vw,3.5rem);
  line-height:var(--lead-display);
  letter-spacing:var(--track-tight);
  max-width:24ch;
}
.hero h1 .l{display:block}
.hero h1 .l2{color:var(--af-slate)}
.hero .sub{margin-top:var(--s6);max-width:56ch}
.actions{margin-top:var(--s10);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5)}
.btn{
  display:inline-block;background:var(--af-navy);color:var(--af-chalk);
  text-decoration:none;padding:14px 26px;border-radius:var(--radius-md);
  font-size:1rem;font-weight:var(--weight-medium);
  transition:background var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.btn:hover{background:#123253}
.btn:active{transform:translateY(1px)}
[data-surface="charcoal"] .btn{background:var(--af-chalk);color:var(--af-navy)}
[data-surface="charcoal"] .btn:hover{background:#fff}

.figure{margin-top:clamp(44px,7vw,84px)}
.figure svg{width:100%;height:auto;overflow:visible}

/* figure entrance — staggered, tied to [data-fade].in */
.js .fig-chev path{opacity:0}
.js [data-fade].in .fig-chev path{animation:chevIn .5s var(--ease) forwards;
  animation-delay:calc(var(--i,0) * 45ms)}
@keyframes chevIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

.js .fig-bars rect{transform:scaleY(0);transform-box:fill-box;transform-origin:50% 100%}
.js [data-fade].in .fig-bars rect{animation:barIn .6s var(--ease) forwards;
  animation-delay:calc(var(--i,0) * 42ms)}
@keyframes barIn{to{transform:scaleY(1)}}

.js .fig-bands rect{transform:scaleX(0);transform-box:fill-box;transform-origin:0 50%}
.js [data-fade].in .fig-bands rect{animation:bandIn .55s var(--ease) forwards;
  animation-delay:calc(var(--i,0) * 60ms)}
@keyframes bandIn{to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  .js .fig-chev path,.js .fig-bars rect,.js .fig-bands rect{
    opacity:1 !important;transform:none !important;animation:none !important}
}

/* ============================================================
   Photography — Navy→Mist duotone (BDM §10 draft; images are candidates)
   ============================================================ */
.photoband{padding:0;border-top:1px solid var(--rule);background:var(--af-chalk)}
.duo{position:relative;overflow:hidden;background:var(--af-navy);isolation:isolate}
.duo img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(1.02);mix-blend-mode:screen}
.duo::after{content:"";position:absolute;inset:0;background:var(--af-mist);
  mix-blend-mode:multiply;pointer-events:none}
/* explicit width: otherwise max-height transfers through aspect-ratio into a max-width and the band stops short on wide/short viewports */
.photoband .duo{width:100%;aspect-ratio:16/7;max-height:72vh}
.js .duo img{transform:scale(1.05);transition:transform 1.3s var(--ease)}
.js [data-fade].in .duo img{transform:scale(1)}
.ph-fig{margin-top:var(--s14)}
.ph-fig .duo{aspect-ratio:16/9;border-radius:var(--radius-md)}
.ph-cap{margin-top:var(--s3);font-size:.8125rem;color:var(--ink-secondary)}
@media (prefers-reduced-motion:reduce){ .js .duo img{transform:none !important;transition:none} }

/* ============================================================
   Issues / benefits / steps
   ============================================================ */
.grid-3{margin-top:var(--s14);display:grid;gap:clamp(28px,4vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.item .ico{width:40px;height:40px;margin-bottom:var(--s4)}
.item .ico *{stroke:var(--ink);stroke-width:6;fill:none;stroke-linecap:butt;stroke-linejoin:miter}
.item .ico .solid{fill:var(--ink);stroke:none}
.item p{color:var(--ink-secondary)}
.item p strong{color:var(--ink);font-weight:var(--weight-medium)}

.cards{margin-top:var(--s14);display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--radius-md);overflow:hidden;
  grid-template-columns:repeat(4,1fr)}   /* 4 items → 4 / 2 / 1, never a 3+1 orphan */
@media (max-width:1024px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .cards{grid-template-columns:1fr} }
.cards>div{background:var(--ground);padding:var(--s8) var(--s6)}
[data-surface="charcoal"] .cards>div{background:var(--ground-raised)}
.cards h3{font-size:1.125rem;font-weight:var(--weight-semi);letter-spacing:-.01em}
.cards p{margin-top:var(--s2);color:var(--ink-secondary);font-size:1rem}
.cards .ico{width:34px;height:34px;margin-bottom:var(--s4)}
.cards .ico *{stroke:var(--ink);stroke-width:6;fill:none}
.cards .ico .solid{fill:var(--ink);stroke:none}

.marker{
  margin-top:var(--s14);
  border-left:2px solid var(--accent);
  padding:var(--s4) 0 var(--s4) var(--s6);
  max-width:60ch;
}
.marker p{color:var(--ink)}
.marker strong{font-weight:var(--weight-medium)}

.steps{margin-top:var(--s14)}
.step{display:grid;grid-template-columns:88px 1fr;gap:clamp(16px,3vw,40px);
  padding:var(--s8) 0;border-top:1px solid var(--rule)}
.step:last-child{border-bottom:1px solid var(--rule)}
.step .num{font-size:clamp(2.25rem,5vw,3.25rem);line-height:.85;font-weight:var(--weight-medium);
  letter-spacing:-.04em;color:var(--af-mist);font-variant-numeric:tabular-nums}
.step:nth-child(2) .num{color:var(--af-slate)}      /* blue ladder, not a 2nd accent (BDM §5) */
.step:last-child .num{color:var(--af-sage)}
.step h3{font-size:1.1875rem;font-weight:var(--weight-semi);letter-spacing:-.01em}
.step p{margin-top:var(--s2);color:var(--ink-secondary);max-width:56ch}
@media (max-width:560px){ .step{grid-template-columns:56px 1fr} }

/* ============================================================
   Contact + footer
   ============================================================ */
.contact-list{margin-top:var(--s10);display:grid;gap:var(--s6) var(--s10);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.contact-list dt{font-size:.8125rem;color:var(--ink-secondary)}
.contact-list dd{margin-top:var(--s1);font-size:1.1875rem;letter-spacing:-.01em}
.contact-list a{text-decoration:none;border-bottom:1px solid var(--af-sage);padding-bottom:2px}

.site-foot{background:var(--af-chalk);color:var(--af-slate);
  border-top:1px solid var(--rule);padding:var(--s18) 0 var(--s14);font-size:.8125rem}
.site-foot .tagline{font-size:1.1875rem;color:var(--af-navy);max-width:32ch;line-height:1.35;
  letter-spacing:-.01em;margin-bottom:var(--s10)}
.imprint{display:grid;gap:var(--s5) var(--s10);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.imprint dt{color:var(--af-dusk);font-size:.75rem}
.imprint dd{margin-top:2px;color:var(--af-slate)}
.foot-legal{margin-top:var(--s10);padding-top:var(--s5);border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6)}
.foot-legal a{text-decoration:none;border-bottom:1px solid transparent}
.foot-legal a:hover{border-bottom-color:var(--af-slate)}