/* NCG design system v2 - extension layer for nunnaconsulting.com (root + /NunnaRao/) and nunnarao.com.
   Loads AFTER assets/site.css. /NAIC never loads this file (it matches the same tokens through site.css alone).
   Language: shadcn-like cards, Magic-UI/Motion-style CSS micro-interactions, Aceternity-like hero spotlight. CSS only, no libraries.
   Type scale (shared with site.css): display clamp(2.3-4.6rem) / h2 clamp(1.7-2.7rem) / h3 1.25rem / body 1rem / small .875rem / mono eyebrow .75rem.
   Motion: ease cubic-bezier(.2,.7,.2,1); reveal 800ms; hover lift 4px; every animation is off under prefers-reduced-motion. */
/* Self-hosted fonts (SIL OFL): Fraunces (variable: opsz 9-144, wght 500-600), Inter (variable 400-600), JetBrains Mono 500. Latin subset. Preloaded in <head> so text never reflows. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500 600;font-display:swap;src:url(/ext/fonts/Fraunces.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(/ext/fonts/Inter.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/ext/fonts/JetBrainsMono-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@property --beam{syntax:"<angle>";initial-value:0deg;inherits:false}

/* ---- Nunna Rao sub-brand: warm, executive, editorial ---- */
[data-brand="nunnarao"]{--bg:#0b1020;--bg2:#10172b;--surface:#151d34;--surface2:#1b2540;--accent:#e6b455;--accent2:#ffdc95;--on-accent:#0e1426;--accent-soft:rgba(230,180,85,.12);--font-display:"Fraunces",Georgia,serif}
:root[data-theme="light"][data-brand="nunnarao"]{--bg:#fbf7ef;--bg2:#f3ecdd;--surface:#fffdf8;--surface2:#f6efe0;--line:rgba(60,40,10,.12);--line2:rgba(60,40,10,.22);--ink:#1b1510;--muted:#4f4538;--faint:#62574a;--accent:#7a5710;--accent2:#a87a14;--on-accent:#fff;--btn:#7a5710;--accent-soft:rgba(122,87,16,.09);--shadow:0 24px 50px -28px rgba(60,40,10,.35)}
@media (prefers-color-scheme: light){:root:not([data-theme])[data-brand="nunnarao"]{--bg:#fbf7ef;--bg2:#f3ecdd;--surface:#fffdf8;--surface2:#f6efe0;--line:rgba(60,40,10,.12);--line2:rgba(60,40,10,.22);--ink:#1b1510;--muted:#4f4538;--faint:#62574a;--accent:#7a5710;--accent2:#a87a14;--on-accent:#fff;--btn:#7a5710;--accent-soft:rgba(122,87,16,.09);--shadow:0 24px 50px -28px rgba(60,40,10,.35)}}
[data-brand="nunnarao"] h1,[data-brand="nunnarao"] h2{font-weight:500;letter-spacing:-.015em}
[data-brand="nunnarao"] .lead{font-family:var(--font-display);font-weight:400;font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.55}
/* NCG umbrella: gold on ink; light = cool paper */
:root[data-theme="light"][data-brand="ncg"]{--bg:#f8f7f3;--bg2:#efede6;--surface:#fff}
@media (prefers-color-scheme: light){:root:not([data-theme])[data-brand="ncg"]{--bg:#f8f7f3;--bg2:#efede6;--surface:#fff}}
:root{--r-xl:28px}

/* ---- hero spotlight (Aceternity-like): grid + pointer-following light, pure CSS vars set by ds.js ---- */
.hero.spot{--sx:72%;--sy:18%}
.hero.spot::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(560px circle at var(--sx) var(--sy),color-mix(in srgb,var(--accent) 22%,transparent),transparent 62%);pointer-events:none}
.hero .grid-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 70% 20%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 70% 20%,#000 20%,transparent 75%);opacity:.55}
.hero-split{display:grid;gap:2.5rem;align-items:center}
@media(min-width:900px){.hero-split{grid-template-columns:1.25fr .75fr}}
.hero .btn-primary,.btn-shine{position:relative;overflow:hidden}
.btn-shine::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);animation:shine 4.5s var(--ease) 1.2s infinite}
@keyframes shine{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.badge{display:inline-flex;align-items:center;gap:.5rem;font:500 .74rem var(--font-mono);letter-spacing:.08em;padding:.35rem .8rem;border:1px solid var(--line2);border-radius:99px;color:var(--muted);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:ping 2.4s infinite}
@keyframes ping{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---- cards: shadcn-like surface + border-beam (Magic UI) ---- */
.beam{position:relative;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line);padding:clamp(1.4rem,3vw,2.2rem);overflow:hidden;isolation:isolate;display:flex;flex-direction:column;color:inherit;text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s}
.beam::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--beam),transparent 0 70%,var(--accent) 85%,var(--accent2) 92%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:beam 7s linear infinite;pointer-events:none;opacity:.9;z-index:-1}
.beam::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),var(--accent-soft),transparent 60%);opacity:0;transition:opacity .3s;z-index:-1}
.beam:hover{transform:translateY(-4px);box-shadow:var(--shadow);color:inherit}
.beam:hover::before{opacity:1}
@keyframes beam{to{--beam:360deg}}
.beam h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:.5rem}
.beam p{color:var(--muted)}
.beam .more{margin-top:auto;padding-top:1rem;color:var(--accent);font-weight:600}
.beam .kicker{font:500 .72rem var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.8rem}
.bento{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
@media(min-width:900px){.bento.b6{grid-template-columns:repeat(6,1fr)}.bento.b6>.s2{grid-column:span 2}.bento.b6>.s3{grid-column:span 3}.bento.b6>.s4{grid-column:span 4}}

/* ---- marquee (suite strip) ---- */
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq-track{display:flex;gap:.8rem;width:max-content;animation:marq 42s linear infinite}
.marq:hover .marq-track,.marq:focus-within .marq-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(calc(-50% - .4rem))}}
.pill{display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.1rem;border-radius:99px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);text-decoration:none;font-weight:600;font-size:.92rem;white-space:nowrap;transition:border-color .25s,transform .25s var(--ease)}
.pill:hover{color:var(--ink);border-color:var(--accent);transform:translateY(-2px)}
.pill small{font:500 .68rem var(--font-mono);color:var(--faint);letter-spacing:.06em;text-transform:uppercase}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.pill.tool{border-style:dashed}

