/* ============================================================
   TOKENS — light is the base; dark redefines tokens only.

   The palette is unchanged from the sunrise design: deep ocean navy
   for the big surfaces (hero, hours board, work band, contact), mango
   for Andrea (buttons, sparkles, her hours on the board), sky blue for
   the visitor (board only), on a cool mint paper.

   The layout borrows one shape language throughout: a navy plate with
   a tab in the middle of one edge, and two paler plates stacked under
   it like a short pile of paper.
   ============================================================ */
:root{
  --paper:#F2F7F5;
  --panel:#FFFFFF;
  --tint:#DCEEEA;
  --ink:#0B2239;
  --ink-2:#38526A;
  --ink-3:#4B657A;
  --rule:#C3D5D1;
  --rule-soft:#D6E5E1;
  --accent:#FFB81C;          /* mango — fills only; never text on paper */
  --accent-ink:#0B2239;      /* text that sits on mango, in both themes */
  --focus:#0B2239;
  --shade:rgba(11,34,57,.38);

  /* the deep-ocean surface and its relatives */
  --desk:#0B2239;
  --desk-lift:#133559;       /* the disc behind the portrait, cards on the navy band */
  --desk-deep:#06121F;       /* the dark pill button inside the hero */
  --desk-edge:rgba(255,255,255,.12);
  --desk-ink:#F2F7F5;
  --desk-ink-2:#C5D3E0;
  --desk-line:rgba(255,255,255,.18);
  --desk-off:rgba(255,255,255,.09);
  --desk-you:#5FD8EA;
  --desk-her:#FFB81C;
  --desk-link:#FFC94D;

  /* the paler plates stacked under each navy plate */
  --plate-1:color-mix(in srgb,var(--desk) 40%,var(--paper));
  --plate-2:color-mix(in srgb,var(--desk) 15%,var(--paper));

  /* cards */
  --bracket:#0B2239;         /* the corner brackets on white cards */
  --tile:#0B2239;            /* icon tiles and round toggles */
  --tile-ink:#F2F7F5;
  --card-shadow:0 1px 2px rgba(11,34,57,.05),0 22px 44px -22px rgba(11,34,57,.22);
  --card-shadow-2:0 1px 2px rgba(11,34,57,.06),0 30px 54px -22px rgba(11,34,57,.32);

  /* ---- spacing: one scale, 4px base ---- */
  --sp-4:4px;  --sp-8:8px;   --sp-12:12px; --sp-16:16px; --sp-20:20px; --sp-24:24px;
  --sp-32:32px; --sp-40:40px; --sp-48:48px; --sp-56:56px; --sp-64:64px; --sp-80:80px; --sp-96:96px; --sp-128:128px;
  --gutter:var(--sp-32);
  --section-y:var(--sp-128);
  --bar-h:96px;

  /* ---- radius ---- */
  --r-xs:4px;
  --r-sm:6px;
  --r-md:10px;
  --r-tile:14px;
  --r-card:16px;
  --r-panel:28px;
  --r-pill:999px;
  --r-plate:clamp(24px,3vw,44px);   /* the hero and contact plate corners */

  /* ---- the tab in the middle of a plate's edge ---- */
  --tab-w:clamp(132px,16vw,232px);
  --tab-h:clamp(42px,5.2vw,76px);
  --tab-f:clamp(21px,2.6vw,38px);   /* the concave fillet where tab meets edge */
  /* the tab's own corners take the rest of its depth, so each side is one
     unbroken S: fillet in, corner out, no straight run and no gap */
  --tab-r:calc(var(--tab-h) - var(--tab-f));
  --plate:clamp(10px,1.35vw,20px);  /* how far each paler plate shows */

  /* ---- type: Poppins does everything ---- */
  --font:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-body:16px;
  --fs-card:15px;
  --fs-lede:clamp(1rem,.95rem + .25vw,1.125rem);
  --fs-meta:14px;
  --fs-fine:13px;               /* the floor: nothing renders smaller */
  --measure:62ch;

  --sun:none;      /* light theme: offer the moon */
  --moon:inline;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0A1624;
    --panel:#11263C;
    --tint:#0E2236;
    --ink:#EAF3F5;
    --ink-2:#B7C9D6;
    --ink-3:#8FA8BA;
    --rule:#25405A;
    --rule-soft:#1A3047;
    --accent:#FFC24B;
    --focus:#FFC24B;
    --shade:rgba(0,0,0,.6);
    --desk:#133559;
    --desk-lift:#1C4670;
    --desk-deep:#0A1D31;
    --desk-her:#FFC24B;
    --plate-1:color-mix(in srgb,var(--desk) 62%,var(--paper));
    --plate-2:color-mix(in srgb,var(--desk) 30%,var(--paper));
    --bracket:#8FA8BA;
    --tile:#1C4670;
    --card-shadow:0 0 0 1px rgba(255,255,255,.05),0 22px 44px -22px rgba(0,0,0,.7);
    --card-shadow-2:0 0 0 1px rgba(255,255,255,.08),0 30px 54px -22px rgba(0,0,0,.8);
    --sun:inline;  /* dark theme: offer the sun */
    --moon:none;
  }
}
:root[data-theme="dark"]{
  --paper:#0A1624;
  --panel:#11263C;
  --tint:#0E2236;
  --ink:#EAF3F5;
  --ink-2:#B7C9D6;
  --ink-3:#8FA8BA;
  --rule:#25405A;
  --rule-soft:#1A3047;
  --accent:#FFC24B;
  --focus:#FFC24B;
  --shade:rgba(0,0,0,.6);
  --desk:#133559;
  --desk-lift:#1C4670;
  --desk-deep:#0A1D31;
  --desk-her:#FFC24B;
  --plate-1:color-mix(in srgb,var(--desk) 62%,var(--paper));
  --plate-2:color-mix(in srgb,var(--desk) 30%,var(--paper));
  --bracket:#8FA8BA;
  --tile:#1C4670;
  --card-shadow:0 0 0 1px rgba(255,255,255,.05),0 22px 44px -22px rgba(0,0,0,.7);
  --card-shadow-2:0 0 0 1px rgba(255,255,255,.08),0 30px 54px -22px rgba(0,0,0,.8);
  --sun:inline;
  --moon:none;
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box}
/* a display rule must never beat the hidden attribute */
[hidden]{display:none!important}
/* anchor jumps clear the floating bar */
html{scroll-padding-top:96px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: hidden would break position:sticky */
  overflow-x:clip;
}
h1,h2,h3,h4{
  font-family:var(--font);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.01em;
  text-wrap:balance;
  margin:0;
}
p{margin:0;text-wrap:pretty}
a{color:inherit}
/* One focus ring for everything. No radius here: a focus rule must never reshape
   the element it rings. On navy it turns mango. */
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.topbar :focus-visible,.hero :focus-visible,.desk :focus-visible,
.band :focus-visible,.contact :focus-visible{outline-color:var(--accent)}
.num{font-variant-numeric:tabular-nums}
.sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}

