/* ============================================================
   iuliandatcu.com — claude-version — "The Advisory Dossier"
   Claude's own design direction: light editorial, institutional
   calm, serif display. The deliberate opposite of dark
   control-room aesthetics — built to read like the senior
   advisory document a board actually trusts.
   Palette: navy #0b1d33 · light ink #f1f5f9 · silver slate ·
            antique gold #9a6a00 · blue steel line
   Type: Lora (display serif) · Work Sans (body) · DM Mono (labels)
   ============================================================ */

:root{
  --paper:#0b1d33;
  --paper-deep:#102b46;
  --ink:#f1f5f9;
  --navy:#596775;
  --navy-deep:#394550;
  --copper:#9a6a00;
  --copper-soft:#c99724;
  --muted:#b7c4d2;
  --faint:#9eafc0;
  --line:#34516b;
  --line-dark:#587188;
  --serif:'Lora', Georgia, serif;
  --sans:'Work Sans', -apple-system, 'Segoe UI', sans-serif;
  --mono:'DM Mono', ui-monospace, monospace;
  --shell:1180px;
  --ease:cubic-bezier(.22,.7,.25,1);
}

/* Palette study: Midnight Emerald - dark, premium and high contrast. */
:root{
  --paper:#071a18;--paper-deep:#0d2b25;--ink:#f4f2db;--navy:#006039;--navy-deep:#003d28;
  --muted:#afd1b3;--faint:#c7e0c7;--line:#2f6a53;--line-dark:#579477;
  --copper:#d9a300;--copper-soft:#a37e2c;
  --silver-deep:#003d28;--silver-mid:#006039;--silver-hi:#2f805f;
  --gold-deep:#a37e2c;--gold-mid:#d9a300;--gold-hi:#f4f2db;
}
.topbar{background:rgba(7,26,24,.95)}
.cta-solid,.trust,.closing{background:linear-gradient(115deg,#003d28 0%,#006039 38%,#2f805f 50%,#006039 64%,#003d28 100%);background-size:230% 230%;color:#f4f2db}
.cta-solid{background:linear-gradient(115deg,#003d28 0%,#006039 28%,#afd1b3 50%,#006039 72%,#003d28 100%);background-size:300% 300%;animation:metallicSilver 8s ease-in-out infinite;will-change:background-position}
.cta-solid{animation:metallicSilver 8s ease-in-out infinite}
.cta-solid{animation:metallicSilver 8s ease-in-out infinite}
.engage-item{background:var(--paper-deep);color:var(--ink)}
.cta-paper{background:linear-gradient(115deg,#003d28 0%,#006039 38%,#2f805f 50%,#006039 64%,#003d28 100%);background-size:230% 230%;animation:metallicSilver 8s ease-in-out infinite;color:#f4f2db;border-color:#2f805f;text-shadow:0 1px 2px rgba(0,45,32,.65)}
.cta-paper:hover{background:linear-gradient(115deg,#006039,#2f805f,#006039);background-size:220% 220%;color:#f4f2db;border-color:#afd1b3}

/* Final variant layer: keep the profile visual above the stamp without changing hero copy flow. */
.hero-stamp{display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:22px}
.profile-operator{position:relative;width:174px;height:174px;display:grid;place-items:center;color:var(--ink)}
.profile-core{position:relative;z-index:2;width:116px;height:116px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#f4f2db,#aeb9b8);box-shadow:0 0 0 9px var(--paper),0 0 0 10px var(--line-dark),inset 0 0 24px rgba(7,26,24,.18)}
.profile-core b{font-family:var(--sans);font-size:45px;letter-spacing:-.08em;color:#17312e}
.profile-ring{position:absolute;display:block;border:1px solid var(--gold-mid);border-radius:50%;pointer-events:none}
.ring-a{inset:7px;border-right-color:transparent;animation:profileSpin 18s linear infinite}.ring-b{inset:25px;border-left-color:var(--silver-hi);opacity:.65;animation:profileSpin 12s linear infinite reverse}
.profile-operator p{position:absolute;top:181px;white-space:nowrap;margin:0;font:500 8px/1.2 var(--mono);letter-spacing:.04em;color:var(--faint)}.profile-operator p strong{color:var(--gold-hi);font-weight:600}
@keyframes profileSpin{to{transform:rotate(360deg)}}
@media(max-width:960px){.hero-stamp{display:flex;padding-top:42px;gap:14px}.profile-operator{transform:scale(.82);margin-bottom:-20px}.stamp{transform:rotate(8deg) scale(.82);margin-top:-24px}}
@media(prefers-reduced-motion:reduce){.profile-ring{animation:none}}

/* Local profile study A: restrained ID portrait marker, stacked above the evidence stamp. */
.hero-stamp{display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:22px}
.profile-operator{position:relative;width:174px;height:174px;display:grid;place-items:center;color:var(--ink)}
.profile-core{position:relative;z-index:2;width:116px;height:116px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#f4f2db,#aeb9b8);box-shadow:0 0 0 9px var(--paper),0 0 0 10px var(--line-dark),inset 0 0 24px rgba(7,26,24,.18)}
.profile-core b{font-family:var(--sans);font-size:45px;letter-spacing:-.08em;color:#17312e}
.profile-ring{position:absolute;display:block;border:1px solid var(--gold-mid);border-radius:50%;pointer-events:none}
.ring-a{inset:7px;border-right-color:transparent;animation:profileSpin 18s linear infinite}
.ring-b{inset:25px;border-left-color:var(--silver-hi);opacity:.65;animation:profileSpin 12s linear infinite reverse}
.profile-operator p{position:absolute;top:181px;white-space:nowrap;margin:0;font:500 8px/1.2 var(--mono);letter-spacing:.04em;color:var(--faint)}
.profile-operator p strong{color:var(--gold-hi);font-weight:600}
@keyframes profileSpin{to{transform:rotate(360deg)}}
@media(max-width:960px){.hero-stamp{display:flex;padding-top:42px;gap:14px}.profile-operator{transform:scale(.82);margin-bottom:-20px}.stamp{transform:rotate(8deg) scale(.82);margin-top:-24px}}
@media(prefers-reduced-motion:reduce){.profile-ring{animation:none}}

/* Mobile visibility fallback: content must remain readable if reveal JS is delayed or unavailable. */
@media(max-width:560px){
  html.js .rv,
  html.js .hero h1.rv,
  html.js .hero-facts>div,
  html.js .trust-in>span,
  html.js .faq-list>.faq-item,
  html.js .timeline li,
  html.js .stack-list>div{
    opacity:1!important;transform:none!important;filter:none!important;transition:none!important
  }
  html.js .hero-stamp .stamp{opacity:.85;transform:rotate(8deg) scale(1)}
}
@media(prefers-reduced-motion:reduce){.cta-solid,.cta-paper{animation:none}}
.cta-solid{background:linear-gradient(115deg,#003d28 0%,#006039 28%,#afd1b3 50%,#006039 72%,#003d28 100%)!important;background-size:300% 300%!important;animation:metallicSilver 8s ease-in-out infinite!important;will-change:background-position}
@keyframes ctaSheen{0%,18%{transform:translateX(-155%) skewX(-18deg);opacity:0}28%{opacity:.42}58%{opacity:.2}78%,100%{transform:translateX(155%) skewX(-18deg);opacity:0}}
.cta-solid{position:relative;isolation:isolate;overflow:hidden}
.cta-solid::after{content:"";position:absolute;z-index:1;inset:-35% 25%;width:24%;background:linear-gradient(90deg,transparent,rgba(244,242,219,.72),transparent);pointer-events:none;animation:ctaSheen 3.4s ease-in-out infinite!important}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--navy);text-decoration:none}
.shell{max-width:var(--shell);margin:0 auto;padding:0 28px}
.shell-narrow{max-width:820px;margin:0 auto;padding:0 28px}

.skip-link{position:absolute;left:-9999px;background:var(--navy);color:#fff;padding:10px 16px;z-index:200}
.skip-link:focus{left:0;top:0}
:focus-visible{outline:2.5px solid var(--copper);outline-offset:3px}

/* ---------- Top bar ---------- */
.topbar{position:sticky;top:0;z-index:100;background:rgba(250,247,242,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.wordmark{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.wordmark-role{display:inline-block;margin-left:12px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--faint);text-transform:uppercase}
.topnav{display:flex;gap:26px;margin-left:auto}
.topnav a{font-size:13.5px;font-weight:500;color:var(--ink);position:relative;padding:4px 0}
.topnav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--copper);transition:right .4s var(--ease)}
.topnav a:hover::after{right:0}

.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14px;padding:13px 22px;border-radius:3px;transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.cta-solid{background:var(--navy);color:#fff;border:1.5px solid var(--navy)}
.cta-solid:hover{background:var(--navy-deep);transform:translateY(-2px)}
.cta-line{border:1.5px solid var(--line-dark);color:var(--ink)}
.cta-line:hover{border-color:var(--copper);color:var(--copper)}
.topbar-cta{padding:10px 18px;font-size:13px}

/* ---------- Hero ---------- */
.hero{padding:110px 0 0}
.kicker{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);margin:0 0 34px}
.k-dot{width:8px;height:8px;border-radius:50%;background:var(--copper);box-shadow:0 0 0 4px rgba(154,106,0,.14);animation:kpulse 2.6s ease-in-out infinite}
@keyframes kpulse{0%,100%{box-shadow:0 0 0 3px rgba(154,106,0,.10)}50%{box-shadow:0 0 0 7px rgba(154,106,0,.16)}}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(3rem,7vw,5.6rem);line-height:1.04;letter-spacing:-.015em;margin:0 0 34px;max-width:900px}
.hero h1 em{font-style:italic;color:var(--navy);position:relative}
.hero h1 em::after{content:"";position:absolute;left:0;bottom:6px;height:3px;width:100%;background:var(--copper);transform:scaleX(0);transform-origin:left;animation:draw .9s var(--ease) .7s forwards}
@keyframes draw{to{transform:scaleX(1)}}
.lead{font-size:18.5px;line-height:1.75;color:var(--muted);max-width:760px;margin:0 0 40px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.hero-note{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--faint);margin:18px 0 0}
.hero-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);margin-top:72px;padding-top:0}
.hero-facts>div{padding:26px 26px 30px;border-left:1px solid var(--line)}
.hero-facts>div:first-child{border-left:0;padding-left:0}
.hero-facts b{display:block;font-family:var(--serif);font-size:21px;font-weight:600;color:var(--navy);margin-bottom:4px}
.hero-facts span{font-size:12.5px;color:var(--muted)}

/* ---------- Trust strip ---------- */
.trust{background:var(--navy);color:#fff}
.trust-in{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 36px;padding-top:22px;padding-bottom:22px}
.trust-k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#e6c66a}
.trust-in>span:not(.trust-k){font-family:var(--serif);font-style:italic;font-size:15.5px;color:#e8ecf2}

/* ---------- Sections ---------- */
.sec{padding:104px 0}
.sec-tint{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-deep) 14%,var(--paper-deep) 86%,var(--paper) 100%)}
.sec-head{display:flex;align-items:baseline;gap:20px;margin-bottom:16px}
.sec-no{font-family:var(--mono);font-size:13px;color:var(--copper);letter-spacing:.1em}
.sec-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.01em;margin:0}
.sec-lede{color:var(--muted);font-size:16.5px;max-width:640px;margin:0 0 54px}

/* ---------- Operating model ---------- */
.model-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-dark)}
.model-col{padding:34px 26px 10px;border-left:1px solid var(--line)}
.model-col:first-child{border-left:0;padding-left:0}
.model-col h3{font-family:var(--serif);font-size:19.5px;font-weight:600;margin:0 0 14px}
.model-col h3 span{display:block;font-family:var(--mono);font-size:11px;color:var(--copper);letter-spacing:.12em;margin-bottom:12px}
.model-col p{font-size:14px;color:var(--muted);margin:0 0 16px}
.model-verbs{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}

/* ---------- Evidence ledger ---------- */
.ledger{border-top:1.5px solid var(--line-dark)}
.ledger-row{display:grid;grid-template-columns:190px 1fr 180px;gap:34px;align-items:start;padding:32px 0;border-bottom:1px solid var(--line-dark)}
.lg-metric{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,4vw,3.3rem);color:var(--copper);line-height:1;letter-spacing:-.02em}
.lg-metric i{font-style:normal;font-size:.42em;margin-left:4px;color:var(--copper-soft)}
.lg-body h3{font-family:var(--serif);font-size:19px;font-weight:600;margin:2px 0 10px}
.lg-body p{font-size:14.5px;color:var(--muted);margin:0;max-width:600px}
.lg-tag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:right;line-height:1.7;padding-top:8px}

/* ---------- Engagement ---------- */
.engage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.engage-item{background:#fff;border:1px solid var(--line);border-radius:4px;padding:28px 24px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.engage-item:hover{transform:translateY(-4px);box-shadow:0 18px 34px -22px rgba(28,39,51,.28);border-color:var(--line-dark)}
.engage-item h3{font-family:var(--serif);font-size:18px;font-weight:600;margin:0 0 10px}
.engage-item p{font-size:13.5px;color:var(--muted);margin:0}
.method{display:flex;align-items:baseline;gap:30px;border-top:1px solid var(--line);margin-top:56px;padding-top:26px;flex-wrap:wrap}
.method-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);white-space:nowrap}
.method ol{display:flex;flex-wrap:wrap;gap:14px 34px;list-style:none;margin:0;padding:0;counter-reset:step}
.method li{counter-increment:step;font-size:13.5px}
.method li::before{content:counter(step,decimal-leading-zero);font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-right:8px}
.method li b{font-weight:600;margin-right:6px}
.method li span{color:var(--muted)}

/* ---------- Stack ---------- */
.stack-list{margin:0;border-top:1px solid var(--line-dark)}
.stack-list>div{display:grid;grid-template-columns:250px 1fr;gap:30px;padding:20px 0;border-bottom:1px solid var(--line)}
.stack-list dt{font-family:var(--serif);font-weight:600;font-size:16px}
.stack-list dd{margin:0;font-size:14px;color:var(--muted);line-height:1.8}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--line-dark)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;list-style:none;padding:22px 0;font-family:var(--serif);font-size:18px;font-weight:600}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--serif);font-size:24px;font-weight:500;color:var(--copper);flex-shrink:0;transition:transform .3s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin:0 0 24px;font-size:15px;color:var(--muted);max-width:700px}

