/* claritycascade.com: shared styles for index.html and learning-platform.html */
@font-face{font-family:"Roboto";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/roboto-300.woff2") format("woff2"),url("../fonts/roboto-300.woff") format("woff")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/roboto-400.woff2") format("woff2"),url("../fonts/roboto-400.woff") format("woff")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/roboto-700.woff2") format("woff2"),url("../fonts/roboto-700.woff") format("woff")}
/* Layout: a launch-plan dossier for an AI and program-management leader.
   Asymmetric editorial grid. The hero pairs a serif thesis with a Gantt-and-graph plan view.
   Cards only where items are selectable; hairlines only between real groups. */
:root{
  /* Three colors from the corporate design system: brand navy (ink), primary blue (accent) and secondary purple
     (accent-2, used for AI). Neutrals are the navy ramp. Round 21 switched the site to this palette. */
  --paper:#FAFBFF;
  --paper-2:#F1F3FF;
  --surface:#FFFFFF;
  --ink:#071D49;
  --text:#24304F;
  --muted:#475E9D;
  --rule:#DEE4F6;
  --rule-strong:#C8D2EF;
  --accent:#005BDB;
  --accent-bright:#0066F5;
  --accent-soft:#ECF3FA;
  --accent-2:#8A2ECC;
  --accent-2-bright:#A86BDE;
  --accent-2-soft:#F1EAFA;
  --bar:#071D49;
  --bar-soft:#A6B5E0;
  --band:#071D49;
  --band-2:#0B2558;
  --band-text:#F1F3FF;
  --band-muted:#A6B5E0;
  --band-rule:#1E3873;
  --band-accent:#77B9F9;
  --overlay:rgba(3,18,43,.56);
  --overlay-strong:rgba(2,11,29,.86);
  --stage:#020B1D;
  --shadow:0 1px 2px rgba(7,29,73,.06),0 12px 28px -16px rgba(7,29,73,.24);

  --font-display:"Roboto",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-body:"Roboto",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Roboto",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;   /* Round 44: Roboto everywhere; labels keep their own size and tracking */;

  --fs-display:clamp(2.45rem,1.5rem + 3.6vw,4.4rem);
  --fs-h2:clamp(2rem,1.45rem + 1.9vw,3rem);
  --fs-body:1.0625rem;
  --fs-small:.9375rem;
  --fs-label:.75rem;
  --wrap:1240px;
  --header-h:68px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#020B1D; --paper-2:#061633; --surface:#0A1D42;
    --ink:#F1F3FF; --text:#C8D2EF; --muted:#94A4D2;
    --rule:#1A2C57; --rule-strong:#2A4073;
    --accent:#77B9F9; --accent-bright:#479FF8; --accent-soft:#0C2A57;
    --accent-2:#C9A2EF; --accent-2-bright:#B88BE5; --accent-2-soft:#2A1650;
    --bar:#C8D2EF; --bar-soft:#4F6197;
    --band:#061633; --band-2:#0A1D42; --band-text:#F1F3FF; --band-muted:#A6B5E0; --band-rule:#1E3873; --band-accent:#77B9F9;
    --overlay:rgba(1,6,16,.74); --overlay-strong:rgba(1,5,13,.88); --stage:#01060F;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 14px 30px -16px rgba(0,0,0,.65);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#020B1D; --paper-2:#061633; --surface:#0A1D42;
  --ink:#F1F3FF; --text:#C8D2EF; --muted:#94A4D2;
  --rule:#1A2C57; --rule-strong:#2A4073;
  --accent:#77B9F9; --accent-bright:#479FF8; --accent-soft:#0C2A57;
  --accent-2:#C9A2EF; --accent-2-bright:#B88BE5; --accent-2-soft:#2A1650;
  --bar:#C8D2EF; --bar-soft:#4F6197;
  --band:#061633; --band-2:#0A1D42; --band-text:#F1F3FF; --band-muted:#A6B5E0; --band-rule:#1E3873; --band-accent:#77B9F9;
  --overlay:rgba(1,6,16,.74); --overlay-strong:rgba(1,5,13,.88); --stage:#01060F;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 14px 30px -16px rgba(0,0,0,.65);
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent-soft);color:var(--ink)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);font-weight:400;text-wrap:balance;margin:0}
p{margin:0}
ul{margin:0}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:12px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:6px;text-decoration:none}
.wrap{max-width:calc(var(--wrap) + 80px);margin-inline:auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
@media (min-width:720px){.wrap{padding-left:max(40px, env(safe-area-inset-left, 0px));padding-right:max(40px, env(safe-area-inset-right, 0px))}}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:500}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Header ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top, 0px);z-index:40;background:var(--paper);border-bottom:1px solid transparent;transition:border-color .2s}
@supports (backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px)){
  .site-header{background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px)}
}
.site-header.scrolled{border-bottom-color:var(--rule)}
.nav{display:flex;align-items:center;gap:22px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;margin-right:auto;min-width:0}
.logo-mark{flex:none;width:38px;height:38px;overflow:visible}
.lm-ink{fill:var(--ink)}
.lm-soft{fill:var(--ink);opacity:.42}
.lm-ai{fill:var(--accent-bright)}
.lm-flow{fill:none;stroke:var(--accent-bright);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:18;stroke-dashoffset:0}
.lm-spark{transform-box:fill-box;transform-origin:center;animation:lm-spark 5.5s ease-in-out infinite}
@keyframes lm-spark{0%,72%,100%{transform:scale(1) rotate(0deg)}80%{transform:scale(1.45) rotate(45deg)}88%{transform:scale(.85) rotate(90deg)}}
.brand:hover .lm-flow{animation:lm-flow .9s ease-out}
@keyframes lm-flow{from{stroke-dashoffset:18}to{stroke-dashoffset:0}}
.wordmark{display:block;font-size:1.2rem;line-height:1.1;letter-spacing:-.01em;white-space:nowrap}
.wm-a{font-weight:300;color:var(--ink)}
.wm-b{font-weight:700;color:var(--accent)}
@media (prefers-reduced-motion:reduce){.lm-spark,.brand:hover .lm-flow{animation:none}}
.brand-text{min-width:0;line-height:1.2}
.brand-name{display:block;font-weight:500;font-size:.98rem;white-space:nowrap}
.brand-role{display:block;font-family:var(--font-mono);font-size:.66rem;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;margin-top:2px}
.nav-links{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--text);text-decoration:none;font-size:.93rem;position:relative;padding:6px 0;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav-links a:hover::after,.nav-links a[aria-current="true"]::after{transform:scaleX(1)}
.nav-links a[aria-current="true"]{color:var(--ink)}
.icon-btn{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--rule-strong);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.icon-btn:hover{border-color:var(--ink)}
.icon-btn svg{width:18px;height:18px}
/* Theme button: shows the visitor's pick (sun, moon or screen for System); the menu is in the Round 21c block */
.theme-btn .t-light,.theme-btn .t-dark{display:none}
:root[data-theme-pref="light"] .theme-btn .t-light,:root[data-theme-pref="dark"] .theme-btn .t-dark{display:block}
:root[data-theme-pref="light"] .theme-btn .t-system,:root[data-theme-pref="dark"] .theme-btn .t-system{display:none}
.menu-btn{display:none}
@media (max-width:1260px){
  .nav-links{display:none;position:absolute;top:var(--header-h);left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--rule);padding-block:6px 14px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-links a{display:block;padding:14px 0;border-bottom:1px solid var(--rule);font-size:1rem}
  .nav-links li:last-child a{border-bottom:0}
  .nav-links a::after{display:none}
  .menu-btn{display:grid}
}
@media (max-width:560px){.brand-role{display:none}}
@media (max-width:400px){.brand-name{font-size:.9rem}.nav{gap:10px}}

/* ---------- Buttons & chips ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;font:500 .95rem/1 var(--font-body);text-decoration:none;border:1px solid var(--ink);cursor:pointer;transition:transform .15s,background-color .15s,color .15s}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.chips{display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;align-self:start;gap:6px;list-style:none;padding:0;margin:0}
.chip{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.02em;padding:4px 9px;border:1px solid var(--rule-strong);border-radius:999px;color:var(--text);white-space:nowrap}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(14px,1.8vw,24px) clamp(56px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(36px,5vw,72px);align-items:center}
@media (max-width:1020px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.hero h1{font-size:var(--fs-display);line-height:1.04;letter-spacing:-.022em;margin-top:20px;max-width:13.5em}
.hero h1 em{font-style:italic;color:var(--accent)}
.lede{font-size:clamp(1.06rem,.98rem + .35vw,1.22rem);line-height:1.62;max-width:34em;margin-top:26px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:36px;padding-top:18px;border-top:1px solid var(--rule);font-family:var(--font-mono);font-size:.76rem;color:var(--muted);letter-spacing:.03em;list-style:none;padding-left:0}
.hero-meta li{display:flex;align-items:center;gap:8px}
.hero-meta li+li::before{content:"";width:5px;height:5px;background:var(--rule-strong);transform:rotate(45deg);margin-right:12px}
.plan{margin:0;min-width:0}
.plan-frame{background:var(--surface);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.plan-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--rule);font-family:var(--font-mono);font-size:.72rem;color:var(--muted);letter-spacing:.03em}
.plan-bar .crumb b{color:var(--ink);font-weight:500}
.status{display:inline-flex;align-items:center;gap:7px;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:500;white-space:nowrap}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.plan-body{padding:12px 14px 6px}
.plan-legend{display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px 16px 14px;border-top:1px solid var(--rule);font-family:var(--font-mono);font-size:.7rem;color:var(--muted);list-style:none;margin:0}
.plan-legend li{display:flex;align-items:center;gap:7px}
.lg{display:inline-block;flex:none}
.lg-bar{width:18px;height:7px;border-radius:4px;background:var(--bar)}
.lg-ai{width:18px;height:7px;border-radius:4px;background:var(--accent-bright)}
.lg-gate{width:8px;height:8px;background:var(--accent-bright);transform:rotate(45deg)}
.lg-node{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--accent-bright);background:var(--surface)}
.lg-path{width:18px;height:3px;border-radius:2px;background:var(--accent-bright)}
.plan figcaption{font-size:.86rem;line-height:1.5;color:var(--muted);margin-top:14px;max-width:44em}
.plan figcaption b{font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-right:8px}

/* Plan view (SVG) */
.gantt{display:block;width:100%;height:auto}
.g-band{fill:var(--paper-2);opacity:.7}
.g-rule{stroke:var(--rule);stroke-width:1}
.g-grid{stroke:var(--rule);stroke-width:1;stroke-dasharray:2 4}
.g-axis{font:500 11px var(--font-mono);fill:var(--muted);letter-spacing:.03em}
.g-lane{font:500 10.5px var(--font-mono);fill:var(--ink);letter-spacing:.1em}
.g-label{font:400 11.5px var(--font-body);fill:var(--text)}
.g-small{font:400 10px var(--font-mono);fill:var(--muted)}
.g-bar{fill:var(--bar)}
.g-bar-soft{fill:var(--bar-soft)}
.g-bar-ai{fill:var(--accent-bright)}
.g-link{fill:none;stroke:var(--ink);stroke-width:1.2;opacity:.55}
.g-arrow{fill:var(--ink);opacity:.7}
.g-graph{fill:none;stroke:var(--accent-bright);stroke-width:1.2;stroke-dasharray:1 4;stroke-linecap:round;opacity:.8}
.g-node{fill:var(--surface);stroke:var(--accent-bright);stroke-width:1.6}
.g-gate{fill:var(--accent-bright)}
.g-check{fill:none;stroke:var(--surface);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.g-mile{fill:var(--ink)}
.g-launch{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:.45}
.g-enable{stroke:var(--bar-soft);stroke-width:2.4;stroke-dasharray:.1 6;stroke-linecap:round}
.g-halo{fill:none;stroke:var(--surface);stroke-width:7;stroke-linecap:round;stroke-dasharray:5 95;animation:comet 7s linear infinite}
.g-comet{fill:none;stroke:var(--accent-bright);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:5 95;animation:comet 7s linear infinite}
@keyframes comet{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .g-halo{display:none}
  .g-comet{animation:none;stroke-dasharray:none;opacity:.3}
}
@media (max-width:560px){
  .g-label,.g-small{display:none}
  .g-lane{font-size:15px;letter-spacing:.06em}
  .g-axis{font-size:15px}
}

/* ---------- Outcomes strip ---------- */
.outcomes{padding-block:0 clamp(16px,3vw,40px)}
.outcomes-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;border-top:1px solid var(--ink);padding-top:14px}
.outcomes-head a{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.03em}
.stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px;margin:28px 0 0;padding:0;list-style:none}
@media (max-width:1080px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}}
.stat-num{display:block;font-family:var(--font-display);font-size:clamp(2.1rem,1.55rem + 1.7vw,3rem);line-height:1;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:lining-nums}
.stat-label{display:block;font-size:.9rem;line-height:1.45;margin-top:10px}

/* ---------- Sections ---------- */
.section{padding-block:clamp(72px,9vw,128px)}
.section.tinted{background:var(--paper-2)}
.sec-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:18px 56px;align-items:end;margin-bottom:clamp(36px,5vw,60px)}
@media (max-width:900px){.sec-head{grid-template-columns:minmax(0,1fr)}}
.sec-head h2{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.015em;margin-top:12px}
.sec-head > p{color:var(--muted);font-size:1.06rem;max-width:38em}
/* ---------- Approach ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ink)}
.step{padding:22px 22px 6px 0;min-width:0}
.step+.step{padding-left:22px;border-left:1px solid var(--rule)}
.step-n{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.09em;color:var(--accent)}
.step-n span{color:var(--muted)}
.step h3{font-size:1.36rem;line-height:1.18;margin-top:14px}
.step p{font-size:.95rem;line-height:1.58;margin-top:10px}
@media (max-width:1080px){
  .steps{grid-template-columns:minmax(0,1fr);border-top:0}
  .step,.step+.step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:6px 32px;padding:22px 0;border-left:0;border-top:1px solid var(--rule)}
  .step:first-child{border-top:1px solid var(--ink)}
  .step h3{margin-top:8px}
  .step p{margin-top:0;grid-column:2;grid-row:1 / span 2;align-self:center}
}
@media (max-width:640px){
  .step,.step+.step{grid-template-columns:minmax(0,1fr)}
  .step p{grid-column:auto;grid-row:auto;margin-top:6px}
}

/* ---------- Control Tower ---------- */
.ct-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,5vw,72px);align-items:start}
@media (max-width:980px){.ct-grid{grid-template-columns:minmax(0,1fr)}}
.ct-copy h2{font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.015em;margin-top:12px}
.role-line{font-family:var(--font-mono);font-size:.76rem;color:var(--muted);letter-spacing:.03em;margin-top:14px}
.ct-copy p.body{margin-top:18px;max-width:36em}
.facts{list-style:none;padding:0;margin:30px 0 0;border-top:1px solid var(--rule)}
.facts li{display:grid;grid-template-columns:6.2em minmax(0,1fr);gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--rule);font-size:.94rem;line-height:1.45}
.facts b{font-family:var(--font-display);font-weight:400;font-size:1.65rem;color:var(--ink);line-height:1;font-variant-numeric:lining-nums}
.ct-copy .chips{margin-top:24px}
.pipe-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 20px;margin-bottom:10px}
.pipe-legend{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;padding:0;margin:0;font-family:var(--font-mono);font-size:.7rem;color:var(--muted)}
.pipe-legend li{display:flex;align-items:center;gap:7px}
.glyph{display:inline-block;flex:none;width:10px;height:10px}
.glyph.src{border:1.5px solid var(--muted)}
.glyph.det{background:var(--bar)}
.glyph.ai{background:var(--accent-bright);border-radius:50%}
.glyph.gate{width:9px;height:9px;background:var(--accent-bright);transform:rotate(45deg)}
.glyph.human{border:1.8px solid var(--ink);border-radius:50%}
.pipeline{list-style:none;margin:0;padding:0}
.stage{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;position:relative;padding-block:7px}
.stage::before{content:"";position:absolute;left:14.25px;top:0;bottom:0;width:1.5px;background:var(--rule-strong)}
.stage:first-child::before{top:50%}
.stage:last-child::before{bottom:50%}
.stage-dot{position:relative;z-index:1;align-self:center;justify-self:center;width:30px;height:30px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center}
.stage-body{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:13px 16px 14px;min-width:0}
.stage.is-ai .stage-body{border-color:var(--accent-bright)}
.stage-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.stage h3{font-size:1.14rem;line-height:1.25;margin-top:3px}
.stage p{font-size:.9rem;line-height:1.5;margin-top:4px}
.retry{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.7rem;color:var(--accent);margin-top:8px}
.modules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;margin-top:clamp(48px,6vw,72px);border-top:1px solid var(--ink)}
@media (max-width:1080px){.modules{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.modules{grid-template-columns:minmax(0,1fr)}}
.modules-title{grid-column:1 / -1;padding-top:14px}
.module{padding:18px 0 20px;border-bottom:1px solid var(--rule);min-width:0}
.module h3{font-size:1.12rem;line-height:1.25}
.module p{font-size:.88rem;line-height:1.5;color:var(--muted);margin-top:6px}
.module a{font-size:.84rem;display:inline-block;margin-top:8px}

/* ---------- Screens gallery & lightbox ---------- */
.shots-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;margin-top:clamp(52px,6vw,76px);padding-top:14px;border-top:1px solid var(--ink)}
.shots-head h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.15;margin-top:8px}
.shots-note{font-size:.88rem;color:var(--muted);max-width:40em}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0 0;padding:0;list-style:none}
@media (max-width:980px){.shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.shots{grid-template-columns:minmax(0,1fr)}}
.shot-btn{display:flex;flex-direction:column;width:100%;height:100%;padding:0;text-decoration:none;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--surface);cursor:zoom-in;text-align:left;color:inherit;font:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.shot-btn:hover{border-color:var(--rule-strong);box-shadow:var(--shadow);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.shot-btn:hover{transform:none}}
.shot-btn img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:left top;background:var(--paper-2);border-bottom:1px solid var(--rule)}
.shot-cap{display:block;padding:12px 14px 14px}
.shot-cap b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.1rem;line-height:1.25;color:var(--ink)}
.shot-cap span{display:block;font-size:.84rem;line-height:1.45;color:var(--muted);margin-top:4px}
dialog.lightbox{width:min(1320px, calc(100vw - 24px));max-width:none;max-height:calc(100vh - 24px);padding:0;border:1px solid var(--rule);border-radius:12px;background:var(--surface);color:var(--text);overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
dialog.lightbox::backdrop{background:var(--overlay-strong)}
.lb{display:flex;flex-direction:column;max-height:calc(100vh - 26px)}
.lb-stage{flex:1;min-height:0;background:var(--stage);display:flex;align-items:center;justify-content:center;overflow:auto}
.lb-stage img{display:block;max-width:100%;max-height:calc(100vh - 140px);width:auto;height:auto}
.lb-bar{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--rule)}
.lb-cap{flex:1;min-width:0}
.lb-cap b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.12rem;line-height:1.25;color:var(--ink)}
.lb-cap span{display:block;font-size:.86rem;line-height:1.45;color:var(--muted)}
.lb-count{font-family:var(--font-mono);font-size:.74rem;color:var(--muted);white-space:nowrap}
.lb-nav{display:flex;gap:8px}
@media (max-width:640px){.lb-bar{flex-wrap:wrap}.lb-cap{flex-basis:100%;order:-1}}
.screen-link{display:inline-flex;align-items:center;gap:6px;margin-top:8px;margin-right:14px;padding:0;border:0;background:none;color:var(--accent);font:500 .84rem var(--font-body);cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ---------- Case-study carousels ---------- */
.carousel{margin:2px 0 6px}
.car-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;border:1px solid var(--rule);border-radius:10px;background:var(--paper-2)}
.car-viewport::-webkit-scrollbar{display:none}
.car-viewport:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.car-track,.case-body .car-track{display:flex;margin:0;padding:0;list-style:none}
.case-body .car-slide,.case-body .car-slide + .car-slide{margin:0;line-height:inherit}
.car-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column}
.car-stage{position:relative;display:block;width:100%;aspect-ratio:16/10;padding:0;border:0;background:transparent;cursor:zoom-in}
.car-stage img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);object-fit:scale-down;filter:drop-shadow(0 2px 6px rgba(15,25,45,.18))}
.car-stage:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:8px}
.car-cap,.case-body .car-cap{margin:0;padding:12px 16px 14px;border-top:1px solid var(--rule);background:var(--surface);min-height:4.6em}
.car-cap b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.08rem;line-height:1.25;color:var(--ink)}
.case-body .car-cap span,.car-cap span{display:block;font-size:.88rem;line-height:1.5;color:var(--muted);margin-top:3px}
.car-bar{display:flex;align-items:center;gap:12px;margin-top:10px}
.car-bar .icon-btn{width:34px;height:34px}
.car-bar .icon-btn:disabled{opacity:.35;cursor:default}
.car-dots{flex:1;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.car-dot{width:8px;height:8px;padding:0;border:0;border-radius:4px;background:var(--rule-strong);cursor:pointer;transition:width .2s,background-color .2s}
.car-dot:hover{background:var(--muted)}
.car-dot[aria-current="true"]{width:22px;background:var(--accent)}
.car-count{font-family:var(--font-mono);font-size:.74rem;color:var(--muted);min-width:3.5em;text-align:right}
@media (prefers-reduced-motion:reduce){.car-dot{transition:none}}
@media (max-width:640px){.car-stage{aspect-ratio:4/3}.car-stage img{inset:8px;width:calc(100% - 16px);height:calc(100% - 16px)}}

/* ---------- Work ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:26px}
.filter{font:500 .88rem/1 var(--font-body);padding:10px 15px;border-radius:999px;border:1px solid var(--rule-strong);background:transparent;color:var(--text);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.filter:hover{border-color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.count{margin-left:auto;font-family:var(--font-mono);font-size:.74rem;color:var(--muted)}
@media (max-width:640px){.count{margin-left:0;width:100%}}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:1080px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:660px){.cards{grid-template-columns:minmax(0,1fr)}}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:22px 22px 18px;min-width:0;transition:border-color .15s,box-shadow .15s,transform .15s}
.card:hover{border-color:var(--rule-strong);box-shadow:var(--shadow);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.card,.card:hover,.btn-primary:hover{transform:none}}
.card-tags{display:flex;flex-wrap:wrap;gap:4px 8px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.card-tags span+span::before{content:"·";margin-right:8px}
.card h3{font-size:1.45rem;line-height:1.16;margin-top:12px}
.card .sum{font-size:.95rem;line-height:1.56;margin-top:10px}
.card-lower{margin-top:auto;padding-top:18px}
/* Where subgrid is available, every card in a row shares row tracks, so dividers and metrics line up. */
@supports (grid-template-rows:subgrid){
  .cards{row-gap:0}
  .card{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:0;margin-bottom:18px}
  .card-lower{display:contents}
  .kpis{margin-top:18px}
}
.card-media{position:relative;display:block;width:calc(100% + 44px);margin:-22px -22px 18px;padding:0;border:0;border-bottom:1px solid var(--rule);aspect-ratio:16/10;overflow:hidden;border-radius:10px 10px 0 0;background:var(--paper-2);cursor:pointer;font:inherit;color:inherit;text-align:left}
.card-media img{transition:transform .35s ease}
.card-media:hover img{transform:scale(1.025)}
.card-media:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.card-media img,.card-media:hover img{transition:none;transform:none}}
@media (min-width:1081px){.card.card--wide{grid-column:span 2}.card--wide .card-media{aspect-ratio:32/10}}
.card-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.card-media svg{display:block;width:100%;height:100%}
.media-tag{position:absolute;left:10px;bottom:10px;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--surface);color:var(--muted);border:1px solid var(--rule)}
.case-fig{margin:18px 0 6px}
.case-fig img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:8px;background:var(--paper-2)}
.case-fig figcaption{font-size:.82rem;line-height:1.5;color:var(--muted);margin-top:8px}
/* Schematic thumbnails (drawn, not screenshots) */
.sc-bg{fill:var(--paper-2)}
.sc-panel{fill:var(--surface);stroke:var(--rule);stroke-width:1}
.sc-line{stroke:var(--rule-strong);stroke-width:1.2;fill:none}
.sc-line-ai{stroke:var(--accent-bright);stroke-width:1.4;fill:none}
.sc-ink{fill:var(--bar)}
.sc-soft{fill:var(--bar-soft)}
.sc-faint{fill:var(--rule)}
.sc-ai{fill:var(--accent-bright)}
.sc-ai-soft{fill:var(--accent-soft)}
.sc-node{fill:var(--surface);stroke:var(--bar);stroke-width:1.6}
.sc-node-ai{fill:var(--surface);stroke:var(--accent-bright);stroke-width:2}
.sc-check{fill:none;stroke:var(--surface);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sc-tick{fill:none;stroke:var(--accent-bright);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sc-text{font:500 8.5px var(--font-mono);fill:var(--muted);letter-spacing:.06em}
.sc-text-ink{font:500 8.5px var(--font-mono);fill:var(--ink);letter-spacing:.06em}
.sc-ring-bg{fill:none;stroke:var(--rule);stroke-width:5}
.sc-ring{fill:none;stroke:var(--accent-bright);stroke-width:5;stroke-linecap:round}
.sc-dash{stroke:var(--accent-bright);stroke-width:1.4;stroke-dasharray:3 3;fill:none}
.sc-person{fill:var(--bar)}
.kpis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;padding-top:16px;border-top:1px solid var(--rule)}
.kpi b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.32rem;line-height:1.1;color:var(--ink);font-variant-numeric:lining-nums}
.kpi span{display:block;font-size:.78rem;line-height:1.38;color:var(--muted);margin-top:4px}
.card .chips{margin-top:16px}
.case-details{margin-top:16px;border-top:1px solid var(--rule);padding-top:12px}
.case-details > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:.9rem;color:var(--accent);padding:4px 0}
.case-details > summary::-webkit-details-marker{display:none}
.case-details > summary svg{width:15px;height:15px;transition:transform .15s}
.case-details > summary:hover svg{transform:translateX(3px)}
.case-details[open] > summary svg{transform:rotate(90deg)}
.case-body{padding-top:6px}
.case-body h4,.case-content h4{font-family:var(--font-mono);font-weight:500;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-top:22px}
.case-body p,.case-body li{font-size:.95rem;line-height:1.6}
.case-body h4+p,.case-body h4+ul{margin-top:6px}
.case-body ul{padding-left:1.1em}
.case-body li+li{margin-top:6px}
.case-body .stack{font-family:var(--font-mono);font-size:.8rem;line-height:1.7;color:var(--muted)}