.skip{
  position:absolute;left:var(--sp-16);top:-100px;z-index:100;
  background:var(--accent);color:var(--accent-ink);font-weight:600;
  padding:var(--sp-12) var(--sp-16);border-radius:var(--r-sm);text-decoration:none;
  transition:top .15s ease;
}
.skip:focus{top:12px}

/* line icons from the sprite share one weight; the sparkle is the only solid shape */
.tile svg,.more svg,.storebtn svg,.playbtn svg,.tab-link svg,.tog svg,.pill svg{
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.spark,.spark-inline{fill:var(--accent);stroke:none}

/* ============================================================
   TOP BAR — inside the hero at first, then a floating pill
   ============================================================ */
.topbar{position:absolute;top:0;left:0;right:0;z-index:60;color:var(--desk-ink)}
.bar{position:relative;display:flex;align-items:center;gap:var(--sp-12);height:var(--bar-h)}
.mark{
  margin-right:auto;
  font-weight:600;font-size:1.2rem;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;
}
.mark:focus-visible{border-radius:var(--r-xs)}
.nav{display:flex;align-items:center;gap:var(--sp-32);margin-right:var(--sp-20)}
.nav a{
  position:relative;padding:var(--sp-8) 0;
  font-size:var(--fs-meta);color:var(--desk-ink-2);text-decoration:none;
  transition:color .15s ease;
}
/* the current section gets a mango dot under its name */
.nav a::after{
  content:"";position:absolute;left:50%;bottom:-2px;width:5px;height:5px;margin-left:-2.5px;
  border-radius:var(--r-pill);background:var(--accent);
  opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease;
}
.nav a:hover,.nav a[aria-current="true"]{color:var(--desk-ink)}
.nav a[aria-current="true"]::after{opacity:1;transform:none}
.nav a:focus-visible{border-radius:var(--r-xs);outline-offset:2px}
.nav .nav-contact{display:none}

.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:42px;height:42px;padding:0;border-radius:var(--r-pill);
  background:none;border:1.5px solid rgba(255,255,255,.28);color:var(--desk-ink);cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease;
}
.iconbtn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.iconbtn:active{transform:translateY(1px)}
.iconbtn svg{
  width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.i-sun{display:var(--sun)}
.i-moon{display:var(--moon)}
.menubtn{display:none}
.menubtn path{transition:transform .2s ease;transform-origin:8px 8px}
.topbar.menu-open .menubtn .l1{transform:translateY(2.5px) rotate(45deg)}
.topbar.menu-open .menubtn .l2{transform:translateY(-2.5px) rotate(-45deg)}

/* the mango pill: Contact in the bar, Email Andrea in the footer */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);flex:none;
  padding:var(--sp-12) var(--sp-24);border-radius:var(--r-pill);
  font:600 var(--fs-meta)/1.2 var(--font);text-decoration:none;white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.pill-sun{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 24px -12px rgba(255,184,28,.7)}
.pill-sun:hover{background:var(--desk-ink);color:var(--accent-ink);box-shadow:none}
.pill:active{transform:translateY(1px)}
.pill svg{width:16px;height:16px;stroke-width:2}

/* floating: after the hero has mostly gone, the same bar returns as a pill */
.topbar.is-stuck{position:fixed;top:var(--sp-12);animation:bar-in .35s cubic-bezier(.2,.7,.2,1)}
.topbar.is-stuck .bar{
  height:64px;max-width:calc(1240px - var(--gutter) * 2);
  padding:0 var(--sp-12) 0 var(--sp-24);
  background:var(--desk);border-radius:var(--r-pill);
  box-shadow:0 0 0 1px var(--desk-edge),0 20px 40px -18px rgba(6,18,31,.6);
}
@media (min-width:1305px){
  .topbar.is-stuck .bar{margin:0 auto}
}
@media (max-width:1304px){
  .topbar.is-stuck .bar{margin:0 var(--gutter)}
}
.topbar.is-stuck .mark{font-size:1.05rem}
.topbar.is-stuck .iconbtn{width:40px;height:40px}
@keyframes bar-in{from{transform:translateY(-140%)}}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;isolation:isolate;color:var(--desk-ink);
  padding-top:var(--bar-h);
  /* room underneath for the tab and the two paler plates */
  margin-bottom:calc(var(--tab-h) + var(--plate) * 2);
}
/* The navy plate. drop-shadow with no blur copies its whole silhouette, tab and
   fillets included: the first copy is the mid plate, and the second filter
   shadows plate-and-copy together, so the palest plate peeks out under both. */
.hero-plate{
  position:absolute;inset:0;z-index:-1;
  background:var(--desk);border-radius:0 0 var(--r-plate) var(--r-plate);
  filter:drop-shadow(0 var(--plate) 0 var(--plate-1)) drop-shadow(0 var(--plate) 0 var(--plate-2));
}
.tab{
  position:absolute;top:100%;left:50%;
  width:var(--tab-w);height:var(--tab-h);margin-left:calc(var(--tab-w) / -2);
  background:var(--desk);
  border-radius:0 0 var(--tab-r) var(--tab-r);
}
/* the concave fillets that blend the tab into the plate's edge */
.tab::before,.tab::after{content:"";position:absolute;top:0;width:var(--tab-f);height:var(--tab-f)}
.tab::before{right:100%;background:radial-gradient(circle at 0 100%,transparent calc(var(--tab-f) - .5px),var(--desk) var(--tab-f))}
.tab::after{left:100%;background:radial-gradient(circle at 100% 100%,transparent calc(var(--tab-f) - .5px),var(--desk) var(--tab-f))}