/* ---------- Closing / contact ---------- */
.closing{background:var(--navy);color:#fff;padding:110px 0}
.closing-in{display:grid;grid-template-columns:1.25fr 1fr;gap:70px;align-items:center}
.closing h2{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,4.5vw,3.4rem);line-height:1.12;letter-spacing:-.01em;margin:0 0 22px}
.closing h2 em{font-style:italic;color:#d9a37e}
.closing p{color:#b9c5d4;font-size:16px;max-width:480px;margin:0}
.closing-side{display:flex;flex-direction:column;gap:14px}
.cta-paper{background:var(--paper);color:var(--navy);border:1.5px solid var(--paper);font-size:15px}
.cta-paper:hover{background:#fff;transform:translateY(-2px)}
.cta-ghost{border:1.5px solid rgba(250,247,242,.35);color:#fff}
.cta-ghost:hover{border-color:#d9a37e;color:#d9a37e}
.closing-meta{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#9db0c3;line-height:2;margin:10px 0 0} /* 5.3:1 on navy */

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);background:var(--paper)}
.footer-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:26px;padding-bottom:32px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--faint);text-transform:uppercase}

/* ---------- Reveal ---------- */
html.js .rv{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.rv.on{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .topnav{display:none}
  .hero{padding-top:72px}
  .hero-facts{grid-template-columns:repeat(2,1fr)}
  .hero-facts>div:nth-child(odd){border-left:0;padding-left:0}
  .model-grid{grid-template-columns:repeat(2,1fr)}
  .model-col:nth-child(odd){border-left:0;padding-left:0}
  .ledger-row{grid-template-columns:130px 1fr;gap:24px}
  .lg-tag{grid-column:2;text-align:left;padding-top:0}
  .engage-grid{grid-template-columns:repeat(2,1fr)}
  .closing-in{grid-template-columns:1fr;gap:44px}
  .stack-list>div{grid-template-columns:1fr;gap:8px}
}
@media(max-width:560px){
  .shell,.shell-narrow{padding:0 20px}
  html,body{overflow-x:hidden}
  .shell{max-width:100%;min-width:0}
  .topbar-in{height:64px;min-width:0;width:100%;gap:12px}
  .wordmark{flex:1 1 auto;min-width:0}
  .wordmark-role{display:none}
  .topbar-cta{flex:0 1 140px;width:140px;font-size:11px;padding:8px 10px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hero,.hero-grid,.hero-grid>div{min-width:0}
  .hero h1{font-size:clamp(2.35rem,10vw,3rem);max-width:100%;overflow-wrap:anywhere}
  .lead{font-size:16.5px;max-width:100%;overflow-wrap:anywhere}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-facts{grid-template-columns:1fr}
  .hero-facts>div{border-left:0;padding-left:0;padding-top:18px;padding-bottom:18px;border-top:1px solid var(--line)}
  .hero-facts>div:first-child{border-top:0}
  .model-grid{grid-template-columns:1fr}
  .model-col{border-left:0;padding-left:0}
  .ledger-row{grid-template-columns:1fr}
  .lg-tag{grid-column:1}
  .engage-grid{grid-template-columns:1fr}
  .sec{padding:72px 0}
  .closing{padding:80px 0}
  .closing-side .cta{width:100%}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;transform:none;transition:none}
  .k-dot{animation:none}
  .hero h1 em::after{animation:none;transform:scaleX(1)}
  .cta,.engage-item,.topnav a::after,.faq-item summary::after{transition:none}
}

/* Local metallic study: dark silver surfaces with controlled gold highlights. */
:root{
  --silver-deep:#394550;
  --silver-mid:#5d6b77;
  --silver-hi:#74818c;
  --gold-deep:#b47b00;
  --gold-mid:#d9ad3e;
  --gold-hi:#fff1b8;
}

@keyframes metallicSilver{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes metallicGold{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Gold remains dark enough for the paper background while the moving highlight creates a real-metal impression. */
.kicker,.sec-no,.model-col h3 span,.method-k,.tl-k,.stamp span,.stamp b,.lg-metric,.faq-item summary::after{
  background:linear-gradient(110deg,var(--gold-deep) 0%,var(--gold-mid) 28%,var(--gold-hi) 47%,var(--gold-mid) 62%,var(--gold-deep) 100%);
  background-size:230% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:metallicGold 6s ease-in-out infinite;
}

.cta-solid,.trust,.closing{
  background:linear-gradient(115deg,#303c47 0%,var(--silver-mid) 34%,var(--silver-hi) 49%,var(--silver-mid) 63%,#303c47 100%);
  background-size:230% 230%;
  animation:metallicSilver 8s ease-in-out infinite;
}
.cta-solid{color:#fff;text-shadow:0 1px 2px rgba(16,24,32,.65)}
.cta-line:hover{background:linear-gradient(115deg,#4b5863,#c7d0d6,#596671);background-size:220% 220%;border-color:var(--silver-hi);color:#fff}
.trust,.closing{color:#fff}
.trust-k{color:var(--gold-hi)}
.stamp{border-image:linear-gradient(135deg,var(--gold-deep),var(--gold-hi),var(--gold-mid),var(--gold-deep)) 1}
.method-step>span,.card-index,.hero-facts b{color:var(--gold-mid)}
.ledger-row:hover{box-shadow:inset 4px 0 0 var(--gold-mid),0 10px 30px rgba(154,106,0,.10)}
.engage-item{background:var(--paper-deep);color:var(--ink)}
.cta-paper{background:var(--silver-hi);color:#172033;border-color:var(--silver-hi)}
.cta-paper:hover{background:var(--silver-mid);color:#fff}
.topbar{background:rgba(11,29,51,.94);border-bottom:1px solid var(--line);color:var(--ink)}
.wordmark,.topnav a{color:var(--ink)}
.wordmark-role{color:var(--muted)}
.topnav a:hover{color:var(--gold-hi)}

@media(prefers-reduced-motion:reduce){
  .kicker,.sec-no,.model-col h3 span,.method-k,.tl-k,.stamp span,.stamp b,.lg-metric,.faq-item summary::after,.cta-solid,.trust,.closing{animation:none}
}

/* ============================================================
   final-v2 additions — team synthesis (Codex review + Antigravity
   documented guidance + Claude decisions), 2026-07-19
   ============================================================ */

/* Self-hosted fonts (Codex item 9/10: no Google Fonts dependency;
   subset latin+latin-ext, ~111KB total, GDPR-friendly: zero third-party requests) */
@font-face{font-family:'Lora';src:url('assets/fonts/lora-400.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('assets/fonts/lora-italic-400.woff2') format('woff2');font-weight:400 500;font-style:italic;font-display:swap}
@font-face{font-family:'Lora';src:url('assets/fonts/lora-700.woff2') format('woff2');font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:'Work Sans';src:url('assets/fonts/worksans-400.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:'Work Sans';src:url('assets/fonts/worksans-700.woff2') format('woff2');font-weight:600 800;font-style:normal;font-display:swap}
@font-face{font-family:'DM Mono';src:url('assets/fonts/dmmono-400.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap}

/* JS fail-safe (Codex item 13): reveal-hiding only applies when JS confirmed */
/* hiding gated on html.js above — no-js needs no override */

/* Hero grid + dossier stamp (Codex item 14 — restrained editorial motif) */
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start}
.hero-stamp{padding-top:90px}
.stamp{
  display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;text-align:center;
  width:150px;height:150px;border:2px solid var(--copper);border-radius:50%;
  transform:rotate(8deg);opacity:.85;
  box-shadow:inset 0 0 0 4px var(--paper), inset 0 0 0 5.5px rgba(154,106,0,.45);
}
.stamp span{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--copper)}
.stamp b{font-family:var(--serif);font-style:italic;font-weight:600;font-size:19px;line-height:1.15;color:var(--copper)}

/* Reuse the site's original linear metallic motion on the stamp outline only. */
.stamp{position:relative;border-color:transparent;background:var(--paper);isolation:isolate}
.stamp::after{content:"";position:absolute;z-index:0;inset:-2px;border-radius:50%;padding:2px;
  background:linear-gradient(110deg,var(--gold-deep) 0%,var(--gold-mid) 28%,var(--gold-hi) 47%,var(--gold-mid) 62%,var(--gold-deep) 100%);
  background-size:230% 100%;background-position:0% 50%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;animation:metallicGold 6s ease-in-out infinite;pointer-events:none}
.stamp span,.stamp b{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.stamp::after{animation:none;background-position:50% 50%}}

/* Profile section */
.profile-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:70px;align-items:start}
.profile-copy p{font-size:15.5px;line-height:1.8;color:var(--ink);margin:0 0 20px;max-width:640px}
.profile-copy .drop::first-letter{
  font-family:var(--serif);font-weight:700;font-size:3.4em;line-height:.82;
  float:left;padding:6px 10px 0 0;color:var(--navy);
}
.timeline{border-left:2px solid var(--line-dark);padding-left:26px;margin-top:74px}
.tl-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper)}
.timeline ol{list-style:none;margin:18px 0 0;padding:0}
.timeline li{position:relative;padding:0 0 22px}
.timeline li::before{content:"";position:absolute;left:-32px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--paper);border:2px solid var(--copper)}
.timeline li b{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--copper);margin-bottom:2px}
.timeline li span{font-size:13.5px;color:var(--muted);line-height:1.5}
.timeline .tl-side{border-top:1px dashed var(--line-dark);padding-top:18px;margin-top:4px}
.timeline .tl-side::before{border-color:var(--navy)}

@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-stamp{display:none}
  .profile-grid{grid-template-columns:1fr;gap:40px}
  .timeline{margin-top:0}
}
@media(prefers-reduced-motion:reduce){.stamp{transform:rotate(8deg)}}

/* ============================================================
   final-v2 · v2 — high-end motion & fluid-contrast pass (2026-07-19)
   Animations + transitions layer. Everything disabled under
   prefers-reduced-motion. No libraries.
   ============================================================ */

/* Paper grain — barely-there texture for a tactile, printed feel */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Selection & base transitions */
::selection{background:var(--navy);color:var(--paper)}
a,button{transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}

/* Scroll progress hairline */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2.5px;z-index:200;
  background:linear-gradient(90deg,var(--copper),var(--copper-soft));
  transform-origin:left;transform:scaleX(0);
}

/* Topbar elevation on scroll */
.topbar{transition:box-shadow .4s var(--ease),height .3s var(--ease)}
.topbar.scrolled{box-shadow:0 10px 30px -18px rgba(28,39,51,.35)}

/* Hero h1 entrance: soft blur-settle */
html.js .hero h1.rv{opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
html.js .hero h1.rv.on{opacity:1;transform:none;filter:blur(0)}

/* Stamp: pressed-in entrance (like an actual stamp landing) */
html.js .hero-stamp .stamp{opacity:0;transform:rotate(22deg) scale(1.55)}
html.js .hero-stamp.on .stamp{animation:stampIn .62s cubic-bezier(.2,1.35,.4,1) .55s forwards}
@keyframes stampIn{
  0%{opacity:0;transform:rotate(22deg) scale(1.55)}
  62%{opacity:.9;transform:rotate(6deg) scale(.97)}
  100%{opacity:.85;transform:rotate(8deg) scale(1)}
}

/* Child stagger for container-level reveals (delays set inline by JS) */
html.js .hero-facts>div,
html.js .trust-in>span,
html.js .faq-list>.faq-item,
html.js .timeline li,
html.js .stack-list>div{
  opacity:0;transform:translateY(14px);
  transition:opacity .65s var(--ease),transform .65s var(--ease);
}
html.js .hero-facts.on>div,
html.js .trust-in.on>span,
html.js .faq-list.on>.faq-item,
html.js .timeline.on li,
html.js .stack-list.on>div{opacity:1;transform:none}
/* timeline dots draw in with their rows */
html.js .timeline li::before{transition:transform .5s var(--ease) .2s;transform:scale(0)}
html.js .timeline.on li::before{transform:scale(1)}

/* Section number ticks + kicker rule transitions */
.sec-no{display:inline-block;transition:transform .5s var(--ease)}
.sec-head:hover .sec-no{transform:translateX(4px)}
.sec-head h2{position:relative}
html.js .sec-head.rv h2::after{
  content:"";position:absolute;left:0;bottom:-10px;height:2px;width:64px;background:var(--copper);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .35s;
}
html.js .sec-head.rv.on h2::after{transform:scaleX(1)}

/* Ledger rows: copper rule slides in on hover; metric nudges */
.ledger-row{position:relative;transition:background .4s var(--ease)}
.ledger-row::before{
  content:"";position:absolute;left:-28px;top:18px;bottom:18px;width:3px;background:var(--copper);
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease);
}
.ledger-row:hover::before{transform:scaleY(1)}
.ledger-row:hover{background:linear-gradient(90deg,rgba(154,106,0,.055),transparent 55%)}
.lg-metric{transition:transform .45s var(--ease),letter-spacing .45s var(--ease)}
.ledger-row:hover .lg-metric{transform:translateX(6px)}

/* Model columns: roman numeral underline + lift */
.model-col{transition:transform .4s var(--ease)}
.model-col:hover{transform:translateY(-3px)}
.model-col h3 span{position:relative;display:inline-block}
.model-col h3 span::after{
  content:"";position:absolute;left:0;bottom:-4px;height:1.5px;width:100%;background:var(--copper);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.model-col:hover h3 span::after{transform:scaleX(1)}

/* Engagement cards: refined lift already present; add copper top-edge sweep */
.engage-item{position:relative;overflow:hidden}
.engage-item::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2.5px;background:var(--copper);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.engage-item:hover::before{transform:scaleX(1)}

/* FAQ: color + marker transitions (height animated in JS) */
.faq-item summary{transition:color .3s var(--ease)}
.faq-item summary:hover{color:var(--copper)}
.faq-item summary::after{transition:transform .35s var(--ease),color .3s var(--ease)}

/* Fluid contrast: smoother passage into the navy closing block */
.closing{position:relative;overflow:hidden}
.closing::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(620px 420px at 82% 18%, rgba(217,163,126,.14), transparent 70%),
    radial-gradient(520px 380px at 8% 92%, rgba(78,120,160,.18), transparent 70%);
}
.closing .shell{position:relative}
.sec-tint{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-deep) 18%,var(--paper-deep) 82%,var(--paper) 100%)}
.trust{background:linear-gradient(105deg,var(--navy-deep) 0%,var(--navy) 45%,#6d7882 100%)}

/* Buttons: soft press feedback */
.cta:active{transform:translateY(0) scale(.985)}

/* Wordmark micro-transition */
.wordmark{transition:opacity .3s var(--ease)}
.wordmark:hover{opacity:.75}

/* Scrollbar (WebKit) — quiet, on-palette */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--paper-deep)}
::-webkit-scrollbar-thumb{background:var(--line-dark);border-radius:6px;border:2.5px solid var(--paper-deep)}
::-webkit-scrollbar-thumb:hover{background:var(--copper-soft)}

/* Reduced motion: kill the entire motion layer */
@media(prefers-reduced-motion:reduce){
  body::after{display:none}
  .scroll-progress{display:none}
  html.js .hero h1.rv{opacity:1;transform:none;filter:none;transition:none}
  html.js .hero-stamp .stamp{opacity:.85;transform:rotate(8deg) scale(1);animation:none}
  html.js .hero-facts>div,html.js .trust-in>span,html.js .faq-list>.faq-item,
  html.js .timeline li,html.js .stack-list>div{opacity:1;transform:none;transition:none}
  html.js .timeline li::before{transform:scale(1);transition:none}
  html.js .sec-head.rv h2::after{transform:scaleX(1);transition:none}
  .ledger-row::before,.model-col,.engage-item::before,.lg-metric,.sec-no{transition:none}
  a,button,.cta,.topbar,.wordmark,.faq-item summary,.faq-item summary::after{transition:none!important}
}

/* Theme overrides kept at the end so the palette changes only color, not layout. */
.topbar{background:rgba(7,26,24,.95)}
.cta-solid,.trust,.closing{background:linear-gradient(115deg,#003d28 0%,#006039 38%,#2f805f 50%,#006039 64%,#003d28 100%);background-size:230% 230%;color:#f4f2db}
.engage-item{background:var(--paper-deep);color:var(--ink)}
.cta-paper{background:linear-gradient(115deg,#003d28 0%,#006039 38%,#2f805f 50%,#006039 64%,#003d28 100%);background-size:230% 230%;animation:metallicSilver 8s ease-in-out infinite;color:#f4f2db;border-color:#2f805f;text-shadow:0 1px 2px rgba(0,45,32,.65)}
.cta-paper:hover{background:linear-gradient(115deg,#006039,#2f805f,#006039);background-size:220% 220%;color:#f4f2db;border-color:#afd1b3}
@media(max-width:960px){.hero-stamp{display:flex!important;padding-top:42px;gap:14px}.profile-operator{transform:scale(.82);margin-bottom:-20px}.stamp{transform:rotate(8deg) scale(.82);margin-top:-24px}html.js .hero-stamp .stamp{transform:rotate(8deg) scale(.82)!important;opacity:.85}}

/* Selected composition: enlarged ID portrait with the evidence stamp overlaid on the inner circle. */
.hero-stamp{position:relative;width:240px;height:292px;display:block;padding-top:22px}
.profile-operator{width:220px;height:220px;margin:0 auto}
.profile-core{width:152px;height:152px}
.profile-core b{font-size:58px}
.ring-a{inset:5px}.ring-b{inset:27px}
.profile-operator p{top:226px;font-size:8.5px}
.stamp{position:absolute;z-index:4;left:50%;top:112px;width:128px;height:128px;margin:0;transform:translateX(-50%) rotate(8deg);box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 5.5px rgba(154,106,0,.45),0 8px 18px rgba(7,26,24,.24)}
html.js .hero-stamp .stamp{opacity:.85;transform:translateX(-50%) rotate(8deg);animation:none}
.stamp span{font-size:8px}.stamp b{font-size:16px}
@media(min-width:961px){.hero-stamp{width:170px}.profile-operator{left:-25px}}
@media(max-width:960px){.hero-stamp{display:block!important;width:240px;height:262px;padding-top:12px}.profile-operator{transform:scale(.82);margin:0 auto}.stamp{top:91px;transform:translateX(-50%) rotate(8deg) scale(.82)!important}.profile-operator p{top:186px;font-size:7px}}

/* Keep the enlarged portrait visible when the shared reveal layer has already played. */
html.js .hero-stamp.rv.on{opacity:1!important;transform:none!important}

/* Square ID badge variant: keep the orbit system and evidence stamp unchanged. */
.profile-core{border-radius:18px}

/* Lift the complete badge composition so the hero underline crosses beneath the availability line. */
.profile-operator{top:-22px}
.stamp{top:90px}
@media(max-width:960px){.profile-operator{top:-20px}.stamp{top:71px}}

/* Continue the hero underline beneath the right-side availability status on desktop. */
@media(min-width:961px){.hero h1 em::after{left:-28px;width:calc(100% + 320px)}}

/* Let the hero explanation use the full composition width below the title. */
@media(min-width:961px){.hero-grid > div:first-child .lead{max-width:none;width:calc(100% + 266px)}}

/* Ensure the widened hero explanation is visible after the shared reveal state. */
html.js .hero-grid > div:first-child .lead.rv.on{opacity:1!important;transform:none!important}

/* Large badge variant: approximately 10% larger than the approved square badge. */
.profile-core{width:167px;height:167px;border-radius:20px}
.profile-core b{font-size:64px}

/* Light-blue outer orbit sized to meet the four corners of the enlarged square badge. */
.profile-id::after{content:"";position:absolute;z-index:1;inset:-8px;border:1.5px solid var(--navy);border-radius:50%;opacity:.86;pointer-events:none;box-shadow:0 0 14px rgba(0,96,57,.18)}

/* Transparent portrait used inside the square ID frame. */
.profile-link{display:block;color:inherit;text-decoration:none}
.profile-core.profile-photo{display:block;overflow:hidden;background:transparent}
.profile-core.profile-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 16%;border-radius:16px;transform:scale(1.07);transform-origin:center 28%;transition:transform .48s cubic-bezier(.22,.8,.24,1);will-change:transform}
.profile-link:hover .profile-core.profile-photo,.profile-link:focus-visible .profile-core.profile-photo{overflow:visible}
.profile-link:hover .profile-core.profile-photo img,.profile-link:focus-visible .profile-core.profile-photo img{transform:scale(1.13)}

/* Keep the initial and operating-model keywords on the approved gold accent. */
.profile-copy .drop::first-letter{color:var(--gold-mid)}
.model-verbs{color:var(--gold-mid)}

/* Keep the gold ID orbit moving on desktop as well as mobile. */
@media(min-width:961px){
  .profile-id .ring-a{animation:profileSpin 18s linear infinite}
  .profile-id .ring-b{animation:profileSpin 12s linear infinite reverse}
}

/* Mobile composition: place the identity marker below the header, before the availability copy. */
@media(max-width:960px){
  .hero-grid{display:flex;flex-direction:column;gap:0}
  .hero-stamp{order:-1;align-self:center;margin:0 auto 26px;padding-top:12px}
  .hero-stamp .stamp{left:18%;top:104px}
}

/* Fill the smallest orbit behind the portrait with the heading ink color. */
.profile-id .ring-b{background:var(--ink);border-color:var(--ink);opacity:.94;z-index:1}

/* Place the evidence stamp directly at its final position; retain only the metallic border motion. */
html.js .hero-stamp .stamp,
html.js .hero-stamp.on .stamp{opacity:.85!important;transform:translateX(-50%) rotate(8deg)!important;animation:none!important}
@media(min-width:961px){.stamp{left:90%}}
@media(max-width:960px){html.js .hero-stamp .stamp,html.js .hero-stamp.on .stamp{transform:translateX(-50%) rotate(8deg) scale(.82)!important}}

/* Keep the original transparent rollover and enlarge only the button labels. */
.hero-cta .cta-line span{display:inline-block;transition:transform .2s ease}
.hero-cta .cta-line:hover{background:transparent!important;background-image:none!important;border-color:var(--copper)!important;color:var(--copper)!important}
.hero-cta .cta-line:hover span{transform:scale(1.1)}