/* PearlHelix site styles, v5. Values come from tokens.css; see docs/DESIGN.md before changing anything here. */

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  background:var(--paper);
  scroll-padding-top:var(--anchor-offset);
  scrollbar-gutter:stable;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  hanging-punctuation:first allow-end last;
}
body{
  position:relative;z-index:0;margin:0;min-height:100vh;overflow-x:clip;
  background:var(--paper);color:var(--ink-2);
  font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--wght-body);
  font-kerning:normal;font-synthesis:none;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
h1,h2,h3{color:var(--ink);text-wrap:balance}
p,li,dd{text-wrap:pretty}
img,svg{display:block;max-width:100%}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.22em}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
::selection{background:var(--selection);color:var(--ink)}
:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}
:is(body,h1,h2,h3,header,main)[tabindex="-1"]:focus{outline:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.container{width:min(var(--content),100% - 2 * var(--gutter-x));margin-inline:auto}
.sentinel{position:absolute;top:var(--sentinel);left:0;width:1px;height:1px;pointer-events:none}

.skip-link{
  position:fixed;top:var(--header-top);left:var(--gutter-x);z-index:var(--z-skip);
  display:inline-flex;align-items:center;min-height:var(--tap);padding-inline:var(--s-5);
  border-radius:var(--r-pill);background:var(--glass-solid);color:var(--ink);box-shadow:var(--e-2);
  font-weight:var(--wght-strong);text-decoration:none;translate:0 -200%;
}
.skip-link:focus{translate:0 0}
/* The skip link is fixed, so its ring can fall over night or paper: a paper band fills the gap and the bronze ring
   always has paper beside it */
.skip-link:focus-visible{box-shadow:0 0 0 calc(var(--focus-offset) + 1px) var(--paper),var(--e-2)}

.eyebrow{
  margin-bottom:var(--s-5);color:var(--teal-600);
  font-size:var(--fs-meta);font-weight:var(--wght-meta);line-height:var(--lh-tight);
  letter-spacing:var(--tr-meta);text-transform:uppercase;text-wrap:balance;
}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2);font-stretch:var(--wdth-h2);font-weight:var(--wght-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--tr-h3);font-weight:var(--wght-strong)}
.line{display:block}

/* ---------- Matte backdrop: paper and grain ---------- */
.backdrop{position:fixed;inset:0;z-index:var(--z-backdrop);overflow:hidden;contain:strict;pointer-events:none;background:var(--paper)}
.backdrop::after{content:"";position:absolute;inset:0;background:var(--grain-url) 0 0/var(--grain-size) var(--grain-size) repeat;opacity:var(--grain-opacity)}


/* ---------- Liquid glass ---------- */
.glass{
  position:relative;isolation:isolate;border-radius:var(--r-lg);color:var(--ink-2);
  background:var(--glass-sheen),var(--glass-tint);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%) brightness(1.04);
  box-shadow:var(--glass-inset),var(--e-1);
}
.glass::before{
  content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;pointer-events:none;
  background: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);
}
.glass::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(var(--sheen-size) circle at var(--mx,30%) var(--my,0%),var(--glass-light),transparent 60%);
  opacity:0;transition:opacity var(--dur-base) var(--ease-standard);
}
.glass[data-lit]::after{opacity:1}
.glass--teal{
  background:var(--glass-sheen-teal),var(--glass-tint-teal);color:var(--on-teal);
  border-radius:var(--r-xl);box-shadow:var(--glass-inset-teal),var(--e-3);
}
.glass--teal::before{background:var(--glass-rim-teal)}
@media (max-width:40rem){
  .glass,.glass--teal{-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%)}
}

/* ---------- Icons and buttons ---------- */
.icon{width:var(--icon);height:var(--icon);flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:translate var(--dur-base) var(--ease-out)}
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:var(--tap);padding-inline:var(--s-5);border:0;border-radius:var(--r-pill);
  font-size:var(--fs-button);font-weight:var(--wght-strong);line-height:1;letter-spacing:var(--tr-button);
  text-decoration:none;white-space:nowrap;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;
  transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),
    translate var(--dur-base) var(--ease-out),scale var(--dur-slow) var(--ease-settle),box-shadow var(--dur-base) var(--ease-out);
}
.button:active{scale:var(--press);transition-duration:var(--dur-instant)}
.button--lg{min-height:var(--button-h-lg);padding-inline:var(--s-5) var(--button-pad-icon)}
.button--teal{background:var(--teal-800);color:var(--on-teal);box-shadow:var(--button-teal-inset),var(--button-teal-shadow)}
.button--teal:active{background:var(--teal-900)}
.button--glass{color:var(--teal-800);border-radius:var(--r-pill)}
.button--on-teal{padding-inline:var(--s-4) var(--s-5);background:var(--on-teal-wash);color:var(--on-teal);box-shadow:inset 0 0 0 1px var(--on-teal-ring)}
.button--on-teal .icon{opacity:.85}
@media (hover:hover) and (pointer:fine){
  .button--teal:hover{background:var(--teal-600)}
  .button--glass:hover{translate:0 var(--lift-sm);box-shadow:var(--glass-inset),var(--e-2)}
  .button--on-teal:hover{background:var(--on-teal-wash-2)}
  .button:hover .icon--ne,.email-link:hover .icon--ne{translate:var(--nudge) calc(-1 * var(--nudge))}
  .button:hover .icon--down{translate:0 var(--nudge)}
  .back-to-top:hover .icon--up{translate:0 calc(-1 * var(--nudge))}
  .back-link:hover .icon--left{translate:calc(-1 * var(--nudge)) 0}
  .text-link:hover .icon--ne{translate:var(--nudge) calc(-1 * var(--nudge))}
}

/* ---------- Header and navigation ---------- */
.site-header{position:sticky;top:var(--header-top);z-index:var(--z-header);margin-top:var(--header-top)}
.nav-capsule{
  --cap-brand:var(--teal-800);--cap-ink:var(--ink-2);--cap-strong:var(--ink);--cap-wash:var(--hover-wash);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  width:min(var(--content) + 2 * var(--capsule-bleed),100% - 2 * (var(--gutter-x) - var(--capsule-bleed)));
  height:var(--header-h);margin-inline:auto;padding-inline:var(--capsule-pad-start) var(--capsule-pad-end);
}
/* The nav blur lives on the tint layer, so the capsule is truly invisible at the top and fades in whole */
.glass--nav{background:none;box-shadow:none;border-radius:var(--r-pill);-webkit-backdrop-filter:none;backdrop-filter:none}
.glass--nav::before{transition:opacity var(--dur-header) var(--ease-standard)}
.glass--nav::after{
  background:var(--glass-sheen),var(--glass-tint-nav);box-shadow:var(--glass-inset),var(--e-1);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  opacity:1;transition:opacity var(--dur-header) var(--ease-standard);
}
/* Same mobile budget as .glass; it must follow the rule above, so it cannot join the block earlier in the file */
@media (max-width:40rem){
  .glass--nav::after{-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%)}
}
html.js:not([data-scrolled]) .glass--nav:not(.is-solid)::before,
html.js:not([data-scrolled]) .glass--nav:not(.is-solid)::after{opacity:0}

/* The horizontal lockup: with line-height 1 the box centre is the cap-height centre, so align-items:center matches the files */
.brand{
  display:inline-flex;align-items:center;gap:var(--brand-gap);min-height:var(--tap);
  color:var(--teal-800);text-decoration:none;border-radius:var(--r-pill);
  font-size:var(--fs-brand);line-height:1;
}
.brand-mark{flex:none;width:var(--mark-w);height:var(--mark-h);overflow:visible;fill:currentColor}
.brand-name{flex:none;height:var(--word-h);width:auto;overflow:visible;fill:currentColor}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.ph-left,.ph-right{transform-box:fill-box;transform-origin:center}
/* --s is -1 on the left half, 1 on the right: one set of Rise keyframes serves both */
.ph-left,.lost-split--left,.veil-split--left{--s:-1}
.ph-right,.lost-split--right,.veil-split--right{--s:1}
.site-header .brand{view-transition-name:brand;color:var(--cap-brand);transition:color var(--dur-header) var(--ease-standard)}