.tab-link{
  position:absolute;z-index:2;top:100%;left:50%;
  width:40px;height:40px;margin:calc(var(--tab-h) / 2 - 22px) 0 0 -20px;
  display:grid;place-items:center;border-radius:var(--r-pill);
  color:var(--desk-ink);transition:background-color .15s ease,transform .2s ease;
}
.tab-link:hover{background:rgba(255,255,255,.1);transform:translateY(2px)}
.tab-link svg{width:22px;height:22px;stroke-width:1.8}

.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);column-gap:var(--sp-48);
  align-items:end;
}
.hero-copy{align-self:center;padding:var(--sp-40) 0 var(--sp-80);min-width:0}

.eyebrow{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-8) var(--sp-12);
  font-size:var(--fs-fine);color:var(--desk-ink-2);
}
.live{
  width:8px;height:8px;border-radius:var(--r-pill);flex:none;
  background:var(--accent);box-shadow:0 0 0 4px rgba(255,184,28,.2);
}
.sep{width:4px;height:4px;border-radius:var(--r-pill);background:currentColor;opacity:.55;flex:none}

h1{
  margin-top:var(--sp-16);max-width:12ch;
  font-size:clamp(2.5rem,1.25rem + 3.4vw,4.25rem);
  font-weight:600;line-height:1.16;letter-spacing:-.015em;
}
.spark-inline{display:inline-block;width:.56em;height:.56em;margin-left:.14em;vertical-align:.02em}

.thesis{
  margin-top:var(--sp-24);max-width:46ch;padding-left:var(--sp-16);
  border-left:2px solid rgba(255,255,255,.55);
  font-size:var(--fs-card);line-height:1.75;color:var(--desk-ink-2);
}
.thesis strong{color:var(--desk-ink);font-weight:500}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-16) var(--sp-32);margin-top:var(--sp-40)}
/* the dark two-line pill, after an app-store badge */
.storebtn{
  display:inline-flex;align-items:center;gap:var(--sp-12);
  padding:var(--sp-12) var(--sp-24) var(--sp-12) var(--sp-20);border-radius:var(--r-pill);
  background:var(--desk-deep);color:var(--desk-ink);text-decoration:none;
  box-shadow:0 0 0 1px var(--desk-edge);
  transition:background-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.storebtn svg{width:26px;height:26px;flex:none}
.storebtn span{display:flex;flex-direction:column;font-weight:600;font-size:1rem;line-height:1.25}
.storebtn small{font-size:var(--fs-fine);font-weight:400;opacity:.78}
.storebtn:hover{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.storebtn:active{transform:translateY(1px)}
/* the round mango button with a halo, after a play button */
.playbtn{
  display:inline-flex;align-items:center;gap:var(--sp-16);
  font-size:var(--fs-meta);font-weight:500;color:var(--desk-ink);text-decoration:none;
}
.playbtn-dot{
  display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-ink);
  box-shadow:0 0 0 7px rgba(255,184,28,.18);
  transition:box-shadow .2s ease,transform .2s ease;
}
.playbtn-dot svg{width:20px;height:20px;stroke-width:2}
.playbtn:hover .playbtn-dot{box-shadow:0 0 0 11px rgba(255,184,28,.22);transform:scale(1.04)}
.playbtn:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--accent)}
.playbtn:focus-visible{border-radius:var(--r-pill);outline-offset:6px}

.stats{display:flex;margin:var(--sp-48) 0 0;padding:0;list-style:none}
.stats li{padding:0 var(--sp-24);text-align:center;border-left:1px solid rgba(255,255,255,.3)}
.stats li:first-child{padding-left:0;border-left:0}
.stats b{display:block;font-size:clamp(1.5rem,1.2rem + .8vw,1.875rem);font-weight:500;line-height:1.2;color:var(--desk-ink)}
.stats span{display:block;max-width:15ch;margin:var(--sp-8) auto 0;font-size:var(--fs-fine);line-height:1.45;color:var(--desk-ink-2)}
.stats li:first-child span{margin-left:0}
.stats li:first-child{text-align:left}

/* The portrait stands on the plate's bottom edge, in front of a lifted-navy disc. */
.hero-art{
  position:relative;align-self:end;justify-self:center;width:100%;
  display:flex;justify-content:center;line-height:0;
  padding-top:var(--sp-24);
  --ph:clamp(400px,44vw,640px);   /* portrait height */
}
.hero-art img{
  position:relative;z-index:1;display:block;
  height:var(--ph);width:auto;max-width:100%;aspect-ratio:560/813;object-fit:contain;object-position:bottom;
}
.disc{
  position:absolute;left:50%;bottom:calc(var(--ph) * .05);
  width:calc(var(--ph) * .9);aspect-ratio:1;transform:translateX(-50%);
  border-radius:var(--r-pill);background:var(--desk-lift);
}
.spark-hero{
  position:absolute;z-index:2;
  left:calc(50% - var(--ph) * .42);top:calc(100% - var(--ph) * .8);
  width:calc(var(--ph) * .1);height:calc(var(--ph) * .1);
}
.speck{position:absolute;border-radius:var(--r-pill);pointer-events:none}
.speck-a{
  z-index:2;width:12px;height:12px;background:var(--accent);
  right:calc(50% - var(--ph) * .4);top:calc(100% - var(--ph) * .8);
}
.speck-b,.speck-c{width:6px;height:6px;background:rgba(255,255,255,.3)}
.speck-b{left:44%;top:46%}
.speck-c{left:47%;top:62%}

/* ============================================================
   SECTIONS
   ============================================================ */
.block{padding:var(--section-y) 0}
.block-first{padding-top:var(--sp-96)}
/* the last block before the contact plate leaves room for its tab */
.block-last{padding-bottom:calc(var(--section-y) + var(--tab-h) + var(--plate) * 2)}
/* two blocks on the same paper would double their padding into a dead band, so
   the second gives its top back — unless the first is the hidden testimonials */
.block:not([hidden]) + .block{padding-top:0}