/* Case study dialog */
dialog.case{width:min(1000px, calc(100vw - 32px));max-height:min(88vh, 920px);padding:0;border:1px solid var(--rule);border-radius:14px;background:var(--surface);color:var(--text);box-shadow:0 30px 80px -20px rgba(10,20,40,.45);overflow:auto;overscroll-behavior:contain}
dialog.case::backdrop{background:var(--overlay);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.case-head{position:sticky;top:0;z-index:1;display:flex;align-items:flex-start;gap:16px;padding:22px 24px 16px;background:var(--surface);border-bottom:1px solid var(--rule)}
.case-head > div{flex:1;min-width:0}
.case-head h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.12;margin-top:8px}
.case-content{padding:4px 24px 30px}
.case-content .case-body > :not(.carousel):not(.case-fig){max-width:46em}
.case-content .case-body{padding-top:0}
@media (min-width:720px){.case-head{padding:26px 32px 18px}.case-content{padding:6px 32px 34px}}

/* ---------- AI practice band ---------- */
.band{background:var(--band);color:var(--band-text)}
.band h2,.band h3,.band h4{color:var(--band-text)}
.band .eyebrow{color:var(--band-muted)}
.band .sec-head > p{color:var(--band-muted)}
.band a{color:var(--band-accent)}
.practice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5vw,48px);list-style:none;margin:0;padding:0}
@media (max-width:900px){.practice{grid-template-columns:minmax(0,1fr)}}
.practice li{border-top:1px solid var(--band-rule);padding-top:18px}
.practice .k{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--band-accent)}
.practice h3{font-size:1.5rem;line-height:1.2;margin-top:10px}
.practice p{color:var(--band-muted);margin-top:10px;font-size:.98rem}
.terminal{margin-top:clamp(44px,5vw,64px);border:1px solid var(--band-rule);border-radius:12px;background:var(--band-2);overflow:hidden}
.term-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--band-rule);font-family:var(--font-mono);font-size:.72rem;color:var(--band-muted)}
.term-bar i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--band-rule);display:inline-block}
.term-bar span{margin-left:8px}
.term-body{padding:14px 18px 16px;overflow-x:auto}
.term-body table{border-collapse:collapse;font-family:var(--font-mono);font-size:.82rem;line-height:1.5;min-width:600px;width:100%}
.term-body caption{text-align:left;color:var(--band-muted);padding-bottom:8px}
.term-body th{font-weight:400;text-align:left;color:var(--band-accent);padding:5px 28px 5px 0;white-space:nowrap;vertical-align:top}
.term-body td{color:var(--band-text);padding:5px 0;vertical-align:top}
.autos-title{margin-top:clamp(48px,6vw,72px)}
.autos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:20px 0 0;padding:0;list-style:none}
@media (max-width:1080px){.autos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.autos{grid-template-columns:minmax(0,1fr)}}
.autos li{border-top:1px solid var(--band-rule);padding-top:16px;min-width:0}
.autos h4{font-size:1.14rem;line-height:1.25}
.autos p{font-size:.9rem;line-height:1.55;color:var(--band-muted);margin-top:8px}

/* ---------- Experience ---------- */
.career{border:1px solid var(--rule);border-radius:12px;background:var(--surface);padding:18px 22px 10px;--labelw:15.5rem}
.c-axis{position:relative;height:26px;margin-left:var(--labelw);border-bottom:1px solid var(--rule)}
.c-tick{position:absolute;bottom:6px;transform:translateX(-50%);font-family:var(--font-mono);font-size:.7rem;color:var(--muted)}
.c-row{display:grid;grid-template-columns:var(--labelw) minmax(0,1fr);align-items:center;min-height:52px;border-bottom:1px dashed var(--rule)}
.c-row:last-child{border-bottom:0}
.c-label{font-size:.86rem;line-height:1.3;padding-right:18px;min-width:0}
.c-label b{display:block;font-weight:600;color:var(--ink)}
.c-label span{color:var(--muted);font-size:.8rem}
.c-track{position:relative;align-self:stretch;min-height:52px;background-image:linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule));background-size:1px 100%;background-repeat:no-repeat;background-position:12% 0,32% 0,52% 0,72% 0,92% 0}
.c-bar{position:absolute;top:50%;height:14px;transform:translateY(-50%);left:calc((var(--s) - 2002) / 25 * 100%);width:calc((var(--e) - var(--s)) / 25 * 100%);border-radius:7px;background:var(--bar)}
.c-bar.soft{background:var(--bar-soft)}
.c-bar.now{background:var(--accent-bright)}
.c-now{position:absolute;top:50%;left:calc((var(--s) - 2002) / 25 * 100% - 8px);transform:translate(-100%,-50%);font-family:var(--font-mono);font-size:.68rem;color:var(--accent);white-space:nowrap}
.c-row.ms{min-height:62px}
.c-row.ms .c-track{min-height:62px}
.c-ms{position:absolute;top:50%;left:calc((var(--t) - 2002) / 25 * 100%);width:10px;height:10px;transform:translate(-50%,-50%) rotate(45deg);background:var(--accent-bright)}
.c-ms.ink{background:var(--ink)}
.c-ms-label{position:absolute;top:5px;left:calc((var(--t) - 2002) / 25 * 100%);transform:translateX(-50%);font-family:var(--font-mono);font-size:.68rem;line-height:1.1;color:var(--muted);white-space:nowrap}
.c-ms-label.below{top:auto;bottom:5px}
@media (max-width:760px){
  .career{padding:14px 14px 8px}
  .c-axis{margin-left:0}
  .c-row{grid-template-columns:minmax(0,1fr);padding:10px 0 4px}
  .c-row.ms{display:none}
  .c-label{padding-right:0}
  .c-track{min-height:30px}
}
.roles{margin-top:clamp(44px,5vw,64px)}
.role{display:grid;grid-template-columns:minmax(0,3.3fr) minmax(0,8fr);gap:14px 56px;padding:30px 0;border-top:1px solid var(--rule)}
.role:first-child{border-top:1px solid var(--ink)}
@media (max-width:780px){.role{grid-template-columns:minmax(0,1fr)}}
.role-when{font-family:var(--font-mono);font-size:.76rem;color:var(--muted);letter-spacing:.03em}
.role-org{font-family:var(--font-display);font-size:1.55rem;line-height:1.15;color:var(--ink);margin-top:6px}
.role h3{font-family:var(--font-body);font-size:1.06rem;font-weight:600;line-height:1.4;color:var(--ink)}
.role ul{margin:12px 0 0;padding-left:1.1em}
.role li{margin-top:8px;max-width:46em}
.role li::marker{color:var(--accent)}

/* ---------- Toolkit & credentials ---------- */
.toolkit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 40px}
@media (max-width:900px){.toolkit{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.toolkit{grid-template-columns:minmax(0,1fr)}}
.group h3{font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);padding-bottom:12px;border-bottom:1px solid var(--ink)}
.group ul{list-style:none;padding:0;margin:0}
.group li{padding:9px 0;border-bottom:1px solid var(--rule);font-size:.95rem;line-height:1.45}
.group li small{display:block;color:var(--muted);font-size:.82rem;margin-top:2px}
.creds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px;margin-top:clamp(64px,8vw,96px)}
@media (max-width:1080px){.creds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.creds{grid-template-columns:minmax(0,1fr)}}
.creds-title{grid-column:1 / -1}
.creds-title h2{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.015em;margin-top:12px}

/* ---------- Contact & footer ---------- */
.contact{padding-block:clamp(80px,10vw,140px)}
.contact h2{font-size:clamp(2.2rem,1.4rem + 3.2vw,4.1rem);line-height:1.05;letter-spacing:-.02em;max-width:15em;margin-top:14px}
.contact h2 em{font-style:italic;color:var(--accent)}
.contact .lede{color:var(--muted)}
.c-list{margin:44px 0 0;padding:0;list-style:none;border-top:1px solid var(--ink);max-width:880px}
.c-item{display:grid;grid-template-columns:8.5rem minmax(0,1fr) auto;gap:10px 18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--rule)}
.c-item .k{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.c-item .v{font-family:var(--font-display);font-size:clamp(1.15rem,1rem + .7vw,1.6rem);line-height:1.25;color:var(--ink);overflow-wrap:anywhere}
.c-item .v a{color:inherit;text-decoration:none;background-image:linear-gradient(var(--accent),var(--accent));background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .2s}
.c-item .v a:hover{background-size:100% 1.5px}
.c-actions{display:flex;gap:8px}
.mini-btn{font:500 .82rem/1 var(--font-body);padding:9px 14px;border-radius:999px;border:1px solid var(--rule-strong);background:transparent;color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap}
.mini-btn:hover{border-color:var(--ink)}
@media (max-width:640px){.c-item{grid-template-columns:minmax(0,1fr) auto}.c-item .k{grid-column:1 / -1}}
.site-footer{border-top:1px solid var(--rule);padding-block:28px 40px;font-size:.84rem;color:var(--muted)}
.foot{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:baseline}
.foot p{max-width:46em}
.foot a{color:var(--muted)}
.foot-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 24px;font-family:var(--font-mono);font-size:.78rem}
.foot-about{margin:0;font-size:.78rem}
.foot-about a{color:var(--accent);text-decoration:none}
.foot-about a:hover{text-decoration:underline}
@media (max-width:720px){.foot-actions{align-items:flex-start}}

/* ---------- Type tuning for Roboto ---------- */
.hero h1,.sec-head h2,.ct-copy h2,.creds-title h2,.contact h2{font-weight:300}
.hero h1{letter-spacing:-.03em}
.hero h1 em,.contact h2 em{font-style:normal;font-weight:400}
.stat-num,.facts b,.patent-facts dd{font-weight:300}
.card h3,.step h3,.practice h3,.role-org,.module h3,.stage h3{font-weight:400}

/* ---------- Hero: streaming last word + agent trace ---------- */
.rot{display:inline-block;white-space:nowrap;color:var(--accent);font-weight:400}
.rot-word{background:linear-gradient(90deg,var(--accent) 0%,var(--accent-bright) 45%,var(--accent) 90%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rot-shimmer 4s linear infinite}
.rot-caret{display:inline-block;width:2px;height:.8em;margin-left:.04em;margin-right:-.02em;vertical-align:-.03em;border-radius:2px;background:var(--accent-bright);animation:rot-blink 1.05s steps(1) infinite}
.rot.typing .rot-caret{animation:none}
@keyframes rot-blink{50%{opacity:0}}
@keyframes rot-shimmer{to{background-position:-200% 0}}
.agent-line{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:6px 14px 6px 10px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);font-family:var(--font-mono);font-size:.76rem;color:var(--muted);letter-spacing:.02em;max-width:100%}
.agent-k{color:var(--accent);font-weight:500;text-transform:uppercase;letter-spacing:.09em;font-size:.66rem;white-space:nowrap}
.agent-v{color:var(--text);transition:opacity .22s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent-v.fade{opacity:0}
.ai-spark{width:14px;height:14px;flex:none;background:var(--accent-bright);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:ai-pulse 2.4s ease-in-out infinite}
@keyframes ai-pulse{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.7) rotate(45deg)}}
.patent-chip{display:inline-flex;align-items:center;gap:7px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent-bright);padding-bottom:1px}
.patent-chip:hover{color:var(--accent)}
.patent-chip svg{width:14px;height:14px;color:var(--accent-bright)}
@media (prefers-reduced-motion:reduce){.rot-word,.ai-spark{animation:none}.rot-caret{display:none}}

/* ---------- Hero plan: lanes light up as the critical path passes ---------- */
.g-hl{fill:var(--accent-soft);opacity:0;transition:opacity .45s ease}
.g-lane{transition:fill .3s}
.g-ws{transition:opacity .35s}
.gantt[data-lane] .g-ws{opacity:.5}
.g-gate,.g-mile{transform-box:fill-box;transform-origin:center}
.g-gate.pulse,.g-mile.pulse{animation:gate-pulse .8s ease-out}
@keyframes gate-pulse{0%{transform:scale(1)}35%{transform:scale(1.65)}100%{transform:scale(1)}}
.gantt.js-run .g-halo,.gantt.js-run .g-comet{animation:none}
.gantt[data-lane="0"] .g-hl[data-lane="0"]{opacity:1}
.gantt[data-lane="0"] .g-lane[data-lane="0"]{fill:var(--accent)}
.gantt[data-lane="0"] .g-ws[data-lane="0"]{opacity:1}
.gantt[data-lane="1"] .g-hl[data-lane="1"]{opacity:1}
.gantt[data-lane="1"] .g-lane[data-lane="1"]{fill:var(--accent)}
.gantt[data-lane="1"] .g-ws[data-lane="1"]{opacity:1}
.gantt[data-lane="2"] .g-hl[data-lane="2"]{opacity:1}
.gantt[data-lane="2"] .g-lane[data-lane="2"]{fill:var(--accent)}
.gantt[data-lane="2"] .g-ws[data-lane="2"]{opacity:1}
.gantt[data-lane="3"] .g-hl[data-lane="3"]{opacity:1}
.gantt[data-lane="3"] .g-lane[data-lane="3"]{fill:var(--accent)}
.gantt[data-lane="3"] .g-ws[data-lane="3"]{opacity:1}
.gantt[data-lane="4"] .g-hl[data-lane="4"]{opacity:1}
.gantt[data-lane="4"] .g-lane[data-lane="4"]{fill:var(--accent)}
.gantt[data-lane="4"] .g-ws[data-lane="4"]{opacity:1}