.site-nav{display:flex;align-items:center;height:100%}
.nav-links{display:flex;list-style:none;padding:0}
.nav-links a{
  display:flex;align-items:center;min-height:var(--button-h-nav);padding-inline:var(--s-3);border-radius:var(--r-pill);
  color:var(--ink-2);font-size:var(--fs-nav);font-weight:var(--wght-medium);text-decoration:none;
  transition:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard);
}
.nav-links a[aria-current]{color:var(--ink)}
.nav-indicator{
  position:absolute;left:calc(var(--pearl) / -2);bottom:var(--indicator-bottom);width:var(--pearl);height:var(--pearl);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--teal-300),var(--teal-800) 70%);
  translate:var(--indicator-x,0) 0;opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-standard);
}
.nav-indicator[data-on]{opacity:1;transition:opacity var(--dur-fast) var(--ease-standard),translate var(--dur-slow) var(--ease-settle)}
.button--nav{min-height:var(--button-h-nav);padding-inline:var(--s-4) var(--s-4);font-size:var(--fs-nav)}
.menu-button{
  display:none;align-items:center;gap:var(--s-2);min-height:var(--tap);padding-inline:var(--s-4) var(--s-3);
  border:0;border-radius:var(--r-pill);background:var(--cap-wash);color:var(--cap-strong);cursor:pointer;
  font-size:var(--fs-nav);font-weight:var(--wght-strong);
}
.icon--close{display:none}
.site-nav:has(.nav-menu:popover-open) .icon--menu{display:none}
.site-nav:has(.nav-menu:popover-open) .icon--close{display:block}

@media (hover:hover) and (pointer:fine){
  .nav-links a:hover{color:var(--cap-strong);background:var(--cap-wash)}
  .menu-button:hover{background:var(--hover-wash-2)}
}

@media (min-width:45rem){
  .nav-menu{
    position:relative;inset:auto;display:flex;align-items:center;gap:var(--s-2);
    width:auto;height:100%;margin:0;padding:0;overflow:visible;border:0;background:none;color:inherit;
  }
  .nav-links{margin-right:var(--s-2)}
  .nav-links a{color:var(--cap-ink)}
  .nav-links a[aria-current]{color:var(--cap-strong)}
  /* The 40px pills keep their concentric inset in the 56px capsule; the hit area grows to 44px */
  .nav-links a,.button--nav{position:relative}
  .nav-links a::after,.button--nav::after{content:"";position:absolute;inset:calc((var(--button-h-nav) - var(--tap)) / 2) 0}
}

