/* c1.warren.digital · Warren Velazquez -> Capital One, Director, Project Management, Design Operations
   Independent page. No Capital One marks. Direction (from their live CSS): extra-light large type, teal-navy with neutral grays,
   small uppercase eyebrows, flat white cards on warm light gray with 4px corners, a whisper of shadow and a steel top bar.
   One navy band. Restrained motion on one easing. CSP: style-src 'self', no inline style attributes. */

@font-face{font-family:"Albert Sans";src:url("fonts/albert-sans-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Albert Sans";src:url("fonts/albert-sans-italic-var.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

:root{
  color-scheme:light;
  --bg:#FFFFFF; --surface:#F3F3F1; --surface-2:#EAEAE7; --card:#FFFFFF;
  --navy:#0B3F5E; --navy-deep:#0E2440; --navy-ink:#FFFFFF; --navy-muted:#B8CCD9;
  --text:#171717; --body:#383838; --muted:#5E5E5E; --quiet:#6E6E6E;
  --hairline:#D6D6D4; --hairline-strong:#8C8C8A; --hairline-soft:#E6E6E3;
  --blue:#0A6EA3; --blue-hover:#085A86; --blue-ink:#FFFFFF; --steel:#2C5E7E;
  --strong-ink:#1D6B35; --strong-bg:#E7F2EA; --partial-ink:#855407; --partial-bg:#FBF1DE; --gap-ink:#4E4E4E; --gap-bg:#EDEDEB;
  --warn:#B8461B; --focus:#0A6EA3; --focus-inverse:#FFFFFF;
  --tint:#E8F1F7;

  --ff:"Albert Sans","Hanken Grotesk",ui-sans-serif,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ff-display:var(--ff); --ff-body:var(--ff);
  --ease:cubic-bezier(.3,0,0,1);
  --radius:4px;
  --sh:0 1px 4px rgba(0,0,0,.16);
  --sh-hover:0 2px 8px rgba(0,0,0,.2);

  --t-eyebrow:13px; --t-cta:15px; --t-meta:14px; --t-bodysm:15px; --t-body:17px;
  --t-dek:clamp(18px,1rem + .45vw,21px);
  --t-h3:clamp(19px,1rem + .4vw,22px);
  --t-h2:clamp(30px,1.35rem + 1.7vw,44px);
  --t-h1:clamp(40px,1.7rem + 3.4vw,68px);

  --wrap:1120px;
  --gutter:clamp(20px,4vw,48px);
  --sect-y:clamp(60px,7vw,96px);
  --measure:min(66ch,700px);
}

*,*::before,*::after{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;font-synthesis:none}
body{margin:0;background:var(--bg);color:var(--body);font:400 var(--t-body)/1.55 var(--ff);-webkit-font-smoothing:antialiased}
svg,img,canvas{max-width:100%;height:auto;display:block}
p{margin:0}h1,h2,h3,h4{margin:0}ul,ol{margin:0}figure{margin:0}dl,dd{margin:0}
.proof,p,li,summary,a,dd{overflow-wrap:anywhere}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
b,strong{font-weight:600}

.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sect-y)}
.sec-alt{background:var(--surface)}
.measure{max-width:var(--measure)}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 14px;z-index:20;border-radius:var(--radius)}
.skip:focus{left:8px;top:8px}
:where(a,button,summary,[tabindex]):focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 2px var(--focus-inverse)}

/* type: light, large, calm; eyebrows small, uppercase, steel */
.eyebrow{font:600 var(--t-eyebrow)/1.4 var(--ff);letter-spacing:1.2px;text-transform:uppercase;color:var(--steel);margin:0 0 16px}
.h1{font:200 var(--t-h1)/1.08 var(--ff);letter-spacing:-.02em;color:var(--text);text-wrap:balance}
.h2{font:300 var(--t-h2)/1.16 var(--ff);letter-spacing:-.015em;color:var(--text);text-wrap:balance}
.lead{font:400 var(--t-dek)/1.55 var(--ff);color:var(--body);max-width:var(--measure)}
.sec-head{margin-bottom:44px;max-width:860px}
.sec-head .lead{margin-top:18px}
.stack > * + *{margin-block-start:18px}