/* ---- portrait placeholder (owner supplies the real photo) ---- */
.portrait{position:relative;width:min(100%,360px);aspect-ratio:4/5;margin-inline:auto;border-radius:180px 180px var(--r-xl) var(--r-xl);border:1px solid var(--line2);background:radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--accent) 24%,var(--surface)),var(--surface) 70%);display:grid;place-items:center;overflow:hidden;box-shadow:var(--shadow)}
.portrait::after{content:"";position:absolute;inset:10px;border-radius:inherit;border:1px dashed var(--line2);pointer-events:none}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait .mono-nr{font:500 clamp(4rem,12vw,6.5rem)/1 var(--font-display);color:var(--accent);letter-spacing:-.04em}
.portrait figcaption{position:absolute;bottom:1.1rem;left:0;right:0;text-align:center;font:500 .72rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

/* ---- facts strip / status ---- */
.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.facts>div{background:var(--surface);padding:1.1rem 1.3rem}
.facts b{display:block;font:600 1.05rem var(--font-display)}.facts span{font-size:.85rem;color:var(--muted)}
.st{display:inline-block;font:500 .66rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;padding:.15rem .5rem;border-radius:99px;border:1px solid var(--line2);color:var(--muted);vertical-align:middle}
.st.v{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
:root[data-theme="light"] .st.v{color:#0a7a4f}
.ph{border:1px dashed var(--line2);border-radius:var(--r-lg);padding:1.6rem;background:var(--accent-soft);color:var(--muted)}
.ph b{display:block;color:var(--ink);font:600 1.05rem var(--font-display);margin-bottom:.3rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.6rem}
.chips button{font:500 .85rem var(--font-body);padding:.5rem .95rem;min-height:40px;border-radius:99px;border:1px solid var(--line2);background:transparent;color:var(--muted);cursor:pointer;transition:all .2s}
.chips button:hover{border-color:var(--accent);color:var(--ink)}
.chips button[aria-pressed="true"]{background:var(--btn,var(--accent));color:var(--on-accent);border-color:transparent}

/* ---- career timeline (scroll + keyboard) ---- */
.tl{position:relative;list-style:none;margin:0;padding:0 0 0 2.2rem;--p:0}
.tl::before{content:"";position:absolute;left:.62rem;top:.4rem;bottom:.4rem;width:2px;background:var(--line2);border-radius:2px}
.tl::after{content:"";position:absolute;left:.62rem;top:.4rem;width:2px;height:calc((100% - .8rem)*var(--p));background:linear-gradient(var(--accent),var(--accent2));border-radius:2px}
.tl>li{position:relative;padding:0 0 1.4rem}
.tl>li[hidden]{display:none}
.tl>li::before{content:"";position:absolute;left:-1.92rem;top:1.15rem;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--line2);transition:all .35s var(--ease);z-index:1}
.tl>li.on::before{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 6px var(--accent-soft)}
.tl-btn{width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.1rem 1.3rem;color:var(--ink);font:inherit;cursor:pointer;transition:border-color .3s,transform .35s var(--ease),box-shadow .35s}
.tl-btn:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));transform:translateX(4px)}
.tl-btn[aria-expanded="true"]{border-color:var(--accent);box-shadow:var(--shadow)}
.tl-era{display:block;font:500 .7rem var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.35rem}
.tl-t{display:block;font:600 1.15rem/1.25 var(--font-display)}
.tl-when{display:block;font-size:.85rem;color:var(--faint);margin-top:.25rem}
.tl-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.tl-body>div{overflow:hidden}
.tl-btn[aria-expanded="true"]+.tl-body{grid-template-rows:1fr}
.tl-body p{margin:.9rem 0 0;color:var(--muted);padding:0 1.3rem}
.tl-body p:last-child{padding-bottom:.2rem}
.tl-body a{font-size:.85rem}
.tl-note{margin-top:1.4rem}