@media (max-width:44.99rem){
  .nav-capsule{padding-inline-end:var(--capsule-pad-end-sm)}
  .menu-button{display:inline-flex}
  .nav-menu{
    position:fixed;inset:calc(var(--header-top) + var(--header-h) + var(--s-2)) calc(var(--gutter-x) - var(--capsule-bleed)) auto;
    width:auto;margin:0;padding:var(--s-2);border:0;border-radius:var(--r-lg);color:var(--ink);
    flex-direction:column;gap:var(--s-2);
    background:var(--glass-sheen),var(--glass-tint-sheet);
    -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
    box-shadow:var(--glass-inset),var(--e-3);
    /* Scrolls inside itself on short or zoomed viewports; set here, not on :popover-open, so it holds through the close fade */
    max-block-size:calc(100dvh - var(--header-top) - var(--header-h) - 2 * var(--s-2));overflow-y:auto;overscroll-behavior:contain;
    opacity:0;translate:0 calc(-1 * var(--s-1));
    transition:opacity var(--dur-base) var(--ease-out),translate var(--dur-base) var(--ease-out),
      overlay var(--dur-base) allow-discrete,display var(--dur-base) allow-discrete;
  }
  .nav-menu:popover-open{display:flex;opacity:1;translate:0 0}
  @starting-style{.nav-menu:popover-open{opacity:0;translate:0 var(--rise-sm)}}
  .nav-menu::backdrop{background:var(--scrim)}
  .nav-links{flex-direction:column}
  .nav-links li+li{border-top:1px solid var(--line)}
  .nav-links a{min-height:var(--menu-row);padding-inline:var(--s-4);border-radius:var(--r-sm);color:var(--ink);font-size:var(--fs-menu)}
  .button--nav{width:100%;min-height:var(--menu-row);font-size:var(--fs-body)}
  .nav-indicator{display:none}

  @supports not selector(:popover-open){
    .nav-capsule{height:auto;flex-wrap:wrap;padding-block:var(--s-1);border-radius:var(--r-lg)}
    .menu-button{display:none}
    .nav-menu{position:static;max-block-size:none;flex-direction:row;flex-wrap:wrap;align-items:center;padding:0;opacity:1;translate:none;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
    .nav-links{flex-direction:row;flex-wrap:wrap}
    .nav-links li+li{border:0}
    .nav-links a{min-height:var(--tap);font-size:var(--fs-nav)}
    .button--nav{width:auto;min-height:var(--button-h-nav)}
  }
}

/* ---------- Hero ---------- */
/* A night band with oversized ivory type and one champagne word in the serif (D-60, D-74, D-76) */
.hero{padding-block:var(--sculpture-hero-space);background:var(--night-field),var(--night);color:var(--paper)}
.hero-grid{display:grid;row-gap:var(--s-6)}
.display{
  margin-inline-start:var(--display-optical);
  font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--tr-display);
  font-stretch:var(--wdth-display);font-weight:var(--wght-display);
}
.line--accent{color:var(--ink-accent)}
.hero .display{color:var(--paper);font-size:var(--fs-sculpture);line-height:var(--sculpture-leading);letter-spacing:var(--sculpture-tracking);font-weight:var(--wght-medium);font-stretch:var(--wdth-body)}
.hero .line--accent{color:var(--paper)}
.hero .eyebrow{color:var(--on-teal-2)}
.lede{margin-top:var(--s-6);max-width:var(--measure-lede);color:var(--ink-2);font-size:var(--fs-lede);line-height:var(--lh-lede)}
.hero .lede{max-width:var(--sculpture-copy-width);color:var(--on-teal-2);font-size:var(--fs-body)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-7)}
.hero .hero-actions{margin-top:var(--s-6)}
/* On teal: a paper primary action and a hairline secondary; no glass, nothing passes beneath it */
.hero .button--teal{background:var(--paper);color:var(--teal-900);box-shadow:none}
.hero .button--glass{background:none;color:var(--paper);border:var(--brand-hairline) solid var(--sculpture-rule);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hero .button--glass::before,.hero .button--glass::after{display:none}
.hero :focus-visible{outline-color:var(--paper)}
@media (max-width:29.99rem){.hero-actions .button{flex:1 1 auto}}

/* Hero artwork "Pearl & helix": generated by scripts/make-hero-art.mjs (DESIGN.md 10.15); never edit the SVG by hand.
   It sits in an arched paper window, the same frame language as the About stage. */
.hero-art{position:relative;margin-inline:auto;width:min(100%,calc(var(--sculpture-mobile-height)*.8))}
.sculpture-window{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:var(--sculpture-art-ratio);border-radius:var(--sculpture-arch);background:var(--genesis-surface);box-shadow:var(--sculpture-pearl-shadow)}
.sculpture-window::before{content:"";position:absolute;inset:0;z-index:1;background:var(--sculpture-sheen-paint);pointer-events:none;opacity:0}
/* A fine pointer moves the light as well as the depth: site.js writes --mx/--my through the same [data-sheen] path
   the glass uses, onto this layer alone (data-sheen-out), and the window lifts it in over --dur-base. The light is a
   fixed disc that is moved, never repainted. Nothing runs at rest. */
.sculpture-light{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity var(--dur-base) var(--ease-standard)}
.sculpture-light::before{content:"";position:absolute;left:calc(var(--sheen-size) * -1);top:calc(var(--sheen-size) * -1);width:calc(var(--sheen-size) * 2);height:calc(var(--sheen-size) * 2);background:var(--sculpture-light-paint);transform:translate(var(--mx,0px),var(--my,0px))}
.hero-art[data-lit] .sculpture-light{opacity:1}
/* The artwork is a stack of layers (D-96): each is an <svg> in the artwork's own units, placed in the window by the
   generated block below. .ta-disc is the pearl's round clip for its light and the near ribbons' shadow. */
.ta-l{position:absolute;display:block;max-width:none;overflow:hidden}
.ta-disc{border-radius:50%}
/* hero-art:start (generated by scripts/make-hero-art.mjs; do not edit by hand) */.ta-wall{left:22.0833%;top:27.6667%;width:62.5%;height:50%}.ta-back,.ta-front{left:-20.8333%;top:-0.3333%;width:121.25%;height:216.3333%}.ta-hold{left:0%;top:0%;width:100%;height:100%;-webkit-mask-image:radial-gradient(31.6667% 25.3333% at 51.3025% 50.8328%,rgb(0 0 0/.999) 52.6316%,rgb(0 0 0/.977) 60.5263%,rgb(0 0 0/.933) 64.4737%,rgb(0 0 0/.841) 68.4211%,rgb(0 0 0/.691) 72.3684%,rgb(0 0 0/.5) 76.3158%,rgb(0 0 0/.309) 80.2632%,rgb(0 0 0/.159) 84.2105%,rgb(0 0 0/.067) 88.1579%,rgb(0 0 0/.023) 92.1053%,rgb(0 0 0/.001) 100%);mask-image:radial-gradient(31.6667% 25.3333% at 51.3025% 50.8328%,rgb(0 0 0/.999) 52.6316%,rgb(0 0 0/.977) 60.5263%,rgb(0 0 0/.933) 64.4737%,rgb(0 0 0/.841) 68.4211%,rgb(0 0 0/.691) 72.3684%,rgb(0 0 0/.5) 76.3158%,rgb(0 0 0/.309) 80.2632%,rgb(0 0 0/.159) 84.2105%,rgb(0 0 0/.067) 88.1579%,rgb(0 0 0/.023) 92.1053%,rgb(0 0 0/.001) 100%)}.ta-hold-turn{left:-1.25%;top:25%;width:84.7917%;height:167.1667%}.ta-pearl,.ta-disc,.ta-rim-l{left:26.6667%;top:30%;width:46.6667%;height:37.3333%}.ta-form,.ta-bounce,.ta-glint{left:0%;top:0%;width:100%;height:100%}.ta-cast{left:-44.6429%;top:-0.8929%;width:145.5357%;height:411.6071%}@keyframes ta-turn{to{transform:translate(16.739%,-53.4043%)}}@keyframes ta-turn-hold{to{transform:translate(23.9364%,-69.1114%)}}@keyframes ta-turn-cast{to{transform:translate(29.8838%,-75.183%)}}/* hero-art:end */
/* The ribbon has two faces: what it shows you, and its underside once it has turned away (D-68) */
.ta-a{fill:var(--teal-800)}
.ta-b{fill:var(--teal-400)}
.ta-a.ta-in{fill:var(--teal-950)}
.ta-b.ta-in{fill:var(--teal-900)}
.ta-rim{fill:none;stroke:var(--light);stroke-width:1.1}
.ta-shade{fill:var(--teal-900)}
.ta-nacre{fill:var(--pearl-core)}
.sc-paper{stop-color:var(--paper)}
/* While a fine pointer is in the hero, the helix turns (D-67): both halves travel together along the leaning axis,
   which for a helix is a rotation, and one whole pitch later the drawing is identical, so the loop has no seam. They
   move as one, so the ribbon cannot tear. The light is what answers the pointer's position: site.js writes
   --sculpture-x/y (-1..1) and the pearl's highlights, bounce light and form shadow follow it. */
.ta-glint,.ta-bounce,.ta-form{transition:transform var(--sculpture-settle) var(--ease-out)}
.ta-glint{transform:translate(calc(var(--sculpture-x,0)*var(--sculpture-glint)*-1),calc(var(--sculpture-y,0)*var(--sculpture-glint)*-1))}
.ta-bounce{transform:translate(calc(var(--sculpture-x,0)*var(--sculpture-glint)*-.6),calc(var(--sculpture-y,0)*var(--sculpture-glint)*-.6))}
.ta-form{transform:translate(calc(var(--sculpture-x,0)*var(--sculpture-form)),calc(var(--sculpture-y,0)*var(--sculpture-form)))}
.art-caption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-3);padding-top:var(--s-5);color:var(--on-teal-2);font-size:var(--fs-meta)}
.art-caption-title{color:var(--paper);font-weight:var(--wght-meta)}
@media (max-width:44.99rem){
  /* Phones: compact actions lead into the whole artwork, never a crop of it (D-62) */
  .hero{padding-block:var(--s-6)}
  .hero .lede{margin-top:var(--s-5)}
  .hero .hero-actions{gap:var(--s-2);margin-top:var(--s-5)}
  .hero-actions .button--glass{flex:0 0 auto;margin-inline:auto;border:0;padding-block:var(--s-2);min-height:var(--tap);text-decoration:underline;text-underline-offset:var(--s-1)}
}
@media (min-width:64rem){
  .hero-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:center}
  .hero-copy{grid-column:1/span 7}
  .hero-art{grid-column:8/span 5;width:auto;margin-inline:0}
  .site-header{margin-bottom:var(--s-3)}
}

/* Glass and artwork paint: colours come from tokens through classes, never style attributes */
.sc-glass{stop-color:var(--teal-500)}
.sc-core{stop-color:var(--pearl-core)}
.sc-mid{stop-color:var(--pearl-mid)}
.sc-edge{stop-color:var(--pearl-edge)}
.sc-champagne{stop-color:var(--champagne)}
.sc-teal{stop-color:var(--teal-800)}
.sc-deep{stop-color:var(--teal-900)}
.sc-light{stop-color:var(--light)}
.lost-sheen{translate:var(--sheen-end) 0}

/* ---------- Audience strip ---------- */
/* Pearl separators sit in the gap before each item; the ones that wrap to a line start are clipped away */
.audience .container{padding-block:var(--s-5);border-block:1px solid var(--line);overflow:hidden}
.audience-line{
  display:flex;flex-wrap:wrap;row-gap:var(--s-2);margin-left:calc(-1 * var(--sep-gap));
  color:var(--ink-2);font-size:var(--fs-meta);font-weight:var(--wght-meta);line-height:var(--lh-tight);letter-spacing:var(--tr-meta);text-transform:uppercase;
}
.audience-line>span{position:relative;padding-left:var(--sep-gap)}
.audience-line>span::before{
  content:"";position:absolute;left:calc(var(--sep-gap) / 2 - var(--pearl) / 2);top:calc(50% - var(--pearl) / 2);
  width:var(--pearl);height:var(--pearl);border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--teal-100),var(--teal-300) 70%);
}
/* Phones: a short list with a pearl bullet per item, never a lone orphan */
@media (max-width:29.99rem){
  .audience-line{flex-direction:column;margin-left:0}
  .audience-line>span{padding-left:calc(var(--pearl) + var(--s-3))}
  .audience-line>span::before{left:0}
}

/* ---------- Sections ---------- */
.section{padding-block:var(--section)}
.section-head{display:grid;margin-bottom:var(--head-gap)}
.section-intro{margin-top:var(--s-5);max-width:var(--measure-intro);color:var(--ink-2)}
@media (min-width:64rem){
  .section-head{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:end}
  .section-head .eyebrow{grid-column:1/-1}
  .section-head h2{grid-column:1/span 6}
  .section-intro{grid-column:8/span 5;margin-top:0;padding-bottom:var(--intro-baseline)}
}