.sec-hd{max-width:760px;margin:0 auto var(--sp-64);text-align:center}
h2{
  font-size:clamp(1.75rem,1.25rem + 1.5vw,2.5rem);
  font-weight:600;line-height:1.25;letter-spacing:-.01em;
}
.lede{
  max-width:52ch;margin:var(--sp-16) auto 0;
  font-size:var(--fs-lede);line-height:1.7;color:var(--ink-2);
}
.subhead{margin:0 0 var(--sp-48);text-align:center;font-size:clamp(1.4rem,1.15rem + .8vw,1.875rem);font-weight:600}

/* ---------- cards with corner brackets ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-64) var(--sp-56)}
.card{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  padding:var(--sp-32);background:var(--panel);border-radius:var(--r-card);
  box-shadow:var(--card-shadow);
  transition:transform .2s ease,box-shadow .2s ease;
}
.card h3{margin-top:var(--sp-24);font-size:1.2rem;font-weight:600;line-height:1.35}
.card p{margin-top:var(--sp-12);font-size:var(--fs-card);line-height:1.75;color:var(--ink-2)}
.card .more{margin-top:auto;padding-top:var(--sp-24)}
.card:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-2)}

/* Two thick strokes on opposite corners, sitting on the card's own edge.
   On hover they turn mango and reach a little further round. */
.bracket::before,.bracket::after{
  content:"";position:absolute;pointer-events:none;
  width:36%;height:34%;border:0 solid var(--bracket);
  transition:border-color .2s ease,width .3s cubic-bezier(.2,.7,.2,1),height .3s cubic-bezier(.2,.7,.2,1);
}
.bracket::before{
  top:-2px;right:-2px;border-top-width:4px;border-right-width:4px;
  border-top-right-radius:calc(var(--r-card) + 2px);
}
.bracket::after{
  bottom:-2px;left:-2px;border-bottom-width:4px;border-left-width:4px;
  border-bottom-left-radius:calc(var(--r-card) + 2px);
}
.bracket:hover::before,.bracket:hover::after,.bracket:focus-within::before,.bracket:focus-within::after{
  border-color:var(--accent);width:46%;height:42%;
}

.tile{
  display:grid;place-items:center;flex:none;width:56px;height:56px;
  border-radius:var(--r-tile);background:var(--tile);color:var(--tile-ink);
  box-shadow:0 12px 20px -12px var(--shade);
}
.tile svg{width:26px;height:26px;stroke-width:1.5}

.more{
  display:inline-block;
  font-size:var(--fs-meta);font-weight:600;line-height:1.5;color:var(--ink);text-decoration:none;
}
.more svg{display:inline-block;width:16px;height:16px;margin-left:var(--sp-8);vertical-align:-3px;stroke-width:2;transition:transform .2s ease}
a.more:hover,.dcard:hover .more{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
a.more:hover svg,.dcard:hover .more svg,.dcard:focus-visible .more svg{transform:translateX(4px)}
a.more:focus-visible{border-radius:var(--r-xs);outline-offset:4px}
/* keeps the arrow with the last words when a link wraps */
.nw{white-space:nowrap}

/* ---------- tools: the numbered list style, laid out in a row ---------- */
.toolbox{margin-top:var(--sp-96)}
.toolbox h3{text-align:center;font-size:1.25rem;font-weight:600}
.toolbox dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-32);margin:var(--sp-32) 0 0}
.toolbox dl div{padding-top:var(--sp-16);border-top:1px solid var(--rule)}
/* the index hangs in the margin; the category and its tools share one left edge */
.toolbox dt{display:flex;font-size:var(--fs-fine);line-height:1.5;color:var(--ink-3)}
.toolbox dt .num{flex:none;width:40px}
.toolbox dd{margin:var(--sp-8) 0 0;padding-left:40px;font-size:1rem;font-weight:500;line-height:1.55}

/* ============================================================
   HOURS — the live board on a navy plate
   ============================================================ */
.desk{
  position:relative;background:var(--desk);color:var(--desk-ink);
  border-radius:var(--r-panel);padding:var(--sp-48) var(--sp-48) var(--sp-40);
  margin-bottom:calc(var(--plate) * 2);
  box-shadow:0 var(--plate) 0 var(--plate-1),0 calc(var(--plate) * 2) 0 var(--plate-2);
}
.desk-hd{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-16) var(--sp-32);flex-wrap:wrap;margin-bottom:var(--sp-40);
}
.desk-now{display:flex;align-items:baseline;gap:var(--sp-16);flex-wrap:wrap}
.desk-time{
  font-weight:600;
  font-size:clamp(2.5rem,1.9rem + 2.6vw,4.25rem);line-height:1;letter-spacing:-.02em;
}
.desk-where{font-size:var(--fs-card);color:var(--desk-ink-2)}
.desk-you{display:flex;align-items:center;gap:var(--sp-12);flex-wrap:wrap;font-size:var(--fs-meta);color:var(--desk-ink-2)}
.desk-youtime{font-weight:600;color:var(--desk-ink);font-size:var(--fs-card)}
.desk select{
  /* Safari ignores background, radius and padding on a select until the native
     appearance is off, so it needs the reset plus our own arrow. */
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  font:500 var(--fs-meta)/1.3 var(--font);
  color:var(--desk-ink);
  background-color:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.34);
  border-radius:var(--r-pill);
  padding:var(--sp-8) 38px var(--sp-8) var(--sp-16);margin:0;max-width:100%;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23C5D3E0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 12px;
}
.desk select:hover{background-color:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6)}
.desk select option{color:#0B2239;background:#fff}

/* the board: you, Andrea, and what they have in common */
.board{
  position:relative;display:grid;gap:var(--sp-16);
  --lab:calc(200px + var(--sp-24));   /* label column + gap, so the now-line can align to the tracks */
  --now:0;
}
.board-row{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:var(--sp-24);align-items:center}
.rl{display:flex;flex-direction:column;gap:1px;min-width:0}
.rl .who{font-size:var(--fs-meta);font-weight:500}
.rl .hrs{font-size:var(--fs-fine);color:var(--desk-ink-2)}
.track{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:4px;height:36px}
.cell{background:var(--desk-off);border-radius:var(--r-sm)}
.cell.you{background:var(--desk-you)}
.cell.core{background:var(--desk-her)}
.cell.flex{background:transparent;box-shadow:inset 0 0 0 1.5px var(--desk-her)}
.cell.shared{background:var(--desk-ink)}
.board-shared{margin-top:2px}
.board-shared .who{font-weight:600}

.scale{position:relative;height:20px;margin-left:var(--lab);margin-top:-2px;font-size:var(--fs-fine);color:var(--desk-ink-2)}
.scale span{position:absolute;top:0;transform:translateX(-50%)}
.scale span:first-child{transform:none}
.scale span:last-child{transform:translateX(-100%)}

.nowline{
  position:absolute;top:-8px;bottom:20px;width:3px;margin-left:-1.5px;
  left:calc(var(--lab) + (100% - var(--lab)) * var(--now));
  background:var(--desk-ink);border-radius:var(--r-pill);pointer-events:none;
}
.nowline::before{
  content:"";position:absolute;top:-5px;left:50%;width:12px;height:12px;margin-left:-6px;
  border-radius:var(--r-pill);background:var(--desk-ink);
}

.desk-ft{
  display:grid;gap:var(--sp-24);margin-top:var(--sp-32);padding-top:var(--sp-32);
  border-top:1px solid var(--desk-line);
}
.desk-verdict{
  font-weight:400;
  font-size:clamp(1.1rem,1rem + .55vw,1.45rem);line-height:1.55;
  max-width:var(--measure);
}
.desk-verdict b{font-weight:600;color:var(--desk-link)}
.desk-key{display:flex;flex-wrap:wrap;gap:var(--sp-8) var(--sp-24);font-size:var(--fs-fine);color:var(--desk-ink-2)}
.desk-key span{display:inline-flex;align-items:center;gap:var(--sp-8)}
.sw{display:inline-block;width:16px;height:10px;border-radius:var(--r-xs);flex:none}
.sw-you{background:var(--desk-you)}
.sw-core{background:var(--desk-her)}
.sw-flex{box-shadow:inset 0 0 0 1.5px var(--desk-her)}
.sw-now{width:3px;height:14px;border-radius:var(--r-pill);background:var(--desk-ink)}

/* The one orchestrated moment: the day fills in once, on load. */
@media (prefers-reduced-motion:no-preference){
  .board.enter .cell{animation:fill .5s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i) * 24ms + 150ms)}
  .board.enter .nowline{animation:fade .5s ease 1s backwards}
  @keyframes fill{from{opacity:0;transform:scaleY(.2)}}
  @keyframes fade{from{opacity:0}}
}