/* ---- knowledge graph (SVG) ---- */
.gv{display:grid;gap:1.2rem}
@media(min-width:1000px){.gv{grid-template-columns:1fr 320px}}
.gv-stage{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;touch-action:none;cursor:grab;min-height:440px}
.gv-stage:active{cursor:grabbing}
.gv-stage svg{width:100%;height:min(76vh,720px);display:block}
.gv-tools{position:absolute;right:.8rem;top:.8rem;display:flex;gap:.4rem;z-index:2}
.gv-tools button{width:40px;height:40px;border-radius:10px;border:1px solid var(--line2);background:var(--bg);color:var(--ink);font:600 1.1rem var(--font-body);cursor:pointer}
.gv-tools button:hover{border-color:var(--accent)}
.gv .edge{stroke:var(--line2);stroke-width:1.3;fill:none;transition:stroke .25s,opacity .25s}
.gv .node{cursor:pointer;outline:none;transition:opacity .25s}
.gv .node circle{fill:var(--surface2);stroke:var(--c,var(--accent));stroke-width:2;transition:r .25s var(--ease),fill .25s}
.gv .node text{fill:var(--ink);font:500 15px var(--font-body);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.gv .node.ctr text{font:600 22px var(--font-display)}
.gv .node:hover circle,.gv .node:focus-visible circle,.gv .node.sel circle{fill:var(--c,var(--accent))}
.gv .node:focus-visible circle{stroke-width:4}
.gv.dim .node:not(.hl){opacity:.18}.gv.dim .edge:not(.hl){opacity:.08}
.gv .edge.hl{stroke:var(--accent);stroke-width:2.2}
.gv .node.off,.gv .edge.off{display:none}
.gv-side{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:1.3rem;align-self:start}
.gv-side h3{margin:.3rem 0 .4rem}.gv-side p{color:var(--muted);font-size:.93rem}
.gv-legend{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.1rem}
.gv-legend button{display:inline-flex;align-items:center;gap:.45rem;font:500 .8rem var(--font-body);padding:.4rem .75rem;min-height:36px;border-radius:99px;border:1px solid var(--line2);background:transparent;color:var(--muted);cursor:pointer}
.gv-legend button i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.gv-legend button[aria-pressed="false"]{opacity:.5;text-decoration:line-through}
.gv-text summary{cursor:pointer;font-weight:600;padding:.6rem 0}
.gv-text ul{columns:2;column-gap:2rem;padding-left:1.1rem;color:var(--muted);font-size:.9rem}
@media(max-width:620px){.gv-text ul{columns:1}}

/* ---- media kit / bios ---- */
.bio{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem 1.5rem;position:relative}
.bio h3{display:flex;justify-content:space-between;gap:1rem;align-items:center;font-size:1.05rem}
.bio p{color:var(--muted);margin:.7rem 0 0}
.copy{font:600 .8rem var(--font-body);padding:.4rem .8rem;min-height:36px;border-radius:99px;border:1px solid var(--line2);background:transparent;color:var(--ink);cursor:pointer}
.copy:hover{border-color:var(--accent)}
.topic{border-left:2px solid var(--accent);padding-left:1.1rem}
.topic h3{margin-bottom:.3rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ftr .brandline{font:500 .72rem var(--font-mono);letter-spacing:.1em;color:var(--faint);text-transform:uppercase}

@media (prefers-reduced-motion:reduce){
  .beam::after,.btn-shine::after,.marq-track,.badge i{animation:none!important}
  .marq{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .marq-track{flex-wrap:wrap;width:auto}.marq-track [aria-hidden="true"]{display:none}
  .tl-body,.tl-btn,.gv .node circle{transition:none}
}
@media print{.beam::after{display:none}}

/* header fit: long nav labels never wrap */
.nav a,.hdr .btn{white-space:nowrap}
@media(min-width:981px) and (max-width:1180px){.nav a{padding:.5rem .45rem;font-size:.85rem}}
.gv .node text{font-size:19px}

/* ---- W10 colour + imagery layer (nunnarao brand and NCG): aurora, hue-coded cards, photo portrait, logo card, credits ---- */
.aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;width:46vw;max-width:620px;aspect-ratio:1;border-radius:50%;filter:blur(70px);opacity:.34;will-change:transform;animation:drift 22s ease-in-out infinite alternate}
.aurora i:nth-child(1){background:#2dd4bf;left:-8%;top:-18%}
.aurora i:nth-child(2){background:#8b5cf6;right:-6%;top:6%;animation-duration:27s;animation-delay:-6s}
.aurora i:nth-child(3){background:#fb7185;left:34%;bottom:-34%;animation-duration:31s;animation-delay:-12s;opacity:.22}
:root[data-theme="light"] .aurora i{opacity:.2}
:root[data-theme="light"] .aurora i:nth-child(3){opacity:.14}
@media (prefers-color-scheme: light){:root:not([data-theme]) .aurora i{opacity:.2}}
@keyframes drift{to{transform:translate3d(6vw,4vh,0) scale(1.12)}}
.hero h1 em{background-size:220% 100%;animation:hue 9s ease-in-out infinite alternate}
[data-brand="nunnarao"] .hero h1 em{background-image:linear-gradient(100deg,var(--accent),var(--accent2) 35%,#5eead4 70%,var(--accent))}
:root[data-theme="light"][data-brand="nunnarao"] .hero h1 em{background-image:linear-gradient(100deg,#7a5710,#a87a14 35%,#0f766e 70%,#7a5710)}
@keyframes hue{to{background-position:100% 0}}
/* hue-coded cards: each card gets its own accent; icon chip, hover glow and top rule follow it */
[data-brand] .grid>.card,[data-brand] .bento>.card{--h:var(--accent)}
:is(.grid,.bento)>.card:nth-child(6n+1){--h:#2dd4bf}
:is(.grid,.bento)>.card:nth-child(6n+2){--h:#a78bfa}
:is(.grid,.bento)>.card:nth-child(6n+3){--h:#fb7185}
:is(.grid,.bento)>.card:nth-child(6n+4){--h:#f59e0b}
:is(.grid,.bento)>.card:nth-child(6n+5){--h:#38bdf8}
:is(.grid,.bento)>.card:nth-child(6n+6){--h:#4ade80}
:root[data-theme="light"] :is(.grid,.bento)>.card:nth-child(6n+1){--h:#0f766e}
:root[data-theme="light"] :is(.grid,.bento)>.card:nth-child(6n+2){--h:#6d28d9}
:root[data-theme="light"] :is(.grid,.bento)>.card:nth-child(6n+3){--h:#be123c}
:root[data-theme="light"] :is(.grid,.bento)>.card:nth-child(6n+4){--h:#b45309}
:root[data-theme="light"] :is(.grid,.bento)>.card:nth-child(6n+5){--h:#0369a1}
:root[data-theme="light"] :is(.grid,.bento)>.card:nth-child(6n+6){--h:#15803d}
[data-brand="nunnarao"] :is(.grid,.bento)>.card .ico{color:var(--h);background:color-mix(in srgb,var(--h) 14%,transparent);border-color:color-mix(in srgb,var(--h) 35%,transparent)}
[data-brand="nunnarao"] :is(.grid,.bento)>.card::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--h),transparent 70%);opacity:.8;transform:scaleX(.25);transform-origin:left;transition:transform .5s var(--ease)}
[data-brand="nunnarao"] :is(.grid,.bento)>.card:hover::after{transform:scaleX(1)}
[data-brand="nunnarao"] :is(.grid,.bento)>.card:hover{border-color:color-mix(in srgb,var(--h) 60%,var(--line));box-shadow:0 18px 50px -22px var(--h)}
[data-brand="nunnarao"] .card::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--h,var(--accent)) 18%,transparent),transparent 60%)}
[data-brand="nunnarao"] .eyebrow{background:linear-gradient(90deg,var(--accent),#5eead4);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="light"][data-brand="nunnarao"] .eyebrow{background:linear-gradient(90deg,#7a5710,#0f766e);-webkit-background-clip:text;background-clip:text}
.tl>li.on::before{background:linear-gradient(135deg,var(--accent),#5eead4);border-color:transparent}
.tl::after{background:linear-gradient(var(--accent),#5eead4,#a78bfa)}
.tl>li:nth-child(4n+2) .tl-era{color:#5eead4}
.tl>li:nth-child(4n+3) .tl-era{color:#c4b5fd}
.tl>li:nth-child(4n+4) .tl-era{color:#fda4af}
:root[data-theme="light"] .tl>li:nth-child(4n+2) .tl-era{color:#0f766e}
:root[data-theme="light"] .tl>li:nth-child(4n+3) .tl-era{color:#6d28d9}
:root[data-theme="light"] .tl>li:nth-child(4n+4) .tl-era{color:#be123c}
/* photo portrait: real headshot, modest size (source is 413 px wide) */
.portrait.photo{width:min(100%,330px);background:var(--surface);padding:0}
.portrait.photo::after{display:none}
.portrait.photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;border-radius:inherit}
.portrait.photo::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:conic-gradient(from var(--beam),#2dd4bf,var(--accent),#fb7185,#8b5cf6,#2dd4bf);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:beam 9s linear infinite;z-index:2;pointer-events:none}
.avatar{position:absolute;right:-.6rem;bottom:1.4rem;z-index:3}
.avatar-btn{display:grid;place-items:center;width:92px;height:92px;border-radius:50%;border:2px solid var(--accent);background:var(--surface);color:var(--ink);cursor:pointer;overflow:hidden;box-shadow:var(--shadow);font:600 1.2rem var(--font-display)}
.avatar-btn img{width:100%;height:100%;object-fit:cover;grid-area:1/1}
.avatar-btn small{grid-area:1/1;align-self:end;background:var(--bg);font:500 .6rem var(--font-mono);letter-spacing:.08em;padding:.12rem .5rem;border-radius:99px;margin-bottom:.35rem}
.avatar.live{position:fixed;width:min(92vw,360px);height:min(70vh,420px);right:1rem;bottom:1rem;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line2);box-shadow:var(--shadow);overflow:hidden}
.avatar.live model-viewer{width:100%;height:100%;--poster-color:transparent}
.avatar .x{position:absolute;right:.5rem;top:.5rem;z-index:2}
.logo-card{display:inline-grid;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line2);box-shadow:var(--shadow);width:min(100%,220px)}
.logo-card img{width:100%;height:auto}
.only-light{display:none}
:root[data-theme="light"] .only-dark{display:none}
:root[data-theme="light"] .only-light{display:block}
@media (prefers-color-scheme: light){:root:not([data-theme]) .only-dark{display:none}:root:not([data-theme]) .only-light{display:block}}
.credit{font-size:.8rem;color:var(--faint);margin-top:.5rem}
.photo-card{display:grid;gap:.8rem;justify-items:start}
.photo-card img{border-radius:var(--r-lg);border:1px solid var(--line2);width:210px;height:auto}
.rule{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--accent),#5eead4,transparent);opacity:.5;margin:0}
@media (prefers-reduced-motion:reduce){.aurora i,.hero h1 em,.portrait.photo::before{animation:none!important}}

/* ---- W11 portrait + graphics layer (/NunnaRao/ and nunnarao.com): avatar badges, framed + cut-out portraits, watermark, industry icons, region globe, flows ---- */
.av{display:inline-block;width:var(--s,56px);height:var(--s,56px);border-radius:50%;overflow:hidden;border:2px solid var(--accent);box-shadow:0 0 0 4px var(--accent-soft);flex:none;background:var(--surface);vertical-align:middle}
.av picture,.av img{display:block;width:100%;height:100%;object-fit:cover}
.byline{display:flex;align-items:center;gap:.8rem}
.byline b{display:block;font:500 1.05rem var(--font-display)}
.byline small{display:block;color:var(--faint);font-size:.82rem}
/* framed portrait card: gold corner brackets, caption plate */
.frame{position:relative;margin:0 auto;width:min(100%,300px);padding:12px;border-radius:var(--r-xl) var(--r-xl) var(--r-lg) var(--r-lg);background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 38%,var(--surface)),var(--surface) 62%);border:1px solid var(--line2);box-shadow:var(--shadow)}
.frame .fr-img{overflow:hidden;border-radius:calc(var(--r-xl) - 8px) calc(var(--r-xl) - 8px) calc(var(--r-lg) - 6px) calc(var(--r-lg) - 6px);line-height:0}
.frame img{width:100%;height:auto;display:block}
.frame i{position:absolute;width:22px;height:22px;border:2px solid var(--accent);opacity:.85;pointer-events:none}
.frame .c1{left:-7px;top:-7px;border-right:0;border-bottom:0;border-top-left-radius:10px}
.frame .c2{right:-7px;top:-7px;border-left:0;border-bottom:0;border-top-right-radius:10px}
.frame .c3{left:-7px;bottom:-7px;border-right:0;border-top:0;border-bottom-left-radius:10px}
.frame .c4{right:-7px;bottom:-7px;border-left:0;border-top:0;border-bottom-right-radius:10px}
.frame figcaption{position:absolute;left:50%;bottom:-.9rem;transform:translateX(-50%);white-space:nowrap;background:var(--bg);border:1px solid var(--line2);border-radius:99px;padding:.3rem .9rem;font:500 .68rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.frame .credit{display:block;text-align:center;margin-top:1.4rem}
/* cut-out portrait with soft glow and a slow ring */
.cut{position:relative;margin:0 auto;width:min(100%,var(--w,300px));isolation:isolate}
.cut::before{content:"";position:absolute;inset:6% 2% 0;z-index:-1;border-radius:50%/42% 42% 18% 18%;background:radial-gradient(closest-side at 50% 36%,color-mix(in srgb,var(--accent) 60%,transparent),transparent 74%);filter:blur(22px);opacity:.8}
.cut-ring{position:absolute;left:8%;right:8%;top:2%;aspect-ratio:1;z-index:-1;border-radius:50%;padding:2px;background:conic-gradient(from var(--beam),transparent 0 55%,var(--accent) 80%,#5eead4 92%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:beam 12s linear infinite}
.cut img{width:100%;height:auto;display:block;filter:drop-shadow(0 16px 26px rgba(0,0,0,.38)) drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 30%,transparent));-webkit-mask-image:linear-gradient(#000 84%,transparent);mask-image:linear-gradient(#000 84%,transparent)}
.chip{position:absolute;background:var(--surface);border:1px solid var(--line2);border-radius:99px;padding:.3rem .8rem;font:500 .7rem var(--font-mono);letter-spacing:.06em;color:var(--ink);box-shadow:var(--shadow);animation:bob 6s ease-in-out infinite alternate}
.cut .c1{left:-4%;top:16%}.cut .c2{right:-6%;top:44%;animation-delay:-2s}.cut .c3{left:-2%;bottom:14%;animation-delay:-4s}
@keyframes bob{to{transform:translateY(-8px)}}
/* hero asides on compact page heroes */
.h-aside{width:min(100%,250px);margin-inline:auto}
.h-aside .frame{width:min(100%,240px)}
.ring-av{position:relative;display:grid;place-items:center;width:200px;height:200px;margin-inline:auto}
.ring-av .av{--s:150px;position:relative;z-index:1}
.ring-o{position:absolute;inset:0;border-radius:50%;padding:3px;background:conic-gradient(from var(--beam),#2dd4bf,var(--accent),#fb7185,#8b5cf6,#2dd4bf);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:beam 9s linear infinite}
.hero.compact .hero-split{gap:1.5rem}
@media(max-width:899px){.hero.compact .h-aside{width:150px}.hero.compact .h-aside .frame{width:150px;padding:8px}.hero.compact .h-aside .frame figcaption{display:none}.hero.compact .cut{--w:150px!important}.hero.compact .ring-av{transform:scale(.7);margin-block:-1.6rem}}
/* divider with avatar */
.nr-div{display:flex;align-items:center;gap:1rem;max-width:1100px;margin:0 auto;padding:0 1.25rem}
.nr-div i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--accent),#5eead4,transparent);opacity:.55}
/* silhouette watermark */
section[data-wm]{position:relative;overflow:hidden}
section[data-wm]>.wrap{position:relative}
section[data-wm]::before{content:"";position:absolute;top:50%;width:min(34vw,290px);aspect-ratio:207/266;transform:translateY(-50%);background:linear-gradient(160deg,var(--accent),#5eead4);opacity:.07;-webkit-mask:url(/ext/img/nr-sil.webp) center/contain no-repeat;mask:url(/ext/img/nr-sil.webp) center/contain no-repeat;pointer-events:none}
section[data-wm="r"]::before{right:2%}section[data-wm="l"]::before{left:2%}
:root[data-theme="light"] section[data-wm]::before{opacity:.09}
@media(max-width:700px){section[data-wm]::before{width:150px;opacity:.05}}
/* meet band: cut-out + copy on a gradient */
.meet{display:grid;gap:2rem;align-items:center;border:1px solid var(--line2);border-radius:var(--r-xl);padding:clamp(1.4rem,4vw,2.6rem);background:radial-gradient(900px circle at 85% 20%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),linear-gradient(135deg,var(--surface2),var(--surface));overflow:hidden}
@media(min-width:860px){.meet{grid-template-columns:.8fr 1.2fr}.meet.flip{grid-template-columns:1.2fr .8fr}.meet.flip .cut{order:2}}
.meet .cut{--w:300px}
/* industry tiles: line icons draw in */
.ind{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media(min-width:900px){.ind.four{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:480px){.ind{grid-template-columns:1fr}}
.ind-t{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:1.3rem;display:grid;gap:.45rem;justify-items:start;transition:border-color .3s,transform .3s var(--ease)}
.ind-t:hover{border-color:var(--accent)}
.ind-t svg{width:64px;height:64px;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ind-t:nth-child(2) svg{stroke:#5eead4}.ind-t:nth-child(3) svg{stroke:#c4b5fd}.ind-t:nth-child(4) svg{stroke:#fda4af}
:root[data-theme="light"] .ind-t:nth-child(2) svg{stroke:#0f766e}:root[data-theme="light"] .ind-t:nth-child(3) svg{stroke:#6d28d9}:root[data-theme="light"] .ind-t:nth-child(4) svg{stroke:#be123c}
.ind-t b{font:500 1.05rem var(--font-display)}.ind-t span{color:var(--muted);font-size:.9rem}
.ind-t .d{stroke-dasharray:1;stroke-dashoffset:0}
html.js .ind-t:not(.in) .d{stroke-dashoffset:1}
.ind-t.in .d{transition:stroke-dashoffset 1.8s var(--ease) .15s}
/* dotted globe */
.globe-wrap{display:grid;justify-items:center;gap:.6rem;text-align:center}
.globe{width:min(100%,340px);height:auto;overflow:visible}
.globe path{fill:none;stroke-linecap:round}
.globe .g0{stroke:var(--faint);stroke-width:2.2;opacity:.5}
.globe .g1{stroke-width:3.6}
.globe .gi{stroke:#fb7185}.globe .gm{stroke:#5eead4}.globe .ge{stroke:#a78bfa}
:root[data-theme="light"] .globe .gi{stroke:#be123c}:root[data-theme="light"] .globe .gm{stroke:#0f766e}:root[data-theme="light"] .globe .ge{stroke:#6d28d9}
.globe .lnk{stroke:var(--accent);stroke-width:1.6;stroke-dasharray:4 6;animation:march 1.6s linear infinite;opacity:.9}
.globe .pin circle{fill:var(--accent)}.globe .pin .pulse{fill:var(--accent);opacity:.5;transform-box:fill-box;transform-origin:center;animation:ping 2.8s ease-out infinite}
.globe .pin text{font:600 12px Inter,sans-serif;fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:3px}
@keyframes march{to{stroke-dashoffset:-20}}
@keyframes ping{0%{transform:scale(1);opacity:.6}100%{transform:scale(4);opacity:0}}
/* animated process flow */
.flow{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.flow li{position:relative;display:grid;justify-items:center;text-align:center;gap:.3rem}
.flow .fl-n .ico{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;animation:glow 4.5s ease-in-out infinite;animation-delay:calc(var(--i)*.7s)}
.flow .fl-n .ico svg{width:26px;height:26px}
.flow b{font:500 1rem var(--font-display)}.flow small{color:var(--muted);font-size:.84rem;max-width:18ch}
@keyframes glow{0%,70%,100%{box-shadow:0 0 0 0 transparent}35%{box-shadow:0 0 0 10px var(--accent-soft)}}
@media(min-width:760px){.flow{grid-template-columns:repeat(var(--n,5),1fr)}.flow li::after{content:"";position:absolute;top:28px;left:calc(50% + 38px);width:calc(100% - 76px);height:2px;background:repeating-linear-gradient(90deg,var(--accent) 0 7px,transparent 7px 14px);background-size:14px 2px;animation:slide 1.1s linear infinite;opacity:.7}.flow li:last-child::after{display:none}}
@keyframes slide{to{background-position:14px 0}}
/* 90-day cadence ring */
.cad{margin:0 auto;width:min(100%,260px);text-align:center}
.cad svg{width:100%;height:auto;overflow:visible}
.cad circle{fill:none}.cad .cr0{stroke:var(--line2);stroke-width:8}
.cad .cr1{stroke:var(--accent);stroke-width:8;stroke-linecap:round;stroke-dasharray:.25 .75;transform:rotate(-90deg);transform-origin:100px 100px;animation:spin 14s linear infinite}
.cad .ct line{stroke:var(--accent2);stroke-width:2.4;stroke-linecap:round;opacity:.35;animation:tick 6.5s linear infinite;animation-delay:calc(var(--i)*.5s)}
@keyframes spin{to{transform:rotate(270deg)}}
@keyframes tick{0%,12%,100%{opacity:.3}4%{opacity:1}}
.cad .c-t{font:500 22px var(--font-display);fill:var(--ink)}.cad .c-s{font:500 11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;fill:var(--faint)}
.cad figcaption{font-size:.85rem;color:var(--muted);margin-top:.5rem}
/* skyline strip */
.sky{display:block;width:100%;height:clamp(70px,12vw,120px)}
.sky .bld rect{fill:color-mix(in srgb,var(--accent) 16%,transparent)}
.sky .crane path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.sky .hook{animation:hook 5s ease-in-out infinite alternate}
@keyframes hook{to{transform:translateY(18px)}}
/* timeline + graph heads */
.tl-head{display:flex;align-items:center;gap:1rem;margin:0 0 1.6rem;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.tl-head small{display:block;color:var(--muted)}
.gv-side .av{margin-bottom:.8rem}
.plate-row{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:start}
.dl-card{display:grid;gap:.7rem;justify-items:start;margin:0}
.dl-card .cut,.dl-card .frame{margin:0}
.dl-card .tr{background:repeating-conic-gradient(color-mix(in srgb,var(--faint) 25%,transparent) 0 25%,transparent 0 50%) 0 0/16px 16px;border-radius:var(--r-lg);padding:.6rem}
@media (prefers-reduced-motion:reduce){.chip,.cut-ring,.ring-o,.globe .lnk,.globe .pulse,.flow li::after,.flow .ico,.cad .cr1,.cad .ct line,.sky .hook{animation:none!important}.ind-t .d{transition:none!important;stroke-dashoffset:0!important}}