/* Services */
/* Flat columns ruled by hairlines (D-60) */
.plates{display:grid;list-style:none;padding:0;border-top:var(--brand-hairline) solid var(--line)}
.plate{display:flex;flex-direction:column;padding:var(--plate-pad);border-bottom:var(--brand-hairline) solid var(--line)}
.plate-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--plate-top-gap)}
.glyph{display:grid;place-items:center;width:var(--glyph-well);height:var(--glyph-well);color:var(--teal-800)}
.glyph svg{width:var(--glyph);height:var(--glyph);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.glyph-back{stroke-opacity:.38}
.plate-num{color:var(--teal-800);font-size:var(--fs-small);font-variant-numeric:tabular-nums;letter-spacing:var(--tr-num)}
.plate :is(h3,h4){margin-bottom:var(--s-3);font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--tr-h3);font-weight:var(--wght-strong);color:var(--ink)}
.plate :is(h3,h4)+p{max-width:var(--measure-intro);margin-bottom:var(--s-6)}
.plate-verbs{
  margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--line);color:var(--ink-2);
  font-size:var(--fs-meta);font-weight:var(--wght-meta);letter-spacing:var(--tr-meta);text-transform:uppercase;
}
@media (min-width:45rem){
  .plates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plate:last-child{grid-column:1/-1}
}
@media (min-width:64rem){
  .plates{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plate+.plate{border-left:var(--brand-hairline) solid var(--line)}
  .plate:last-child{grid-column:auto}
}
/* Plates in a row share row tracks, so titles, bodies and verbs line up whatever wraps */
@supports (grid-template-rows:subgrid){
  @media (min-width:45rem){
    .plate{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
    .plate-verbs{margin-top:0}
  }
}

/* Approach */
.approach{position:relative}
.approach::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--band) var(--band-fade),var(--band) calc(100% - var(--band-fade)),transparent);
}
.steps{display:grid;row-gap:var(--step-gap);list-style:none;padding:0}
.step{position:relative;padding-left:calc(var(--node) + var(--s-5))}
.step h3{padding-top:max(0px,(var(--node) - 1lh) / 2);margin-bottom:var(--s-2)}
.step p{color:var(--ink-2);max-width:var(--measure-step)}
.node{
  position:absolute;left:0;top:0;z-index:1;display:grid;place-items:center;
  width:var(--node);height:var(--node);border-radius:50%;
  background:var(--paper-raised);box-shadow:inset 0 0 0 1px var(--line-strong);
  color:var(--ink-2);font-size:var(--fs-meta);font-weight:var(--wght-meta);font-variant-numeric:tabular-nums;letter-spacing:var(--tr-num);
}
.node::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 35% 28%,var(--teal-600),var(--teal-800) 72%);box-shadow:var(--node-inset);
}
.node span{position:relative;color:var(--on-teal)}
/* Phones: the strand runs from this node to the next, past the text, so the turn between two steps is a visible move */
.step-link{position:absolute;z-index:0;max-width:none;overflow:visible;pointer-events:none;left:calc(var(--node) / 2 - var(--link-w) / 2);top:calc(var(--node) / 2);width:var(--link-w);height:calc(100% + var(--step-gap))}
.step-link path{fill:none;stroke-width:1.75;stroke-linecap:round;vector-effect:non-scaling-stroke}
.link-a{stroke:var(--teal-800);stroke-opacity:.42}
.link-b{stroke:var(--teal-300)}
.step:nth-child(even) .link-a{stroke:var(--teal-300);stroke-opacity:1}
.step:nth-child(even) .link-b{stroke:var(--teal-800);stroke-opacity:.42}
.link-x{display:none}
.step:nth-child(1){--i:0}
.step:nth-child(2){--i:1}
.step:nth-child(3){--i:2}
.step:nth-child(4){--i:3}
@media (min-width:64rem){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--grid-gap);align-items:start}
  .step{padding-left:0;padding-top:calc(var(--node) + var(--s-5));padding-right:var(--s-4)}
  .step h3{padding-top:0}
  /* One baseline; the strands are drawn left to right, the way the steps are read (D-53) */
  .step-link{left:calc(var(--node) / 2);top:calc(var(--node) * -.3);width:calc(100% + var(--grid-gap));height:calc(var(--node) * 1.6)}
  .link-x{display:inline}
  .link-y{display:none}
}