/* ============================================================
   EXPERIENCE — roles | capsule | figures
   ============================================================ */
.steps{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px) minmax(0,220px);
  column-gap:var(--sp-64);align-items:start;
}

.roles{margin:0;padding:0;list-style:none}
.roles > li{border-top:1px solid var(--rule)}
.roles > li:last-child{border-bottom:1px solid var(--rule)}
.role summary{
  display:grid;grid-template-columns:3em minmax(0,1fr);column-gap:var(--sp-8);
  padding:var(--sp-20) 0;cursor:pointer;list-style:none;
}
.role summary::-webkit-details-marker{display:none}
.role summary:focus-visible{border-radius:var(--r-sm);outline-offset:2px}
.idx{grid-column:1;grid-row:1 / span 3;padding-top:5px;font-size:var(--fs-fine);color:var(--ink-3)}
.role-t{grid-column:2;font-size:1.125rem;font-weight:500;line-height:1.4}
.role-org{grid-column:2;margin-top:2px;font-size:var(--fs-meta);line-height:1.5;color:var(--ink-3)}
.role-foot{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);margin-top:var(--sp-12)}
.yr{display:inline-flex;align-items:center;gap:var(--sp-8);font-size:var(--fs-fine);color:var(--ink-3)}
.role.current .yr{color:var(--ink);font-weight:500}
.role.current .yr::before{
  content:"";width:8px;height:8px;border-radius:var(--r-pill);
  background:var(--accent);box-shadow:0 0 0 3px rgba(255,184,28,.25);
}
.tog{
  display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:var(--r-pill);
  background:var(--tile);color:var(--tile-ink);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),background-color .15s ease,color .15s ease;
}
.tog svg{width:16px;height:16px;stroke-width:2}
.role[open] .tog{transform:rotate(45deg)}
.role summary:hover .tog,.role[open] .tog{background:var(--accent);color:var(--accent-ink)}
.role ul{
  display:flex;flex-direction:column;gap:var(--sp-8);
  margin:0;padding:0 0 var(--sp-24) calc(3em + var(--sp-8));list-style:none;
}
.role li{position:relative;padding-left:var(--sp-20);font-size:var(--fs-card);line-height:1.65;color:var(--ink-2)}
.role li::before{
  content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;
  border-radius:var(--r-pill);background:var(--rule);
}
.role.current li::before{background:var(--accent)}

/* The capsule: a navy stadium inside a thin ring, Andrea's head clear of the top.
   Geometry (as fractions of the capsule box, 7:10):
     image   — full width, top at 1% of the height
     fill    — the navy stadium, from 9% down to the bottom
     head    — the strip above the fill, 22%–78% across, 0–20% down
   Each image is placed in its own box so both land on the same spot. */
.capsule{position:relative;width:100%;max-width:440px;aspect-ratio:7/10;margin:var(--sp-24) auto 0}
.cap-ring{
  position:absolute;top:calc(9% - 14px);left:-14px;right:-14px;bottom:-14px;
  border:1.5px solid color-mix(in srgb,var(--ink) 24%,var(--paper));border-radius:var(--r-pill);
}
.cap-fill{position:absolute;top:9%;left:0;right:0;bottom:0;overflow:hidden;border-radius:var(--r-pill);background:var(--desk)}
.cap-fill img{position:absolute;left:0;top:-8.791%;width:100%;max-width:none;height:auto}
.cap-head{position:absolute;top:0;left:22%;width:56%;height:20%;overflow:hidden}
.cap-head img{position:absolute;left:-39.286%;top:5%;width:178.571%;max-width:none;height:auto}
.spark-cap{position:absolute;right:-4%;top:14%;width:34px;height:34px}

