/* Nova HR — site styles */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--paper:#F6F3EC;--paper2:#EFEBDE;--ink:#0C3A2D;--ink70:rgba(12,58,45,.7);--ink65:rgba(12,58,45,.72);--ink6:rgba(12,58,45,.7);--ink42:rgba(12,58,45,.7);--emerald:#0A2E24;--emerald2:#07231B;--gold:#A8842C;--gold2:#C9A85C;--goldtxt:#7A5E1F;--line:rgba(12,58,45,.14);--line16:rgba(12,58,45,.16);--line10:rgba(12,58,45,.1);--lline:rgba(246,243,236,.15);--cream:#F6F3EC;--cream72:rgba(246,243,236,.72);--cream65:rgba(246,243,236,.72);--cream6:rgba(246,243,236,.72);--cream5:rgba(246,243,236,.6);--r-pill:999px;--r-card:16px;--r-input:10px;--ease-out:cubic-bezier(0.22,1,0.36,1);--t-fast:150ms;--t-med:250ms;--shadow-1:0 2px 10px rgba(7,35,27,0.08);--shadow-2:0 6px 22px rgba(7,35,27,0.14)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:'Instrument Sans',sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;overflow-x:hidden}
a{color:var(--ink)}a:hover{color:var(--goldtxt)}
::selection{background:rgba(176,139,62,.25)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.band-dark :focus-visible,.footer :focus-visible{outline-color:var(--gold2)}
img{max-width:100%}
.container{width:min(1240px,91%);margin:0 auto}
.narrow{width:min(880px,91%);margin:0 auto}
.mid{width:min(860px,91%);margin:0 auto}
.serif{font-family:'Cormorant Garamond',serif}
.mono{font-family:'IBM Plex Mono',monospace}
.label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:3px;color:var(--goldtxt);text-transform:uppercase;margin-bottom:24px;font-weight:500}
.label-lt{color:var(--gold2)}
.eyebrow-row{display:flex;align-items:center;gap:14px;margin-bottom:32px}
.title{font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1.08;letter-spacing:-.01em;color:var(--ink)}
.title em{font-style:italic;color:var(--gold)}
.title-lt{color:var(--cream)}.title-lt em{color:var(--gold2)}
.h-hero{font-size:clamp(52px,7vw,108px);line-height:1.02;letter-spacing:-.015em}
.h-page{font-size:clamp(46px,5.8vw,88px);line-height:1.04;letter-spacing:-.015em}
.h2{font-size:clamp(38px,3.6vw,54px)}
.h2s{font-size:clamp(32px,2.8vw,42px);line-height:1.12}
.lead{font-size:18px;color:rgba(12,58,45,.68);line-height:1.75;max-width:620px;text-wrap:pretty}
.btn{display:inline-block;background:var(--ink);color:var(--paper);padding:17px 40px;border-radius:var(--r-pill);font-size:15px;font-weight:600;text-decoration:none;letter-spacing:.2px;border:none;cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:background .2s,transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.btn:hover{background:#14503C;color:var(--paper);transform:translateY(-1px);box-shadow:var(--shadow-2)}
.btn:active{transform:translateY(0) scale(.98);box-shadow:var(--shadow-1)}
.btn:focus-visible,.btn-outline:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.btn-arr{display:inline-block;margin-left:7px;transition:transform var(--t-fast) var(--ease-out)}
.btn:hover .btn-arr{transform:translateX(3px)}
.btn-gold{background:var(--gold2);color:var(--emerald)}
.btn-gold:hover{background:#D4B56C;color:var(--emerald)}
.btn-sm{padding:12px 26px;font-size:13.5px}
.ulink{color:var(--ink);font-size:14.5px;font-weight:500;text-decoration:none;border-bottom:1px solid rgba(168,132,44,.6);padding-bottom:3px;transition:color .2s}
.ulink:hover{color:var(--goldtxt)}
.meta-line{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1.5px;color:var(--ink42);text-transform:uppercase}
.meta-line-lt{color:rgba(246,243,236,.62)}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(246,243,236,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line10);height:76px;display:flex;align-items:center;transition:height var(--t-med) var(--ease-out),background var(--t-med) var(--ease-out)}
.scrolled .nav{height:64px;background:rgba(246,243,236,.92)}
.scrolled .menu{inset:64px 0 0 0}
.nav-inner{width:min(1240px,91%);margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-name{font-family:'Cormorant Garamond',serif;font-size:25px;font-weight:600;color:var(--ink);letter-spacing:.2px;line-height:1}
.nav-links{display:flex;align-items:center;gap:36px}
.nav-links a{color:var(--ink65);text-decoration:none;font-weight:500;transition:color .2s;position:relative}
/* size/padding only for real nav links — .btn must keep its own (was overriding .btn-sm) */
.nav-links a:not(.btn){font-size:14px;padding:8px 0}
.nav-links a:hover{color:var(--ink)}
.nav-links a:not(.btn)::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease-out)}
.nav-links a:not(.btn):hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--ink);font-weight:600}
.burger{display:none;background:none;border:none;cursor:pointer;padding:12px;margin-right:-12px}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:transform .25s,opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{display:none;position:fixed;inset:76px 0 0 0;z-index:99;background:var(--paper);border-top:1px solid var(--line10);padding:8vh 0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@media (max-width:960px){
  .menu{display:block;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out),visibility 0s linear var(--t-med)}
  .menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out)}
  .menu-links a{opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
  .menu.open .menu-links a{opacity:1;transform:none}
  .menu.open .menu-links a:nth-child(2){transition-delay:40ms}
  .menu.open .menu-links a:nth-child(3){transition-delay:80ms}
  .menu.open .menu-links a:nth-child(4){transition-delay:120ms}
  .menu.open .menu-links a:nth-child(5){transition-delay:160ms}
}
.menu-links{width:min(1240px,86%);margin:0 auto;display:flex;flex-direction:column}
.menu-links a{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:600;color:var(--ink);text-decoration:none;padding:16px 0;border-bottom:1px solid var(--line)}
.menu-links a:hover{color:var(--goldtxt)}
/* CTA buttons must keep their own colour inside nav/menu link scopes */
.nav-links a.btn,.nav-links a.btn:hover{color:var(--paper)}
.menu-links a.btn{color:var(--paper);font-family:'Instrument Sans',sans-serif;font-size:13.5px;padding:12px 26px;border-bottom:none;align-self:flex-start;margin-top:24px}
.menu-links a.btn:hover{color:var(--paper)}
@media (max-height:560px){.menu{padding:4vh 0}.menu-links a{font-size:24px;padding:12px 0}}
.menu-cta{margin-top:32px;align-self:flex-start}
/* hero + canvas */
#bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main{position:relative;z-index:1}
.hero{min-height:88vh;display:flex;align-items:center;padding:170px 0 80px;text-align:center;position:relative}
.hero-rule{width:36px;height:1px;background:rgba(168,132,44,.55);display:inline-block}
.hero-eyebrow{display:inline-flex;align-items:center;gap:14px;margin-bottom:36px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:3.5px;color:var(--goldtxt);text-transform:uppercase}
.hero-actions{display:flex;gap:26px;align-items:center;justify-content:center;margin-top:48px;flex-wrap:wrap}
/* sections */
.section{padding:110px 0;position:relative}
.bt{border-top:1px solid var(--line10)}
.bb{border-bottom:1px solid var(--line10)}
.band-dark{background:var(--emerald);position:relative;overflow:hidden}
.band-paper2{background:var(--paper2);border-top:1px solid var(--line10);border-bottom:1px solid var(--line10)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:40px;margin-bottom:64px;flex-wrap:wrap}
.watermark{position:absolute;pointer-events:none;opacity:.05}
/* pillars */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}
.pillar{border-left:1px solid var(--line16);padding-left:32px}
.pillar .num{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;color:var(--gold);display:block;margin-bottom:16px}
.pillar h3{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:600;color:var(--ink);margin:0 0 14px;line-height:1.15}
.pillar p{font-size:14.5px;color:rgba(12,58,45,.62);line-height:1.75}
/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--lline)}
.stat{padding:8px 44px 8px 36px;border-right:1px solid var(--lline)}
.stat:last-child{border-right:none}
.stat .big{font-family:'Cormorant Garamond',serif;font-size:clamp(56px,5.5vw,88px);font-weight:600;color:var(--gold2);display:block;line-height:1;letter-spacing:-.01em}
.stat .cap{font-size:14px;color:var(--cream65);line-height:1.65;display:block;margin-top:18px;max-width:240px}
/* founder split */
.split{display:grid;grid-template-columns:1.55fr 1fr;gap:96px;align-items:start}
.quote{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,2.6vw,40px);font-weight:500;font-style:italic;line-height:1.35;color:var(--ink);margin:0 0 34px;text-wrap:balance}
.body-p{font-size:15.5px;color:rgba(12,58,45,.68);line-height:1.85;max-width:600px;text-wrap:pretty}
.ledger{border-top:1px solid var(--line)}
.ledger-row{display:flex;gap:26px;align-items:baseline;padding:22px 4px;border-bottom:1px solid var(--line)}
.ledger-row .rn{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600;color:var(--gold);min-width:28px}
.ledger-row .rt{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;font-size:14px;color:rgba(12,58,45,.55)}
.ledger-row .rt strong{font-size:15px;font-weight:600;color:var(--ink)}
.photo-frame{border:1px solid rgba(168,132,44,.45);padding:12px;background:#FBFAF5;border-radius:var(--r-card);box-shadow:var(--shadow-1)}
.photo-frame img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;display:block;filter:saturate(.9);border-radius:10px}
.photo-cap{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;padding:0 2px}
.photo-cap .pn{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:600;color:var(--ink)}
.photo-cap .pr{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:2px;color:var(--goldtxt);text-transform:uppercase}
.sticky{position:sticky;top:130px}
/* audit */
.audit-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:88px;align-items:start}
.founder-grid{position:relative;display:grid;grid-template-columns:1fr 1.6fr;gap:96px;align-items:start}
.vision-grid{padding-top:100px;display:grid;grid-template-columns:1fr 1.4fr;gap:88px;align-items:start}
.callout{margin-top:36px;padding:20px 26px;border-left:2px solid var(--gold);background:var(--paper2);font-size:14px;line-height:1.7}
.callout strong{font-weight:600}
.cells{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.cell{padding:34px 30px 34px 0;border-bottom:1px solid var(--line)}
.cell:nth-child(even){padding:34px 0 34px 30px;border-left:1px solid var(--line)}
.cell .rn{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;color:var(--gold);display:block;margin-bottom:8px}
.cell .ct{font-size:15px;font-weight:600;color:var(--ink);display:block;margin-bottom:6px}
.cell .cd{font-size:13.5px;color:var(--ink6);line-height:1.65;display:block}
/* service rows */
.svc{display:grid;grid-template-columns:100px 1.35fr 1fr;gap:40px;align-items:start;padding:52px 20px;border-bottom:1px solid var(--line16);transition:background var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out),border-radius var(--t-med) var(--ease-out)}
.svc:hover{background:var(--paper2);border-radius:var(--r-card);box-shadow:var(--shadow-1)}
.svc .no{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;color:rgba(168,132,44,.85);line-height:1}
.svc h3{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0 0 14px;line-height:1.1}
.svc .sd{font-size:15px;color:var(--ink65);line-height:1.75;max-width:480px}
.svc-list{display:flex;flex-direction:column;gap:10px;padding-top:8px}
.svc-list span{font-size:13.5px;color:var(--ink6);display:flex;align-items:center;gap:12px}
.svc.dark{background:var(--ink)}
.svc.dark:hover{background:var(--ink);border-radius:0;box-shadow:none}
.svc.dark .no{color:var(--gold2)}
.svc.dark h3{color:var(--cream)}
.svc.dark .sd{color:var(--cream72)}
.svc.dark .svc-list span{color:var(--cream72)}
.tag{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:2.5px;color:var(--gold2);text-transform:uppercase}
.rows-top{border-top:1px solid var(--line16)}
/* approach */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:48px;position:relative}
.steps::before{content:'';position:absolute;top:5px;left:0;right:0;height:1px;background:rgba(12,58,45,.18)}
.step .dot{display:block;width:11px;height:11px;border-radius:50%;background:var(--gold);margin-bottom:30px;position:relative}
.step .sn{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--goldtxt);display:block;margin-bottom:16px}
.step h3{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;color:var(--ink);margin:0 0 12px}
.step p{font-size:14px;color:var(--ink6);line-height:1.7}
/* CTA + form */
.cta{text-align:center}
.cta .ctitle{font-size:clamp(40px,4.8vw,68px);line-height:1.05;letter-spacing:-.015em;margin:0 0 26px;text-wrap:balance}
.cta .csub{font-size:16.5px;color:var(--cream65);line-height:1.75;margin:0 auto 46px;max-width:520px;text-wrap:pretty}
.form-wrap{margin-top:84px;text-align:left;border-top:1px solid rgba(246,243,236,.14);padding-top:52px}
.form-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:30px;flex-wrap:wrap}
.form-head h3{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;color:var(--cream)}
.form-head span{font-size:13px;color:var(--cream5)}
.form{display:flex;flex-direction:column;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.inp{padding:15px 18px;border:1px solid rgba(246,243,236,.4);border-radius:var(--r-input);background:rgba(246,243,236,.06);color:var(--cream);font-size:14px;font-family:'Instrument Sans',sans-serif;outline:none;width:100%;transition:border-color .2s}
.inp::placeholder{color:rgba(246,243,236,.62)}
/* visually hidden: absolute, so labels never become grid items in .form-row */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.inp:focus{border-color:var(--gold2);box-shadow:0 0 0 3px rgba(201,168,92,0.15)}
textarea.inp{resize:vertical;min-height:104px;line-height:1.6}
.btn-outline{background:transparent;color:var(--gold2);padding:14px 32px;border-radius:var(--r-pill);font-size:14px;font-weight:600;border:1px solid rgba(201,168,92,.5);cursor:pointer;font-family:'Instrument Sans',sans-serif;align-self:flex-start;transition:background .2s,border-color .2s,transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.btn-outline:hover{background:rgba(201,168,92,.12);border-color:var(--gold2);transform:translateY(-1px);box-shadow:var(--shadow-2)}
.btn-outline:active{transform:translateY(0) scale(.98);box-shadow:var(--shadow-1)}
/* footer */
.footer{background:var(--emerald2)}
.footer a{transition:color .2s}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px;padding:68px 0 60px}
.f-tag{font-size:13.5px;color:var(--cream5);line-height:1.7;max-width:280px}
.f-col-h{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:2.5px;color:rgba(201,168,92,.7);text-transform:uppercase;margin-bottom:20px}
.f-links{display:flex;flex-direction:column;gap:12px}
.f-links a{font-size:13.5px;color:var(--cream6);text-decoration:none}
.f-links a:hover{color:var(--cream)}
.f-links a.gold{color:var(--gold2)}
.f-links a.gold:hover{color:#D4B56C}
.f-bottom{border-top:1px solid rgba(246,243,236,.1);padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.f-bottom span{font-size:12px;color:rgba(246,243,236,.35)}
.f-bottom a{font-size:12px;color:rgba(246,243,236,.35);text-decoration:none}
.f-bottom a:hover{color:rgba(246,243,236,.7)}
/* faq */
.faq-grid{display:grid;grid-template-columns:1fr 2fr;gap:88px;align-items:start}
.qa-list{border-top:1px solid var(--line)}
.qa{padding:36px 4px;border-bottom:1px solid var(--line)}
.qa h3{font-family:'Cormorant Garamond',serif;font-size:25px;font-weight:600;color:var(--ink);margin:0 0 14px;line-height:1.25}
.qa p{font-size:15px;color:var(--ink65);line-height:1.8;max-width:640px}
/* legal */
.prose h3{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;color:var(--ink);margin:0 0 12px}
.prose p{font-size:15px;color:var(--ink70);line-height:1.85;margin:0 0 36px;text-wrap:pretty}
/* founder dark band (about) */
.band-dark .quotebox{border-left:2px solid var(--gold);background:var(--paper2);padding:24px 30px;font-family:'Cormorant Garamond',serif;font-size:22px;font-style:italic;font-weight:500;color:var(--ink);line-height:1.5}
.chips{display:flex;gap:12px;flex-wrap:wrap}
.chip{border:1px solid rgba(201,168,92,.4);padding:11px 20px;font-size:13px;font-weight:500;color:var(--cream72);letter-spacing:.3px}
/* scroll reveals — base hidden state only when JS is running (html.js) */
.js .reveal,.js .reveal-o{opacity:0;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.js .reveal{transform:translateY(16px)}
.js .reveal.in,.js .reveal-o.in{opacity:1;transform:none}
.js .reveal.d1,.js .reveal-o.d1{transition-delay:80ms}
.js .reveal.d2,.js .reveal-o.d2{transition-delay:160ms}
.js .reveal.d3,.js .reveal-o.d3{transition-delay:240ms}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal-o{opacity:1;transform:none;transition:none}
  .menu,.menu-links a{transition:none!important}
  .nav{transition:none}
}
/* responsive */
@media (max-width:960px){
  .nav-links{display:none}
  .burger{display:block}
  .hero{min-height:0;padding:150px 0 64px}
  .hero-actions{gap:20px}
  .section{padding:72px 0}
  .grid3,.audit-grid,.split,.faq-grid,.founder-grid,.vision-grid{grid-template-columns:1fr;gap:44px}
  .vision-grid{padding-top:64px}
  .split .sticky,.faq-grid .sticky,.audit-grid .sticky{position:static;top:auto}
  .photo-side{max-width:360px}
  .stats{grid-template-columns:1fr;border-left:none;border-top:1px solid var(--lline)}
  .stat{border-right:none;border-bottom:1px solid var(--lline);padding:32px 4px}
  .stat .cap{max-width:none}
  .svc{grid-template-columns:1fr;gap:20px;padding:40px 4px}
  .svc h3{font-size:31px}
  .steps{grid-template-columns:1fr;gap:40px}
  .steps::before{display:none}
  .step .dot{margin-bottom:18px}
  .cells{grid-template-columns:1fr}
  .cell,.cell:nth-child(even){padding:26px 0;border-left:none}
  .f-grid{grid-template-columns:1fr;gap:40px;padding:56px 0 48px}
  .form-row{grid-template-columns:1fr}
  .sec-head{margin-bottom:44px}
  .menu-links a{font-size:30px}
}
@media (max-width:640px){
  .hero{padding:130px 0 56px}
  .hero-eyebrow{letter-spacing:2.5px;font-size:10px;gap:10px}
  .hero-rule{width:22px}
  .lead{font-size:16px}
  .btn{padding:15px 30px;font-size:14px}
  .cta .csub{font-size:15px}
  .form-wrap{margin-top:60px;padding-top:40px}
}

/* ── Animated archway mark ──────────────────────────────────────────────────
   Motion spec: design_handoff_animated_logo/reference/"NovaHR Animated Logo.html"

   Progressive by construction: the inline SVG ships the complete static mark
   including <circle class="nova-svg-disc">. The HTML disc and its animation exist
   ONLY inside (prefers-reduced-motion: no-preference), so reduced-motion, print
   and forced-colors resolve to the mark that is live today. No JS, no flash.

   Scale-independent: the only input is --nl-size. Every offset is a percentage of
   that box written as <svg unit>/120, so geometry is exact at any render size. */
.nova-logo{
  position:relative;
  display:block;              /* required — a bare inline span renders 0x0 */
  flex-shrink:0;
  width:var(--nl-size,26px);
  height:var(--nl-size,26px); /* must be definite: % children resolve against it */
  perspective:500px;          /* per spec, but INERT: .nova-disc-wrap is
                                 transform-style:flat and flattens its subtree, so the
                                 flip renders orthographically (cos-theta squash) — as it
                                 does in the designer's own 220px reference. Verified:
                                 flat+perspective and no-perspective both render 8.797px
                                 at rotateY(60deg); preserve-3d would render 9.871px.
                                 Do NOT add transform-style:preserve-3d to the wrapper. */
}
.nova-logo > svg{display:block;width:100%;height:100%}

/* 48/120, 70/120, 24/120 → bbox x48..72 y70..94 === the circle it replaces */
.nova-disc-wrap{
  display:none;               /* enabled only in the no-preference block below */
  position:absolute;
  left:calc(100% * 48 / 120);
  top:calc(100% * 70 / 120);
  width:calc(100% * 24 / 120);
  height:calc(100% * 24 / 120);
  transform-origin:50% 100%;
}
.nova-disc{
  display:block;              /* required — an inline span renders 0-width */
  width:100%;height:100%;
  border-radius:50%;
  background:var(--gold);
  /* NEVER add backface-visibility:hidden — Blink culls back-facing elements even
     under a flat ancestor, blanking the disc for half of every flip. */
}

/* The two real marks: nav header and footer. Sizes match what shipped before, so
   the static rendering is unchanged — only the disc now animates on load. */
.nav .nova-logo{--nl-size:40px}
.footer .nova-logo{--nl-size:36px}
/* Footer sits on emerald: cream arch, gold-light disc. */
.nova-logo-rev .nova-disc{background:var(--gold2)}

@media (prefers-reduced-motion:no-preference){
  .nova-logo .nova-svg-disc{display:none}   /* SVG circle out, HTML disc in */
  /* Loops continuously, per the design handoff's default and the owner's decision.
     Note: auto-playing motion beyond 5s is in scope for WCAG 2.2.2 (Pause, Stop,
     Hide, Level A), which would want a pause control; prefers-reduced-motion below
     is the mitigation in place. Switch `infinite` -> `1` to make it play once.
     Timing function deliberately absent so it resets to the default `ease`, exactly
     as the prototype does — discSpin has no per-keyframe easing and depends on it. */
  .nova-disc-wrap{display:block;animation:discBounce 2.6s infinite both}
  .nova-disc{animation:discSpin 2.6s infinite both}
}

@keyframes discBounce{
  0%{transform:translateY(0) scaleX(1) scaleY(1);animation-timing-function:cubic-bezier(.4,0,.7,.4)}
  8%{transform:translateY(calc(100% * 2 / 44)) scaleX(1.1) scaleY(.88);animation-timing-function:cubic-bezier(.2,.6,.35,1)}
  42%{transform:translateY(-100%) scaleX(.97) scaleY(1.03);animation-timing-function:cubic-bezier(.55,0,.85,.55)}
  72%{transform:translateY(0) scaleX(1) scaleY(1);animation-timing-function:linear}
  80%{transform:translateY(calc(100% * 2 / 44)) scaleX(1.14) scaleY(.82);animation-timing-function:cubic-bezier(.2,.6,.35,1)}
  90%{transform:translateY(calc(100% * -3 / 44)) scaleX(.99) scaleY(1.01)}
  100%{transform:translateY(0) scaleX(1) scaleY(1)}
}
@keyframes discSpin{0%,10%{transform:rotateY(0)}72%,100%{transform:rotateY(360deg)}}

/* Must stay AFTER the no-preference block — equal specificity, source order decides. */
@media (forced-colors:active){.nova-logo .nova-svg-disc{display:block}.nova-disc-wrap{display:none}}
@media print{.nova-logo .nova-svg-disc{display:block}.nova-disc-wrap{display:none}}