/* Approach draw: scroll-driven where supported, a one-off JS transition elsewhere, fully drawn otherwise */
.steps[data-draw="ready"] .step-link{clip-path:inset(0 0 100% 0)}
.steps[data-draw="ready"] .node::before{opacity:0;scale:.4}
.steps[data-draw="ready"] .node span{color:var(--ink-2)}
.steps[data-draw="on"] .step-link{clip-path:inset(0 0 0 0);transition:clip-path var(--dur-link) var(--ease-in-out) calc(var(--i) * var(--dur-link) + var(--dur-fast))}
.steps[data-draw="on"] .node::before{transition:opacity var(--dur-base) var(--ease-out) calc(var(--i) * var(--dur-link)),scale var(--dur-slow) var(--ease-settle) calc(var(--i) * var(--dur-link))}
.steps[data-draw="on"] .node span{transition:color var(--dur-base) var(--ease-standard) calc(var(--i) * var(--dur-link))}
.steps[data-draw="ready"] .step :is(h3,p){opacity:0;translate:0 var(--rise)}
.steps[data-draw] .step{opacity:1;translate:none}
.steps[data-draw="on"] .step :is(h3,p){opacity:1;translate:0 0;transition:opacity var(--dur-reveal) var(--ease-out) calc(var(--i) * var(--dur-link) + var(--dur-fast)),translate var(--dur-reveal) var(--ease-out) calc(var(--i) * var(--dur-link) + var(--dur-fast))}
@media (min-width:64rem){
  .steps[data-draw="ready"] .step-link{clip-path:inset(0 100% 0 0)}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* Every headline arrives the way the hero's does, in two beats, as it comes into view: one page, one gesture (D-65) */
    :is(.section-head,.about-head) :is(.eyebrow,h2 .line),.section-intro{--rise-from:var(--rise-sm);animation:rise-in linear both;animation-timeline:view();animation-range:cover 4% cover 22%}
    :is(.section-head,.about-head) h2 .line:nth-child(2){animation-range:cover 8% cover 26%}
    /* Each step drives its own timeline as it scrolls in (D-55) */
    /* The whole step arrives first, so no empty node waits on the page; then it fills, its text rises, and the
       strand travels to the next step over a long range, which is the part that shows the flow (D-64) */
    .step{view-timeline-name:--step;--rise-from:var(--rise);animation:rise-in linear both;animation-timeline:--step;animation-range:cover 0% cover 10%}
    .node::before{animation:node-fill linear both;animation-timeline:--step;animation-range:cover 6% cover 13%}
    .node span{animation:node-ink linear both;animation-timeline:--step;animation-range:cover 6% cover 13%}
    .step :is(h3,p){--rise-from:var(--rise);animation:rise-in linear both;animation-timeline:--step;animation-range:cover 10% cover 20%}
    .step-link{animation:link-y linear both;animation-timeline:--step;animation-range:cover 18% cover 44%}
  }
  @media (prefers-reduced-motion:no-preference) and (min-width:64rem){
    /* Desktop: the block pins and the four steps arrive in turn over --approach-run (DESIGN.md 9.4, D-55). Ranges are
       contain %, negative while the section is still scrolling in */
    .approach{min-height:calc(100vh + var(--approach-run));view-timeline-name:--approach}
    .approach>.container{position:sticky;top:var(--sticky-top)}
    .step:nth-child(1){--in-from:-46%;--in-to:-38%;--fill-from:-40%;--fill-to:-34%;--text-from:-36%;--text-to:-26%;--draw-from:-24%;--draw-to:-4%}
    .step:nth-child(2){--in-from:-6%;--in-to:2%;--fill-from:0%;--fill-to:6%;--text-from:4%;--text-to:14%;--draw-from:16%;--draw-to:36%}
    .step:nth-child(3){--in-from:34%;--in-to:42%;--fill-from:40%;--fill-to:46%;--text-from:44%;--text-to:54%;--draw-from:56%;--draw-to:76%}
    .step:nth-child(4){--in-from:74%;--in-to:82%;--fill-from:80%;--fill-to:86%;--text-from:84%;--text-to:94%}
    /* Each step is absent until its turn: it arrives, fills, reads, then its strand travels to the next */
    .step{animation-timeline:--approach;animation-range:contain var(--in-from) contain var(--in-to)}
    .step-link{animation-name:link-x;animation-timeline:--approach;animation-range:contain var(--draw-from) contain var(--draw-to)}
    .node::before,.node span{animation-timeline:--approach;animation-range:contain var(--fill-from) contain var(--fill-to)}
    .step :is(h3,p){animation-timeline:--approach;animation-range:contain var(--text-from) contain var(--text-to)}
  }
}
@keyframes link-x{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes link-y{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes node-fill{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
@keyframes node-ink{from{color:var(--ink-2)}to{color:var(--on-teal)}}

/* About */
.about-grid{display:grid;row-gap:var(--s-6)}
.about-text{max-width:var(--measure-lede);color:var(--ink-2);font-size:var(--fs-lede);line-height:var(--lh-lede)}
.about-block{max-width:var(--measure-intro);padding-top:var(--s-5);border-top:1px solid var(--line)}
.about-list>div+div{margin-top:var(--s-4)}
.about-list dt{color:var(--ink);font-weight:var(--wght-strong)}
.about-list dd{margin-top:var(--s-1);color:var(--ink-2)}
/* About art: a static glass Rise that js/genesis.js (lazy) turns into the scroll story. No frame and no caption: it
   stands in its own warm light, open to the page (D-64) */
.genesis-stage{margin-top:var(--s-6);background:var(--genesis-halo)}
.genesis{position:relative;width:var(--genesis);aspect-ratio:1;margin:0 auto}
.genesis svg{display:block;width:100%;height:100%;overflow:visible}
.name-card{padding:var(--plate-pad);border:var(--art-frame);border-radius:var(--r-lg);background:var(--paper-raised)}
.name-title,.about-sub{margin-bottom:var(--s-5);color:var(--teal-600);font-size:var(--fs-meta);font-weight:var(--wght-meta);letter-spacing:var(--tr-meta);line-height:var(--lh-tight);text-transform:uppercase}
.name-list>div+div{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line)}
.name-list dt{display:flex;align-items:center;gap:var(--s-3);color:var(--ink);font-size:var(--fs-h3);font-weight:var(--wght-strong);letter-spacing:var(--tr-h3);line-height:var(--lh-h3)}
.name-list dd{margin-top:var(--s-2);padding-left:calc(var(--icon) + var(--s-3));color:var(--ink-2)}
.name-glyph{width:var(--icon);height:var(--icon);fill:none;stroke:var(--teal-800);stroke-width:1.5;stroke-linecap:round}
.name-glyph circle{fill:var(--teal-100)}
@media (min-width:64rem){
  .about-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);row-gap:var(--s-7)}
  .about-head{grid-column:1/span 6;grid-row:1/span 4;align-self:start;position:sticky;top:var(--sticky-top)}
  .about-text,.about-block,.name-card{grid-column:8/span 5}
  .name-card{margin-top:var(--about-hold)} /* the sticky head then holds long enough for the art's story to end while it is held */
  .genesis-stage{max-width:var(--turn-art-width);margin-left:calc(var(--s-5) * -1)}
  .genesis{width:min(100%,var(--genesis-lg))}
}

/* The About art opens its page. For a reader whose browser will run genesis.js, the resting Rise, which is the
   story's last frame, waits a moment for the story, so the page does not open on the ending (D-86). The wait ends by
   itself: with no module, the Rise simply appears. */
@media (prefers-reduced-motion:no-preference) and (forced-colors:none){
  html.js:not([data-lite]) .about--page .genesis:not([data-genesis="on"]) svg{animation:genesis-wait 0s var(--genesis-wait) backwards}
}
@keyframes genesis-wait{from{opacity:0}}

/* Contact */
/* The hero's deep teal, flat, with the art frames' corners; it keeps the glass rim and its one light sweep (D-63) */
.contact-panel{display:grid;row-gap:var(--s-7);padding:var(--s-6) var(--s-5);border-radius:var(--r-lg);background:var(--teal-900);box-shadow:var(--glass-inset-teal);-webkit-backdrop-filter:none;backdrop-filter:none}
.contact .eyebrow{color:var(--on-teal)}
.contact h2{color:var(--on-teal)}
.contact-intro>p:last-child{margin-top:var(--s-5);max-width:var(--measure-intro);color:var(--on-teal-2)}
.glass--teal :focus-visible{outline-color:var(--on-teal)}
.email-link{
  position:relative;display:inline-flex;align-items:center;gap:var(--s-3);min-height:var(--tap);padding-block:var(--s-2);
  color:var(--on-teal);font-size:var(--fs-email);font-weight:var(--wght-medium);letter-spacing:var(--tr-h3);line-height:var(--lh-h3);
  text-decoration:none;overflow-wrap:anywhere;
}
.email-link .icon{width:var(--icon-lg);height:var(--icon-lg)}
.email-link::before,.email-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;transform-origin:left}
.email-link::after{background:var(--on-teal-line);transition:scale var(--dur-reveal) var(--ease-out) var(--dur-slow)}
.email-link::before{z-index:1;background:var(--on-teal);scale:0 1;transition:scale var(--dur-slow) var(--ease-out)}
.email-link:hover::before,.email-link:focus-visible::before{scale:1 1}
.contact-panel[data-reveal="pending"] .email-link::after{scale:0 1}
.contact-tools{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin-top:var(--s-5)}
.time-chip{
  display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--chip-h);padding-inline:var(--s-3) var(--s-4);border-radius:var(--r-pill);
  background:var(--on-teal-wash);color:var(--on-teal);font-size:var(--fs-small);font-variant-numeric:tabular-nums;
}
.time-chip::before{content:"";width:var(--pearl);height:var(--pearl);border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--teal-100),var(--teal-300) 70%)}
/* Copy feedback swaps in place: both states share one grid cell, so the button never changes width */
.swap{display:grid;justify-items:start}
.swap>*{grid-area:1/1;transition:opacity var(--dur-fast) var(--ease-standard),translate var(--dur-base) var(--ease-out)}
.swap>:last-child,.copy-button[data-done] .swap>:first-child{opacity:0;translate:0 var(--s-1)}
.copy-button[data-done] .swap>:first-child{translate:0 calc(-1 * var(--s-1))}
.copy-button[data-done] .swap>:last-child{opacity:1;translate:0 0}
.records-note{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line-on-teal);color:var(--on-teal-2);font-size:var(--fs-small)}
@property --rim-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.glass--teal::after{
  z-index:1;padding:1px;opacity:0;transition:none;
  background:conic-gradient(from var(--rim-angle),transparent 0turn,transparent .7turn,var(--glass-glint) .85turn,transparent 1turn);
  -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);
}
@media (min-width:45rem){.contact-panel{padding:var(--s-7)}}
@media (min-width:64rem){
  /* Full-bleed grid so the actions start on the page's right-hand axis; the inner padding moves to the columns */
  .contact-panel{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:end;padding:var(--s-8) 0}
  .contact-intro{grid-column:1/span 6;padding-inline-start:var(--contact-pad-x)}
  .contact-actions{grid-column:8/span 5;padding-inline-end:var(--contact-pad-x)}
}