.figures{
  display:flex;flex-direction:column;justify-content:space-between;
  height:calc(440px * 10 / 7);margin:0;padding:var(--sp-48) 0 var(--sp-32);
  list-style:none;text-align:right;
}
.figures b{display:block;font-size:clamp(1.75rem,1.35rem + 1vw,2.25rem);font-weight:500;line-height:1.15}
.figures span{display:block;max-width:17ch;margin:var(--sp-4) 0 0 auto;font-size:var(--fs-fine);line-height:1.45;color:var(--ink-3)}

/* ---------- credentials ---------- */
.creds{margin-top:var(--sp-128)}
.creds-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-56)}
.cred{align-items:stretch;padding:var(--sp-24) var(--sp-24) var(--sp-32)}
/* both certificates sit in the same 3:2 matte (they are 1.74 and 1.35 wide), so
   the two come out the same size and neither is cropped */
.cert-shot{
  display:block;aspect-ratio:3/2;padding:var(--sp-20);line-height:0;cursor:pointer;
  background:var(--tint);border:0;border-radius:var(--r-md);
}
.cert-shot img{
  display:block;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 10px 14px rgba(11,34,57,.18));
  transition:transform .25s ease;
}
.cert-shot:hover img{transform:scale(1.02)}
.cert-shot:focus-visible{outline-offset:4px}
.cred-hd{display:flex;align-items:flex-start;gap:var(--sp-16);margin-top:var(--sp-24);padding:0 var(--sp-8)}
.cred .issuer{font-size:var(--fs-fine);color:var(--ink-3)}
.cred h4{margin-top:2px;font-size:1.125rem;font-weight:600;line-height:1.4}
.cred .when{margin-top:var(--sp-20);padding:0 var(--sp-8);font-size:var(--fs-meta);color:var(--ink-3)}
.cred .covers{margin-top:var(--sp-12);padding:0 var(--sp-8);font-size:var(--fs-card);line-height:1.75;color:var(--ink-2)}
.cred .covers b{display:block;margin-bottom:var(--sp-4);font-size:var(--fs-meta);font-weight:600;color:var(--ink)}

/* ============================================================
   WORK — the navy band
   ============================================================ */
.band{background:var(--desk);color:var(--desk-ink);padding:var(--section-y) 0}
.band .lede{color:var(--desk-ink-2)}
.band-sub{margin:0 0 var(--sp-32);text-align:center;font-size:var(--fs-meta);font-weight:500;color:var(--desk-ink-2)}
.dcards + .band-sub{margin-top:var(--sp-80)}
.dcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-40)}
.dcards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dcard{
  display:flex;flex-direction:column;padding:var(--sp-12);text-align:left;
  background:var(--desk-lift);border:1px solid var(--desk-edge);border-radius:var(--r-card);
  font:inherit;color:inherit;text-decoration:none;cursor:pointer;
  transition:transform .2s ease,border-color .2s ease;
}
.dcard:hover{transform:translateY(-6px);border-color:rgba(255,184,28,.55)}
.dcard:active{transform:translateY(-3px)}
.dcard:focus-visible{outline-offset:4px}
/* every thumbnail is cropped to the same 4:5 box, so a future cover with other
   proportions still lines up, and the box is reserved before the image loads */
.shot-img{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-md);background:var(--panel)}
.shot-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.dcard:hover .shot-img img{transform:scale(1.03)}
.dcard-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:0 var(--sp-12) var(--sp-16)}
.piece .dcard-body{padding:var(--sp-20) var(--sp-20) var(--sp-24)}
/* outline tiles on the band; on a cover, the tile notches into the image's lower edge */
.tile-line{background:var(--desk-lift);border:1.5px solid rgba(255,255,255,.32);box-shadow:none}
.shot .tile-line{position:relative;margin-top:-28px;box-shadow:0 0 0 6px var(--desk-lift)}
.dcard-t{margin-top:var(--sp-20);font-size:1.125rem;font-weight:600;line-height:1.4;color:var(--desk-ink);text-wrap:balance}
.dcard-meta{margin-top:var(--sp-8);font-size:var(--fs-fine);color:var(--desk-ink-2)}
.dcard-ex{margin-top:var(--sp-12);font-size:var(--fs-card);line-height:1.75;color:var(--desk-ink-2)}
.dcard .more{margin-top:auto;padding-top:var(--sp-24);color:var(--desk-ink)}

/* ---------- testimonials (hidden until TESTIMONIALS has entries) ---------- */
.praise{margin:0}
.praise blockquote{margin:0;color:var(--ink);text-wrap:pretty}
.praise blockquote::before{content:"\201C"}
.praise blockquote::after{content:"\201D"}
.praise figcaption{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-4) var(--sp-12);margin-top:var(--sp-20)}
.praise .who{font-weight:600;font-size:var(--fs-card)}
.praise .what{color:var(--ink-3);font-size:var(--fs-meta)}
.praise .tag{
  margin-left:auto;background:var(--accent);color:var(--accent-ink);
  border-radius:var(--r-pill);padding:var(--sp-4) var(--sp-12);font-size:var(--fs-fine);font-weight:600;
}
.praise .src{margin-top:var(--sp-16);font-size:var(--fs-meta);font-weight:600}
.praise.lead blockquote{font-size:clamp(1.35rem,1rem + 1.4vw,2rem);font-weight:500;line-height:1.4;max-width:38ch}
.praise-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-48) var(--sp-56)}
#praiseLead:not(:empty) + .praise-grid{margin-top:var(--sp-56)}
.praise-grid blockquote{font-size:var(--fs-lede);line-height:1.7;color:var(--ink-2)}
.praise-grid .tag{margin-left:0}

/* ============================================================
   ABOUT
   ============================================================ */
.prose{position:relative;max-width:860px;margin:0 auto;text-align:center}
.prose p{max-width:60ch;margin:0 auto;font-size:var(--fs-lede);line-height:1.8;color:var(--ink-2)}
/* the first paragraph is the statement; the second reads on at body size */
.prose p:first-of-type{
  max-width:34ch;font-size:clamp(1.3rem,1rem + 1.1vw,1.85rem);line-height:1.5;font-weight:500;color:var(--ink);
}
.prose p + p{margin-top:var(--sp-32)}
.spark-about-a{position:absolute;left:0;top:-12px;width:36px;height:36px}
.spark-about-b{position:absolute;right:4%;top:46%;width:20px;height:20px}

/* ============================================================
   CONTACT — the hero's plate turned over
   ============================================================ */