/* ---------- Patent spotlight ---------- */
.patent{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px 28px;align-items:center;margin-top:clamp(36px,4vw,52px);padding:24px 28px;border:1px solid var(--accent-bright);border-radius:14px;background:linear-gradient(115deg,var(--accent-soft) 0%,var(--surface) 64%)}
.patent-seal{width:80px;height:80px;flex:none}
.ps-ring{fill:none;stroke:var(--accent-bright);stroke-width:1.5;stroke-dasharray:3 4;transform-origin:40px 40px;animation:ps-spin 40s linear infinite}
.ps-fill{fill:var(--surface);stroke:var(--accent-bright);stroke-width:1.5}
.ps-shield{fill:var(--accent-bright)}
.ps-check{fill:none;stroke:var(--surface);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@keyframes ps-spin{to{transform:rotate(360deg)}}
.patent-body h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.8rem);line-height:1.2;margin-top:6px;font-weight:400}
.patent-body p.ptxt{margin-top:8px;font-size:.98rem;max-width:44em}
.patent-facts{display:grid;grid-template-columns:repeat(2,auto);gap:12px 26px;margin:0}
.patent-facts dt{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.patent-facts dd{margin:2px 0 0;font-size:1.35rem;line-height:1.1;color:var(--ink)}
.patent-link{grid-column:2 / -1;justify-self:start;padding:10px 16px;font-size:.88rem}
@media (max-width:900px){.patent{grid-template-columns:auto minmax(0,1fr)}.patent-facts{grid-column:1 / -1;grid-template-columns:repeat(4,auto);justify-content:start}.patent-link{grid-column:1 / -1}}
@media (max-width:540px){.patent{grid-template-columns:minmax(0,1fr);padding:20px 18px}.patent-seal{width:52px;height:52px}.patent-facts{grid-template-columns:repeat(2,auto)}}
@media (prefers-reduced-motion:reduce){.ps-ring{animation:none}}

/* ---------- Cards: video badge ---------- */
.play-badge{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px 3px 6px;border-radius:999px;background:var(--ink);color:var(--paper)}
.play-badge svg{width:13px;height:13px}
.video-link{display:inline-flex;align-items:center;gap:10px;margin:6px 0 4px}
.video-link svg{width:18px;height:18px}
.card .watch{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:.88rem;font-weight:500}
.card .watch svg{width:18px;height:18px;flex:none}

/* ---------- RHP Learn ---------- */
.rhp-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,64px);align-items:start}
@media (max-width:980px){.rhp-intro{grid-template-columns:minmax(0,1fr)}}
.rhp-copy p.body{margin-top:14px;max-width:40em}
.rhp-copy .chips{margin-top:22px}
.rhp-facts{margin-top:0}
.arch{margin-top:clamp(44px,6vw,72px);border-top:1px solid var(--ink);padding-top:14px}
.arch-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-bottom:16px}
.arch-head h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.15;margin-top:8px;font-weight:400}
.seg{display:inline-flex;flex-wrap:wrap;padding:4px;border:1px solid var(--rule-strong);border-radius:999px;background:var(--surface);gap:4px}
.seg button{font:500 .86rem/1 var(--font-body);padding:10px 15px;border-radius:999px;border:0;background:transparent;color:var(--text);cursor:pointer}
.seg button:hover{color:var(--ink)}
.seg button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
@media (max-width:560px){.seg{border-radius:14px;width:100%}.seg button{flex:1 1 100%;border-radius:10px;text-align:left}}
.sec-head code,.brief code{font-family:var(--font-mono);font-size:.92em;color:var(--ink)}
.arch-fig{margin:0}
.arch-scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:14px;background:var(--surface);-webkit-overflow-scrolling:touch}
.arch-scroll svg{display:block;width:100%;min-width:880px;height:auto}
.arch-fig figcaption{font-size:.86rem;line-height:1.5;color:var(--muted);margin-top:10px;max-width:62em}
.arch-fig figcaption b{font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-right:8px}
.rhp-filters{margin:22px 0 0}
#rhpShots{margin-top:18px}
.ad-bg{fill:var(--surface)}
.ad-zone{fill:none;stroke:var(--rule-strong);stroke-width:1.2;stroke-dasharray:5 5}
.ad-zone-cloud{fill:var(--accent-soft);fill-opacity:.42;stroke:var(--accent);stroke-width:1.4;stroke-dasharray:none}
.ad-zone-vpc{fill:var(--surface);stroke:var(--accent);stroke-width:1.2}
.ad-zone-tier{fill:var(--paper-2);fill-opacity:.7;stroke:var(--rule-strong);stroke-width:1;stroke-dasharray:4 4}
.ad-zlabel{font:500 10.5px var(--font-mono);letter-spacing:.08em;fill:var(--muted)}
.ad-zlabel-key{fill:var(--accent)}
.ad-node{fill:var(--surface);stroke:var(--rule-strong);stroke-width:1.2}
.ad-node-key{stroke:var(--accent-bright);stroke-width:1.6}
.ad-node-ext{fill:var(--paper);stroke-dasharray:3 3}
.ad-title{font:500 13px var(--font-body);fill:var(--ink)}
.ad-sub{font:400 11px var(--font-body);fill:var(--muted)}
.ad-icon{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ad-icon-key{stroke:var(--accent-bright)}
.ad-edge{fill:none;stroke:var(--ink);stroke-width:1.3;opacity:.55}
.ad-edge-key{stroke:var(--accent-bright);opacity:.95;stroke-width:1.6}
.ad-flow{stroke-dasharray:4 5;animation:ad-flow 1.1s linear infinite}
@keyframes ad-flow{to{stroke-dashoffset:-18}}
.ad-arrow{fill:var(--ink);opacity:.6}
.ad-arrow-key{fill:var(--accent-bright);opacity:1}
.ad-elabel{font:400 10.5px var(--font-mono);fill:var(--muted);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.ad-chip{fill:var(--surface);stroke:var(--rule-strong)}
.ad-chip-text{font:400 10.5px var(--font-mono);fill:var(--text)}
.ad-n{transition:opacity .2s}
.arch-scroll:hover .ad-n{opacity:.82}
.arch-scroll .ad-n:hover{opacity:1}
@media (prefers-reduced-motion:reduce){.ad-flow{animation:none}}

/* ---------- Community ---------- */
.comm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;list-style:none;margin:0;padding:0}
@media (max-width:1000px){.comm{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.comm{grid-template-columns:minmax(0,1fr)}}
.comm-item{display:flex;flex-direction:column;gap:10px;padding:22px 22px 20px;border:1px solid var(--rule);border-radius:12px;background:var(--surface);min-width:0;transition:border-color .15s,box-shadow .15s,transform .15s}
.comm-item:hover{border-color:var(--accent-bright);box-shadow:var(--shadow);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.comm-item:hover{transform:none}}
.comm-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.comm-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.comm-icon svg{width:24px;height:24px}
.comm-badge{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--accent-bright);color:var(--accent);white-space:nowrap}
.comm-badge.champ{background:var(--accent-bright);color:var(--paper)}
:root[data-theme="dark"] .comm-badge.champ{color:var(--band)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .comm-badge.champ{color:var(--band)}}
.comm-item h3{font-size:1.26rem;line-height:1.22;font-weight:400;margin-top:4px}
.comm-org{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);letter-spacing:.03em}
.comm-item p.ctext{font-size:.93rem;line-height:1.55}

/* ---------- Project pages ---------- */
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.03em;color:var(--muted);margin:0;padding:0;list-style:none}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent);text-decoration:underline}
.crumbs li+li::before{content:"/";margin-right:10px;color:var(--rule-strong)}
.page-hero{padding-block:clamp(28px,4vw,56px) clamp(44px,6vw,80px)}
.page-hero .eyebrow{margin-top:26px}
.page-hero h1{font-size:clamp(2.3rem,1.5rem + 3vw,3.9rem);line-height:1.05;letter-spacing:-.03em;font-weight:300;margin-top:16px;max-width:13em}
.page-hero h1 em{font-style:normal;font-weight:400;color:var(--accent)}
.frame{margin:0;min-width:0}
.frame-box{background:var(--surface);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.frame-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--rule);font-family:var(--font-mono);font-size:.72rem;color:var(--muted)}
.frame-bar i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--rule-strong);display:inline-block}
.frame-bar span{margin-left:8px}
.frame-shot{display:block;width:100%;padding:0;border:0;background:var(--paper-2);cursor:zoom-in}
.frame-shot img{display:block;width:100%;height:auto}
.frame figcaption{font-size:.86rem;line-height:1.5;color:var(--muted);margin-top:12px;max-width:44em}
.frame figcaption b{font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-right:8px}
.brief{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:900px){.brief{grid-template-columns:minmax(0,1fr)}}
.brief h3{font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.brief p{margin-top:10px;max-width:36em}
.brief ul{margin:12px 0 0;padding-left:1.1em}
.brief li{margin-top:12px;max-width:44em}
.brief li::marker{color:var(--accent)}
.brief li b{color:var(--ink);font-weight:500}
.brief .block+.block{margin-top:30px}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;list-style:none;margin:0;padding:0}
@media (max-width:980px){.cols{grid-template-columns:minmax(0,1fr)}}
.col{padding:22px 22px 20px;border:1px solid var(--rule);border-radius:12px;background:var(--surface);min-width:0}
.col h3{font-size:1.3rem;line-height:1.2;font-weight:400;margin-top:14px}
.col ul{margin:12px 0 0;padding-left:1.1em}
.col li{margin-top:8px;font-size:.95rem;line-height:1.55}
.col li::marker{color:var(--accent)}
.svg-link{display:inline-block;margin-top:6px;font-family:var(--font-mono);font-size:.74rem}
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding:28px 30px;border:1px solid var(--rule);border-radius:14px;background:var(--surface)}
.cta h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem);line-height:1.15;font-weight:300;max-width:20em}
.cta .hero-actions{margin-top:0}
.card a.card-media{text-decoration:none}
.case-link{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:.9rem;color:var(--accent);text-decoration:none;padding:4px 0}
.case-link svg{width:15px;height:15px;transition:transform .15s}
.case-link:hover svg{transform:translateX(3px)}

/* =====================================================================
   Round 6: Asana-style grid and content placement,
   App Store-style app cards and screenshot shelves
   ===================================================================== */
/* Centered hero: headline, AI chip, lede, actions, then the product view on a soft panel */
.hero-grid,.page-hero .hero-grid{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:0}
.hero-grid > div{max-width:920px}
.hero h1,.page-hero h1{margin-inline:auto;max-width:15em}
.hero .lede,.page-hero .lede{margin-inline:auto;max-width:40em}
.hero-actions{justify-content:center}
.hero-meta{justify-content:center}
.crumbs{justify-content:center}
.rot{text-align:left}
.rot-dot{color:var(--ink);-webkit-text-fill-color:var(--ink)}
.hero .plan,.page-hero .frame{width:100%;max-width:900px;margin-top:clamp(40px,5vw,64px);padding:clamp(14px,2.6vw,32px);border-radius:32px;background:linear-gradient(165deg,var(--accent-soft) 0%,color-mix(in srgb,var(--accent-soft) 35%,transparent) 60%,transparent 100%)}
.hero .plan figcaption,.page-hero .frame figcaption{text-align:center;margin-inline:auto}
.plan-frame,.frame-box{border-radius:20px}

/* Section intros centered over the content they introduce */
.sec-head{display:block;text-align:center;max-width:880px;margin:0 auto clamp(40px,5vw,64px)}
.sec-head h2{margin-top:12px}
.sec-head > p{margin:18px auto 0;max-width:42em}
.section{padding-block:clamp(84px,10vw,140px)}

/* Selected outcomes as one rounded panel */
.stats{padding:30px clamp(20px,3vw,40px);border:1px solid var(--rule);border-radius:24px;background:var(--surface)}

/* How I work: five cards */
.steps{gap:16px;border-top:0}
.step,.step+.step{padding:26px 22px 22px;border:1px solid var(--rule);border-radius:20px;background:var(--surface)}
@media (max-width:1080px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step,.step+.step,.step:first-child{display:block;border:1px solid var(--rule);padding:22px}
  .step h3{margin-top:12px}
  .step p{grid-column:auto;grid-row:auto;margin-top:10px}
}
@media (max-width:640px){.steps{grid-template-columns:minmax(0,1fr)}}

/* Control Tower modules as cards */
.modules{gap:16px;border-top:0;margin-top:clamp(48px,6vw,72px)}
.modules-title{padding-top:0;margin-bottom:4px}
.module{padding:20px 20px 18px;border:1px solid var(--rule);border-radius:18px;background:var(--surface)}

/* Work filters centered under the intro */
.filters{justify-content:center}
.count{flex-basis:100%;margin:6px 0 0;text-align:center}

/* ---------- App Store-style app cards ---------- */
.card{padding:12px 12px 18px;border-radius:26px}
.card-media{width:100%;margin:0 0 16px;border:1px solid var(--rule);border-radius:18px}
.card-top,.card .kpis,.card .chips,.card .case-details{margin-inline:8px}
.app-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center}
.app-icon{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;flex:none;color:#fff;background:linear-gradient(145deg,var(--i1),var(--i2));box-shadow:inset 0 0 0 .5px rgba(0,0,0,.14),0 8px 16px -10px var(--i2)}
.app-icon svg{width:28px;height:28px}
.app-meta{min-width:0}
.card .app-meta h3{margin-top:0;font-size:1.12rem;line-height:1.22;font-weight:500;letter-spacing:-.005em}
.card .app-sub{margin-top:4px;font-family:var(--font-body);font-size:.8rem;letter-spacing:0;text-transform:none}
.get{font:700 .76rem/1 var(--font-body);letter-spacing:.05em;text-transform:uppercase;padding:9px 16px;border-radius:999px;border:0;background:var(--accent-soft);color:var(--accent);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s}
.get:hover,.get:focus-visible{background:var(--accent);color:var(--paper)}
.card .sum{margin-top:14px}
.card-media .media-tag{left:12px;bottom:12px}

/* ---------- App Store-style screenshot shelves ---------- */
.shelf + .shelf{margin-top:clamp(36px,4vw,52px)}
.shelf-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;padding-top:14px;border-top:1px solid var(--rule)}
.shelf-head h3{font-size:clamp(1.3rem,1.1rem + .6vw,1.7rem);line-height:1.15;font-weight:400}
.shelf-head p{font-family:var(--font-mono);font-size:.74rem;color:var(--muted);margin-top:6px;letter-spacing:.03em}
.shelf-nav{display:flex;gap:8px;align-items:center}
.shelf-nav .icon-btn{width:38px;height:38px;background:var(--surface)}
.shelf-nav .icon-btn:disabled{opacity:.35;cursor:default}
.shots-head .shelf-nav{margin-left:auto}
.shelf-track,.shots.shelf-track{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 40px) / 3);gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin:22px 0 0;padding:4px 2px 16px;list-style:none}
.shelf-track::-webkit-scrollbar{display:none}
.shelf-track > li{scroll-snap-align:start;min-width:0}
.shelf-track:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:12px}
@media (max-width:980px){.shelf-track,.shots.shelf-track{grid-auto-columns:calc((100% - 20px) / 2)}}
@media (max-width:560px){.shelf-track,.shots.shelf-track{grid-auto-columns:86%}}
.shots .shot-btn{border:0;border-radius:0;background:transparent;overflow:visible;box-shadow:none}
.shots .shot-btn:hover{box-shadow:none;transform:none;border-color:transparent}
.shots .shot-btn img{border:1px solid var(--rule);border-radius:18px;box-shadow:0 1px 2px rgba(20,34,58,.06),0 14px 26px -18px rgba(20,34,58,.45);transition:transform .2s ease}
.shots .shot-btn:hover img{transform:translateY(-3px)}
.shots .shot-cap{padding:12px 4px 0}
@media (prefers-reduced-motion:reduce){.shots .shot-btn:hover img{transform:none}}
.car-viewport{border-radius:18px}

/* AI practice band: cards on the dark band */
.practice li{border:1px solid var(--band-rule);border-radius:20px;padding:24px 24px 26px;background:var(--band-2)}
.autos li{border:1px solid var(--band-rule);border-radius:18px;padding:20px 20px 22px;background:var(--band-2)}
.terminal{border-radius:20px}

/* Rounder surfaces elsewhere */
.comm-item,.col,.cta,.career,.patent{border-radius:22px}
.arch-scroll{border-radius:20px}
.arch-head{justify-content:center;flex-direction:column}

/* Contact as a closing call-to-action panel */
.contact-panel{text-align:center;padding:clamp(44px,6vw,84px) clamp(18px,5vw,72px);border:1px solid var(--rule);border-radius:32px;background:linear-gradient(150deg,var(--accent-soft) 0%,var(--surface) 70%)}
.contact h2{margin-inline:auto}
.contact .lede{margin-inline:auto}
.c-list{margin:44px auto 0;text-align:left}

/* =====================================================================
   Round 7: two-slide hero (AI transformation, Asana PMO)
   ===================================================================== */