/* ---------- v5: the serif accent, night and the pages that open on it ---------- */
/* One word or two in a headline, never body (D-76) */
:is(h1,h2,.half-title,.statement-text) em{font-family:var(--font-serif);font-style:italic;font-weight:var(--wght-body);font-size:var(--serif-size);letter-spacing:var(--serif-tracking);font-stretch:normal;color:var(--teal-600)}
:is(.hero,.story,.band,.statement) em{color:var(--champagne)}
.button-note{font-weight:var(--wght-body);opacity:.72}
.section-more,.about-links{display:flex;flex-wrap:wrap;column-gap:var(--s-6)}
.section-more{margin-top:var(--s-7)}
/* The band runs up under the header, and the capsule's ink is light until it tints (D-75). Without JavaScript the
   capsule is always tinted, so its ink stays dark. */
.top-night main{margin-top:calc(-1 * (var(--header-top) + var(--header-h)))}
.top-night .site-header{margin-bottom:0}
.top-night::before{content:"";position:absolute;inset:-100vh 0 auto;height:100vh;background:var(--night)}
.top-night :is(.hero,.band){padding-top:calc(var(--top-pad) + var(--s-6))}
/* Light ink in two cases: at the top of a page that opens on night (before the capsule tints), and wherever the
   capsule is over a night section (site.js sets html[data-night]), where its glass is dark as well. */
html.js:not([data-scrolled]) .top-night .nav-capsule:not(.is-solid),html[data-night] .nav-capsule{--cap-brand:var(--paper);--cap-ink:var(--on-teal-2);--cap-strong:var(--paper);--cap-wash:var(--night-wash)}
:is(html.js:not([data-scrolled]) .top-night,html[data-night]) .nav-capsule :focus-visible{outline-color:var(--paper)}
html[data-night] .glass--nav::after{background:var(--glass-sheen-teal),var(--glass-tint-night);box-shadow:var(--glass-inset-teal),var(--e-1)}
html[data-night] .glass--nav::before{background:var(--glass-rim-teal)}
@media (min-width:45rem){
  :is(html.js:not([data-scrolled]) .top-night,html[data-night]) .nav-capsule .button--nav{background:var(--paper);color:var(--teal-900);box-shadow:none}
}
@media (min-width:64rem){
  .top-night :is(.hero,.band){padding-top:calc(var(--top-pad) + var(--s-7))}
}

/* The story of the name. As written here it is five stills and their captions: finished. js/stage.js (lazy) may take
   it over and pin one stage behind the captions (css/stage.css); nothing here waits for it. */
.story{position:relative;padding-block:var(--section);background:var(--night);color:var(--on-teal-2)}
.story :is(h2,h3){color:var(--paper)}
.story .eyebrow,.chapter-num{color:var(--on-teal-2)}
.story :focus-visible{outline-color:var(--paper)}
.story-head{margin-bottom:var(--head-gap)}
.chapters{display:grid;row-gap:var(--s-8);list-style:none;padding:0}
.chapter{display:grid;row-gap:var(--s-5);align-items:center}
.chapter-still img{width:min(100%,var(--still-w));height:auto;border-radius:var(--r-lg)}
.chapter-num{margin-bottom:var(--s-3);font-size:var(--fs-small);font-variant-numeric:tabular-nums;letter-spacing:var(--tr-num)}
.chapter h3{max-width:var(--measure-chapter);font-size:var(--fs-chapter);line-height:var(--lh-h2);letter-spacing:var(--tr-h2);font-stretch:var(--wdth-h2);font-weight:var(--wght-h2)}
.chapter h3+p{margin-top:var(--s-4);max-width:var(--measure-intro)}
.story-film{margin-top:var(--s-8)}
.story .text-link{color:var(--paper)}
@media (min-width:64rem){
  .chapter{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
  .chapter-still{grid-column:1/span 5;grid-row:1}
  .chapter-text{grid-column:7/span 6;grid-row:1}
  .chapter:nth-child(even) .chapter-still{grid-column:8/span 5}
  .chapter:nth-child(even) .chapter-text{grid-column:1/span 6}
}

/* Six services as the two halves of the mark (D-77). A plate's title is its link, and the whole plate is the target. */
.half+.half{margin-top:var(--s-8)}
.half-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-4);margin-bottom:var(--s-5)}
.half-title em{font-size:var(--fs-h2);line-height:var(--lh-h2);color:var(--ink)}
.half-title span{color:var(--teal-600);font-family:var(--font);font-size:var(--fs-meta);font-weight:var(--wght-meta);letter-spacing:var(--tr-meta);text-transform:uppercase}
.plate{position:relative;transition:background-color var(--dur-fast) var(--ease-standard)}
.plate a{color:inherit;text-decoration:none}
.plate a::after{content:"";position:absolute;inset:0}
@media (hover:hover) and (pointer:fine){.plate:has(a:hover){background:var(--hover-wash)}}

/* AI, used with care: four short terms; the person behind the work */
.care-list{display:grid;gap:var(--s-6) var(--grid-gap)}
.care-list>div{padding-top:var(--s-4);border-top:1px solid var(--line)}
.care-list dt{color:var(--ink);font-size:var(--fs-h3);font-weight:var(--wght-strong);letter-spacing:var(--tr-h3);line-height:var(--lh-h3)}
.care-list dd{margin-top:var(--s-2)}
@media (min-width:45rem){.care-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){
  .care-list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .about-links{grid-column:8/span 5}
}

/* ---------- Footer ---------- */
.site-footer{padding-bottom:var(--s-8)}
.footer-grid{display:grid;gap:var(--s-3);padding-top:var(--s-6);border-top:1px solid var(--line);color:var(--ink-2);font-size:var(--fs-small)}
.footer-brand p{margin-top:var(--s-1)}
.footer-nav ul{display:flex;flex-wrap:wrap;column-gap:var(--s-5);list-style:none;padding:0}
.footer-nav a,.back-to-top{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--tap);color:var(--ink-2);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
.footer-nav a[aria-current]{color:var(--ink)}
.footer-nav a{position:relative}
.footer-nav a::after{content:"";position:absolute;inset:0 min(0px,(100% - var(--tap)) / 2)}
.footer-meta{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s-5)}
@media (hover:hover) and (pointer:fine){
  .footer-nav a:hover,.back-to-top:hover{color:var(--ink)}
}
@media (min-width:64rem){
  .footer-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);row-gap:0;align-items:start}
  .footer-brand{grid-column:1/span 6;grid-row:1/span 2}
  .footer-nav{grid-column:8/span 5}
  .footer-meta{grid-column:8/span 5;justify-content:space-between}
}

/* ---------- Inner pages: privacy and 404 ---------- */
.page{padding-block:var(--page-pad-top) var(--section)}
.prose{width:min(var(--measure),100% - 2 * var(--gutter-x));margin-inline:auto}
.page-title{font-size:var(--fs-h1-page);line-height:var(--lh-h2);letter-spacing:var(--tr-h2);font-stretch:var(--wdth-h2);font-weight:var(--wght-h2)}
.page-meta{margin-top:var(--s-4);color:var(--ink-2);font-size:var(--fs-small)}
.prose h2{margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--line);margin-bottom:var(--s-3);font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--tr-h3);font-stretch:var(--wdth-body);font-weight:var(--wght-strong)}
.prose p+p{margin-top:var(--s-4)}
.prose p a{text-decoration-color:var(--line-strong);transition:text-decoration-color var(--dur-fast) var(--ease-standard)}
.prose p a:hover{text-decoration-color:currentColor}
.page-sign{margin-top:var(--s-8);color:var(--ink-2);font-size:var(--fs-small)}
.back-link,.text-link{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--tap);margin-top:var(--s-2);color:var(--teal-800);font-weight:var(--wght-strong);text-decoration:none}

.read-progress{display:none}
@supports (animation-timeline:scroll()){
  /* Runs along the flat bottom edge of the capsule, between its rounded ends */
  .read-progress{
    display:block;position:absolute;z-index:1;left:calc(var(--header-h) / 2);right:calc(var(--header-h) / 2);bottom:0;height:var(--focus-width);
    border-radius:var(--r-pill);background:var(--teal-600);opacity:.55;transform-origin:left;pointer-events:none;
    animation:read linear both;animation-timeline:scroll(root);
  }
}
@keyframes read{from{scale:0 1}to{scale:1 1}}