.contact{position:relative;isolation:isolate;color:var(--desk-ink)}
.contact-plate{
  position:absolute;inset:0;z-index:-1;
  background:var(--desk);border-radius:var(--r-plate) var(--r-plate) 0 0;
  filter:drop-shadow(0 calc(var(--plate) * -1) 0 var(--plate-1)) drop-shadow(0 calc(var(--plate) * -1) 0 var(--plate-2));
}
.contact-plate .tab{top:auto;bottom:100%;border-radius:var(--tab-r) var(--tab-r) 0 0}
.contact-plate .tab::before{top:auto;bottom:0;background:radial-gradient(circle at 0 0,transparent calc(var(--tab-f) - .5px),var(--desk) var(--tab-f))}
.contact-plate .tab::after{top:auto;bottom:0;background:radial-gradient(circle at 100% 0,transparent calc(var(--tab-f) - .5px),var(--desk) var(--tab-f))}
.contact .tab-link{top:auto;bottom:100%;margin:0 0 calc(var(--tab-h) / 2 - 22px) -20px}
.contact .tab-link svg{transform:rotate(180deg)}
.contact .tab-link:hover{transform:translateY(-2px)}

.contact .wrap{padding-top:var(--sp-96);padding-bottom:var(--sp-40)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--sp-64);align-items:center}
.contact h2{max-width:13ch;font-size:clamp(2.25rem,1.2rem + 3vw,3.75rem);line-height:1.15}
.contact .lede{margin:var(--sp-24) 0 0;max-width:44ch;color:var(--desk-ink-2)}
.contact-card{
  padding:var(--sp-40);background:var(--desk-lift);
  border:1px solid var(--desk-edge);border-radius:var(--r-card);
}
.contact-lbl{font-size:var(--fs-fine);color:var(--desk-ink-2)}
.bigmail{
  display:inline-block;margin-top:var(--sp-8);
  font-size:clamp(1.1rem,.85rem + 1vw,1.6rem);font-weight:600;line-height:1.35;
  color:var(--desk-ink);text-decoration:underline;
  text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:7px;
  overflow-wrap:anywhere;transition:color .15s ease;
}
.bigmail:hover{color:var(--accent)}
.bigmail:focus-visible{border-radius:var(--r-xs)}
.reach{display:flex;flex-wrap:wrap;gap:var(--sp-8) var(--sp-24);margin:var(--sp-24) 0 0;padding:0;list-style:none;font-size:var(--fs-meta)}
.reach a{
  color:var(--desk-ink-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:var(--desk-line);transition:color .15s ease,text-decoration-color .15s ease;
}
.reach a:hover{color:var(--desk-ink);text-decoration-color:var(--accent)}
.reach a:focus-visible{border-radius:var(--r-xs)}
.pill-lg{margin-top:var(--sp-32);padding:var(--sp-16) var(--sp-32);font-size:var(--fs-card)}
.foot{
  display:flex;flex-wrap:wrap;gap:var(--sp-8) var(--sp-32);margin-top:var(--sp-80);padding-top:var(--sp-24);
  border-top:1px solid var(--desk-line);font-size:var(--fs-fine);color:var(--desk-ink-2);
}
.foot .r{margin-left:auto}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:var(--paper)}
.lb-bar{display:flex;align-items:center;gap:var(--sp-16);flex:none;padding:0 var(--sp-20);height:64px;border-bottom:1px solid var(--rule)}
.lb-title{font-size:var(--fs-meta);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-count{margin-left:auto;font-size:var(--fs-meta);color:var(--ink-2);flex:none}
.lb-btn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:42px;height:42px;padding:0;background:var(--tile);cursor:pointer;border-radius:var(--r-pill);
  border:0;color:var(--tile-ink);
  transition:color .15s ease,background-color .15s ease;
}
.lb-btn:hover{background:var(--accent);color:var(--accent-ink)}
.lb-btn:focus-visible{outline-offset:2px}
.lb-btn:active{transform:translateY(1px)}
.lb-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lb-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:var(--sp-20);padding:var(--sp-24) var(--sp-20)}
.lb-img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:var(--r-md);background:var(--panel);box-shadow:var(--card-shadow-2);
}
.lightbox.single .lb-nav{display:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* capsule and roles share the row; the figures drop beneath as a strip */
@media (max-width:1140px){
  .steps{grid-template-columns:minmax(0,1fr) minmax(0,380px)}
  .figures{
    grid-column:1 / -1;height:auto;flex-direction:row;justify-content:space-between;gap:var(--sp-24);
    margin-top:var(--sp-80);padding:var(--sp-32) 0 0;border-top:1px solid var(--rule);text-align:left;
  }
  .figures span{margin-left:0}
}

@media (max-width:1040px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-48) var(--sp-40)}
  .toolbox dl{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sp-24)}
}

/* Top bar: the section links fold into a menu */
@media (max-width:960px){
  .menubtn{display:inline-flex}
  .nav{
    position:absolute;top:calc(100% - var(--sp-8));left:var(--gutter);right:var(--gutter);
    display:none;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:var(--sp-8);
    background:var(--desk-lift);border:1px solid var(--desk-edge);border-radius:20px;
    box-shadow:0 24px 44px -20px rgba(6,18,31,.7);
  }
  .topbar.menu-open .nav{display:flex}
  .nav a{padding:var(--sp-12) var(--sp-16);font-size:1rem;border-radius:var(--r-md)}
  .nav a::after{left:auto;right:var(--sp-16);top:50%;bottom:auto;margin:-2.5px 0 0}
  .nav a:hover{background:rgba(255,255,255,.06)}
  .nav .nav-contact{display:block}
  .topbar.is-stuck .nav{left:0;right:0;top:calc(100% + var(--sp-8))}
  .topbar.is-stuck .bar{margin:0 var(--gutter)}
}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding:var(--sp-24) 0 var(--sp-48)}
  /* one column: the headline, the intro and the stats take the full width */
  h1,.thesis,.contact h2,.contact .lede{max-width:none}
  .stats li{flex:1 1 0;min-width:0}
  .stats li,.stats li:first-child{text-align:center}
  .stats span,.stats li:first-child span{max-width:none;margin-left:auto;margin-right:auto}
  .hero-art{--ph:clamp(320px,74vw,480px)}
  .speck-b,.speck-c{display:none}
  .contact-grid{grid-template-columns:1fr;gap:var(--sp-48)}

  /* experience: the roles need the full width, so the capsule goes on top */
  .steps{grid-template-columns:1fr}
  .capsule{order:-1;max-width:300px;margin:var(--sp-8) auto var(--sp-56)}
  .figures{margin-top:var(--sp-56)}

  /* covers become a swipeable row — the next one peeks to signal it scrolls */
  .dcards:not(.dcards-2){
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:44%;gap:var(--sp-20);
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 calc(var(--gutter) * -1);padding:var(--sp-8) var(--gutter) var(--sp-16);
    scroll-padding:0 var(--gutter);
  }
  .dcards::-webkit-scrollbar{display:none}
  .dcard{scroll-snap-align:start}
}