/* private-link bar and nav */
.linkbar{background:var(--navy-deep);color:#C4D2DD;font:500 12px/1.6 var(--ff);letter-spacing:.8px;text-transform:uppercase;padding:9px 0}
.linkbar b{color:#fff;font-weight:700}
.nav{border-bottom:1px solid var(--hairline);background:var(--bg)}
@media (min-width:900px){.nav{position:sticky;top:0;z-index:10}}
.nav-in{display:flex;align-items:center;gap:14px;min-height:68px;flex-wrap:wrap;padding-block:10px}
.nav-name{font:600 19px/1 var(--ff);color:var(--navy);margin-right:auto;letter-spacing:-.01em}
.nav-links{display:flex;gap:22px;list-style:none;padding:0;flex-wrap:wrap;margin-right:8px}
.nav-links a{display:inline-block;padding:8px 0;font:500 14px/1 var(--ff);color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;transition:color 300ms var(--ease),border-color 300ms var(--ease)}
.nav-links a:hover,.nav-links a[aria-current="true"]{color:var(--text);border-bottom-color:var(--blue);text-decoration:none}
@media (max-width:1099px){.nav-links{gap:16px}.nav-links a{font-size:13px}}
@media (max-width:899px){
  .nav-in{gap:10px}
  .nav-in nav{order:3;flex:1 1 100%;min-width:0;position:relative}
  .nav-in nav::after{content:"";position:absolute;top:0;right:0;bottom:0;width:36px;background:linear-gradient(90deg,rgba(255,255,255,0),var(--bg));pointer-events:none}
  .nav-links{gap:0 20px;flex-wrap:nowrap;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links li{flex:none}.nav-links a{padding:14px 0;white-space:nowrap;font-size:14px}
  .nav-name{flex:1 1 auto;font-size:17px}.btn-sm{flex:none}
}

/* buttons: small radius, never pills; one solid blue, one outline */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:var(--radius);
  background:var(--blue);color:var(--blue-ink);border:1.5px solid var(--blue);
  font:600 var(--t-cta)/1 var(--ff);letter-spacing:.2px;text-decoration:none;
  transition:background-color 300ms var(--ease),color 300ms var(--ease),border-color 300ms var(--ease)}
.btn:hover{background:var(--blue-hover);border-color:var(--blue-hover);text-decoration:none}
.btn-ghost{background:var(--bg);color:var(--blue)}
.btn-ghost:hover{background:var(--tint);color:var(--blue-hover);border-color:var(--blue-hover)}
.btn-sm{min-height:44px;padding:0 16px;font-size:14px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.nav-cv{}
@media (max-width:1099px){.nav-cv-x{display:none}}
@media (max-width:899px){.nav-in .btn-sm{padding:0 12px;font-size:13px}}

/* hero: full-bleed illustrated band with a white overlay card (their hero pattern) */
:root{--pale:#DCEBF1}
.hero{background:var(--bg)}
.hero-band{background:var(--pale);position:relative;overflow:hidden}
.hero-in{position:relative;display:grid;align-items:center;min-height:clamp(420px,40vw,520px);padding-block:clamp(24px,4vw,48px)}
.hero-card{position:relative;z-index:2;background:var(--card);box-shadow:var(--sh);padding:clamp(24px,3vw,40px);max-width:560px}
.hero-card .eyebrow{margin-bottom:14px}
.hero-card .h1{font-size:clamp(36px,1.5rem + 2.6vw,58px);max-width:15ch}
.hero-card .lead{margin-top:18px;font-size:var(--t-body)}
.hero-card .btn-row{margin-top:24px}
.hero-art{position:absolute;right:max(0px,calc((100% - var(--wrap)) / 2 - 20px));top:50%;transform:translateY(-50%);width:min(58%,700px);height:auto;z-index:1}
@media (max-width:899px){
  .hero-in{display:flex;flex-direction:column-reverse;align-items:stretch;min-height:0;padding-block:24px 28px;gap:0}
  .hero-art{position:static;transform:none;width:100%;max-width:520px;margin:0 auto -24px}
  .hero-card{max-width:none}
}
/* choose a topic: their pill chip row */
.topics{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;padding-block:22px;border-bottom:1px solid var(--hairline)}
.topics-k{font:700 13px/1.2 var(--ff);letter-spacing:1px;text-transform:uppercase;color:var(--text);margin-right:6px}
.topic{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;font:600 14px/1 var(--ff);color:var(--text);text-decoration:none;transition:background-color 300ms var(--ease),color 300ms var(--ease)}
.topic:hover{background:var(--surface);text-decoration:none}
.topic-on{background:var(--blue);color:#fff}
.topic-on:hover{background:var(--blue-hover);color:#fff}
@media (max-width:699px){.topics{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;padding-block:14px}.topics::-webkit-scrollbar{display:none}.topic,.topics-k{flex:none}}

/* centered bold caps kicker, their section-title habit */
.kicker{font:700 13px/1.4 var(--ff);letter-spacing:1.1px;text-transform:uppercase;color:var(--text);text-align:center;margin:0 0 36px}
.sec-tight{padding-block:clamp(48px,6vw,72px)}
.sec-head-c{margin-inline:auto;text-align:center;max-width:820px}
.sec-head-c .eyebrow{color:var(--text);font-weight:700}
.sec-head-c .lead{margin-inline:auto}

/* three icons across, centered, chevron links */
.icons3{display:grid;gap:40px 32px}
@media (min-width:760px){.icons3{grid-template-columns:repeat(3,1fr)}}
.ic{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.ic img{width:112px;height:112px}
.ic h3{font:300 clamp(22px,1.1rem + .5vw,26px)/1.25 var(--ff);color:var(--text);max-width:18ch}
.ic p{font-size:var(--t-bodysm);line-height:1.55;color:var(--body);max-width:34ch}
.more{display:inline-flex;align-items:center;gap:6px;font:600 15px/1.3 var(--ff);color:var(--blue);text-decoration:none}
.more::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin-top:1px}
.more:hover{text-decoration:underline}

/* stats: extra-light numerals, uppercase labels, centered */
.stats-band{background:var(--surface);padding-block:clamp(44px,5vw,64px)}
.stats-band .kicker{margin-bottom:28px}
.stats{display:grid;gap:28px 24px;grid-template-columns:repeat(2,1fr);text-align:center}
@media (min-width:980px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat b{display:block;font:100 clamp(52px,2.6rem + 2.4vw,80px)/1 var(--ff);letter-spacing:-.02em;color:var(--navy);font-variant-numeric:tabular-nums}
.stat b small{font-size:.42em;font-weight:300;letter-spacing:0;vertical-align:.95em;margin-left:2px}
.stat span{display:block;margin:12px auto 0;font:600 12.5px/1.45 var(--ff);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);max-width:24ch}

/* 50/50 split: illustration panel + text panel (their feature block) */
.split{display:grid;max-width:var(--wrap);margin:clamp(56px,7vw,96px) auto;background:var(--surface)}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}}
@media (max-width:1167px){.split{margin-inline:var(--gutter)}}
.split-art{background:var(--pale);display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,48px);min-height:280px}
.split-art img{width:100%;max-width:520px;height:auto}
.split-body{padding:clamp(28px,4vw,56px);align-self:center}
.split-body .lead{margin-top:14px;font-size:var(--t-body)}
.tdl{margin:24px 0 20px}
.tdl > div{padding:14px 0;border-top:1px solid var(--hairline)}
.tdl dt{font:700 12.5px/1.4 var(--ff);letter-spacing:1px;text-transform:uppercase;color:var(--steel);margin-bottom:4px}
.tdl dd{font-size:var(--t-bodysm);line-height:1.55;color:var(--body)}
.split-navy{background:var(--navy);color:#fff}
.split-navy .eyebrow{color:var(--navy-muted)}
.split-navy .h2{color:#fff}
.split-navy .why{margin-top:22px}
.split-navy .why p{color:#fff;font-size:var(--t-body);line-height:1.6}
.split-navy .btn{background:#fff;color:var(--navy);border-color:#fff}
.split-navy .btn:hover{background:var(--tint);border-color:var(--tint)}
.split-navy .btn-ghost{background:transparent;color:#fff;border-color:#fff}
.split-navy .btn-ghost:hover{background:rgba(255,255,255,.12)}
.split-navy :focus-visible{outline-color:#fff;box-shadow:0 0 0 2px var(--navy)}
@media (max-width:899px){.split-navy .split-art{order:-1}}

/* ---- the operating model: tiles as tabs, a white model card ---- */
.prog{display:grid;gap:32px 40px;align-items:start}
@media (min-width:1000px){.prog{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.stages{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:24px}
@media (min-width:600px){.stages{grid-template-columns:repeat(3,1fr)}}
.stages button{appearance:none;background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);padding:12px 12px 12px;text-align:left;cursor:pointer;min-height:56px;color:var(--muted);position:relative;overflow:hidden;
  font-family:var(--ff);transition:box-shadow 300ms var(--ease),border-color 300ms var(--ease),color 300ms var(--ease)}
.stages button::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:transparent;transition:background-color 300ms var(--ease)}
.stages button:hover{color:var(--text);box-shadow:var(--sh)}
.stages button[aria-selected="true"]{color:var(--text);border-color:transparent;box-shadow:var(--sh-hover)}
.stages button[aria-selected="true"]::before{background:var(--blue)}
.stages button.is-done .st-n{color:var(--blue)}
.st-n{display:block;font:600 12px/1 var(--ff);letter-spacing:1px;margin-bottom:6px}
.st-t{display:block;font:500 15px/1.25 var(--ff)}
.panel[hidden]{display:none}
.panel{display:grid;gap:14px}
.jd{font:400 italic var(--t-body)/1.5 var(--ff);color:var(--muted);padding-left:14px;border-left:3px solid var(--steel)}
.panel h3{font:300 clamp(22px,1.1rem + .6vw,27px)/1.25 var(--ff);letter-spacing:-.012em;color:var(--text)}
.panel p{font-size:var(--t-body);line-height:1.6;color:var(--body);max-width:var(--measure)}
.panel .receipt{padding:14px 16px;background:var(--card);border-radius:var(--radius);border:1px solid var(--hairline);font-size:var(--t-bodysm)}
.panel .receipt b{color:var(--text)}
.panel .next{padding-top:4px}
html:not([data-js]) .panel .next{display:none}
html:not([data-js]) .panel[hidden]{display:grid}
html:not([data-js]) .panel + .panel{margin-top:32px;padding-top:24px;border-top:1px solid var(--hairline)}
html:not([data-js]) .stages{display:none}

.record{background:var(--card);border-radius:var(--radius);box-shadow:var(--sh);overflow:hidden;position:sticky;top:88px}
@media (min-width:1000px){html[data-js] .record{max-height:calc(100vh - 112px);display:flex;flex-direction:column}html[data-js] .rec{overflow-y:auto;flex:1 1 auto}}
.rec-more{display:none;padding:0 20px 16px}
.rec-all{appearance:none;background:none;border:0;padding:10px 0;min-height:44px;color:var(--blue);font:600 15px/1 var(--ff);cursor:pointer}
.rec-all::after{content:" \2192"}
.rec-all[aria-expanded="true"]::after{content:" \2191"}
@media (max-width:999px){
  .record{position:static}
  .prog{display:flex;flex-direction:column;gap:20px}
  .prog-left{display:contents}
  .stages{order:1;margin-bottom:0}.record{order:2}.panels{order:3}
  html[data-js] .rec-more{display:block}
  html[data-js] .record:not(.is-full) .rf:not(.is-new){display:none}
}
.rec-h{display:flex;justify-content:space-between;gap:12px;background:var(--card);color:var(--steel);border-top:8px solid var(--steel);border-bottom:1px solid var(--hairline);font:600 12.5px/1.4 var(--ff);letter-spacing:1px;text-transform:uppercase;padding:14px 20px}
.rec-h span{color:var(--muted)}
.rec{padding:6px 20px 0}
.rf{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:0 14px;padding:10px 0;border-bottom:1px solid var(--hairline-soft);transition:background-color 400ms var(--ease)}
.rf[hidden]{display:none}
.rf.is-new{background:var(--tint);margin-inline:-20px;padding-inline:20px}
.rf dt{font:600 12px/1.45 var(--ff);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.rf dd{font:400 var(--t-bodysm)/1.45 var(--ff);color:var(--text)}
.rec-status{padding:14px 20px 18px;font:400 var(--t-bodysm)/1.5 var(--ff);color:var(--body)}
.hb-note{margin-top:28px;font-size:var(--t-bodysm);color:var(--muted);line-height:1.5;max-width:var(--measure)}
.nojs-note{margin:0 0 18px;font-size:var(--t-bodysm);color:var(--muted);max-width:var(--measure)}
html[data-js] .nojs-note{display:none}

/* ---- tools: the edge, who does what, the cards ---- */
.lead-edge{margin-top:14px}
.who{margin:0 0 56px}
.who .kicker{margin-bottom:28px}
.who-cols{display:grid;gap:16px}
@media (min-width:760px){.who-cols{grid-template-columns:repeat(3,1fr);gap:20px}}
.who-col{text-align:left}
.who-col img{display:block;width:88px;height:88px;margin:0 auto 12px}
.who-col h3{text-align:center}
.who-col h3{font:300 clamp(21px,1.05rem + .4vw,24px)/1.25 var(--ff);color:var(--text);margin:0 0 10px}
.who-col ul{list-style:none;padding:0}
.who-col li{font:400 var(--t-bodysm)/1.45 var(--ff);color:var(--body);padding:8px 0 8px 16px;border-bottom:1px solid var(--hairline-soft);position:relative}
.who-col li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;border-radius:50%;background:var(--hairline-strong)}
.who-col:first-child li::before{background:var(--blue)}

.cards{display:grid;gap:20px}
@media (min-width:820px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--sh);padding:0 0 24px;overflow:hidden;display:flex;flex-direction:column;gap:10px;transition:box-shadow 300ms var(--ease)}
.card:hover{box-shadow:var(--sh-hover)}
.card > :not(.card-well){padding-inline:22px}
.card h3{font:300 clamp(22px,1.1rem + .5vw,26px)/1.2 var(--ff);letter-spacing:-.01em;color:var(--text)}
.card-kicker{font:600 12px/1.4 var(--ff);letter-spacing:1px;text-transform:uppercase;color:var(--steel)}
.card-p{font-size:var(--t-bodysm);line-height:1.5;color:var(--body)}
.card-p b{color:var(--text)}
/* ---- product mockups: legible mini-UIs, looping only while on screen ---- */
.card-well{background:var(--pale);padding:22px 22px 0}
.mc{--mc-line:#DCDCD9;--mc-panel:#F7F7F5;position:relative;background:#fff;border:1px solid var(--mc-line);border-radius:var(--radius);padding:14px 14px 12px;font-family:var(--ff);color:var(--text);line-height:1.4;overflow:hidden}
.card-well .mc{border-bottom:0;border-radius:var(--radius) var(--radius) 0 0}
.mc *{box-sizing:border-box;animation-duration:12s;animation-iteration-count:infinite;animation-timing-function:var(--ease);animation-play-state:paused;animation-fill-mode:both}
.mc.is-live *{animation-play-state:running}
.mc-head{display:flex;flex-wrap:wrap;row-gap:4px;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--mc-line)}
.mc-t{font:600 12px/1.3 var(--ff);letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.mc-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--ff);color:var(--muted);white-space:nowrap}
.mc-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--blue);animation:mcPulse 2s ease-in-out infinite paused}
.mc-stage{position:relative;min-height:200px}
.mc-k{font:600 12px/1.3 var(--ff);letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.mc-k2{font:600 12px/1.3 var(--ff);letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.mc-v{font:500 13.5px/1.35 var(--ff);color:var(--text)}
.mc-f{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;align-items:baseline;padding:6px 0;border-top:1px solid var(--mc-line)}
.mc-av{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font:600 12px/1 var(--ff)}
.mc-bub{flex:1 1 auto;background:var(--mc-panel);border:1px solid var(--mc-line);border-radius:4px;padding:8px 10px;font:400 13.5px/1.4 var(--ff);color:var(--body)}
.mc-bub b{color:var(--text);font-weight:600}
.mc-btn{font:600 12px/1 var(--ff);padding:6px 11px;border-radius:4px;border:1px solid var(--mc-line);color:var(--text);background:#fff}
.mc-btn-y{background:var(--blue);border-color:var(--blue);color:#fff}
.mc-miss{display:inline-block;padding:1px 7px;border-radius:4px;border:1px solid var(--warn);color:var(--warn);font:600 12px/1.3 var(--ff)}
.mc-ok{color:var(--strong-ink)}
.mc-foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--mc-line);font:400 12.5px/1.4 var(--ff);color:var(--muted)}
.mc-swap{position:relative;display:inline-block;min-height:1.35em}
.mc-swap .mc-after{position:absolute;left:0;top:0;white-space:nowrap}
.rt-pct.mc-swap .mc-after{left:auto;right:0}
.mc-before{animation-name:mcBefore}
.mc-after{opacity:0;animation-name:mcAfter}
@keyframes mcPulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes mcBefore{0%,55%{opacity:1}57%,100%{opacity:0}}
@keyframes mcAfter{0%,55%{opacity:0}57%,100%{opacity:1}}
@keyframes mcIn1{0%{opacity:.18;transform:translateY(6px)}6%,90%{opacity:1;transform:none}98%,100%{opacity:.18}}
@keyframes mcIn2{0%,18%{opacity:.18;transform:translateY(6px)}26%,90%{opacity:1;transform:none}98%,100%{opacity:.18}}
@keyframes mcIn3{0%,40%{opacity:.25}48%,90%{opacity:1}98%,100%{opacity:.25}}
@keyframes mcStamp{0%,58%{opacity:0}64%,92%{opacity:1}98%,100%{opacity:0}}

/* Relay */
.ri-sheets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.ri-sheet{font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;padding:6px 8px;border:1px dashed var(--hairline-strong);border-radius:4px;background:var(--mc-panel);color:var(--body);animation-name:riSheet}
.ri-s2{animation-delay:.25s}.ri-s3{animation-delay:.5s}
@keyframes riSheet{0%,4%{opacity:0;transform:translateY(-6px)}10%,22%{opacity:1;transform:none}32%,100%{opacity:.75;transform:none}}
.ri-rec{border:1px solid var(--mc-line);border-top:3px solid var(--blue);border-radius:4px;padding:10px 12px 8px;animation-name:mcIn2}
.ri-chase{margin-top:8px;font:600 12px/1.3 var(--ff);color:var(--muted);position:relative;min-height:1.3em}
.ri-chase .mc-after{position:absolute;left:0;top:0}

/* Resourcing */
.rt-said{display:flex;gap:10px;align-items:flex-start;animation-name:mcIn1}
.rt-prop{margin-top:10px;border:1px solid var(--mc-line);border-left:3px solid var(--blue);border-radius:4px;background:var(--mc-panel);padding:9px 11px;animation-name:mcIn2}
.rt-prop-b{font:600 13px/1.35 var(--ff);color:var(--text)}
.rt-prop-r{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:8px}
.rt-hint{font:400 12px/1.2 var(--ff);color:var(--muted);margin-left:auto}
.rt-grid{margin-top:10px;animation-name:mcIn3}
.rt-grid-h{display:flex;justify-content:space-between;align-items:baseline}
.rt-stamp{font:600 12px/1 var(--ff);color:var(--strong-ink);animation-name:mcStamp}
.rt-row{display:grid;grid-template-columns:52px 1fr 40px;gap:8px;align-items:center;margin-top:6px}
.rt-name{font:400 12.5px/1.2 var(--ff);color:var(--body)}
.rt-track{display:block;height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.rt-fill{display:block;height:100%;border-radius:4px;background:var(--blue)}
.rt-over{width:100%;background:repeating-linear-gradient(135deg,var(--steel) 0 3px,#fff 3px 6px);box-shadow:inset 0 0 0 1.5px var(--warn);animation-name:rtOver}
.rt-up{width:52%;animation-name:rtUp}
.rt-78{width:78%}
.rt-pct{font:500 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--body);text-align:right;display:block}
@keyframes rtOver{0%,55%{width:100%;box-shadow:inset 0 0 0 1.5px var(--warn)}62%,100%{width:88%;background:var(--blue);box-shadow:none}}
@keyframes rtUp{0%,55%{width:52%}62%,100%{width:82%}}

/* Data views */
.dv-chart{position:relative;height:96px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;align-items:end;padding:0 2px;border-bottom:1px solid var(--hairline-strong)}
.dv-cap{position:absolute;left:0;right:0;top:22px;border-top:1.5px dashed var(--navy);animation:none}
.dv-cap i{position:absolute;left:0;top:-16px;font:600 12px/1 var(--ff);font-style:normal;letter-spacing:.5px;text-transform:uppercase;color:var(--navy);background:#fff;padding-right:4px}
.dv-bar{display:block;background:var(--steel);border-radius:3px 3px 0 0;height:var(--h);animation-name:dvUp}
.dv-b1{--h:52%}.dv-b2{--h:61%;animation-delay:.1s}.dv-b3{--h:58%;animation-delay:.2s}.dv-b4{--h:70%;animation-delay:.3s}.dv-b5{--h:92%;animation-delay:.4s;animation-name:dvOver}.dv-b6{--h:64%;animation-delay:.5s}
@keyframes dvUp{0%,4%{height:0}16%,100%{height:var(--h)}}
@keyframes dvOver{0%,4%{height:0}16%,48%{height:var(--h);box-shadow:none}56%,100%{height:var(--h);box-shadow:inset 0 0 0 2px var(--warn);background:repeating-linear-gradient(135deg,var(--steel) 0 3px,#fff 3px 6px)}}
.dv-axis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:4px 2px 0;font:500 12px/1 var(--ff);color:var(--muted);text-align:center}
.dv-list{list-style:none;padding:0;margin-top:10px}
.dv-list li{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid var(--mc-line);font:400 13.5px/1.3 var(--ff);color:var(--text)}
.dv-s{font:600 12px/1.3 var(--ff)}
.dv-ok{color:var(--strong-ink)}.dv-warn{color:var(--warn)}
.dv-flag .mc-swap{min-width:112px;text-align:right}.dv-flag .mc-after{left:auto;right:0}

/* Agreements */
.ag-said{display:flex;gap:10px;align-items:flex-start;animation-name:mcIn1}
.ag-maybe{color:var(--muted)}
.ag-rec{margin-top:12px;border:1px solid var(--mc-line);border-top:3px solid var(--blue);border-radius:4px;padding:10px 12px 8px;animation-name:mcIn2}
.ag-no .mc-v{color:var(--muted)}
.ag-no s{text-decoration-color:var(--warn);text-decoration-thickness:1.5px}
.ag-sig{display:inline-block;margin-top:8px;padding:4px 9px;border:1.5px solid var(--strong-ink);border-radius:4px;color:var(--strong-ink);font:600 12px/1.2 var(--ff);letter-spacing:.4px;text-transform:uppercase;animation-name:mcStamp}

/* Ops panel */
.ops-cols{display:grid;gap:14px}
@media (min-width:560px){.ops-cols{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.ops-item{padding:8px 10px;margin-bottom:6px;border:1px solid var(--mc-line);border-left:3px solid var(--blue);border-radius:4px;font:500 13px/1.3 var(--ff);background:var(--mc-panel)}
.ops-row{display:grid;grid-template-columns:80px minmax(0,1fr) 42px;gap:8px;padding:6px 0;border-top:1px solid var(--mc-line);font:400 13px/1.3 var(--ff);color:var(--body);animation-name:opsIn}
.ops-row span:first-child{font-weight:600;color:var(--text)}
.ops-tm{font:500 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);text-align:right}
.ops-warn span:nth-child(2){color:var(--warn);font-weight:600}
.ops-r2{animation-delay:1s}.ops-r3{animation-delay:2s}.ops-r4{animation-delay:3s}
@keyframes opsIn{0%{opacity:.25;transform:translateY(4px)}6%,92%{opacity:1;transform:none}100%{opacity:.25}}

/* Design system */
.mc-ds{margin:4px 0 2px}
.ds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ds-t{position:relative;display:flex;align-items:flex-end;min-height:44px;padding:6px 8px;border-radius:4px;font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface);color:var(--muted);border:1px dashed var(--hairline-strong)}
.ds-t:not(.ds-m){animation-name:dsOn}
.ds-2{animation-delay:.3s}.ds-3{animation-delay:.6s}.ds-4{animation-delay:.9s}.ds-5{animation-delay:1.2s}.ds-6{animation-delay:1.5s}
.ds-t:not(.ds-m)::after{content:"";position:absolute;right:8px;top:8px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
@keyframes dsOn{0%,6%{background:var(--surface);color:var(--muted);border-color:var(--hairline-strong)}14%,100%{background:var(--navy);color:#fff;border-color:var(--navy)}}

/* resting state = the story's end state. Mockups only animate while on screen (.is-live);
   off screen, with reduced motion, with JavaScript off, and in print they show the finished picture. */
.mc:not(.is-live) *:not(.mc-dot){animation:none !important;opacity:1 !important;transform:none !important}
.mc:not(.is-live) .mc-before{display:none}
.mc:not(.is-live) .mc-after{position:static}
.mc:not(.is-live) .rt-over{width:88%;background:var(--blue);box-shadow:none}
.mc:not(.is-live) .rt-up{width:82%}
.mc:not(.is-live) .dv-b5{box-shadow:inset 0 0 0 2px var(--warn);background:repeating-linear-gradient(135deg,var(--steel) 0 3px,#fff 3px 6px)}
.mc:not(.is-live) .ds-t:not(.ds-m){background:var(--navy);color:#fff;border-color:var(--navy)}
@media (prefers-reduced-motion:reduce){.mc *{animation:none !important}}

.gov{margin-top:32px;background:var(--surface);border-radius:var(--radius);padding:22px;display:grid;gap:20px;align-items:center}
@media (min-width:900px){.gov{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);padding:28px}}
.gov .card-kicker{margin-bottom:8px}
.gov-text p:last-child{font-size:var(--t-bodysm);line-height:1.6;color:var(--body)}
.method-note{margin-top:28px;font-size:var(--t-bodysm);line-height:1.6;color:var(--muted)}

.infra-d{margin-top:36px;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.infra-d > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:56px;padding:0 4px;font:500 var(--t-h3)/1.2 var(--ff);color:var(--text)}
.infra-d > summary::-webkit-details-marker{display:none}
.infra-d > summary::marker{content:""}
.infra-d[open] .marker::after{transform:rotate(225deg)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:12px}
.infra-t{width:100%;min-width:860px;border-collapse:collapse;font-size:var(--t-bodysm);line-height:1.5}
.infra-t th,.infra-t td{text-align:left;vertical-align:top;padding:14px 18px 16px 0;border-bottom:1px solid var(--hairline-soft)}
.infra-t thead th{font:500 17px/1.2 var(--ff);color:var(--text);border-bottom:2px solid var(--navy)}
.infra-t tbody th{font:600 12px/1.5 var(--ff);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);width:16%;padding-right:24px}
.infra-t td{color:var(--body);width:28%}
.infra-t td[colspan]{width:auto}

/* ---- audit: each group a white card; soft chips with 4px corners ---- */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:24px}
.filters button{appearance:none;background:var(--card);border:1.5px solid var(--hairline-strong);border-radius:var(--radius);
  min-height:44px;padding:0 16px;cursor:pointer;color:var(--body);font:600 14px/1 var(--ff);
  transition:color 300ms var(--ease),border-color 300ms var(--ease),background-color 300ms var(--ease)}
.filters button:hover{color:var(--blue);border-color:var(--blue)}
.filters button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.filters p{margin-left:6px;font:400 var(--t-meta)/1 var(--ff);color:var(--muted);font-variant-numeric:tabular-nums}
.filters[hidden]{display:none}

[data-audit]{display:flex;flex-direction:column;gap:28px}
.group{background:var(--card);border-radius:var(--radius);box-shadow:var(--sh);overflow:hidden}
.group[hidden]{display:none}
.group-h{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--hairline)}
.group-h h3{font:500 var(--t-h3)/1.25 var(--ff);color:var(--text)}
.group-h span{font:400 var(--t-meta)/1.4 var(--ff);color:var(--muted)}

details.row{border-bottom:1px solid var(--hairline-soft);position:relative}
details.row:last-child{border-bottom:0}
details.row[open]{background:#FAFAF8}
details.row > summary{list-style:none;cursor:pointer;display:grid;padding:16px 20px;row-gap:10px;column-gap:14px;align-items:center;min-height:44px;
  grid-template-columns:1fr auto;grid-template-areas:"label label" "chip marker"}
details.row > summary::-webkit-details-marker{display:none}
details.row > summary::marker{content:""}
@media (min-width:560px){
  details.row > summary{grid-template-columns:minmax(0,1fr) auto 20px;grid-template-areas:"label chip marker";column-gap:18px;row-gap:0;padding:18px 20px}
}
.summary-label{grid-area:label;min-width:0;font:400 var(--t-body)/1.4 var(--ff);color:var(--text)}
.chip{grid-area:chip;justify-self:start}
.marker{grid-area:marker;justify-self:end;width:14px;height:14px;position:relative;flex:none}
.marker::after{content:"";position:absolute;top:1px;left:3px;width:8px;height:8px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(45deg);transform-origin:center;transition:transform 300ms var(--ease)}
details.row[open] .marker::after{transform:rotate(225deg)}

.chip{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px 0 9px;border-radius:var(--radius);border:1px solid transparent;
  font:600 12px/1 var(--ff);letter-spacing:.6px;text-transform:uppercase;white-space:nowrap;flex:none}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;flex:0 0 auto}
.chip-strong{color:var(--strong-ink);background:var(--strong-bg)}
.chip-strong::before{background:currentColor}
.chip-partial{color:var(--partial-ink);background:var(--partial-bg)}
.chip-partial::before{background:linear-gradient(90deg,currentColor 0 50%,transparent 50% 100%)}
.chip-gap{color:var(--gap-ink);background:var(--gap-bg)}
.chip-gap::before{background:transparent}

.proof{padding:0 20px 22px;max-width:calc(var(--measure) + 40px);font-size:var(--t-body);line-height:1.6;color:var(--body)}
.proof p + p{margin-top:12px}

/* ---- why now: the one navy band ---- */
.sec-navy{background:var(--navy);color:var(--navy-ink)}
.sec-navy .eyebrow{color:var(--navy-muted)}
.sec-navy .h2{color:var(--navy-ink)}
.sec-navy .why p{color:var(--navy-ink);font-size:var(--t-dek);line-height:1.55}
.sec-navy .btn{background:#fff;color:var(--navy);border-color:#fff}
.sec-navy .btn:hover{background:var(--tint);border-color:var(--tint)}
.sec-navy .btn-ghost{background:transparent;color:#fff;border-color:#fff}
.sec-navy .btn-ghost:hover{background:rgba(255,255,255,.12)}
.sec-navy :focus-visible{outline-color:#fff;box-shadow:0 0 0 2px var(--navy)}
.why p + p{margin-top:18px}

/* ---- career ---- */
.jobs{border-top:1px solid var(--hairline)}
.job{padding:28px 0;border-bottom:1px solid var(--hairline);display:grid;gap:8px 40px}
@media (min-width:800px){.job{grid-template-columns:200px minmax(0,1fr)}}
.job-h{display:contents}
.job-when{font:600 12.5px/1.6 var(--ff);letter-spacing:.8px;text-transform:uppercase;color:var(--steel)}
.job h3{font:500 var(--t-h3)/1.3 var(--ff);color:var(--text)}
.job p{color:var(--body);max-width:var(--measure);font-size:var(--t-bodysm);line-height:1.6}
@media (min-width:800px){.job p{grid-column:2}}

/* ---- on record ---- */
.quotes{display:grid;gap:20px}
@media (min-width:760px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{background:var(--card);border-radius:var(--radius);box-shadow:var(--sh);padding:24px 22px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.quote blockquote{margin:0;font:300 clamp(19px,1rem + .45vw,22px)/1.45 var(--ff);color:var(--text)}
.quote figcaption{padding-top:12px;border-top:1px solid var(--hairline-soft);font:600 12px/1.5 var(--ff);letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}

.foot{padding-block:32px;font-size:var(--t-bodysm);color:var(--muted);border-top:1px solid var(--hairline)}
.foot p{max-width:var(--measure)}
.foot p + p{margin-top:10px}
.foot a{display:inline-block;padding-block:12px}

section[id],div[id],:target{scroll-margin-top:88px}
@media (max-width:899px){section[id],div[id],:target{scroll-margin-top:20px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after,::backdrop,*::marker{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

@media (forced-colors:active){
  .chip{background:Canvas;color:CanvasText;border-color:CanvasText}
  .chip::before{border-color:CanvasText;background:Canvas}
  .chip-strong::before{background:CanvasText}
  .chip-partial::before{background:linear-gradient(90deg,CanvasText 0 50%,Canvas 50% 100%);forced-color-adjust:none}
  .marker::after{border-color:CanvasText}
  .record,.card,.group,.tcard,.first,.quote,.stages button{border:1px solid CanvasText}
  .stages button[aria-selected="true"]{outline:3px solid Highlight}
  .filters button[aria-pressed="true"]{border-width:3px;border-color:Highlight}
  .rf.is-new{background:Canvas;outline:1px solid Highlight}
  .who-col li::before,.first-list li::before{background:CanvasText;color:Canvas;forced-color-adjust:none}
  :focus-visible{outline-color:Highlight;box-shadow:none}
}

@media print{
  :root{--bg:#fff;--surface:#fff;--surface-2:#fff;--card:#fff;--navy:#fff;--navy-ink:#000;--navy-muted:#333;--text:#000;--body:#000;--muted:#333;--quiet:#333;--steel:#000;
    --hairline:#9A9A9A;--hairline-soft:#BBB;--hairline-strong:#5E5E5E;--blue:#0A6EA3;--strong-bg:#fff;--partial-bg:#fff;--gap-bg:#fff;--tint:#fff;--sh:none;--sh-hover:none}
  @page{margin:14mm}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .hero,.sec-alt,.hero-band,.split,.split-art,.split-navy,.stats-band,.card-well{background:#fff !important;color:#000}
  .split-navy .h2,.split-navy .why p{color:#000}
  .hero-art,.topics,.split-art{display:none !important}
  .hero-card{box-shadow:none;padding:0}
  .sec-navy{border-top:1px solid #000;border-bottom:1px solid #000}
  .rec-h{background:#fff;color:#000;border-bottom:2px solid #000}
  details.row:not([open]) > summary ~ *,details.infra-d:not([open]) > summary ~ *{display:block !important}
  details::details-content{content-visibility:visible !important;block-size:auto !important;opacity:1 !important}
  details.row[hidden],.group[hidden]{display:block !important}
  details.row,.quote,.proof,.job,.card,.record,.panel,.tcard,.first{break-inside:avoid}
  .panel[hidden],.rf[hidden]{display:grid !important}
  .stages{display:none !important}
  .record{position:static}
  .infra-t{min-width:0}
  h1,h2,h3,summary{break-after:avoid}
  .nav,.filters,.skip,.linkbar,.btn-row,.marker,.nav-cv,.next{display:none !important}
  a[href^="http"]::after,a[href^="mailto"]::after{content:" (" attr(href) ")";font-size:10px;color:#333}
  .chip{border:1px solid #000 !important}
  .mc *{animation:none !important;opacity:1 !important;transform:none !important}
  .mc .mc-before{display:none}.mc .mc-after{position:static}
  .mc,.gov{break-inside:avoid}
}

/* phones: shorter disclosure bar, no nav résumé button under 380 (footer keeps it) */
@media (max-width:599px){.lb-long{display:none}.linkbar{font-size:11px;letter-spacing:.4px}}
@media (max-width:379px){.nav-cv{display:none}.nav-name{font-size:16px}}
/* build table: row labels stay put while the table scrolls */
.infra-t tbody th,.infra-t thead th:first-child{position:sticky;left:0;background:var(--bg);z-index:1}
.table-scroll:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* tools: the two lead paragraphs sit side by side, left-aligned, under the centered head */
.lead-pair{display:grid;gap:18px 40px;margin-top:22px;text-align:left}
@media (min-width:900px){.lead-pair{grid-template-columns:1fr 1fr;max-width:1040px;margin-inline:auto}}
.lead-pair .lead{max-width:none;font-size:var(--t-body);line-height:1.6;margin:0}
#tools .sec-head-c{max-width:1040px}