.lost{display:grid;justify-items:center;text-align:center;padding-block:var(--s-6) var(--section)}
.lost-mark{width:var(--lost-mark);height:auto;overflow:visible;--sheen-start:var(--glass-sheen-start);--sheen-end:var(--glass-sheen-end)}
.lost-shadow{fill:var(--teal-800);fill-opacity:.26}
.lost .page-title{margin-top:var(--s-5)}
.lost p:not(.eyebrow){margin-top:var(--s-4);max-width:var(--measure-intro);color:var(--ink-2)}
.lost .eyebrow{margin-top:var(--s-6);margin-bottom:0}
.lost .hero-actions{justify-content:center;margin-top:var(--s-6)}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:no-preference){
  /* site.js sets data-smooth after load, so deep links and cross-page anchors land instantly */
  html[data-smooth]{scroll-behavior:smooth}
  :focus-visible{animation:focus-in var(--dur-fast) var(--ease-out)}
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation-duration:var(--dur-vt-out)}
  ::view-transition-new(root){animation-duration:var(--dur-vt-in)}

  /* Load choreography. --t-veil is 0 unless the arrival veil plays; then every offset waits for the veil to lift. */
  html:not([data-intro="seen"]) .nav-capsule{animation:fade-in var(--dur-nav-in) var(--ease-standard) var(--t-veil) backwards}
  html:not([data-intro="seen"]) .hero-eyebrow{--rise-from:var(--rise-sm);animation:rise-in var(--dur-eyebrow) var(--ease-out) calc(var(--t-eyebrow) + var(--t-veil)) backwards}
  html:not([data-intro="seen"]) .display .line{animation:line-in var(--dur-reveal) var(--ease-out) var(--t-veil) backwards}
  html:not([data-intro="seen"]) .display .line--accent{animation-delay:calc(var(--t-h1-2) + var(--t-veil))}
  /* The lede is the LCP element: it rises without fading, like the H1 */
  html:not([data-intro="seen"]) .hero .lede{--rise-from:var(--rise-md);animation:rise-only var(--dur-rise) var(--ease-out) calc(var(--t-lede) + var(--t-veil)) backwards}
  html:not([data-intro="seen"]) .hero .hero-actions .button{--rise-from:var(--rise-md);animation:rise-in var(--dur-rise) var(--ease-out) calc(var(--t-cta) + var(--t-veil)) backwards}
  html:not([data-intro="seen"]) .hero .hero-actions .button+.button{animation-delay:calc(var(--t-cta) + var(--stagger) + var(--t-veil))}
  /* The artwork arrives once, after the veil: the window settles, the ribbons close the last of their turn, one pass of light */
  html.js:not([data-intro="seen"]):not([data-lite]) .sculpture-window{animation:sculpture-emerge var(--sculpture-emerge) var(--ease-out) calc(var(--t-veil) + var(--sculpture-delay)) both}
  /* The layers that turn travel as finished pictures (D-96). The pearl does not turn, so its shadow on the far ribbons
     is a fixed soft mask the ribbons pass under (D-87). Each layer's travel is generated with its place (make-hero-art) */
  html:not([data-lite]) .hero-art[data-turn] :is(.ta-back,.ta-front){animation:ta-turn var(--sculpture-revolve) var(--ease-in-out)}
  html:not([data-lite]) .hero-art[data-turn] .ta-hold-turn{animation:ta-turn-hold var(--sculpture-revolve) var(--ease-in-out)}
  html:not([data-lite]) .hero-art[data-turn] .ta-cast{animation:ta-turn-cast var(--sculpture-revolve) var(--ease-in-out)}
  /* Where a fine pointer can turn it, the moving layers are kept ready, so the first frame of a turn draws nothing */
  @media (hover:hover) and (pointer:fine){
    html:not([data-lite]) :is(.ta-back,.ta-front,.ta-hold-turn,.ta-cast,.ta-form,.ta-bounce,.ta-glint),html:not([data-lite]) .sculpture-light::before{will-change:transform}
  }
  html.js:not([data-intro="seen"]):not([data-lite]) .sculpture-window::before{animation:sculpture-light var(--sculpture-sheen) var(--ease-in-out) calc(var(--t-veil) + var(--dur-veil-lift)) both}
  /* As the hero leaves, the artwork drifts a little slower than the page: depth, not movement for its own sake */
  @supports (animation-timeline:view()){
    .sculpture-window{animation:sculpture-drift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  }

  /* Rise replay only (D-19, DESIGN.md 9.7): the halves gather into a whole pearl, hold a beat, then open and rise */
  .brand[data-rise="on"] :is(.ph-left,.ph-right){animation:mark-close var(--dur-mark-close) var(--ease-in-out),mark-replay var(--dur-mark-replay);animation-composition:replace,add}

  /* 404: a whole glass pearl rises into view, light crosses it once, then it splits and takes the Rise offset */
  .lost-mark{--rise-from:var(--rise);--mark-rise:var(--glass-rise);animation:rise-in var(--dur-rise) var(--ease-out) var(--t-glass-in) backwards}
  html:not([data-lite]) .lost-sheen{animation:sheen var(--dur-sweep) var(--ease-in-out) var(--t-glass-sheen) backwards}
  .lost-split{animation:split var(--dur-base) var(--ease-in-out) var(--t-glass-split) backwards}
  .lost-mark :is(.ph-left,.ph-right){animation:mark var(--dur-mark) var(--ease-settle) var(--t-glass-rise) backwards}

  .contact-panel[data-rim="on"]::after{animation:rim-sweep var(--dur-sweep) var(--ease-in-out) both}
  .copy-button[data-done] .swap--icon>:last-child{animation:pulse var(--dur-orb) var(--ease-settle)}

  [data-reveal="pending"]{opacity:0;translate:0 var(--rise)}
  [data-reveal="in"]{transition:opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay,0ms),translate var(--dur-reveal) var(--ease-out) var(--reveal-delay,0ms)}

  /* Arrival veil, first page of a visit only (DESIGN.md 9.6). boot.js walks html[data-veil] on -> go -> done and ends it
     on the first key or pointer press. The split and rise are attached from the first frame and paused through "on",
     so the pearl holds one whole pose; --t-veil holds the hero back until the veil has mostly lifted. */
  html.js:is([data-veil="on"],[data-veil="go"],[data-veil="done"]){--t-veil:calc(var(--t-veil-lift) + var(--dur-veil-lift) * .6)}
  html.js[data-veil="on"] :is(.nav-capsule,.hero-eyebrow,.display .line,.hero .lede,.hero-actions .button,.sculpture-window,.sculpture-window::before){animation-play-state:paused}
  html.js:is([data-veil="on"],[data-veil="go"]) .veil{display:grid}
  html.js[data-veil] .veil-mark{animation:rise-in var(--dur-veil-in) var(--ease-out) backwards}
  html.js[data-veil] .veil-split{animation:split var(--dur-base) var(--ease-in-out) var(--t-veil-split) backwards}
  html.js[data-veil] .veil-mark :is(.ph-left,.ph-right){animation:mark var(--dur-mark) var(--ease-settle) var(--t-veil-rise) backwards}
  html.js[data-veil="on"] :is(.veil-split,.veil-mark .ph-left,.veil-mark .ph-right){animation-play-state:paused}
  html.js[data-veil="go"] .veil{animation:veil-lift var(--dur-veil-lift) var(--ease-in-out) var(--t-veil-lift) forwards}
}
.veil{display:none;position:fixed;inset:0;z-index:var(--z-veil);place-items:center;pointer-events:none;background:var(--veil-field),var(--night)}
.veil .lost-shadow{fill:var(--night);fill-opacity:.9}
.veil::before{content:"";position:absolute;inset:0;background:var(--grain-url) 0 0/var(--grain-size) var(--grain-size) repeat;opacity:var(--grain-opacity)}
.veil-mark{position:relative;width:var(--lost-mark);height:auto;overflow:visible;--rise-from:var(--rise);--mark-rise:var(--glass-rise)}
@keyframes veil-lift{to{opacity:0;translate:0 calc(-1 * var(--veil-lift))}}
html[data-lite] .contact-panel::after{animation:none}