.hero-switch-row{display:flex;justify-content:center;align-items:center;gap:10px;margin-bottom:clamp(14px,2vw,22px)}
.hero-switch{display:inline-flex;padding:4px;gap:4px;border:1px solid var(--rule-strong);border-radius:999px;background:var(--surface)}
.hero-switch button{font:500 .8rem/1 var(--font-body);padding:8px 14px;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;transition:background-color .2s,color .2s}
.hero-switch button:hover{color:var(--ink)}
.hero-switch button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.hero-pause{width:34px;height:34px;border-radius:50%;border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.hero-pause:hover{border-color:var(--ink)}
.hero-pause svg{width:14px;height:14px}
.hero-pause .i-play{display:none}
.hero-pause[aria-pressed="true"] .i-play{display:block}
.hero-pause[aria-pressed="true"] .i-pause{display:none}
.hero-stack{display:grid}
.hero-slide{grid-area:1 / 1;min-width:0;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.hero-slide.is-active{opacity:1;visibility:visible;transition:opacity .5s ease}
.hero .hero-h{font-family:var(--font-display);font-size:var(--fs-display);line-height:1.04;letter-spacing:-.03em;font-weight:300;color:var(--ink);margin:20px auto 0;max-width:15em}
.hero .hero-h em{font-style:normal;font-weight:400;color:var(--accent)}
.partner-seal{display:grid;place-items:center;width:18px;height:18px;color:var(--accent-bright)}
.partner-seal svg{width:16px;height:16px}
.pm-ring-bg{fill:none;stroke:var(--rule);stroke-width:3}
.pm-ring{fill:none;stroke:var(--accent-bright);stroke-width:3;stroke-linecap:round}
.pm-ok{fill:var(--accent-bright)}
.pm-risk{fill:#E8A33D}
.pm-over{fill:#E2614B}
.pm-cap{stroke:#E2614B;stroke-width:1.2;stroke-dasharray:3 3;opacity:.85}
.pm-node{fill:var(--surface);stroke:var(--bar);stroke-width:1.4}
.pm-node-ai{stroke:var(--accent-bright);stroke-width:1.8}
.pm-av{fill:var(--bar-soft);stroke:var(--surface);stroke-width:2}
.pm-av.lead{fill:var(--accent-bright)}
[data-gx]{transform-box:fill-box;transform-origin:center}
[data-gx].pulse{animation:gate-pulse .8s ease-out}
.lg-ok{width:9px;height:9px;border-radius:50%;background:var(--accent-bright)}
.lg-risk{width:9px;height:9px;border-radius:50%;background:#E8A33D}
.lg-over{width:18px;height:7px;border-radius:4px;background:#E2614B}
@media (prefers-reduced-motion:reduce){.hero-slide,.hero-slide.is-active{transition:none}}
.agent-v{min-width:0}
.hero{overflow-x:clip}
@media (max-width:560px){.partner-line{flex-wrap:wrap;justify-content:center;border-radius:16px;row-gap:2px}.partner-line .agent-v{white-space:normal;text-align:center}}

/* =====================================================================
   Round 8: side-by-side hero, Work Graph and Control Tower figures
   ===================================================================== */
.hero-grid,.page-hero .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);justify-items:stretch;align-items:center;text-align:left;gap:clamp(30px,4.5vw,64px)}
.hero-grid > div{max-width:none;min-width:0}
.hero h1,.hero .hero-h{font-size:clamp(2.3rem,1.4rem + 3vw,3.9rem);margin-inline:0;max-width:12.5em}
.page-hero h1{margin-inline:0}
.hero .lede,.page-hero .lede{margin-inline:0}
.hero-actions,.hero-meta,.crumbs,.hero-switch-row{justify-content:flex-start}
.hero .plan,.page-hero .frame{margin-top:0;max-width:none;padding:clamp(10px,1.4vw,18px);border-radius:28px}
.hero .plan figcaption,.page-hero .frame figcaption{text-align:left;margin-inline:0}
@media (max-width:1020px){
  .hero-grid,.page-hero .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero .plan,.page-hero .frame{margin-top:28px}
}
.hero-switch button{white-space:nowrap}
@media (max-width:480px){.hero-switch button{padding:8px 10px;font-size:.74rem}}
/* Work Graph */
.wg-edge{fill:none;stroke:var(--rule-strong);stroke-width:1.1}
.wg-edge-ai{stroke:var(--accent-bright);stroke-dasharray:3 3}
.wg-goal{fill:var(--accent-bright)}
.wg-goal-s{fill:var(--surface);stroke:var(--accent-bright);stroke-width:2}
.wg-ring-bg{fill:none;stroke:var(--rule);stroke-width:2.4}
.wg-ring{fill:none;stroke:var(--accent-bright);stroke-width:2.4;stroke-linecap:round}
.wg-port{fill:var(--bar)}
.wg-proj{fill:var(--bar-soft)}
.wg-proj-hot{fill:var(--bar)}
.wg-task{fill:var(--surface);stroke:var(--bar);stroke-width:1.4}
.wg-ai{fill:var(--accent-bright)}
.wg-api{fill:var(--surface);stroke:var(--accent-bright);stroke-width:1.4}
.wg-api-t{font:600 7px var(--font-mono);fill:var(--accent);letter-spacing:.04em}
.pm-feat rect{fill:var(--surface);stroke:var(--rule-strong);stroke-width:1;transition:fill .3s,stroke .3s}
.pm-feat text{font:500 9.5px var(--font-mono);fill:var(--text);letter-spacing:.01em}
.gantt[data-lane="0"] .pm-feat[data-lane="0"] rect{fill:var(--accent-soft);stroke:var(--accent-bright)}
.gantt[data-lane="1"] .pm-feat[data-lane="1"] rect{fill:var(--accent-soft);stroke:var(--accent-bright)}
.gantt[data-lane="2"] .pm-feat[data-lane="2"] rect{fill:var(--accent-soft);stroke:var(--accent-bright)}
.gantt[data-lane="3"] .pm-feat[data-lane="3"] rect{fill:var(--accent-soft);stroke:var(--accent-bright)}
.gantt[data-lane="4"] .pm-feat[data-lane="4"] rect{fill:var(--accent-soft);stroke:var(--accent-bright)}
/* Control Tower */
.ct-src{fill:var(--surface);stroke:var(--rule-strong);stroke-width:1}
.ct-src-t{font:500 8.5px var(--font-mono);fill:var(--text)}
.ct-merge{fill:var(--accent-bright)}
.ct-chk{fill:var(--surface);stroke:var(--bar);stroke-width:1.1}
.ct-tick{fill:none;stroke:var(--accent-bright);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ct-flag{fill:#E8A33D}
.ct-comm{fill:var(--accent-soft);opacity:.85}
.ct-kn{fill:var(--surface);stroke:var(--accent-bright);stroke-width:1.3}
.ct-planner{fill:var(--accent-bright)}
.ct-agent{fill:var(--surface);stroke:var(--bar);stroke-width:1.4}
.ct-cover{fill:var(--bar)}
.lg-goal{width:9px;height:9px;border-radius:50%;background:var(--accent-bright)}
.lg-port{width:9px;height:9px;border-radius:2px;background:var(--bar)}
.lg-task{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--bar);background:var(--surface)}
.lg-src{width:16px;height:9px;border-radius:3px;border:1px solid var(--rule-strong);background:var(--surface)}
.lg-chk{width:9px;height:9px;border-radius:2px;border:1.2px solid var(--bar);background:var(--surface)}

/* =====================================================================
   Round 8b: Control Tower and design-studio hero figures, 4-tab switcher
   ===================================================================== */
.ct-sync{fill:none;stroke:var(--accent-bright);stroke-width:1.3;stroke-dasharray:3 4;animation:ctflow 1.6s linear infinite}
.ct-sync-r{animation-direction:reverse;opacity:.55}
@keyframes ctflow{to{stroke-dashoffset:-14}}
.hero-slide:not(.is-active) .ct-sync{animation-play-state:paused}
.ct-src-api{stroke:var(--accent-bright)}
.ct-appr{fill:var(--surface);stroke:var(--bar);stroke-width:1.4}
.ct-appr-ok{fill:var(--accent-bright);stroke:var(--accent-bright)}
.ct-appr-tick{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ct-llm{fill:var(--accent-bright)}
.ct-pole{stroke:var(--muted);stroke-width:1.2}
.ct-risk{fill:#E8A33D}
.st-a{fill:#F5C451}.st-b{fill:var(--accent-soft)}.st-c{fill:#BFD3F2}
.ds-t1{fill:var(--accent-bright)}.ds-t2{fill:var(--bar)}.ds-t3{fill:#E8A33D}
.ds-type{font:400 17px var(--font-body);fill:var(--text)}
.ds-btn{fill:var(--bar)}
.ds-btn-t{font:600 7px var(--font-body);fill:#fff}
.ds-toggle{fill:var(--accent-bright)}
.ds-knob{fill:#fff}
.ds-input{fill:var(--surface);stroke:var(--rule-strong);stroke-width:1}
.ds-caret{stroke:var(--accent-bright);stroke-width:1.2}
.ds-frame{fill:var(--surface);stroke:var(--rule-strong);stroke-width:1}
.ds-bar{fill:var(--bar-soft)}
.ds-side{fill:var(--rule)}
.ds-line{fill:var(--rule-strong)}
.ds-card{fill:var(--accent-soft)}
.tl-track{fill:var(--rule);opacity:.7}
.tl-clip{fill:var(--bar)}
.tl-clip-b{fill:var(--accent-bright)}
.tl-audio{fill:var(--bar-soft)}
.cam{fill:var(--surface);stroke:var(--rule-strong);stroke-width:1}
.cam-pgm{stroke:#E5484D;stroke-width:1.8}
.pgm{fill:var(--bar)}
.pgm-t{font:700 7px var(--font-mono);fill:#fff;letter-spacing:.06em}
.poll{fill:var(--accent-bright)}
.live-dot{fill:#E5484D}
.lg-appr{width:9px;height:9px;border-radius:50%;border:1.4px solid var(--bar);background:var(--surface)}
.lg-sticky{width:9px;height:9px;border-radius:2px;background:#F5C451}
.lg-token{width:9px;height:9px;border-radius:50%;background:var(--accent-bright)}
.lg-screen{width:12px;height:9px;border-radius:2px;border:1.2px solid var(--rule-strong);background:var(--surface)}
.lg-clip{width:14px;height:6px;border-radius:2px;background:var(--bar)}
.lg-cam{width:12px;height:9px;border-radius:2px;border:1.6px solid #E5484D}
.hero-switch-row{flex-wrap:nowrap}
.hero-switch{max-width:calc(100% - 52px);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hero-switch::-webkit-scrollbar{display:none}
.hero-meta li.line-start::before{display:none}
@media (prefers-reduced-motion:reduce){.ct-sync{animation:none}}

.sc-tally{fill:none;stroke:#E5484D;stroke-width:2.5}
.sc-live{fill:#E5484D}
.sc-prev{fill:#3BB273}
.sc-live-line{stroke:#E5484D;stroke-width:1.6}

/* =====================================================================
   Round 8b: Font Awesome icons and the Certifications section
   ===================================================================== */
.ico{display:inline-flex;align-items:center;justify-content:center;width:1.2em;margin-right:.5em;flex:none;color:var(--accent);line-height:1}
.ico svg{width:1em;height:1em}
.fa-missing .ico:not(.ico-svg){display:none}
.eyebrow .ico{margin-right:.55em}
.filter .ico{margin-right:.4em;color:currentColor;opacity:.75}
.filter[aria-pressed="true"] .ico{opacity:1}
.group h3 .ico,.module h3 .ico,.step h3 .ico,.practice h3 .ico{color:var(--accent-bright);margin-right:.45em}
.role-when .ico,.role-org .ico{color:var(--muted);margin-right:.4em;width:1em}
.c-item .k .ico{margin-right:.45em}
.btn .ico{color:currentColor;margin:0 .45em 0 -.1em}
.cert-block{margin-top:clamp(30px,4vw,46px)}
.cert-block:first-of-type{margin-top:8px}
.cert-group-title{display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.78rem;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.certs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:16px}
.certs--awards{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1080px){.certs,.certs--awards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.certs,.certs--awards{grid-template-columns:minmax(0,1fr)}}
.cert{display:flex;gap:14px;align-items:flex-start;padding:18px 18px 16px;border:1px solid var(--rule);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease;min-width:0}
@media (hover:hover){.cert:hover{transform:translateY(-3px)}}
.cert-icon{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;font-size:19px;background:linear-gradient(145deg,var(--c1),var(--c2));box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 14px -8px var(--c2)}
.cert-icon svg{width:20px;height:20px}
.cert h4{font-size:1rem;line-height:1.3;font-weight:500;margin:0;letter-spacing:-.005em}
.cert h4 a{color:inherit;text-decoration-color:var(--rule-strong)}
.cert p{font-size:.84rem;color:var(--muted);margin-top:4px;line-height:1.45}
.cert-tag{display:inline-block;margin-top:9px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em;padding:2px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.cert{position:relative}
.cert-badge{position:absolute;top:10px;right:10px;width:40px;height:auto;pointer-events:none}
.cert-date{margin:6px 0 0;font-family:var(--font-mono);font-size:.74rem;color:var(--mute)}
@media (prefers-reduced-motion:reduce){.cert{transition:none}}

/* Round 8b: UX layer helpers (the components themselves use Tailwind utilities) */
.rv{opacity:0;translate:0 22px;transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1)!important}
.rv.rv-in{opacity:1;translate:0 0}
@media print{.rv{opacity:1!important;translate:none!important}}
.flash{animation:flash 1.8s ease}
@keyframes flash{0%,100%{box-shadow:0 0 0 0 transparent}18%,60%{box-shadow:0 0 0 3px var(--accent-bright)}}
.fa-missing .cert-icon i{display:none}
.fa-missing .cert-icon::after{content:attr(data-abbr);font:700 .74rem/1 var(--font-mono);letter-spacing:.02em}
.cmdk-btn + .theme-pick{margin-left:-12px}
#cmdk[open]{animation:cmdkIn .18s ease-out}
@keyframes cmdkIn{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#cmdk[open]{animation:none}.flash{animation:none}}
@media (min-width:1261px) and (max-width:1420px){.nav-links{gap:18px}.nav-links a{font-size:.9rem}.nav{gap:18px}}
@media (max-width:560px){
  .gantt-wg .g-lane,.gantt-ct .g-lane,.gantt-ds .g-lane{font-size:12px;letter-spacing:.04em}
  .gantt-wg .g-axis,.gantt-ct .g-axis,.gantt-ds .g-axis{font-size:12px}
}
.pgm-t,.ds-btn-t{fill:var(--surface)}

/* =====================================================================
   Round 9: AI-approach strip on project cards, approach note, About me figure
   ===================================================================== */
.ai-fit{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0}
.ai-fit .fit{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.02em;line-height:1.3;padding:3px 9px;border-radius:999px;border:1px solid var(--rule);color:var(--muted);background:var(--surface);white-space:nowrap}
.ai-fit .fit-r{color:var(--accent);background:var(--accent-soft);border-color:transparent}
.ai-fit .fit-l{color:var(--ink)}
.approach-note{margin:clamp(22px,3vw,32px) auto 0;max-width:62em;text-align:center;font-size:.9rem;color:var(--muted);line-height:1.6}
.approach-note b{color:var(--ink);font-weight:500}
.approach-note .fit{font-family:var(--font-mono);font-size:.72rem;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
@media (max-width:560px){.gantt-me .g-lane{font-size:12px;letter-spacing:.04em}.gantt-me .g-axis{font-size:12px}}

/* ---------- Round 10: Control Tower architecture ---------- */
.ct-arch .shots-head{margin-bottom:18px}
.ct-arch-fig{margin:0}
.ct-arch-shot{display:block;width:100%;padding:0;border:1px solid var(--rule);border-radius:18px;background:#fff;overflow:hidden;cursor:zoom-in;box-shadow:var(--shadow)}
.ct-arch-shot img{display:block;width:100%;height:auto}
.ct-arch-shot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ct-arch-fig figcaption{font-size:.82rem;line-height:1.5;color:var(--muted);margin-top:10px;max-width:60em}
.ct-flow{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;counter-reset:flow}
.ct-flow li{counter-increment:flow;padding:14px;border:1px solid var(--rule);border-radius:14px;background:var(--surface);min-width:0}
.ct-flow li::before{content:counter(flow);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--surface);font:500 .72rem/1 var(--font-mono);margin-bottom:8px}
.ct-flow b{display:block;font-weight:500;color:var(--ink);font-size:.95rem;line-height:1.3}
.ct-flow span{display:block;font-size:.82rem;line-height:1.45;color:var(--muted);margin-top:4px}
@media (max-width:1180px){.ct-flow{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.ct-flow{grid-template-columns:minmax(0,1fr)}}

/* ---------- Round 11: Analytics & insights hero figure ---------- */
.an-db{fill:var(--surface);stroke:var(--bar);stroke-width:1.4}
.an-db-l{fill:none;stroke:var(--bar);stroke-width:1.1}
.an-fact{fill:var(--bar)}
.an-t{font:600 7px var(--font-mono);fill:var(--surface);letter-spacing:.08em}
.an-dim{font:500 7.5px var(--font-mono);fill:var(--muted)}
.an-axis{fill:none;stroke:var(--rule-strong);stroke-width:1}
.an-line{fill:none;stroke:var(--accent-bright);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.an-line2{fill:none;stroke:var(--bar-soft);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.an-act{fill:none;stroke:var(--bar);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.an-fc{fill:none;stroke:var(--accent-bright);stroke-width:1.6;stroke-dasharray:3 3}
.an-band{fill:var(--accent-soft);opacity:.95}
.an-today{fill:none;stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3}
.lg-trend{width:18px;height:0;border-top:2px solid var(--accent-bright);transform:skewY(-16deg)}
.lg-band{width:18px;height:9px;border-radius:2px;background:var(--accent-soft);border-top:2px dashed var(--accent-bright)}
@media (max-width:560px){.gantt-an .g-lane{font-size:12px;letter-spacing:.04em}.gantt-an .g-axis{font-size:12px}}

/* ---------- Round 12: no orphan words; hero back/forward and time left ---------- */
.brand-role{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:719px),(min-width:1261px){.brand-title{display:none}}
.eyebrow,.role-line{text-wrap:balance}
.nobr{white-space:nowrap}
.hero-step:focus-visible,.hero-pause:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- Round 13: a cleaner hero switcher (text tabs over progress segments, one control pill) ---------- */
.hero-switch-row{justify-content:space-between;align-items:center;gap:28px;flex-wrap:nowrap}
.hero-switch{flex:1 1 auto;min-width:0;max-width:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(max-content,1fr);gap:18px;padding:0;border:0;border-radius:0;background:none;overflow-x:auto;scrollbar-width:none}
.hero-switch [role="tab"]{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:8px 0 6px;border:0;border-radius:0;background:none;color:var(--muted);font:500 .8rem/1.2 var(--font-body);letter-spacing:.005em;text-align:left;white-space:nowrap;cursor:pointer;transition:color .2s}
.hero-switch [role="tab"]:hover{background:none;color:var(--ink)}
.hero-switch [role="tab"][aria-selected="true"]{background:none;color:var(--ink)}
.hero-switch [role="tab"]::after,.hero-switch [role="tab"][aria-selected="true"]::after{content:"";position:static;display:block;width:auto;height:3px;border-radius:3px;transform:none;background:linear-gradient(var(--accent-bright),var(--accent-bright)) left center/calc(var(--hp,0) * 100%) 100% no-repeat,var(--rule)}
.hero-switch-row.is-paused [role="tab"][aria-selected="true"]::after{background:linear-gradient(var(--muted),var(--muted)) left center/calc(var(--hp,0) * 100%) 100% no-repeat,var(--rule)}
.hero-switch [role="tab"]:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.hero-ctrl{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);flex:none}
.hero-ctrl .hero-step,.hero-ctrl .hero-pause{width:32px;height:32px;border:0;border-radius:50%;padding:0;display:grid;place-items:center;cursor:pointer;transition:background-color .2s,color .2s}
.hero-ctrl .hero-step{background:transparent;color:var(--muted)}
.hero-ctrl .hero-step:hover{background:var(--paper-2);color:var(--ink)}
.hero-ctrl .hero-pause{background:var(--ink);color:var(--surface)}
.hero-ctrl .hero-pause:hover{background:var(--accent);color:#fff}
.hero-ctrl svg{width:14px;height:14px}
@media (max-width:900px){
  .hero-switch-row{gap:14px}
  .hero-switch{grid-auto-columns:1fr;gap:6px;overflow:visible}
  .hero-switch [role="tab"]{padding:15px 0 11px;gap:0}
  .hero-switch .tab-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}

/* ---------- Round 14: Retina Evidence Hub featured workflow ---------- */
.build-note{display:flex;gap:14px;align-items:flex-start;margin-top:22px;padding:16px 18px;border:1px solid var(--rule);border-left:3px solid var(--accent-bright);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);max-width:36em}
.build-note .bn-ico{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.build-note .bn-ico svg{width:20px;height:20px}
.build-note b{display:block;font-weight:500;color:var(--ink);font-size:.98rem;line-height:1.35}
.build-note p{margin:5px 0 0;font-size:.88rem;line-height:1.55;color:var(--muted)}
.build-note .bn-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.build-note .bn-tools span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.03em;padding:3px 9px;border-radius:999px;background:var(--paper-2);color:var(--text)}
.ad-badge circle{fill:var(--ink)}
.ad-badge text{font:700 10px var(--font-mono);fill:var(--surface)}

/* ---------- Round 15: logo app icons ---------- */
.app-icon--logo{background:#fff;padding:5px;box-shadow:inset 0 0 0 1px rgba(20,34,58,.1),0 8px 16px -10px rgba(20,34,58,.4)}
.app-icon--logo img{display:block;width:100%;height:100%;object-fit:contain}

/* ---------- Round 18: live demo modal ([data-embed] links) ---------- */
dialog.embed{width:min(1400px,calc(100vw - 24px));height:min(900px,calc(100vh - 24px));max-width:none;max-height:none;padding:0;border:1px solid var(--rule);border-radius:12px;background:var(--surface);color:var(--text);overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
dialog.embed[open]{display:flex;flex-direction:column}
dialog.embed::backdrop{background:var(--overlay-strong)}
.embed-head{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 20px;border-bottom:1px solid var(--rule)}
.embed-head > div{flex:1;min-width:0}
.embed-head h3{font-size:1.05rem;line-height:1.3;margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.embed-stage{position:relative;flex:1;min-height:0;overflow:hidden;background:#E6E6E6}
.embed-stage iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;background:#E6E6E6}
.embed-wait{position:absolute;inset:0;z-index:1;display:grid;place-items:center;margin:0;background:#E6E6E6;pointer-events:none;font:500 .78rem/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#4A5160}
.embed-wait[hidden]{display:none}

/* ---------- Round 20: Control Tower diagram tabs; build story (prompts, iterations, refinements) ---------- */
.ct-arch .shots-head{gap:16px 24px}
.ct-arch-open{flex:none;align-self:flex-end}
.ct-arch-tabs .arch-head{margin:4px 0 14px}
.ct-arch-panel[hidden]{display:none}
.ct-arch-fig figcaption b{font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-right:8px}
.build-block{margin-top:clamp(44px,6vw,72px)}
.build-block .shots-head{margin-bottom:18px}
.prompt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:900px){.prompt-grid{grid-template-columns:minmax(0,1fr)}}
.prompt{display:flex;flex-direction:column;gap:8px;min-width:0;padding:18px 20px;border:1px solid var(--rule);border-radius:14px;background:var(--surface)}
.prompt h4{font-size:1.05rem;font-weight:500;line-height:1.3}
.prompt-k{margin-top:4px;font:500 .66rem/1.2 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.prompt-ask{font-size:.95rem;line-height:1.5;color:var(--text)}
.prompt-text{margin:0;padding:12px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--paper-2);color:var(--text);font:400 .76rem/1.6 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere}
.prompt-text code{font:inherit}
.prompt-out{font-size:.9rem;line-height:1.5;color:var(--text)}
.iter-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:iter}
@media (max-width:1080px){.iter-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.iter-list{grid-template-columns:minmax(0,1fr)}}
.iter-list li{counter-increment:iter;min-width:0;padding:16px 18px;border:1px solid var(--rule);border-radius:14px;background:var(--surface)}
.iter-list li::before{content:"Phase " counter(iter);display:block;margin-bottom:8px;font:500 .66rem/1 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.iter-list b{display:block;font-weight:500;font-size:1rem;color:var(--ink)}
.iter-list span{display:block;margin-top:4px;font-size:.86rem;line-height:1.5;color:var(--muted)}
.refine-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:900px){.refine-list{grid-template-columns:minmax(0,1fr)}}
.refine-list li{min-width:0;padding:16px 18px;border:1px solid var(--rule);border-radius:14px;background:var(--surface)}
.refine-list b{display:block;margin-bottom:8px;font-weight:500;font-size:1rem;color:var(--ink)}
.refine-list dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0}
.refine-list dt{font:500 .66rem/1.7 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.refine-list dt.rf-guard{color:var(--accent)}
.refine-list dd{margin:0;font-size:.88rem;line-height:1.5;color:var(--text)}

/* ---------- Round 21: multi-page site, brand palette, header email and tagline, manual hero, Portfolio page,
   search thumbnails, interactive work, Resume and Skills & Experience ---------- */
:root{--header-h:76px}

/* Palette in use: navy ink, blue for actions and links, purple for AI */
.btn-primary{background:var(--accent-bright);border-color:var(--accent-bright);color:#fff}
.btn-primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-ghost{border-color:var(--rule-strong)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.wm-b{color:var(--accent-bright)}
.lm-ai{fill:var(--accent-2)}
.lm-flow{stroke:var(--accent-2)}
.ai-spark{background:var(--accent-2)}
.g-bar-ai,.wg-ai,.ct-llm{fill:var(--accent-2)}
.lg-ai{background:var(--accent-2)}
.ai-fit .fit-l{color:var(--accent-2);background:var(--accent-2-soft);border-color:transparent}
.rot-word{animation:none;background:linear-gradient(90deg,var(--accent-bright) 0%,var(--accent-2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.get{background:var(--accent-soft);color:var(--accent)}
.get:hover,.get:focus-visible{background:var(--accent-bright);color:#fff}
.patent{border-color:var(--accent-2-bright);background:linear-gradient(115deg,var(--accent-2-soft) 0%,var(--surface) 64%)}

/* Header: logo and name, then email and the tagline; both stay in the sticky header while the page scrolls */
.nav{height:auto;min-height:var(--header-h);padding-block:8px;gap:18px}
.brand-block{display:flex;flex-direction:column;gap:3px;margin-right:auto;min-width:0}
.brand-block .brand{margin-right:0}
.brand-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0 0 0 50px;line-height:1.2}
.brand-email{display:inline-flex;align-items:center;gap:6px;font:500 .74rem/1.2 var(--font-mono);letter-spacing:.02em;color:var(--muted);text-decoration:none;white-space:nowrap}
.brand-email:hover{color:var(--accent)}
.brand-email .ico{font-size:.8rem}
.brand-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 9px;border-radius:999px;background:linear-gradient(90deg,var(--accent-soft),var(--accent-2-soft));font:500 .64rem/1.2 var(--font-mono);letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
.brand-tag .bt-goal{color:var(--ink)}
.brand-tag .bt-out{color:var(--accent-2)}
.brand-tag svg{width:14px;height:10px;flex:none;color:var(--accent-bright)}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:500}
.nav-links a[aria-current="page"]::after{transform:scaleX(1);background:var(--accent-bright)}
@media (max-width:1260px){
  .nav-links{top:100%}
  .nav-links a[aria-current="page"]{color:var(--accent)}
}
@media (max-width:560px){
  .brand-sub{margin-left:0}
  .brand-email{font-size:.7rem}
}
.cmdk-btn.search-pill{width:auto;height:38px;padding:0 12px 0 11px;border-radius:999px;gap:8px;display:inline-flex;align-items:center;font:500 .82rem/1 var(--font-body);color:var(--muted);background:var(--surface)}
.cmdk-btn.search-pill:hover{color:var(--ink);border-color:var(--accent-bright)}
.search-pill svg{width:16px;height:16px}
.search-pill kbd{font:500 .66rem/1 var(--font-mono);padding:3px 6px;border:1px solid var(--rule);border-radius:6px;color:var(--muted);background:var(--paper)}
@media (max-width:1400px){.search-pill kbd{display:none}}
@media (max-width:720px){.search-pill .sp-label{display:none}.cmdk-btn.search-pill{width:38px;padding:0;justify-content:center}}

/* Section heads stand out and read as selectable: eyebrow pill, accent rule, page titles as h1 */
.sec-head .eyebrow,.ct-copy > .eyebrow,.page-head .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent-bright) 22%,transparent)}
.band .sec-head .eyebrow{background:rgba(255,255,255,.08);color:var(--band-accent);border-color:rgba(255,255,255,.14)}
.sec-head h1{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.015em;margin-top:12px;font-weight:300}
.sec-head h1::after,.sec-head h2::after{content:"";display:block;width:56px;height:3px;margin:16px auto 0;border-radius:3px;background:linear-gradient(90deg,var(--accent-bright),var(--accent-2))}
.ct-copy h1{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.015em;font-weight:300;margin-top:14px}
.contact h1{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.015em;font-weight:300;margin-top:12px}
a.sec-link{display:block;color:inherit;text-decoration:none;border-radius:18px}
a.sec-link:hover h2,a.sec-link:hover h1{color:var(--accent)}
a.sec-link .go{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font:500 .86rem var(--font-body);color:var(--accent)}
.page-crumbs{padding-top:clamp(18px,2.4vw,28px)}
.page-crumbs .crumbs{justify-content:center}

/* Hero: prominent tabs, manual slides */
.hero-tabs-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(20px,2.8vw,36px);margin-bottom:0}
.hero-tabs{display:flex;gap:8px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;padding:3px}
.hero-tabs::-webkit-scrollbar{display:none}
.hero-tab{flex:none;display:inline-flex;align-items:center;gap:9px;padding:8px 16px 8px 8px;border:1px solid var(--rule-strong);border-radius:999px;background:var(--surface);color:var(--ink);font:500 .88rem/1.1 var(--font-body);white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px rgba(7,29,73,.05);transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s,transform .15s}
.hero-tab .ht-ico{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:.82rem;flex:none}
.hero-tab:hover{border-color:var(--accent-bright);box-shadow:var(--shadow);transform:translateY(-1px)}
.hero-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);box-shadow:var(--shadow)}
.hero-tab[aria-selected="true"] .ht-ico{background:var(--accent-2);color:#fff}
.hero-tab:focus-visible{outline:2px solid var(--accent-bright);outline-offset:3px}
.hero-nav{display:flex;gap:6px;flex:none}
.hero-arrow{width:38px;height:38px;border-radius:50%;border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.hero-arrow:hover{border-color:var(--accent-bright);color:var(--accent)}
.hero-arrow svg{width:15px;height:15px}
@media (max-width:640px){.hero-nav{display:none}.hero-tab{padding:7px 13px 7px 7px;font-size:.82rem}.hero-tab .ht-ico{width:24px;height:24px}}
@media (prefers-reduced-motion:reduce){.hero-tab,.hero-tab:hover{transition:none;transform:none}}

/* Taglines change smoothly; a small button pauses them */
.rot-caret{display:none}
.rot-word{display:inline-block;transition:opacity .34s ease,transform .34s ease}
.rot-word.rot-out{opacity:0;transform:translateY(-.24em)}
.rot-word.rot-in{opacity:0;transform:translateY(.24em);transition:none}
.agent-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.agent-row .agent-line{margin-top:20px}
.rot-toggle{margin-top:20px;width:30px;height:30px;border-radius:50%;border:1px solid var(--rule);background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0}
.rot-toggle:hover{color:var(--ink);border-color:var(--accent-bright)}
.rot-toggle svg{width:11px;height:11px}
.rot-toggle .i-play{display:none}
.rot-toggle[aria-pressed="true"] .i-play{display:block}
.rot-toggle[aria-pressed="true"] .i-pause{display:none}
@media (prefers-reduced-motion:reduce){.rot-word{transition:none}.rot-toggle{display:none}}

/* Hero figures: static until played; one player under each animation */
.plan-view[hidden]{display:none}
.gantt.is-static .g-comet,.gantt.is-static .g-halo{opacity:0}
.hero-player{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--rule);background:color-mix(in srgb,var(--paper-2) 60%,transparent)}
.hp-play{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);display:grid;place-items:center;cursor:pointer;padding:0;transition:background-color .2s}
.hp-play:hover{background:var(--accent-bright);color:#fff}
.hp-play svg{width:13px;height:13px}
.hp-play .i-pause{display:none}
.hero-player.is-playing .hp-play .i-pause{display:block}
.hero-player.is-playing .hp-play .i-play{display:none}
.hp-range{flex:1 1 auto;min-width:0;height:22px;margin:0;accent-color:var(--accent-bright);cursor:pointer}
.hp-label{flex:none;min-width:9.5em;font:500 .7rem/1.2 var(--font-mono);letter-spacing:.04em;color:var(--muted);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:520px){.hp-label{min-width:0;max-width:7.5em}}

/* Sub-figures with manual navigation (About me; Strategic operations) */
.plan-bar{flex-wrap:wrap;row-gap:8px}
.subfig-nav{display:inline-flex;align-items:center;gap:4px}
.subfig-tabs{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--rule);border-radius:999px;background:var(--paper-2)}
.subfig-tab{font:500 .72rem/1 var(--font-body);letter-spacing:.01em;padding:6px 11px;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap}
.subfig-tab:hover{color:var(--ink)}
.subfig-tab[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(7,29,73,.14)}
.subfig-step{width:26px;height:26px;border-radius:50%;border:1px solid var(--rule);background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0}
.subfig-step:hover{color:var(--ink);border-color:var(--accent-bright)}
.subfig-step svg{width:11px;height:11px}
[data-subfig] .plan-view .plan-body{min-height:340px;display:flex;flex-direction:column;justify-content:center}
@media (max-width:560px){[data-subfig] .plan-view .plan-body{min-height:0}}

/* Career roadmap: the player scrubs the years through --y; static it shows the whole timeline */
.career{--y:2027}
.c-bar{width:max(0%,calc((min(var(--e),var(--y)) - var(--s)) / 25 * 100%))}
.c-ms,.c-ms-label,.c-now{opacity:clamp(0,(var(--y) - var(--t,var(--s))) * 3,1)}
.career--hero{border:0;border-radius:0;background:none;padding:8px 16px 10px;--labelw:9.2rem}
.career--hero .c-row{min-height:40px}
.career--hero .c-track{min-height:40px}
.career--hero .c-row.ms,.career--hero .c-row.ms .c-track{min-height:50px}
.career--hero .c-label{display:flex;align-items:center;gap:8px;padding-right:12px;font-size:.8rem}
.career--hero .c-label b{font-size:.8rem;font-weight:600}
.career--hero .c-label .c-text > span{display:block;font-size:.68rem;line-height:1.25}
.career--hero .c-label .c-text{min-width:0}
.c-label .org-logo{color:var(--ink);font-size:.6rem}
.career--hero .c-tick{font-size:.64rem}
@media (max-width:760px){.career--hero .c-row.ms{display:grid}.career--hero .c-row{grid-template-columns:var(--labelw) minmax(0,1fr);padding:0}.career--hero .c-axis{margin-left:var(--labelw)}}
.career--hero{--labelw:11.5rem}
.career .org-logo[data-org]:not([data-org="edu"]):has(img){width:88px;height:30px;border-radius:8px;padding:0;overflow:hidden;background:#fff}
.career .org-logo[data-org]:not([data-org="edu"]):has(img) img{width:100%;height:100%;padding:6px 9px;object-fit:contain;background:#fff}
@media (max-width:460px){.career--hero{--labelw:8.4rem;padding-inline:10px}.career .org-logo[data-org]:not([data-org="edu"]):has(img){width:66px}.career--hero .c-text > span{display:none}}

/* Company marks: an official logo file when present (assets/logos/), otherwise a monogram tile */
.org-logo{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--paper-2);border:1px solid var(--rule);color:var(--ink);font:700 .62rem/1 var(--font-body);letter-spacing:.02em;overflow:hidden}
.org-logo img{width:100%;height:100%;object-fit:contain;padding:3px;background:#fff}
.org-logo[data-org="abbvie"]{color:#071D49}
.org-logo.lg{width:52px;height:52px;border-radius:12px;font-size:.82rem}

/* About me graphics: certifications and education */
.badge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:16px}
.badge{display:flex;align-items:center;gap:12px;min-width:0;padding:10px 12px;border:1px solid var(--rule);border-radius:14px;background:var(--surface)}
.badge-ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:1rem;background:linear-gradient(135deg,var(--c1,var(--accent-bright)),var(--c2,var(--accent-2)))}
.badge-name{display:block;font-weight:500;font-size:.86rem;line-height:1.25;color:var(--ink)}
.badge-org{display:block;margin-top:2px;font:500 .64rem/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (max-width:460px){.badge-grid{grid-template-columns:minmax(0,1fr)}}
.edu-line{list-style:none;margin:0;padding:18px 20px 18px 30px;position:relative}
.edu-line::before{content:"";position:absolute;left:39px;top:30px;bottom:30px;width:2px;border-radius:2px;background:linear-gradient(var(--accent-bright),var(--accent-2))}
.edu-item{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 14px;align-items:start;padding:10px 0}
.edu-year{position:relative;z-index:1;display:inline-grid;place-items:center;width:44px;height:24px;border-radius:999px;background:var(--surface);border:1px solid var(--accent-bright);font:500 .66rem/1 var(--font-mono);color:var(--accent);margin-left:-12px}
.edu-deg{display:block;font-weight:500;font-size:.92rem;line-height:1.3;color:var(--ink)}
.edu-school{display:block;margin-top:3px;font-size:.8rem;color:var(--muted)}

/* Home: flagships and explore tiles */
.flagships{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
@media (max-width:1080px){.flagships{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.flagships{grid-template-columns:minmax(0,1fr)}}
.flagships--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1080px){.flagships--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.flagships--3{grid-template-columns:minmax(0,1fr)}}
/* Five tiles: two lead a 6-column grid, three follow; on tablets the fifth lies flat across the row */
.flagships--5{grid-template-columns:repeat(6,minmax(0,1fr))}
.flagships--5>li{grid-column:span 2}
.flagships--5>li:nth-child(-n+2){grid-column:span 3}
@media (max-width:1080px){.flagships--5{grid-template-columns:repeat(2,minmax(0,1fr))}.flagships--5>li,.flagships--5>li:nth-child(-n+2){grid-column:auto}}
@media (min-width:601px) and (max-width:1080px){.flagships--5>li:last-child{grid-column:1/-1;flex-direction:row}.flagships--5>li:last-child .flag-media{flex:0 0 calc(50% - 8px)}}
@media (max-width:600px){.flagships--5{grid-template-columns:minmax(0,1fr)}}
.patent-more{margin-top:8px;font-size:.88rem}
.flag-tile{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--rule);border-radius:22px;background:var(--surface);overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s}
.flag-tile:hover{border-color:var(--accent-bright);box-shadow:var(--shadow);transform:translateY(-2px)}
.flag-media{position:relative;display:block;aspect-ratio:16/10;background:var(--paper-2);overflow:hidden}
.flag-media img{display:block;width:100%;height:100%;object-fit:cover}
.flag-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.flag-kicker{font:500 .64rem/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2)}
.flag-body h3{font-size:1.14rem;font-weight:500;line-height:1.25}
.flag-body h3 a{color:inherit;text-decoration:none}
.flag-body h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.flag-body p{font-size:.88rem;line-height:1.5;color:var(--muted)}
.flag-actions{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}
.explore{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0}
@media (max-width:1080px){.explore{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.explore{grid-template-columns:minmax(0,1fr)}}
.explore-tile{display:flex;flex-direction:column;gap:8px;height:100%;padding:20px 20px 18px;border:1px solid var(--rule);border-radius:20px;background:var(--surface);color:var(--text);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.explore-tile:hover{border-color:var(--accent-bright);box-shadow:var(--shadow);transform:translateY(-2px)}
.et-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:1rem}
.explore-tile:nth-child(3n+2) .et-ico{background:var(--accent-2-soft);color:var(--accent-2)}
.et-title{font-size:1.08rem;font-weight:500;color:var(--ink)}
.et-text{font-size:.88rem;line-height:1.5;color:var(--muted)}
.et-go{margin-top:auto;font:500 .82rem var(--font-body);color:var(--accent)}
@media (prefers-reduced-motion:reduce){.flag-tile,.flag-tile:hover,.explore-tile,.explore-tile:hover{transform:none}}

/* Interactive work: a badge and a demo button set it apart */
.btn-demo{border-color:var(--accent-2);color:var(--accent-2);background:var(--surface)}
.btn-demo:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.ix-dot{flex:none;width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:ix-ping 2s ease-out infinite}
.ct-actions{margin-top:22px}
.demo-note{margin-top:8px;font-size:.82rem;color:var(--muted)}
@keyframes ix-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
.ix-badge{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 8px;border-radius:999px;background:var(--accent-2);color:#fff;font:500 .62rem/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 6px 16px -8px rgba(7,29,73,.6)}
.card--interactive{border-color:color-mix(in srgb,var(--accent-2) 45%,var(--rule))}
.card--interactive .play-badge{background:var(--accent-2);color:#fff}
.card .watch.watch-demo{color:var(--accent-2)}
@media (prefers-reduced-motion:reduce){.ix-dot{animation:none}}

/* Portfolio page: jump pills, one section per category with featured tiles and Show all */
.pf-nav{position:sticky;top:calc(62px + env(safe-area-inset-top,0px));z-index:20;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 2px;margin:0 0 clamp(20px,3vw,34px);background:color-mix(in srgb,var(--paper) 92%,transparent);list-style:none}
.pf-nav::-webkit-scrollbar{display:none}
.pf-nav a{flex:none;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--rule-strong);border-radius:999px;background:var(--surface);color:var(--ink);font:500 .84rem/1 var(--font-body);text-decoration:none;white-space:nowrap}
.pf-nav a:hover,.pf-nav a[aria-current="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.pf-nav .n{font:500 .68rem/1 var(--font-mono);color:inherit;opacity:.7}
.pf-section{padding-block:clamp(26px,3.6vw,44px);border-top:1px solid var(--rule)}
.pf-section:first-of-type{border-top:0}
.pf-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:20px}
.pf-head .pf-title{display:flex;align-items:center;gap:14px;min-width:0}
.pf-head .pf-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:1.1rem;flex:none}
.pf-section:nth-of-type(even) .pf-ico{background:var(--accent-2-soft);color:var(--accent-2)}
.pf-head h2{font-size:clamp(1.45rem,1.1rem + 1vw,2rem);font-weight:400;line-height:1.15}
.pf-head h2 a{color:inherit;text-decoration:none}
.pf-head h2 a:hover{color:var(--accent)}
.pf-head p{margin-top:4px;color:var(--muted);font-size:.95rem}
.pf-showall{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--accent-bright);color:var(--accent);font:500 .86rem/1 var(--font-body);text-decoration:none;white-space:nowrap}
.pf-showall:hover{background:var(--accent-bright);color:#fff}
.pf-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
@media (max-width:1080px){.pf-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pf-tiles{grid-template-columns:minmax(0,1fr)}}
.ptile{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--rule);border-radius:20px;background:var(--surface);overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s}
.ptile:hover{border-color:var(--accent-bright);box-shadow:var(--shadow);transform:translateY(-2px)}
.ptile.is-interactive{border-color:color-mix(in srgb,var(--accent-2) 45%,var(--rule))}
.ptile-media{position:relative;display:block;aspect-ratio:16/10;background:var(--paper-2);overflow:hidden}
.ptile-media img,.ptile-media svg{display:block;width:100%;height:100%;object-fit:cover}
.ptile-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.ptile-tags{font:500 .62rem/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ptile h3{font-size:1.02rem;font-weight:500;line-height:1.3}
.ptile h3 a{color:inherit;text-decoration:none}
.ptile h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.ptile p{font-size:.86rem;line-height:1.5;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.ptile,.ptile:hover{transform:none}}
.pf-all{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(28px,4vw,48px);padding:24px 28px;border:1px solid var(--rule);border-radius:22px;background:linear-gradient(115deg,var(--accent-soft),var(--accent-2-soft))}
.pf-all h2{font-size:1.4rem;font-weight:400}

/* All work page: keyword search next to the filters */
.work-search{display:flex;align-items:center;gap:10px;max-width:520px;margin:0 auto 18px;padding:0 14px;border:1px solid var(--rule-strong);border-radius:999px;background:var(--surface)}
.work-search:focus-within{border-color:var(--accent-bright);box-shadow:0 0 0 3px var(--accent-soft)}
.work-search svg{width:16px;height:16px;flex:none;color:var(--muted)}
.work-search input{flex:1;min-width:0;height:44px;border:0;background:transparent;color:var(--ink);font:400 .95rem var(--font-body);outline:none}
.work-empty{margin:24px 0;text-align:center;color:var(--muted)}

/* Search palette thumbnails */
.cmdk-thumb{flex:none;width:56px;height:35px;border-radius:7px;object-fit:cover;background:var(--paper-2);border:1px solid var(--rule)}
.cmdk-ix{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;background:var(--accent-2);color:#fff;font:500 .58rem/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}

/* Skills & Experience */
.role-org{display:flex;align-items:center;gap:10px}
.skills-cloud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1080px){.skills-cloud{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.skills-cloud{grid-template-columns:minmax(0,1fr)}}
.skill-group{padding:18px 20px;border:1px solid var(--rule);border-radius:18px;background:var(--surface)}
.skill-group h3{display:flex;align-items:center;gap:10px;font-size:1.02rem;font-weight:500;margin-bottom:12px}
.skill-group ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.skill-group li{font-size:.8rem;line-height:1.3;padding:5px 10px;border-radius:999px;background:var(--paper-2);color:var(--text)}

/* Resume */
.resume{padding-block:clamp(28px,4vw,56px) clamp(56px,7vw,96px)}
.resume-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 32px;padding-bottom:22px;border-bottom:2px solid var(--ink)}
.resume-head h1{font-size:clamp(2rem,1.4rem + 2.2vw,3rem);font-weight:300;letter-spacing:-.02em;line-height:1.05}
.resume-head .r-degrees{margin-top:8px;font:500 .8rem var(--font-mono);letter-spacing:.06em;color:var(--accent-2)}
.resume-head .r-contact{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:.9rem;list-style:none;padding:0}
.resume-actions{display:flex;flex-wrap:wrap;gap:10px}
.resume-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:clamp(28px,4vw,56px);margin-top:clamp(24px,3vw,36px)}
@media (max-width:980px){.resume-grid{grid-template-columns:minmax(0,1fr)}}
.r-block+.r-block{margin-top:clamp(26px,3vw,36px)}
.r-block h2{display:flex;align-items:center;gap:10px;font:500 .74rem/1.2 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding-bottom:10px;border-bottom:1px solid var(--rule);margin-bottom:14px}
.r-profile{display:grid;gap:14px}
.r-profile p{font-size:.98rem;line-height:1.6}
.r-profile b{color:var(--ink);font-weight:500}
.r-org{display:flex;align-items:center;gap:12px;margin:22px 0 6px}
.r-org:first-of-type{margin-top:0}
.r-org h3{font-size:1.1rem;font-weight:500}
.r-org > span:not(.org-logo){font:500 .72rem var(--font-mono);color:var(--muted)}
.r-role{padding:12px 0 6px 42px}
.r-role-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px}
.r-role-head h4{font-size:1rem;font-weight:500;color:var(--ink)}
.r-when{font:500 .72rem/1.6 var(--font-mono);color:var(--muted);white-space:nowrap}
.r-list{margin:8px 0 0;padding-left:18px}
.r-list li{margin-top:6px;font-size:.92rem;line-height:1.55}
.r-list li::marker{color:var(--accent-bright)}
.r-list b{color:var(--ink);font-weight:500}
.r-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.r-tags li{font-size:.78rem;line-height:1.3;padding:5px 10px;border-radius:999px;background:var(--paper-2);color:var(--text)}
.r-plain{list-style:none;margin:0;padding:0}
.r-plain li{padding:8px 0;border-bottom:1px dashed var(--rule);font-size:.9rem;line-height:1.45}
.r-plain li:last-child{border-bottom:0}
.r-plain small{display:block;color:var(--muted);font-size:.78rem}
@media (max-width:560px){.r-role{padding-left:0}}
@media print{
  .site-header,.site-footer,.resume-actions,.skip,#cmdk,dialog{display:none!important}
  body{background:#fff;color:#000;font-size:10.5pt}
  .resume{padding:0}
  .resume-grid{grid-template-columns:minmax(0,1fr) 31%;gap:22px}
  .r-block h2{color:#000}
  a{color:#000;text-decoration:none}
}

/* Certifications page: names are h3 under the page h1 */
.cert h3{font-size:1rem;line-height:1.3;font-weight:500;margin:0;letter-spacing:-.005em}
.cert h3 a{color:inherit;text-decoration-color:var(--rule-strong)}
h2.cert-group-title{font-size:.78rem;margin:0}
.comm-item h2{font-size:1.26rem;line-height:1.22;font-weight:400;margin-top:4px}

/* Glossary terms (LLM gateway, MPM): dotted underline and a styled tip from the abbr title (tools/sync_chrome.py wraps them) */
abbr.term{text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:3px;cursor:help}
abbr.term[title],abbr.term[data-tip]{border-bottom:0}
.term-tip{position:fixed;z-index:95;max-width:280px;padding:8px 11px;border-radius:10px;background:var(--ink);color:var(--paper);font:400 .78rem/1.45 var(--font-body);box-shadow:var(--shadow);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .15s,transform .15s}
.term-tip.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.term-tip{transition:none}}

/* Footer site map */
.foot-map{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:0 0 18px;padding:0 0 18px;border-bottom:1px solid var(--rule);font-size:.86rem}
.foot-map a{color:var(--text);text-decoration:none}
.foot-map a:hover{color:var(--accent);text-decoration:underline}
.foot-map a[aria-current="page"]{color:var(--ink);font-weight:500}

/* ==========================================================================
   Round 21b: icon navigation, sticky email and tagline, tighter top gaps
   ========================================================================== */
/* Inline SVG icons from the sprite in the header partial; they never depend on the Font Awesome kit */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ni{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico .ni{width:1em;height:1em}

/* Primary navigation: icon over label on wide screens, icon rows in the menu */
.nav-links{gap:2px;align-items:stretch}
.nav-links a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:7px 11px 6px;border-radius:12px;font:500 .8rem/1.15 var(--font-body);letter-spacing:.005em;color:var(--text);transition:background-color .2s,color .2s}
.nav-links a::after{display:none}
.nav-links a .ni{width:19px;height:19px;color:var(--muted);transition:color .2s,transform .2s}
.nav-links a:hover{background:var(--paper-2);color:var(--ink)}
.nav-links a:hover .ni{color:var(--accent-bright);transform:translateY(-1px)}
.nav-links a[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.nav-links a[aria-current="page"] .ni{color:var(--accent-bright)}
.nav-links a:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}
@media (min-width:1261px) and (max-width:1420px){.nav-links{gap:0}.nav-links a{padding-inline:8px;font-size:.78rem}}
@media (max-width:1260px){
  .nav-links{gap:2px;padding-block:8px 12px}
  .nav-links a{flex-direction:row;justify-content:flex-start;gap:14px;padding:12px 10px;border-bottom:0;font-size:1rem}
  .nav-links a .ni{width:20px;height:20px}
}
@media (prefers-reduced-motion:reduce){.nav-links a,.nav-links a .ni{transition:none}.nav-links a:hover .ni{transform:none}}

/* Email and tagline stay in the sticky header; the tagline steps through hero pairs as the page scrolls (site.js) */
.site-header.scrolled{box-shadow:0 10px 24px -20px rgba(7,29,73,.45)}
.brand-email .ni{width:13px;height:13px;stroke-width:1.8}
.brand-tag{justify-content:center}
.brand-tag .bt-pair{display:inline-flex;align-items:center;gap:6px;transition:opacity .26s ease,transform .26s ease}
.brand-tag .bt-pair.bt-leave{opacity:0;transform:translateY(-4px)}
.brand-tag .bt-pair.bt-enter{opacity:0;transform:translateY(4px);transition:none}
@media (prefers-reduced-motion:reduce){.brand-tag .bt-pair{transition:none}}
@media (max-width:560px){
  .brand-block{position:relative;padding-left:42px}
  .brand .logo-mark{position:absolute;left:0;top:50%;width:32px;height:32px;margin-top:-16px}
  .brand-sub{margin-left:0;gap:3px 10px}
}

/* Hero tabs and buttons use the sprite icons */
.hero-tab .ht-ico .ni{width:15px;height:15px}
@media (max-width:640px){.hero-tab .ht-ico .ni{width:13px;height:13px}}

/* Footer site map with icons */
.foot-map a{display:inline-flex;align-items:center;gap:7px}
.foot-map a .ni{width:15px;height:15px;color:var(--muted)}
.foot-map a:hover{text-decoration:none}
.foot-map a:hover span{text-decoration:underline}
.foot-map a:hover .ni,.foot-map a[aria-current="page"] .ni{color:var(--accent-bright)}

/* Tighter top gap: the first section after the breadcrumbs starts close to them */
.page-crumbs + .section{padding-top:clamp(20px,2.8vw,40px)}

/* Tighter top gap: remove the large top padding on the first section/article directly
   after the sticky nav — all inner pages (portfolio, practice, experience, certs, community,
   contact, resume) benefit from this without touching their bottom padding or the home hero. */
main > .section:first-of-type{padding-top:clamp(20px,3vw,36px)}
main > article.resume:first-of-type{padding-top:clamp(16px,2.5vw,28px)}

/* Career roadmap: milestone labels shorten on narrow screens so they never collide; row icons come from the sprite */
.c-ms-label .l-short{display:none}
@media (max-width:720px){.c-ms-label .l-long{display:none}.c-ms-label .l-short{display:inline}}
.org-logo .ni{width:15px;height:15px}

/* Career roadmap: cascade lines, like the logo's flow lines, carry each role into the next. They draw as the player
   passes each move (--t) and show in full when static. */
.c-drop,.c-land{position:absolute;left:calc((var(--t) - 2002) / 25 * 100%);width:9px;border:0 solid var(--accent-bright);pointer-events:none;transform-origin:top}
.c-drop{top:50%;height:calc(50% + 1px);border-top-width:1.6px;border-right-width:1.6px;border-top-right-radius:7px;opacity:clamp(0,(var(--y) - var(--t) + .5) * 6,1);transform:scaleY(clamp(0,(var(--y) - var(--t) + .5) * 2,1))}
.c-land{top:0;height:50%;border-right-width:1.6px;opacity:clamp(0,(var(--y) - var(--t)) * 6,1);transform:scaleY(clamp(0,(var(--y) - var(--t)) * 2,1))}
@media (max-width:760px){.career:not(.career--hero) .c-drop,.career:not(.career--hero) .c-land{display:none}}

/* Official marks for certifications, universities and companies: sync_chrome swaps in assets/logos/<key>.* when the
   owner saves the issuer's file there; until then the icon or monogram shows. A white tile keeps every mark legible
   in both themes. */
.edu-item{grid-template-columns:56px 34px minmax(0,1fr)}
.edu-logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-top:-5px}
.edu-logo .ni{width:17px;height:17px}
.cert-icon.has-logo,.badge-ico.has-logo,.edu-logo.has-logo,.org-logo.has-logo{background:#fff;border:1px solid var(--rule);box-shadow:none}
.has-logo img{display:block;width:100%;height:100%;object-fit:contain;padding:12%}


/* Case dialog: Show related (All work filtered to the project's area); the screens, caption and their navigation
   fit the dialog on open, on every screen size, and the lightbox keeps its bar on screen */
.case-related{display:inline-flex;align-items:center;gap:6px;align-self:center;flex:none;padding:7px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--accent-soft);color:var(--accent);font:500 .8rem/1 var(--font-body);text-decoration:none;white-space:nowrap}
.case-related:hover{border-color:var(--accent-bright);color:var(--ink)}
.case-related .ni{width:15px;height:15px}
.case-related[hidden]{display:none}
@media (max-width:520px){.case-related span{display:none}.case-related{padding:8px}}
.case-content .car-stage{aspect-ratio:auto;height:clamp(200px,calc(min(88vh,920px) - 300px),620px)}
.lb-stage img{max-height:calc(100vh - 170px)}
@supports (height:100dvh){
  .case-content .car-stage{height:clamp(200px,calc(min(88dvh,920px) - 300px),620px)}
  .lb-stage img{max-height:calc(100dvh - 170px)}
}
@media (max-width:640px){
  .case-content .car-stage{height:clamp(180px,calc(88vh - 330px),440px)}
  .lb-stage img{max-height:calc(100vh - 230px)}
}

/* Resume: grouped skills and technical skills */
.r-sub{margin:14px 0 6px;font:500 .7rem/1.2 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.r-block h2 + .r-sub{margin-top:4px}

/* ==========================================================================
   Round 21c: Light / System / Dark theme menu, steady page changes
   ========================================================================== */
html{background:var(--paper)}
.theme-pick{position:relative;flex:none}
.theme-btn .ni{width:18px;height:18px}
.theme-btn[aria-expanded="true"]{border-color:var(--accent-bright);color:var(--accent)}
.theme-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:70;display:grid;gap:2px;min-width:168px;padding:6px;border:1px solid var(--rule-strong);border-radius:14px;background:var(--surface);box-shadow:var(--shadow)}
.theme-menu[hidden]{display:none}
.theme-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;border-radius:10px;background:transparent;color:var(--text);font:400 .9rem/1.2 var(--font-body);text-align:left;cursor:pointer}
.theme-menu button .ni{flex:none;width:17px;height:17px}
.theme-menu button:hover,.theme-menu button:focus-visible{background:var(--accent-soft);color:var(--ink);outline:none}
.theme-menu button:focus-visible{box-shadow:inset 0 0 0 2px var(--accent-bright)}
.theme-menu button[aria-checked="true"]{color:var(--accent);font-weight:500}
.theme-menu button[aria-checked="true"]::after{content:"";width:7px;height:7px;margin-left:auto;border-radius:50%;background:currentColor}
/* Page changes: browsers that support cross-document view transitions keep the old page on screen until the new one
   is ready and cross-fade, with the header held still, so there is no blank frame between pages */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
@media print{.theme-pick{display:none}}


/* Round 22: the long Certifications, Education & Awards nav label wraps to two lines so the brand name keeps its room */
.nav-links .nl-wrap{white-space:normal;max-width:8.6rem;text-align:center;line-height:1.15}

/* Round 23: the patent as its own feature on the Certifications page (a patent sheet with a seal, on the navy band) */
.patent-cert{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;margin:clamp(22px,3vw,34px) 0 clamp(30px,4vw,44px);padding:clamp(24px,3.4vw,44px);border-radius:24px;background:radial-gradient(120% 140% at 0% 0%,var(--band-2) 0%,var(--band) 62%);color:var(--band-text);box-shadow:var(--shadow);position:relative;overflow:hidden}
.patent-cert::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,var(--accent-2-bright) 0%,transparent 68%);opacity:.22;pointer-events:none}
.pc-doc{justify-self:center;width:100%;max-width:260px;transform:rotate(-3deg)}
.pc-doc svg{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.35))}
.pcd-sheet{fill:#fff;stroke:var(--band-rule);stroke-width:1}
.pcd-shadow{fill:rgba(255,255,255,.14)}
.pcd-kicker{font:500 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;fill:#475E9D}
.pcd-num{font:500 19px var(--font-mono);fill:#071D49}
.pcd-rule{stroke:#C8D2EF;stroke-width:1.5}
.pcd-line{fill:#DEE4F6}
.pcd-ring{fill:none;stroke:#8A2ECC;stroke-width:1.5;stroke-dasharray:3 4}
.pcd-disc{fill:#F1EAFA;stroke:#8A2ECC;stroke-width:1.5}
.pcd-shield{fill:#8A2ECC}
.pcd-check{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pcd-ribbon{fill:#0066F5}
.pcd-ribbon-b{fill:#005BDB}
.pc-body .eyebrow{color:var(--band-muted)}
.pc-body h3{color:var(--band-text);font-size:clamp(1.45rem,1.15rem + 1.2vw,2.2rem);line-height:1.15;font-weight:300;margin:8px 0 12px;letter-spacing:-.01em}
.pc-text{color:var(--band-muted);max-width:42em;margin:0 0 20px}
.pc-facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:14px 34px;margin:0 0 24px;padding-top:18px;border-top:1px solid var(--band-rule)}
.pc-facts dt{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--band-muted)}
.pc-facts dd{margin:3px 0 0;font-size:1.3rem;line-height:1.15;font-weight:300;color:var(--band-text)}
.pc-links{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.patent-cert .btn-ghost{color:var(--band-text);border-color:var(--band-rule);background:transparent}
.patent-cert .btn-ghost:hover{border-color:var(--band-accent);color:var(--band-accent)}
.awards-sub{margin:0 0 14px;text-align:center;font-family:var(--font-mono);font-size:.78rem;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){.patent-cert{grid-template-columns:1fr}.pc-doc{max-width:210px}.pc-facts{grid-template-columns:repeat(2,auto)}}
@media (prefers-reduced-motion:no-preference){.pc-doc{transition:transform .4s ease}.patent-cert:hover .pc-doc{transform:rotate(-1deg) translateY(-3px)}}

/* Round 24: the password-protected "Show all work" link in the footer */
.foot-all a{display:inline-flex;align-items:center;gap:6px}
.foot-all .ni{width:14px;height:14px}
.foot-all .foot-lock{color:var(--muted);font-size:.85em}

/* Round 25: let eyebrow chips wrap on phones */
@media(max-width:600px){.eyebrow .nobr{white-space:normal}.eyebrow{max-width:100%}}

/* ---------- Round 28: header brand block reads top to bottom (logo, changing tagline, name, email) and an evenly spaced menu ----------
   The logo mark sits beside a single column: wordmark, the tagline pill (it steps through hero pairs on scroll: data-pairs on
   .brand-tag with a .bt-pair wrapper, see site.js), the name, then the email. The menu fills the space between the brand and
   the search button, its tiles share one height with icons on one line and labels on another. */
.nav{padding-block:10px;gap:20px}
.brand-block{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-left:56px;margin-right:0;flex:none}
.brand{gap:0;margin-right:0}
.brand .logo-mark{position:absolute;left:0;top:50%;width:44px;height:44px;margin-top:-22px}
.brand-text{display:block;line-height:1.1}
.wordmark{font-size:1.32rem;line-height:1.1}
.brand-tag{padding:3px 10px;font-size:.6rem;letter-spacing:.07em;line-height:1.3}
.brand-role{display:block;margin:1px 0 0;font-size:.64rem;letter-spacing:.09em;line-height:1.2}
.brand-sub{margin:0;gap:4px 10px;align-items:center}
.brand-email{font-size:.7rem}
:root{--header-h:100px}
@media (min-width:1261px){
  .nav-links{flex:1 1 auto;justify-content:space-evenly;align-items:stretch;gap:2px;min-width:0}
  .nav-links li{display:flex}
  .nav-links a{justify-content:flex-start;min-width:70px;padding:8px 9px 7px;font-size:.8rem}
  .nav-links .nl-wrap{max-width:7.4rem}
  .search-pill kbd{display:none}
}
@media (min-width:1261px) and (max-width:1400px){
  .nav-links a{padding-inline:6px;min-width:0;font-size:.78rem}
  .search-pill .sp-label{display:none}
  .cmdk-btn.search-pill{width:38px;padding:0;justify-content:center}
}
@media (max-width:1260px){.brand-block{margin-right:auto;flex:0 1 auto;min-width:0}}
@media (max-width:719px),(min-width:1261px){.brand-title{display:none}}
@media (max-width:560px){
  :root{--header-h:96px}
  .brand-block{gap:4px;padding-left:44px}
  .brand .logo-mark{width:34px;height:34px;margin-top:-17px}
  .wordmark{font-size:1.2rem}
  .brand-tag{font-size:.56rem}
  .brand-role{display:block;font-size:.6rem}
}

/* ---------- Round 29: program scorecard under About me (index.html #scorecard) ----------
   Two large tiles (budget, projects) over six counts; 6-column grid on desktop, 2 columns at 900px and below. */
.scorecard{padding-block:clamp(8px,2vw,24px) clamp(28px,3.5vw,48px)}   /* below the patent (Round 32) */
.sc-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 32px}
.sc-lede{margin:0;max-width:62ch;color:var(--muted);font-size:.98rem;line-height:1.55}
.sc-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin:22px 0 0;padding:0;list-style:none}
.sc-card{grid-column:span 2;display:flex;flex-direction:column;gap:6px;padding:20px 22px;border:1px solid var(--rule);border-radius:18px;background:var(--surface)}
.sc-card.sc-hero{grid-column:span 3;background:linear-gradient(120deg,var(--accent-soft),var(--accent-2-soft));border-color:transparent}
.sc-num{font-family:var(--font-display);font-weight:300;font-size:clamp(1.9rem,1.4rem + 1.4vw,2.6rem);line-height:1;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
.sc-hero .sc-num{font-size:clamp(2.3rem,1.6rem + 2vw,3.3rem);color:var(--accent)}
.sc-label{font-weight:500;font-size:.92rem;line-height:1.35;color:var(--ink)}
.sc-note{font:500 .7rem/1.35 var(--font-mono);letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.sc-foot{margin:12px 0 0;font-size:.82rem;line-height:1.5;color:var(--muted)}
@media (max-width:900px){.sc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sc-card{grid-column:auto;padding:16px}.sc-card.sc-hero{grid-column:span 2}}

/* ---------- Round 32: Resume profiles (Default, AI, PM), scorecard and visuals (resume.html) ---------- */
.resume[data-mode="all"] [data-p]:not([data-p~="all"]),
.resume[data-mode="ai"] [data-p]:not([data-p~="ai"]),
.resume[data-mode="pm"] [data-p]:not([data-p~="pm"]){display:none!important}
.r-headline{margin-top:6px;font-size:1.02rem;line-height:1.4;color:var(--text);max-width:52ch}
.r-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:22px 0 0;padding:6px;border:1px solid var(--rule);border-radius:16px;background:var(--paper-2)}
.r-mode{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:11px 14px;border:0;border-radius:11px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.r-mode b{font-weight:500;font-size:.98rem;color:var(--ink)}
.r-mode small{font-size:.76rem;line-height:1.3;color:var(--muted)}
.r-mode:hover{background:var(--surface)}
.r-mode[aria-selected="true"]{background:var(--surface);box-shadow:var(--shadow);outline:1.5px solid var(--accent)}
.r-mode[aria-selected="true"] b{color:var(--accent)}
.r-mode:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}
.r-pdfs{margin:10px 2px 0;font-size:.82rem;color:var(--muted)}
.r-kpis{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;margin:22px 0 0;padding:0;list-style:none}
.r-kpi{grid-column:span 3;display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--rule);border-radius:16px;background:var(--surface)}
.r-kpi-hero{grid-column:span 6;background:linear-gradient(120deg,var(--accent-soft),var(--accent-2-soft));border-color:transparent}
.r-kn{font-family:var(--font-display);font-weight:300;font-size:clamp(1.7rem,1.3rem + 1.2vw,2.3rem);line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.r-kpi-hero .r-kn{color:var(--accent);font-size:clamp(2rem,1.5rem + 1.6vw,2.8rem)}
.r-kl{font-size:.84rem;line-height:1.35;color:var(--text)}
.r-visuals{display:grid;gap:22px}
.r-visuals > h2{margin-bottom:0}
.r-fig{margin:0;padding:16px 18px 18px;border:1px solid var(--rule);border-radius:16px;background:var(--surface)}
.r-fig figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:14px;font-weight:500;font-size:.95rem;color:var(--ink)}
.r-fig figcaption small{font:500 .68rem var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.r-fig-note{margin:12px 0 0;font-size:.78rem;line-height:1.45;color:var(--muted)}
.r-fig-list{margin-top:14px}
.r-fig-list li{font-size:.86rem}
/* timeline */
.r-tl{position:relative;padding:0 0 4px}
.r-tl-bar{position:relative;height:54px;border-radius:10px;overflow:hidden;background:var(--paper-2)}
.r-tl-seg{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;padding:0 10px;overflow:hidden;white-space:nowrap;color:#fff;border-right:2px solid var(--surface)}
.r-tl-seg b{font-weight:500;font-size:.8rem;overflow:hidden;text-overflow:ellipsis}
.r-tl-seg small{font:500 .64rem var(--font-mono);opacity:.85}
.r-tl-seg.s1{background:#5b6b86}.r-tl-seg.s2{background:#3f7d9e}.r-tl-seg.s3{background:var(--accent)}.r-tl-seg.s4{background:var(--accent-2);padding:0;border-right:0}
.r-tl-now{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.r-tl-marks{position:relative;height:64px;margin:0;padding:0;list-style:none}
.r-tl-marks li{position:absolute;top:0;transform:translateX(-50%);padding-top:12px;font-size:.72rem;line-height:1.25;color:var(--text);text-align:center;width:max-content;max-width:110px}
.r-tl-marks li::before{content:"";position:absolute;top:0;left:50%;width:1px;height:9px;background:var(--rule-strong)}
.r-tl-marks li span{display:block;font:500 .66rem var(--font-mono);color:var(--accent-2)}
.r-tl-marks li:nth-child(even){top:30px}
.r-tl-marks li:nth-child(even)::before{top:-30px;height:39px}
.r-tl-marks li:last-child{transform:translateX(-100%);text-align:right}
.r-tl-marks li:last-child::before{left:auto;right:0}
.r-tl-marks li:first-child{transform:translateX(-30%)}
/* bars */
.r-bars{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.r-bars li{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) 58px;align-items:center;gap:12px}
.r-bl{font-size:.84rem;line-height:1.25;color:var(--ink)}
.r-bl small{display:block;font:500 .64rem var(--font-mono);color:var(--muted)}
.r-bt{height:12px;border-radius:999px;background:var(--paper-2);overflow:hidden}
.r-bt i{display:block;height:100%;width:calc(var(--v) / var(--max) * 100%);border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-bright));transform-origin:left;animation:rBar .9s cubic-bezier(.2,.7,.2,1) both}
.r-bars-alt .r-bt i{background:linear-gradient(90deg,var(--accent-2),#e3a24f)}
.r-bv{font:500 .8rem var(--font-mono);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
@keyframes rBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.r-split{display:grid;gap:10px}
.r-split-row{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) 58px;align-items:center;gap:12px}
.r-split-bar{display:flex;height:26px;border-radius:8px;overflow:hidden;background:var(--paper-2)}
.r-split-bar i{display:flex;align-items:center;padding:0 8px;font:500 .7rem var(--font-mono);font-style:normal;color:#fff;background:var(--accent);white-space:nowrap}
.r-split-row + .r-split-row .r-split-bar i{background:var(--accent-2)}
.r-split-bar em{display:block}
/* AI flows */
.r-flows{display:grid;gap:10px}
.r-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:0;padding:0;list-style:none;counter-reset:f}
.r-flow li{position:relative;padding:10px 12px;border-radius:12px;background:var(--paper-2);font-size:.78rem;line-height:1.35;color:var(--text)}
.r-flow li b{display:block;font-weight:500;font-size:.84rem;color:var(--ink)}
.r-flow li:nth-child(2){background:var(--accent-soft)}
.r-flow li:nth-child(3){background:var(--accent-2-soft)}
.r-flow li + li::before{content:"→";position:absolute;left:-17px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.9rem}
.r-role-note{margin:4px 0 0;font-size:.8rem;color:var(--muted)}
@media (max-width:900px){.r-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.r-kpi,.r-kpi-hero{grid-column:auto}}
@media (max-width:640px){
  .r-modes{grid-template-columns:1fr;gap:4px}
  .r-mode{flex-direction:row;align-items:baseline;gap:8px;padding:9px 12px}
  .r-bars li,.r-split-row{grid-template-columns:minmax(0,1fr) 58px;gap:4px 10px}
  .r-bars .r-bt,.r-split-bar{grid-column:1 / -1;grid-row:2}
  .r-flow{grid-template-columns:1fr 1fr;gap:10px 22px}
  .r-flow li:nth-child(3)::before{display:none}
  .r-tl-seg b{font-size:.7rem}.r-tl-seg small{display:none}
  .r-tl-marks{height:78px}.r-tl-marks li{max-width:80px;font-size:.66rem}
}
@media (prefers-reduced-motion:reduce){.r-bt i{animation:none}.r-mode{transition:none}}
@media print{
  .r-modes,.r-pdfs{display:none!important}
  .r-headline{margin-top:4px}
  .r-kpis{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:12px}
  .r-kpi{grid-column:span 1!important;padding:8px 9px;border-radius:8px;break-inside:avoid}
  .r-kn,.r-kpi-hero .r-kn{font-size:16pt}
  .r-kl{font-size:7.5pt}
  .r-fig{padding:9px 11px;border-radius:8px;break-inside:avoid}
  .r-visuals{gap:10px}
  .r-bt i{animation:none}
  .r-kpi-hero,.r-tl-seg,.r-bt,.r-bt i,.r-split-bar,.r-split-bar i,.r-flow li,.r-tags li{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .r-list li{font-size:9.5pt;margin-top:3px}
  .r-role{break-inside:auto}
  .r-block h2{break-after:avoid}
  .resume-aside .r-block{break-inside:avoid}
}

/* Round 32 print layout: one column, credentials in two columns, charts stacked and allowed to break between rows */
@media print{
  .resume-grid{display:block!important;margin-top:14px}
  .resume-aside{display:block;columns:2;column-gap:24px;margin-top:16px}
  .resume-aside .r-block{break-inside:auto;margin:0 0 12px!important}
  .resume-aside .r-block h2,.resume-aside .r-sub{break-after:avoid}
  .resume-head{padding-bottom:12px}
  .r-kpis{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  .r-visuals{display:block!important}
  .r-visuals .r-fig{display:block;margin:8px 0 0;break-inside:auto}
  .r-tl{break-inside:avoid}
  .r-tl-marks{height:58px}
  .r-tl-marks li{font-size:7pt;max-width:90px}
  .r-bars li,.r-split-row,.r-flow,.r-fig-list li{break-inside:avoid}
  .r-fig figcaption{break-after:avoid;font-size:9pt;margin-bottom:8px}
  .r-bars li,.r-split-row{grid-template-columns:minmax(0,120px) minmax(0,1fr) 44px;gap:8px}
  .r-bl{font-size:7.5pt}.r-bv{font-size:7pt}
  .r-flow{gap:16px}.r-flow li{font-size:7pt;padding:6px 8px}.r-flow li b{font-size:7.5pt}
  .r-flow li + li::before{left:-13px}
  .r-fig-list li{font-size:8pt}
}

/* ---------- Round 33: steady sliders. The viewer keeps one stage height, so changing screens never resizes it ---------- */
.lb-stage{height:calc(100vh - 170px);height:calc(100dvh - 170px)}
.lb-stage img{max-height:100%;max-width:100%;object-fit:contain;transition:opacity .18s}
.lb-stage img.lb-wait{opacity:.35}
.lb-cap{min-height:3.1em}
@media (max-width:640px){.lb-stage{height:calc(100dvh - 230px)}}
@media (prefers-reduced-motion:reduce){.lb-stage img{transition:none}}
.car-viewport,.shelf-track{overscroll-behavior-x:contain}

/* ---------- Round 33: resume event roadmaps (Asana template samples) and AI mockups ---------- */
.rm-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.rm-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 12px;border:1px solid var(--rule);border-radius:10px;background:var(--paper-2);color:var(--ink);font:inherit;font-size:.84rem;cursor:pointer}
.rm-tabs button small{font:500 .62rem var(--font-mono);color:var(--muted);letter-spacing:.03em}
.rm-tabs button[aria-selected="true"]{background:var(--surface);border-color:var(--accent);box-shadow:var(--shadow);color:var(--accent)}
.rm-tabs button:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}
.rm-h{display:none;margin:14px 0 6px;font-size:.86rem;font-weight:500;color:var(--ink)}
.rm[data-rm-active] .rm-h{display:none}
.rm[data-rm-active="ad"] [data-rm]:not([data-rm="ad"]),.rm[data-rm-active="sym"] [data-rm]:not([data-rm="sym"]),.rm[data-rm-active="booth"] [data-rm]:not([data-rm="booth"]){display:none}
.rm:not([data-rm-active]) .rm-h{display:block}
.rm-chart{position:relative;display:grid;gap:5px;padding-top:20px}
.rm-axis{position:absolute;top:0;left:calc(var(--rm-l) + 10px);right:0;height:16px;font:500 .6rem var(--font-mono);color:var(--muted)}
.rm-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.rm-axis span:first-child{transform:none}
.rm-axis span:last-child{transform:translateX(-100%)}
.rm-chart{--rm-l:clamp(120px,32%,210px)}
.rm-zero{position:absolute;top:16px;bottom:44px;left:calc(var(--rm-l) + 10px);right:0;z-index:1;pointer-events:none}
.rm-zero i{position:absolute;top:0;bottom:0;border-left:1.5px dashed var(--accent-2)}
.rm-lane,.rm-ms{display:grid;grid-template-columns:var(--rm-l) minmax(0,1fr);gap:10px;align-items:center}
.rm-ln{font-size:.76rem;line-height:1.2;color:var(--text)}
.rm-track{position:relative;height:14px;border-radius:4px;background:var(--paper-2)}
.rm-bar{position:absolute;top:0;bottom:0;border-radius:4px;background:var(--accent);transform-origin:left;animation:rBar .8s cubic-bezier(.2,.7,.2,1) both}
.rm-bar.c2{background:#3f7d9e}.rm-bar.c3{background:var(--accent-bright)}.rm-bar.c4{background:var(--accent-2)}.rm-bar.c5{background:#e3a24f}
.rm-ms{margin-top:4px}
.rm-ms .rm-ln{font:500 .62rem var(--font-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.rm-ms .rm-track{height:40px;background:transparent;border-top:1px solid var(--rule)}
.rm-dia{position:absolute;top:-5px;width:9px;height:9px;margin-left:-4.5px;background:var(--ink);transform:rotate(45deg)}
.rm-ms em{position:absolute;top:8px;transform:translateX(-50%);font-style:normal;font-size:.62rem;line-height:1.15;color:var(--text);white-space:nowrap}
.rm-ms em.up{top:22px}
.rm-ms em:first-of-type{transform:none}
.rm-ms em:last-of-type{transform:translateX(-100%)}
.mk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mk-card{padding:12px 14px;border-radius:12px;background:var(--paper-2);display:flex;flex-direction:column;gap:9px;min-height:170px}
.mk-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mk-top b{font-weight:500;font-size:.86rem;color:var(--ink)}
.mk-top span{font:500 .6rem var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.mk-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mk-kpis span{padding:5px 7px;border-radius:7px;background:var(--surface);font:500 .8rem var(--font-mono);color:var(--ink)}
.mk-kpis i{display:block;font:400 .58rem var(--font-body);font-style:normal;color:var(--muted)}
.mk-cols{display:flex;align-items:flex-end;gap:10px;height:54px;padding:0 4px;border-bottom:1px solid var(--rule)}
.mk-cols span{position:relative;flex:1;display:flex;align-items:flex-end;gap:3px;height:100%}
.mk-cols i{flex:1;border-radius:3px 3px 0 0}
.mk-cols i.p{background:var(--rule-strong)}.mk-cols i.a{background:var(--accent)}
.mk-cols em{position:absolute;bottom:-14px;left:0;right:0;text-align:center;font:500 .55rem var(--font-mono);font-style:normal;color:var(--muted)}
.mk-risk{display:flex;flex-wrap:wrap;gap:4px 10px;margin:8px 0 0;padding:0;list-style:none;font-size:.66rem;color:var(--text)}
.mk-risk i{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%}
.mk-risk .g{background:#2e9d6a}.mk-risk .a{background:#e3a24f}.mk-risk .r{background:#d0453c}
.mk-funnel{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.mk-funnel li{width:var(--w);margin:0 auto;padding:5px 8px;border-radius:7px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;font-size:.68rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-note{margin:0;font-size:.66rem;color:var(--muted);text-align:center}
.mk-matrix{width:100%;height:auto;max-height:130px}
.mk-matrix .q{fill:var(--accent-soft)}
.mk-matrix line{stroke:var(--rule-strong);stroke-width:1}
.mk-matrix circle{fill:var(--rule-strong)}
.mk-matrix circle.hi{fill:var(--accent)}
.mk-matrix text{font:500 8px var(--font-mono);fill:var(--muted)}
.mk-apps{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:auto}
.mk-apps span{height:22px;border-radius:6px;background:var(--surface);border:1px solid var(--rule)}
.mk-shield{padding:6px 8px;border-radius:7px;background:var(--accent-2);color:#fff;font-size:.68rem;text-align:center}
@media (max-width:640px){.mk-grid{grid-template-columns:1fr}.rm-chart{--rm-l:110px}.rm-ms em{font-size:.56rem}}
@media (prefers-reduced-motion:reduce){.rm-bar{animation:none}}
@media print{
  .rm-tabs{display:none}
  .rm [data-rm]{display:grid!important}
  .rm .rm-h{display:block!important;break-after:avoid;font-size:8.5pt}
  .rm-chart{break-inside:avoid}
  .rm-ln{font-size:7pt}.rm-axis,.rm-ms em{font-size:6pt}
  .rm-bar{animation:none}
  .rm-bar,.rm-track,.rm-dia,.mk-card,.mk-funnel li,.mk-shield,.mk-cols i,.mk-risk i,.mk-kpis span{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .mk-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .mk-card{min-height:0;padding:7px 8px;break-inside:avoid}
  .mk-top{flex-direction:column;gap:0}
  .mk-kpis span{font-size:6.5pt;padding:3px 4px}
  .mk-funnel li,.mk-risk,.mk-note,.mk-shield{font-size:6pt}
}

/* ---------- Round 34: interactive roadmaps (resume and the Asana case study) ---------- */
.rm .rm-bar{border:0;padding:0;cursor:pointer;transition:filter .15s,box-shadow .15s}
.rm .rm-bar:hover,.rm .rm-bar:focus-visible,.rm .rm-bar.rm-on{filter:brightness(1.12);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent-bright);outline:0;z-index:2}
.rm .rm-dia{border:0;padding:0;cursor:pointer}
.rm .rm-dia:hover,.rm .rm-dia:focus-visible,.rm .rm-dia.rm-on{background:var(--accent-2);outline:0;box-shadow:0 0 0 3px var(--accent-2-soft)}
.rm-detail{min-height:3.2em;margin:12px 0 0;padding:9px 12px;border-radius:10px;background:var(--paper-2);font-size:.84rem;line-height:1.5;color:var(--text)}
.rm-detail b{color:var(--ink);font-weight:500}
.case-body .rm{padding:14px 16px;border:1px solid var(--rule);border-radius:12px;background:var(--surface)}
.case-body .rm figcaption{margin:0 0 12px}
.case-body .rm .rm-tabs button{margin:0}
.case-body .rm .rm-chart p,.case-body .rm-h{margin:14px 0 6px}
@media print{.rm-detail{display:none}}
@media (prefers-reduced-motion:reduce){.rm .rm-bar{transition:none}}

/* ---------- Round 34: career timeline labels the current role (callout) and every segment (key) ---------- */
.r-tl-callout{display:flex;justify-content:flex-end;align-items:baseline;gap:6px;margin:0 0 9px;padding-right:2px;font-size:.78rem;line-height:1.3;color:var(--ink);text-align:right;position:relative}
.r-tl-callout b{padding:1px 7px;border-radius:999px;background:var(--accent-2);color:#fff;font:500 .62rem var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.r-tl-callout small{font:500 .64rem var(--font-mono);color:var(--muted)}
.r-tl-callout::after{content:"";position:absolute;right:calc(1.85% - 5px);bottom:-8px;border:5px solid transparent;border-top-color:var(--accent-2);border-bottom:0}
.r-tl-seg.s4{box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.r-tl-key{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;margin:10px 0 0;padding:10px 0 0;border-top:1px dashed var(--rule);list-style:none;font-size:.74rem;line-height:1.35;color:var(--text)}
.r-tl-key li{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.r-tl-key i{flex:none;width:10px;height:10px;border-radius:3px;transform:translateY(1px)}
.r-tl-key i.s1{background:#5b6b86}.r-tl-key i.s2{background:#3f7d9e}.r-tl-key i.s3{background:var(--accent)}.r-tl-key i.s4{background:var(--accent-2)}
.r-tl-key small{font:500 .62rem var(--font-mono);color:var(--muted)}
@media (max-width:640px){.r-tl-key{grid-template-columns:1fr}.r-tl-callout{flex-wrap:wrap}}
@media print{.r-tl-callout,.r-tl-key{font-size:7pt}.r-tl-key i,.r-tl-callout b{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* ---------- Round 35: liquid glass on the hero figures once Play is pressed (.plan.is-glass, set by initPlayer) ----------
   Coloured light moves behind the panel (::before, bent by the #ccLiquid SVG filter); the panel turns to frosted glass
   with a bright rim, an inner highlight and a slow specular sweep (::after). Content stays fully readable. */
.plan{position:relative;isolation:isolate;--glass-rim:rgba(255,255,255,.85);--glass-rim-2:rgba(255,255,255,.15);--glass-tint:62%}
:root[data-theme="dark"] .plan{--glass-rim:rgba(255,255,255,.4);--glass-rim-2:rgba(255,255,255,.05);--glass-tint:58%}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .plan{--glass-rim:rgba(255,255,255,.4);--glass-rim-2:rgba(255,255,255,.05);--glass-tint:58%}}
.plan::before{content:"";position:absolute;inset:-7% -5% -3%;z-index:-1;pointer-events:none;border-radius:40px;opacity:0;
  background:radial-gradient(38% 46% at 18% 30%,var(--accent) 0,transparent 70%),radial-gradient(34% 42% at 82% 26%,var(--accent-2) 0,transparent 70%),radial-gradient(40% 50% at 60% 86%,var(--accent-bright) 0,transparent 72%),radial-gradient(30% 36% at 30% 88%,#e3a24f 0,transparent 70%);
  filter:url(#ccLiquid) blur(30px);transform:scale(.96);transition:opacity .8s ease,transform .8s ease}
.plan.is-glass::before{opacity:.62;transform:none;animation:ccLiquidDrift 12s ease-in-out infinite alternate}
@keyframes ccLiquidDrift{0%{background-position:0 0,0 0,0 0,0 0;transform:translate(0,0) rotate(0)}50%{transform:translate(1.5%,-1.5%) rotate(2deg)}100%{transform:translate(-1.5%,1%) rotate(-1.5deg)}}
.plan-frame{transition:background-color .6s ease,border-color .6s ease,box-shadow .6s ease,backdrop-filter .6s ease}
.plan.is-glass .plan-frame{position:relative;background:color-mix(in srgb,var(--surface) var(--glass-tint),transparent);-webkit-backdrop-filter:blur(22px) saturate(175%);backdrop-filter:blur(22px) saturate(175%);border-color:transparent;
  box-shadow:inset 0 1px 0 var(--glass-rim),inset 0 -1px 0 var(--glass-rim-2),inset 1px 0 0 var(--glass-rim-2),inset -1px 0 0 var(--glass-rim-2),0 30px 70px -28px color-mix(in srgb,var(--accent) 45%,transparent),0 10px 24px -14px rgba(10,20,50,.25)}
.plan-frame::before,.plan-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .6s ease}
.plan.is-glass .plan-frame::before{opacity:1;z-index:4;padding:1.5px;background:linear-gradient(135deg,var(--glass-rim),var(--glass-rim-2) 32%,transparent 50%,var(--glass-rim-2) 68%,var(--glass-rim));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.plan.is-glass .plan-frame::after{opacity:1;z-index:3;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 45%,rgba(255,255,255,.05) 52%,transparent 62%);background-size:260% 100%;mix-blend-mode:soft-light;animation:ccGlassSweep 7s ease-in-out infinite}
@keyframes ccGlassSweep{0%{background-position:120% 0}55%,100%{background-position:-60% 0}}
.plan.is-glass .plan-bar,.plan.is-glass .plan-legend,.plan.is-glass .hero-player{background:transparent;border-color:color-mix(in srgb,var(--rule) 70%,transparent)}
.plan.is-glass .hp-play{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-bright) 25%,transparent),0 6px 16px -6px var(--accent)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.plan.is-glass .plan-frame{background:color-mix(in srgb,var(--surface) 88%,transparent)}}
@media (prefers-reduced-motion:reduce){.plan.is-glass::before,.plan.is-glass .plan-frame::after{animation:none}.plan::before,.plan-frame,.plan-frame::before,.plan-frame::after{transition:none}}
@media print{.plan::before,.plan-frame::before,.plan-frame::after{display:none}}
.hero .plan{transition:background-color .6s ease}
.hero .plan.is-glass{background:transparent}   /* the soft mat steps aside so the light shows under the glass */

/* ---------- Round 36: official logos. Wordmarks (wider than tall) fill more of their white tile ---------- */
.has-logo.logo-wide img{padding:5%}
.has-logo img{padding:9%}

/* ---------- Round 37: a miniature visual for each "Modules I championed" card (control-tower.html .mv) ----------
   Recreated, schematic, sample values only; colours follow the theme tokens. */
.mv{margin:12px 0 4px;padding:8px 10px;border-radius:12px;background:var(--paper-2);border:1px solid color-mix(in srgb,var(--rule) 60%,transparent)}
.mv svg{display:block;width:100%;height:auto;max-height:96px;overflow:visible}
.mv .a{fill:var(--accent)}.mv .a2{fill:var(--accent-2)}.mv .a3{fill:#e3a24f}.mv .m{fill:color-mix(in srgb,var(--accent) 35%,var(--paper-2))}
.mv .o{fill:#d0453c}.mv .u{fill:#e3a24f}
.mv .g{fill:#2e9d6a}.mv .y{fill:#e3a24f}.mv .r{fill:#d0453c}
.mv .nd{fill:var(--accent-bright);opacity:.55}
.mv .tr{fill:color-mix(in srgb,var(--ink) 12%,transparent)}
.mv .tg{stroke:var(--ink);stroke-width:1.6;stroke-dasharray:3 2}
.mv .ax,.mv .ed{stroke:var(--rule-strong);stroke-width:1}
.mv .cut{stroke:var(--accent-2);stroke-width:1.4;stroke-dasharray:4 3}
.mv .card{fill:var(--surface);stroke:var(--rule);stroke-width:1}
.mv .bub{fill:var(--surface);stroke:var(--accent-bright);stroke-width:1.2}
.mv .cite{fill:var(--accent-soft)}
.mv .chip{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1}
.mv .chip2{fill:var(--surface);stroke:var(--accent-2);stroke-width:1;stroke-dasharray:3 2}
.mv .ok,.mv .okw{fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mv .ok{stroke:#2e9d6a}.mv .okw{stroke:#fff}
.mv .arr,.mv .arr2{fill:none;stroke:var(--muted);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.mv .arr2{stroke:var(--accent-2)}
.mv .d{fill:none;stroke-width:9}.mv .d.a{stroke:var(--accent)}.mv .d.a2{stroke:var(--accent-2)}.mv .d.a3{stroke:#e3a24f}
.mv .rg{fill:none;stroke:var(--rule);stroke-width:1}.mv .rp{fill:color-mix(in srgb,var(--accent) 28%,transparent);stroke:var(--accent);stroke-width:1.4}
.mv .tl{stroke:var(--rule-strong);stroke-width:2}.mv .prog{fill:var(--accent)}.mv .ev{fill:var(--accent-2)}
.mv text{font-family:var(--font-mono);font-size:7.5px;fill:var(--muted)}
.mv .lb2{fill:var(--ink);font-weight:500}
.mv .num{font-size:11px;fill:var(--ink);font-weight:500}.mv .num2{font-size:9px;fill:var(--ink)}
.mv .cl{font-size:7px;fill:var(--accent)}.mv .cl2{font-size:7.5px;fill:var(--ink)}
.mv .in{font-size:7px;fill:#fff}
.module{transition:transform .2s ease,box-shadow .2s ease}
.module:hover .mv{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
@media (prefers-reduced-motion:reduce){.module{transition:none}}

/* ---------- Round 38: How I built this site. Wireframe to site wipe (in liquid glass) and recent rounds ---------- */
.wf-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.wf-tabs button{padding:7px 14px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:.86rem;cursor:pointer}
.wf-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.wf-tabs button:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}
.plan.wf{max-width:980px;margin:0 auto}
.wf .plan-frame{padding:14px 14px 0}
.wf-stage{position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;cursor:ew-resize;touch-action:none;background:var(--paper-2);user-select:none}
.wf-pair{position:absolute;inset:0}
.wf-pair[hidden]{display:none}
.wf-svg,.wf-live{position:absolute;inset:0;width:100%;height:100%}
.wf-live{object-fit:cover;clip-path:inset(0 calc(100% - var(--x)) 0 0);transition:clip-path .05s linear}
.wf-svg{background:repeating-linear-gradient(0deg,transparent 0 23px,color-mix(in srgb,var(--rule) 55%,transparent) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,color-mix(in srgb,var(--rule) 55%,transparent) 23px 24px),var(--surface)}
.wf-svg .b{fill:none;stroke:var(--muted);stroke-width:1.4;stroke-dasharray:5 4}
.wf-svg .h,.wf-svg .h2{fill:color-mix(in srgb,var(--muted) 22%,transparent)}
.wf-svg .h2{fill:color-mix(in srgb,var(--accent) 22%,transparent)}
.wf-svg .l{fill:color-mix(in srgb,var(--muted) 30%,transparent)}
.wf-svg .l2{fill:color-mix(in srgb,var(--ink) 40%,transparent)}
.wf-svg .lk{fill:color-mix(in srgb,var(--accent) 45%,transparent)}
.wf-svg .btn{fill:color-mix(in srgb,var(--accent) 55%,transparent)}
.wf-svg .frame{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:8 5}
.wf-svg .bar{fill:color-mix(in srgb,var(--accent) 40%,transparent)}
.wf-svg .tab{fill:color-mix(in srgb,var(--ink) 18%,transparent);stroke:var(--muted);stroke-width:1}
.wf-svg .kpi{fill:color-mix(in srgb,var(--accent-2) 16%,transparent);stroke:var(--muted);stroke-width:1.2;stroke-dasharray:5 4}
.wf-svg .mini{fill:color-mix(in srgb,var(--accent) 12%,transparent);stroke:var(--muted);stroke-width:1}
.wf-svg .ban{fill:color-mix(in srgb,#F5C518 30%,transparent)}
.wf-svg .y{fill:color-mix(in srgb,#F5C518 60%,transparent)}
.wf-svg text,.wf-svg .n{font:500 13px var(--font-mono);fill:var(--accent-2)}
.wf-handle{position:absolute;top:0;bottom:0;left:var(--x);width:0;pointer-events:none}
.wf-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(10,20,50,.25),0 0 18px rgba(255,255,255,.8)}
.wf-handle i{position:absolute;top:50%;left:-19px;width:38px;height:38px;margin-top:-19px;border-radius:50%;background:color-mix(in srgb,#fff 55%,transparent);-webkit-backdrop-filter:blur(10px) saturate(180%);backdrop-filter:blur(10px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 18px -6px rgba(10,20,50,.45);border:1px solid rgba(255,255,255,.8)}
.wf-handle i::before,.wf-handle i::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-5px;border:5px solid transparent}
.wf-handle i::before{left:5px;border-right-color:var(--ink)}.wf-handle i::after{right:5px;border-left-color:var(--ink)}
.wf-tag{position:absolute;top:10px;padding:4px 10px;border-radius:999px;font:500 .66rem var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:color-mix(in srgb,var(--surface) 60%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.6);pointer-events:none}
.wf-tag-l{left:10px}.wf-tag-r{right:10px}
.wf-bar{margin:0 -14px;border-radius:0}
.wf figcaption{max-width:none}
.rr-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.rr-chips button{padding:6px 13px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:.84rem;cursor:pointer}
.rr-chips button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.rr-list{list-style:none;margin:0;padding:0 0 0 22px;position:relative;display:grid;gap:10px}
.rr-list::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--accent),var(--accent-2))}
.rr-list li{position:relative;display:grid;grid-template-columns:90px minmax(0,1fr);gap:2px 14px;padding:12px 16px;border:1px solid var(--rule);border-radius:12px;background:var(--surface)}
.rr-list li[hidden]{display:none}
.rr-list li::before{content:"";position:absolute;left:-20px;top:18px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--accent)}
.rr-list .rr-n{grid-row:span 2;font:500 .7rem var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2);padding-top:3px}
.rr-list b{font-weight:500;color:var(--ink)}
.rr-list li > span:last-child{font-size:.9rem;line-height:1.5;color:var(--muted)}
@media (max-width:640px){.rr-list li{grid-template-columns:1fr}.rr-list .rr-n{grid-row:auto}.wf-svg text{font-size:16px}}
@media (prefers-reduced-motion:reduce){.wf-live{transition:none}}

/* ---------- Round 40: Highlights carousel on Home (outcomes, patent & awards, program scorecard) in liquid glass ---------- */
.highlights{padding-block:clamp(8px,2vw,24px) clamp(28px,4vw,52px)}
.hl-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;border-top:1px solid var(--ink);padding-top:14px;margin-bottom:16px}
.hl-head .eyebrow{margin:0}
.hl-tabs{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.hl-tab{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--rule);border-radius:999px;background:color-mix(in srgb,var(--surface) 70%,transparent);color:var(--text);font:inherit;font-size:.88rem;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}
.hl-tab .ico{width:auto;height:auto;background:none;color:inherit}
.hl-tab:hover{border-color:var(--accent-bright)}
.hl-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);box-shadow:0 6px 18px -8px color-mix(in srgb,var(--accent) 60%,transparent)}
.hl-tab:focus-visible,.hl-arrow:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}
.hl-nav{display:flex;align-items:center;gap:8px}
.hl-arrow{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.7);background:color-mix(in srgb,var(--surface) 55%,transparent);-webkit-backdrop-filter:blur(10px) saturate(170%);backdrop-filter:blur(10px) saturate(170%);color:var(--ink);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 6px 16px -8px rgba(10,20,50,.35);transition:transform .15s}
.hl-arrow:hover{transform:translateY(-1px)}
.hl-arrow svg{width:15px;height:15px}
.hl-auto .i-play{display:none}.hl-auto[aria-pressed="false"] .i-play{display:block}.hl-auto[aria-pressed="false"] .i-pause{display:none}
.hl-count{min-width:3.4em;text-align:center;font:500 .74rem var(--font-mono);color:var(--muted)}
.hl-glass{margin:0}
.hl-glass .plan-frame{padding:clamp(14px,2vw,24px) clamp(14px,2vw,24px) 14px;border-radius:24px}
.hl-stage{position:relative;overflow:hidden;transition:height .5s cubic-bezier(.2,.7,.2,1);touch-action:pan-y}
.hl-track{display:flex;align-items:flex-start;transition:transform .6s cubic-bezier(.22,.8,.2,1);will-change:transform}
.hl-slide{flex:0 0 100%;min-width:0;padding:2px;transition:opacity .5s ease,filter .5s ease}
.hl-slide[aria-hidden="true"]{opacity:.25;filter:blur(2px)}
.hl-slide .stats{margin:0}
.hl-glass .stats{background:color-mix(in srgb,var(--surface) 55%,transparent)}
.hl-slide .patent{margin-top:0;background:linear-gradient(115deg,color-mix(in srgb,var(--accent-2-soft) 80%,transparent) 0%,color-mix(in srgb,var(--surface) 60%,transparent) 64%)}
.hl-slide.scorecard{padding:2px}
.hl-anchor{position:absolute;top:0}
.patent-uspto{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--rule),0 10px 24px -12px rgba(10,20,50,.4);flex:none}
.patent-uspto img{width:88px;height:88px}
.patent-awards{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:6px 0 0;padding:14px 0 0;border-top:1px dashed var(--rule);list-style:none}
.patent-awards li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--rule)}
.patent-awards b{font-weight:500;font-size:.9rem;color:var(--ink)}
.patent-awards span{font:500 .66rem var(--font-mono);color:var(--muted);letter-spacing:.03em}
.hl-dots{position:relative;display:flex;justify-content:center;gap:8px;padding-top:14px}
.hl-dots i{width:8px;height:8px;border-radius:4px;background:var(--rule-strong);cursor:pointer;transition:width .25s,background-color .25s}
.hl-dots i.on{width:26px;background:var(--accent)}
.hl-progress{position:absolute;left:0;right:0;bottom:-14px;height:2px;border-radius:2px;overflow:hidden;background:transparent}
.hl-progress em{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.hl-progress.run em{animation:hlProg var(--hl-ms,9000ms) linear forwards}
@keyframes hlProg{from{width:0}to{width:100%}}
.pc-doc{position:relative}
.pc-uspto{position:absolute;right:6%;bottom:6%;width:74px;height:74px;border-radius:50%;background:#fff;padding:3px;box-shadow:0 8px 20px -10px rgba(10,20,50,.5)}
@media (max-width:900px){.patent-awards{grid-template-columns:repeat(2,minmax(0,1fr))}.hl-tabs{order:3;flex-basis:100%}.hl-nav{margin-left:auto}}
@media (max-width:640px){.patent-uspto{width:72px;height:72px}.patent-uspto img{width:64px;height:64px}.hl-tab{padding:7px 11px;font-size:.82rem}}
@media (prefers-reduced-motion:reduce){.hl-track,.hl-stage,.hl-slide{transition:none}.hl-progress.run em{animation:none}}

/* ---------- Round 40: "Pick a page" tabs with miniatures (about-portfolio.html) ---------- */
.wf-pick{margin:0 0 8px;font:500 .7rem var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.wf-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.wf-tabs button{min-width:0}.wf-name{min-width:0}
.wf-tabs button{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;text-align:left;background:color-mix(in srgb,var(--surface) 70%,transparent);transition:border-color .2s,box-shadow .2s,transform .2s}
.wf-tabs button:hover{transform:translateY(-1px);border-color:var(--accent-bright)}
.wf-tabs button[aria-selected="true"]{background:var(--surface);color:var(--text);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 10px 22px -14px color-mix(in srgb,var(--accent) 70%,transparent)}
.wf-mini{position:relative;flex:none;width:76px;height:48px;border-radius:8px;overflow:hidden;border:1px solid var(--rule);background:var(--paper-2)}
.wf-mini img{display:block;width:100%;height:100%;object-fit:cover}
.wf-mini::after{content:"";position:absolute;inset:0 50% 0 0;background:repeating-linear-gradient(0deg,transparent 0 5px,color-mix(in srgb,var(--rule) 70%,transparent) 5px 6px),repeating-linear-gradient(90deg,transparent 0 5px,color-mix(in srgb,var(--rule) 70%,transparent) 5px 6px),var(--surface);border-right:1.5px solid #fff;box-shadow:1px 0 0 rgba(10,20,50,.15)}
.wf-name{display:flex;flex-direction:column;gap:2px;font-weight:500;font-size:.9rem;color:var(--ink);line-height:1.2}
.wf-name small{font-weight:400;font-size:.74rem;color:var(--muted)}
@media (max-width:900px){.wf-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.wf-mini{width:60px;height:38px}}
.highlights{overflow-x:clip}   /* the glass light extends past the frame; keep it from widening the page on phones */

/* ---------- Round 41: a miniature for each Program scorecard KPI (Home); bars are stretched SVG, labels are HTML ---------- */
.sc-viz{display:flex;flex-direction:column;gap:5px;margin-top:auto;padding-top:12px}
.sv-bar{display:block;width:100%;height:10px}
.sv-row{display:grid;grid-template-columns:3.6em minmax(0,1fr) 3.4em;align-items:center;gap:8px}
.sv-k,.sv-v,.sv-leg,.sv-note{font:500 .66rem/1.3 var(--font-mono);color:var(--muted);letter-spacing:.02em}
.sv-v{text-align:right;color:var(--ink)}
.sv-leg{display:flex;justify-content:space-between;gap:8px}
.sv-share{display:block;height:4px;border-radius:2px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden;margin-top:2px}
.sv-share i{display:block;height:100%;background:#e3a24f;border-radius:2px}
.sv-waffle{display:grid;grid-template-columns:repeat(27,minmax(0,1fr));gap:3px}
.sv-waffle i{aspect-ratio:3/2;border-radius:2px;background:var(--accent)}
.sv-waffle i.b{background:var(--accent-2)}
.sc-viz .sv-a{fill:var(--accent)}
.sc-viz .sv-b{fill:var(--accent-2)}
.sc-viz .sv-p{fill:color-mix(in srgb,var(--accent) 45%,var(--paper-2))}
.sc-viz .sv-t{fill:color-mix(in srgb,var(--ink) 10%,transparent)}
.sc-card{transition:transform .2s ease,box-shadow .2s ease}
.sc-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px -16px color-mix(in srgb,var(--accent) 55%,transparent)}
@media (max-width:900px){.sv-waffle{gap:2px}}
@media (prefers-reduced-motion:reduce){.sc-card{transition:none}.sc-card:hover{transform:none}}
/* Round 41b: each scorecard KPI shows a pictogram of what it counts (not a breakdown) */
.sc-pic{align-items:flex-end;padding-top:14px}
.sc-pic svg{display:block;width:auto;height:64px;max-width:100%}
.sc-hero .sc-pic svg{height:72px}
.sc-pic .pa{fill:var(--accent)}
.sc-pic .pb{fill:var(--accent-2)}
.sc-pic .ps{fill:color-mix(in srgb,var(--accent) 22%,var(--surface))}
.sc-pic .pt{fill:color-mix(in srgb,var(--ink) 8%,transparent)}
.sc-pic .po{fill:var(--surface)}
.sc-pic .pk{fill:none;stroke:color-mix(in srgb,var(--ink) 25%,transparent);stroke-width:1.2}
.sc-pic .pw{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sc-pic circle.pw{fill:#fff;stroke:none}
.sc-pic .pw2{fill:none;stroke:#fff;stroke-width:1.4;opacity:.7}
.sc-pic .pl{fill:none;stroke:var(--accent-2);stroke-width:1.6;stroke-dasharray:4 3}
.sc-pic text{font:500 8px var(--font-mono);fill:var(--muted)}
.sc-card:hover .sc-pic svg{transform:translateY(-2px);transition:transform .2s ease}
@media (prefers-reduced-motion:reduce){.sc-card:hover .sc-pic svg{transform:none}}
/* Round 41c: scorecard KPI miniatures in the same style as the Control Tower module miniatures (.mv) */
.sc-mv{margin:auto 0 0;padding:6px 8px}
.sc-card .sc-mv{margin-top:14px}
.sc-mv .chip{fill:var(--accent-soft);stroke:var(--accent);stroke-width:.8}
.sc-mv .chipd{fill:color-mix(in srgb,#2e9d6a 18%,var(--surface));stroke:#2e9d6a;stroke-width:.8}
.sc-mv .nd2{fill:color-mix(in srgb,var(--accent) 30%,var(--surface))}
.sc-mv .tbl{fill:var(--accent)}
.sc-mv .tbl + circle{fill:var(--accent-2)}
.sc-mv text.lb2{fill:var(--ink);font-weight:500}
.sc-mv .ln,.sc-mv .ln2,.sc-mv .lnw{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sc-mv .ln{stroke:var(--accent-2);stroke-dasharray:3 2}.sc-mv .ln2{stroke:var(--accent)}.sc-mv .lnw{stroke:#fff}
.sc-mv .scr{fill:var(--accent)}
.sc-mv .flr{fill:color-mix(in srgb,var(--accent) 8%,var(--surface));stroke:var(--rule-strong);stroke-dasharray:3 2}
.sc-mv .ring{fill:none;stroke:#fff;stroke-width:1;opacity:.7}
.sc-mv .star,.sc-mv .pinw,.sc-mv .playt{fill:#fff}
.sc-mv .playc{fill:color-mix(in srgb,#fff 25%,transparent);stroke:#fff;stroke-width:1.2}
.sc-mv text.in{fill:#fff;font-size:6.5px}

.badge{position:relative}
.badge .badge-mark{position:absolute;top:8px;right:8px;width:26px;height:auto;pointer-events:none}
.career--hero .c-row{min-height:auto}
.career--hero .c-label{min-height:44px}
.career--hero .c-text > span{text-wrap:balance;overflow:visible}

/* Round 46: compact scorecard. One uniform 3-up grid, same card size and mini-graphic frame, so the set reads as one system */
/* Round 46: compact scorecard */
.sc-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.sc-card,.sc-card.sc-hero{grid-column:auto;padding:16px 18px 14px;gap:3px;border-radius:16px}
.sc-card.sc-hero{background:linear-gradient(120deg,var(--accent-soft),var(--accent-2-soft))}
.sc-num,.sc-hero .sc-num{font-size:clamp(1.6rem,1.2rem + .8vw,2rem);color:var(--ink)}
.sc-hero .sc-num{color:var(--accent)}
.sc-label{font-size:.86rem;line-height:1.3}
.sc-note{font-size:.64rem;line-height:1.3}
.sc-card .sc-mv,.sc-mv{margin-top:10px;height:92px;padding:6px;border-radius:12px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.sc-mv svg{display:block;width:100%;height:100%}
.sc-foot{margin-top:10px}
@media (max-width:1000px){.sc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
@media (max-width:560px){.sc-grid{grid-template-columns:1fr;gap:10px}.sc-card .sc-mv,.sc-mv{height:84px}}

/* Round 47: tighter home spacing */
.hero{padding-block:clamp(14px,1.8vw,24px) clamp(28px,3.4vw,44px)}
.highlights{padding-block:clamp(6px,1.2vw,14px) clamp(16px,2.2vw,28px)}
#flagships.section,#try.section,#explore.section{padding-block:clamp(36px,4.4vw,60px)}
#flagships .sec-head,#try .sec-head,#explore .sec-head{margin-bottom:clamp(20px,2.6vw,32px)}
#try .card-grid,#explore .explore-grid{row-gap:clamp(12px,1.4vw,18px)}

/* Round 48: consistent section spacing across pages */
.section{padding-block:clamp(36px,4.4vw,60px)}
.sec-head{margin-bottom:clamp(20px,2.6vw,32px)}

/* Round 49: Experience roadmap uses the home graphic layout */
.career .c-label{display:flex;align-items:center;gap:10px;min-width:0;padding-right:12px}
.career .c-label .c-text{display:flex;flex-direction:column;min-width:0}
.career .c-label .c-text > b{font-size:.9rem;font-weight:600}
.career .c-label .c-text > span{font-size:.76rem;line-height:1.25}
.career .c-label .org-logo{flex:none}
@media (max-width:760px){.career .c-row.ms{display:grid}.career .c-row{grid-template-columns:var(--labelw) minmax(0,1fr);padding:0}}

/* ---- Resume v2.1 (2026-11-05): short view first, details on demand ---- */
.r-lede{font-size:1.02rem;line-height:1.6;color:var(--text);margin:0 0 12px}
.r-core{margin-top:4px}
.r-core li{background:var(--accent-soft);color:var(--ink)}
.r-hint{margin:-4px 0 6px;font-size:.84rem;color:var(--muted)}
.r-role-v2{padding-top:10px}
.r-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:10px 0 2px;padding:0}
.r-chips li{display:flex;align-items:baseline;gap:6px;padding:6px 12px;border:1px solid var(--rule);border-radius:12px;background:var(--surface);font-size:.78rem;color:var(--muted)}
.r-chips b{font-size:1.05rem;font-weight:600;color:var(--accent)}
.r-short li{font-size:.95rem}
.r-role-v2 .r-list b{font-weight:600}
.r-more{margin:10px 0 4px;border:1px solid var(--rule);border-radius:12px;background:var(--surface)}
.r-more>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;padding:9px 14px;font-size:.84rem;font-weight:500;color:var(--accent)}
.r-more>summary::-webkit-details-marker{display:none}
.r-more>summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s;margin-right:4px}
.r-more[open]>summary::before{transform:rotate(45deg)}
.r-more-w:not(:empty)::before{content:"+ "}
.r-more-w{color:var(--muted);font-weight:400}
.r-more>summary:hover{background:var(--accent-soft);border-radius:12px}
.r-more>summary:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px;border-radius:12px}
.r-more>.r-list{margin:0 14px 8px 32px;padding-left:0}
.r-work-h{margin:10px 14px 6px;font:500 .7rem/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.r-work{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 14px 14px;padding:0}
.r-work a{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;border:1px solid var(--rule-strong);font-size:.8rem;color:var(--ink);text-decoration:none}
.r-work a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.r-work .ico{font-size:.7rem;color:var(--accent)}
.r-figs-more>summary{margin-top:6px}
.r-figs-more[open]{padding-bottom:10px}
.r-figs-more>.r-fig{margin:12px 14px 0}
.r-sig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0}
.r-sig-grid li{position:relative}
.r-sig-card{display:flex;flex-direction:column;gap:4px;height:100%;padding:8px 8px 12px;border:1px solid var(--rule);border-radius:14px;background:var(--surface);color:var(--text);text-decoration:none;box-shadow:var(--shadow)}
.r-sig-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:9px;background:var(--paper-2);margin-bottom:6px}
.r-sig-card b{font-weight:500;color:var(--ink);font-size:.92rem;padding:0 4px}
.r-sig-card span{font-size:.8rem;line-height:1.4;color:var(--muted);padding:0 4px}
.r-sig-card:hover{border-color:var(--accent)}
.r-sig-demo{position:absolute;top:14px;right:14px;display:inline-flex;gap:5px;align-items:center;padding:3px 9px;border-radius:999px;background:var(--overlay-strong);color:#fff;font-size:.72rem;text-decoration:none}
.r-aside-more>summary{padding:8px 12px}
@media (max-width:900px){.r-sig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.r-sig-grid{grid-template-columns:1fr}.r-more>.r-list{margin-left:22px}}
@media print{
  .r-more{border:0}.r-more>summary{display:none}.r-more::details-content{content-visibility:visible;display:contents}
  .r-work,.r-work-h,.r-sig,.r-sig-demo{display:none!important}
}

/* Round 50: FAQ for search and AI answer engines (index.html #faq, mirrored in FAQPage JSON-LD) */
.faq{display:grid;gap:10px;max-width:920px}
.faq-item{background:var(--surface,#fff);border:1px solid var(--rule);border-radius:12px;padding:0 18px}
.faq-item>summary{list-style:none;cursor:pointer;padding:14px 0;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary::after{content:"+";font-size:1.3rem;color:var(--accent);line-height:1}
.faq-item[open]>summary::after{content:"−"}
.faq-item>summary h3{margin:0;font-size:1rem;font-weight:500}
.faq-item>p{margin:0 0 16px;max-width:76ch}
.faq-item>summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}