@media (max-width:760px){
  :root{
    --gutter:var(--sp-20);--section-y:var(--sp-80);--bar-h:76px;
  }
  html{scroll-padding-top:84px}

  .mark{font-size:1.05rem}
  .iconbtn{width:40px;height:40px}
  .bar{gap:var(--sp-8)}
  .topbar.is-stuck{top:var(--sp-8)}
  .topbar.is-stuck .bar{height:58px;padding:0 var(--sp-8) 0 var(--sp-20)}

  .stats li{padding:0 var(--sp-16)}
  .sec-hd{margin-bottom:var(--sp-48)}

  .cards{grid-template-columns:1fr;gap:var(--sp-40)}
  .card{padding:var(--sp-24)}
  .toolbox{margin-top:var(--sp-80)}

  .desk{padding:var(--sp-32) var(--sp-20) var(--sp-24);border-radius:22px}
  .desk-hd{margin-bottom:var(--sp-32)}
  .desk-you{width:100%}
  .desk select{flex:1 1 0;min-width:0}
  .board{--lab:0px}
  .board-row{grid-template-columns:1fr;row-gap:var(--sp-8)}
  .rl{flex-direction:row;align-items:baseline;justify-content:space-between;gap:var(--sp-12)}
  .track{height:28px;gap:2px}
  .scale{margin-left:0}
  .scale span.minor{display:none}
  /* labels sit between the tracks here, so one tall line would cross them:
     mark "now" on each track instead */
  .nowline{display:none}
  .track{position:relative}
  .track::after{
    content:"";position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1.5px;border-radius:var(--r-pill);
    left:calc(var(--now) * 100%);background:var(--desk-ink);pointer-events:none;
  }
  .desk-you-lbl{flex-basis:100%}

  /* experience: a smaller capsule, and the figures 2 x 2 */
  .capsule{max-width:260px;margin-bottom:var(--sp-48)}
  .spark-cap{width:26px;height:26px}
  .figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-24);margin-top:var(--sp-48)}
  .creds{margin-top:var(--sp-96)}
  .creds-grid{grid-template-columns:1fr}
  .cred{padding:var(--sp-16) var(--sp-16) var(--sp-24)}
  .cert-shot{padding:var(--sp-12)}

  .dcards:not(.dcards-2){grid-auto-columns:76%;gap:var(--sp-16)}
  .dcards-2{grid-template-columns:1fr;gap:var(--sp-20)}
  .dcards + .band-sub{margin-top:var(--sp-56)}

  .praise-grid{grid-template-columns:1fr}

  .contact .wrap{padding-top:var(--sp-80)}
  .contact-card{padding:var(--sp-24)}
  .foot{margin-top:var(--sp-56)}
  .foot .r{margin-left:0}

  /* the arrows sat either side of the image and were pushed off a phone's edge.
     Image on top at full width, the pair of arrows in a row beneath it. */
  .lb-stage{
    display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto;
    gap:var(--sp-12) var(--sp-8);padding:var(--sp-12) var(--sp-16);
  }
  .lightbox.single .lb-stage{grid-template-rows:minmax(0,1fr)}
  .lb-img{grid-column:1 / -1;grid-row:1;justify-self:center;align-self:center}
  .lb-nav{grid-row:2}
  #lbPrev{grid-column:1;justify-self:end}
  #lbNext{grid-column:2;justify-self:start}
  .lb-bar{padding:0 var(--sp-12);gap:var(--sp-12)}
  .lb-btn{width:44px;height:44px}
}

/* Phones: the name, the toggle and the menu share the bar; Contact moves into the menu */
@media (max-width:560px){
  .bar-cta{display:none}
  .eyebrow{row-gap:var(--sp-4)}
  .eyebrow .sep{display:none}
  .eyebrow .num{flex-basis:100%;padding-left:20px}
  .spark-about-a{left:4px;top:-40px;width:28px;height:28px}
  .spark-about-b{display:none}
  .stats li{padding:0 var(--sp-12)}
  .toolbox dl{grid-template-columns:1fr}
  .actions{gap:var(--sp-20) var(--sp-24)}
}
@media (max-width:359px){
  .mark{font-size:.95rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* Print: a clean one-column CV fallback */
@media print{
  /* ink on white whatever the screen theme was */
  :root:root:root{
    --paper:#fff;--panel:#fff;--tint:#fff;--ink:#000;--ink-2:#222;--ink-3:#444;
    --rule:#bbb;--rule-soft:#ddd;--accent:#B8860B;--shade:transparent;
    --desk:#fff;--desk-lift:#fff;--desk-ink:#000;--desk-ink-2:#222;--bracket:#000;
    --tile:#fff;--tile-ink:#000;--card-shadow:none;--card-shadow-2:none;
  }
  .topbar,.skip,.hero-art,.tab-link,.capsule,.lightbox,#hours,.spark,.spark-inline,.speck,.actions{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .hero{margin:0;padding:0}
  .hero-plate,.contact-plate{display:none}
  .block,.band{padding:var(--sp-24) 0;background:none}
  .block-last{padding-bottom:var(--sp-24)}
  .sec-hd,.prose{text-align:left;margin-left:0}
  .bracket::before,.bracket::after{display:none}
  .card,.dcard{border:1px solid #ccc}
  .role ul{display:flex}
  a{text-decoration:none}
  .card,.dcard,.cred,.role{break-inside:avoid}
}