@keyframes fade-in{from{opacity:0}}
@keyframes sculpture-emerge{from{opacity:.72;translate:0 var(--rise);scale:.97}}
@keyframes sculpture-drift{to{translate:0 calc(var(--sculpture-drift) * -1)}}
/* inside the leaning group the axis is vertical, so undoing the turn there is a plain move down by one pitch */
@keyframes sculpture-light{0%{opacity:0;translate:-70% 0}30%{opacity:1}100%{opacity:0;translate:70% 0}}
@keyframes rise-in{from{opacity:0;translate:0 var(--rise-from,var(--rise))}}
@keyframes rise-only{from{translate:0 var(--rise-from,var(--rise))}}
@keyframes line-in{from{translate:0 .2em}}
@keyframes sheen{from{translate:var(--sheen-start) 0}}
/* The Rise: --s is -1 on the left half, 1 on the right; the replay holds the whole pearl from 21% to 44% */
@keyframes mark{from{translate:0 calc(var(--s) * var(--mark-rise))}}
@keyframes mark-replay{from,to{translate:0 0;animation-timing-function:var(--ease-in-out)}21%,44%{translate:0 calc(var(--s) * var(--mark-rise));animation-timing-function:var(--ease-settle)}}
@keyframes mark-close{40%,84%{translate:calc(-1 * var(--s) * var(--mark-close)) 0}}
@keyframes split{from{translate:calc(-1 * var(--s) * var(--glass-close)) 0}}
@keyframes rim-sweep{0%{--rim-angle:0deg;opacity:0}15%{opacity:1}80%{opacity:1}100%{--rim-angle:320deg;opacity:0}}
@keyframes pulse{50%{scale:1.25}}
@keyframes focus-in{from{outline-offset:var(--focus-offset-from)}}

/* ---------- Preferences and fallbacks ---------- */
@media (prefers-reduced-motion:reduce){
  .nav-indicator[data-on],.email-link::before,.email-link::after{transition:none}
  .button,.icon,.swap>*,.nav-menu,.glass::after,.glass--nav::before,.glass--nav::after{
    transition-property:opacity,background-color,color;transition-duration:var(--dur-reduced)
  }
  .button:active{scale:none}
  .button--glass:hover{translate:none}
  .ta-glint,.ta-bounce,.ta-form{transition:none;transform:none}
  .sculpture-light,.sculpture-window::before{display:none}
  .nav-menu,.nav-menu:popover-open,.swap>*{translate:none}
  @starting-style{.nav-menu:popover-open{translate:none}}
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:var(--glass-solid)}
  .glass--nav{background:none}
  .glass--nav::after{background:var(--glass-solid)}
  .glass--teal{background:var(--teal-900)}
  @media (max-width:44.99rem){.nav-menu{background:var(--glass-solid)}}
}

@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--glass-solid);box-shadow:0 0 0 1px var(--line-strong)}
  @media (max-width:44.99rem){
    .nav-menu{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--glass-solid);box-shadow:0 0 0 1px var(--line-strong)}
  }
  .glass--nav{background:none;box-shadow:none}
  .glass--nav::after{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--glass-solid);box-shadow:0 0 0 1px var(--line-strong)}
  html.js:not([data-scrolled]) .glass--nav:not(.is-solid)::after{opacity:1}
  /* the capsule is always light and solid here, so its ink stays dark (the same selectors as the night rules, later) */
  html.js:not([data-scrolled]) .top-night .nav-capsule:not(.is-solid),html[data-night] .nav-capsule{--cap-brand:var(--teal-800);--cap-ink:var(--ink-2);--cap-strong:var(--ink);--cap-wash:var(--hover-wash)}
  :is(html.js:not([data-scrolled]) .top-night,html[data-night]) .nav-capsule :focus-visible{outline-color:var(--focus)}
  html[data-night] .glass--nav::after{background:var(--glass-solid);box-shadow:0 0 0 1px var(--line-strong)}
  @media (min-width:45rem){
    :is(html.js:not([data-scrolled]) .top-night,html[data-night]) .nav-capsule .button--nav{background:var(--teal-800);color:var(--on-teal)}
  }
  .glass--teal{background:var(--teal-900);box-shadow:none}
  .glass:not(.glass--nav)::after,.glass::before{display:none}
}

@media (forced-colors:active){
  .glass,.glass--nav,.glass--teal{-webkit-backdrop-filter:none;backdrop-filter:none;background:Canvas;color:CanvasText;border:1px solid CanvasText;box-shadow:none}
  /* Its own rule: a browser without :popover-open would otherwise drop the whole glass rule */
  .nav-menu:popover-open{-webkit-backdrop-filter:none;backdrop-filter:none;background:Canvas;color:CanvasText;border:1px solid CanvasText;box-shadow:none}
  .glass::before,.glass::after,.backdrop,.hero-art,.step-link,.node::before,.read-progress{display:none}
  .button{border:1px solid ButtonText}
  .node{border:1px solid CanvasText}
  .node span,.contact h2,.contact .eyebrow,.contact p{color:CanvasText}
  .email-link,.button--glass{color:LinkText}
  .email-link{text-decoration:underline 1px;text-underline-offset:.22em}
  .email-link::before,.email-link::after{display:none}
  .nav-indicator,.audience-line>span::before,.time-chip::before{forced-color-adjust:none;background:CanvasText}
  .hero,.story,.band,.statement,.top-night::before{background:Canvas;color:CanvasText}
  .hero .display,.hero .line--accent,.hero .lede,.hero .eyebrow,:is(.story,.band,.statement) :is(h1,h2,h3,p,em,a){color:CanvasText}
  .hero .button--teal,.hero .button--glass{background:ButtonFace;color:ButtonText;border-color:ButtonText}
  .chapter-still,.story-stage,.plate a::after{display:none}
  .genesis-stage{background:Canvas}
  .name-card{background:Canvas;border-color:CanvasText}
  .lost-shadow,.gl-fx,.veil{display:none}
/* Belt and braces for forced colours; the :is() form is needed to outrank the rule that turns the veil on */
html.js:is([data-veil="on"],[data-veil="go"]) .veil{display:none}
  .gl-body{fill:CanvasText}
}

@media print{
  .backdrop,.site-header,.skip-link,.hero-art,.contact-tools,.footer-nav,.back-to-top,.step-link,.lost-mark,.genesis-stage,.veil,.chapter-still,.story-stage,.film,.jump{display:none!important}
  .hero,.story,.band,.statement{background:Canvas;color:CanvasText}
  .hero .display,.hero .line--accent,.hero .lede,.hero .eyebrow,:is(.story,.band,.statement) :is(h1,h2,h3,p,em,a){color:CanvasText}
  .top-night main{margin-top:0}
  html,body{background:Canvas;color:CanvasText}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .glass,.glass--teal{background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid CanvasText;color:CanvasText}
  .glass::before,.glass::after,.approach::before{display:none}
  .contact h2,.contact p,.contact .eyebrow,.email-link,.node span{color:CanvasText}
  .section{padding-block:var(--s-6)}
  .plate,.step,.name-card,.contact-panel,.section-head{break-inside:avoid}
  .approach{min-height:0}
  .approach>.container{position:static}
  .step :is(h3,p){animation:none;opacity:1;translate:none}
  .hero-actions{display:none}
  .contact-intro>p:last-child{color:CanvasText}
  [data-reveal]{opacity:1!important;translate:none!important}
}