/* One page on a charcoal ground. No script and no inline styles: every rule is a class here (the CSP has no unsafe-inline).
   Base rules are the narrow layout (600px and below); 601px and up is mid; 1024px and up is wide.
   Every animation sits inside (prefers-reduced-motion: no-preference); the rules outside it are the final, static state. */

@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/source-serif-4-display-300-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:dark;
  --ground:#1B1E23;
  --raised:#23272E;
  --ink:#ECEEF2;
  --ink-2:#B6BCC7;
  --accent:#8FB8F2;
  --accent-hover:#B3CFF7;
  --accent-active:#7FADEC;
  --on-accent:#12151A;
  --visited:#BDB0F5;
  --rule:#343A44;
  --edge:#7C8695;
  --line:#5B6472;
  --point:#AEB6C2;
  --scrim:rgba(9,10,12,0.72);
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --serif-weight:300;
  --sans:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
}

html{background:var(--ground)}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;text-wrap:pretty;-webkit-text-size-adjust:100%}
main{flex:1 0 auto}
h1,h2,h3,p,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}

/* links and focus */
a{color:var(--accent)}
a:hover{color:var(--accent-hover)}
a:active{color:var(--accent-active)}
a[href^="https://"]:visited{color:var(--visited)}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* buttons: the filled one, and the outlined one used for Close */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;box-sizing:border-box;padding:0 24px;border:0;border-radius:3px;background:var(--accent);color:var(--on-accent);font:500 16px/1.2 var(--sans);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--accent-hover);color:var(--on-accent)}
.btn:active{background:var(--accent-active);color:var(--on-accent)}
.btn-head{min-height:44px;padding:0 20px;font-size:15px}
.btn-block{display:flex;width:100%;padding:0 12px;overflow-wrap:anywhere}
.btn-line{display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;padding:0 18px;border:1px solid var(--edge);border-radius:3px;background:transparent;color:var(--ink);font:500 15px/1.2 var(--sans);cursor:pointer}
.btn-line:hover{border-color:var(--ink);color:var(--ink)}
.btn-line:active{border-color:var(--accent-active);color:var(--accent-active)}

/* the "Get in touch" trigger: a link to #contact by default; where popovers exist the button replaces it */
.cta-pop{display:none}
@supports selector(:popover-open){
  .cta-link{display:none}
  .cta-pop{display:inline-flex}
}

/* the text link in the hero */
.tap{display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:16px;text-decoration:underline;text-underline-offset:4px}

/* the Underlay link: inline in its sentence, 45px tall hit area, line box unchanged */
.pointer{display:inline-block;padding:9px 0;margin:-9px 0;font-weight:500;text-decoration:underline;text-underline-offset:4px}

/* header */
.site-head{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 16px;box-sizing:border-box;border-bottom:1px solid var(--rule);background:var(--ground)}
.brand{display:inline-flex;align-items:center;min-height:44px;font-family:var(--serif);font-weight:var(--serif-weight);font-size:22px;letter-spacing:-0.005em;text-decoration:none}
.brand,.brand:hover,.brand:active{color:var(--ink)}

/* type */
.label{font-weight:500;font-size:13px;line-height:20px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-2)}
.h1{font-family:var(--serif);font-weight:var(--serif-weight);font-size:38px;line-height:1.06;letter-spacing:-0.015em;color:var(--ink);text-wrap:balance}
.h2{font-family:var(--serif);font-weight:var(--serif-weight);font-size:30px;line-height:1.12;letter-spacing:-0.01em;color:var(--ink);text-wrap:balance}
.term,.choice-label{font-family:var(--serif);font-weight:var(--serif-weight);font-size:24px;line-height:1.2;color:var(--ink)}
.lead{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:540px}
.copy{color:var(--ink-2);max-width:600px}
.copy-lg{font-size:19px;line-height:1.5;color:var(--ink)}
.num{font-weight:500;font-size:13px;line-height:20px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.runin{color:var(--ink);font-weight:500}
.fig{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}

/* layout */
.wrap{max-width:1200px;margin:0 auto;padding-left:16px;padding-right:16px;box-sizing:border-box}
.section{position:relative;padding:56px 0;overflow-x:clip}
.rule-top{border-top:1px solid var(--rule)}

/* section backgrounds: one drawn strand per section, in the hero's language, coming in from alternate sides.
   It sits in the empty band around the section's top rule, never behind text, and takes no pointer or focus. */
.defs{position:absolute;width:0;height:0}
.strand{position:absolute;left:0;top:-20px;height:40px;pointer-events:none}
.strand-r{left:auto;right:0;transform:scaleX(-1)}
.s-line,.s-wire,.s-go,.s-pt,.s-node{fill:none;stroke:var(--rule);stroke-width:1.5}
.s-wire{stroke:var(--line)}
.s-go{stroke:var(--accent)}
.s-pt{stroke:var(--edge);stroke-width:6;stroke-linecap:round;stroke-dasharray:0 40}
.s-node{fill:var(--ground);stroke:var(--ink-2)}
.s-end{fill:var(--accent)}
.split{display:flex;flex-direction:column;gap:24px}
.copy-stack{display:flex;flex-direction:column;gap:16px}
.head-stack{display:flex;flex-direction:column;gap:12px}

/* hero: the first screen stands on its own */
.hero{display:flex;align-items:center;min-height:calc(100vh - 56px);min-height:calc(100svh - 56px);box-sizing:border-box;padding:20px 0 28px}
.hero-inner{width:100%;display:flex;flex-direction:column;gap:20px}
.hero-art{height:150px}
.hero-text{display:flex;flex-direction:column;gap:16px;min-width:0}
.actions{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;margin-top:4px}

/* the hero drawing: points line up, then paths connect them. Final frame by default. */
.lattice{display:block;width:100%;height:100%;overflow:visible}
.lattice .guide{fill:none;stroke:var(--rule);stroke-width:1.8}
.lattice .pt{fill:var(--point)}
.lattice .wire1{fill:none;stroke:var(--line);stroke-width:1.8}
.lattice .wire2{fill:none;stroke:var(--accent);stroke-width:1.8}
.lattice .node{fill:var(--ground);stroke:var(--ink-2);stroke-width:1.8}
.lattice .hub-ring{fill:var(--ground);stroke:var(--accent);stroke-width:2.2}
.lattice .hub-dot{fill:var(--accent)}

/* why now: the two things */
.two{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.two li{position:relative;padding:16px 0 16px 22px;border-bottom:1px solid var(--rule);color:var(--ink);max-width:600px}
.two li::before{content:"";position:absolute;left:0;top:27px;width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* what I review: five areas, each a term and its description */
.areas-head{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}
.areas{border-top:1px solid var(--rule)}
.area{display:flex;flex-direction:column;gap:10px;padding:24px 0;border-bottom:1px solid var(--rule)}
.look{color:var(--ink-2);max-width:600px}

/* what you get: the text, and the report's contents as a card */
.get{display:flex;flex-direction:column;gap:32px}
.get-text{display:flex;flex-direction:column;gap:16px}
.get-text .h2{margin-bottom:8px}
.plan{border:1px solid var(--rule);border-radius:4px;background:var(--raised);padding:24px;box-sizing:border-box}
.plan .label{margin-bottom:12px}
.plan ol{border-bottom:1px solid var(--rule)}
.plan-item{display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--rule);font-size:16px;line-height:22px;color:var(--ink)}
.plan-item .n{flex:0 0 20px;font-weight:500;font-size:13px;line-height:22px;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* contact: the same two parts as "what you get", text then card */
.contact{display:flex;flex-direction:column;gap:32px}
.contact-text{display:flex;flex-direction:column;gap:16px}
.contact-text .h2{margin-bottom:8px}
.mailbox{width:100%;box-sizing:border-box;border:1px solid var(--rule);border-radius:4px;background:var(--raised);padding:24px;display:flex;flex-direction:column;gap:12px}
.address{font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.mailbox .btn{align-self:flex-start}

/* footer */
.site-foot{border-top:1px solid var(--rule)}
.site-foot .wrap{padding-top:16px;padding-bottom:24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 32px;font-size:14px;color:var(--ink-2)}
.foot-name{display:inline-flex;align-items:center;min-height:44px}
.foot-links{display:flex;flex-wrap:wrap;gap:0 24px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}

/* the contact modal: a popover. Esc and a click outside close it; focus returns to the trigger.
   It is display none unless it is an open popover: a browser without popovers drops the :popover-open rule
   and never shows it, and "Get in touch" is then the link to #contact. */
.modal{display:none;position:fixed;inset:0;margin:auto;width:min(680px,calc(100vw - 32px));height:fit-content;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);box-sizing:border-box;overflow:auto;padding:20px;border:1px solid var(--edge);border-radius:6px;background:var(--raised);color:var(--ink)}
.modal:popover-open{display:block}
.modal::backdrop{background:var(--scrim)}
/* while the modal is open the page behind it takes no focus or clicks: inert where CSS can do that,
   hidden under the scrim where it cannot. The header stays, so focus can return to the trigger. */
@supports (interactivity:inert){
  body:has(.modal:popover-open) main,body:has(.modal:popover-open) .site-foot{interactivity:inert}
}
@supports selector(:popover-open){
  @supports not (interactivity:inert){
    body:has(.modal:popover-open) main,body:has(.modal:popover-open) .site-foot{visibility:hidden}
  }
}
.modal-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.modal-title{margin-bottom:8px}
.choices{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.choice{display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--rule);border-radius:4px;box-sizing:border-box;min-width:0}
.choice-line{color:var(--ink-2);font-size:16px;line-height:1.5}
.choice .btn{margin-top:auto}
.choice-soon{background:var(--ground)}
.tag{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border:1px solid var(--edge);border-radius:999px;font-weight:500;font-size:12px;line-height:1;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-2)}

/* the mailbox and the live modal choice: the border lightens when the card is hovered or holds focus.
   The meeting choice is not live and does not change. */
.mailbox:hover,.mailbox:focus-within,.choice:not(.choice-soon):hover,.choice:not(.choice-soon):focus-within{border-color:var(--edge)}

/* 404 */
.lost{padding-top:clamp(40px,8vw,88px);padding-bottom:96px}
.lost .h1{margin-bottom:20px}
.mb-24{margin-bottom:24px}

/* 360 and below */
@media (max-width:360px){
  .h1{font-size:34px}
  .hero-art{height:132px}
}

/* mid: 601 to 1023 */
@media (min-width:601px){
  .site-head{height:64px;padding:0 32px}
  .wrap{padding-left:32px;padding-right:32px}
  .section{padding:80px 0}
  .strand{top:-32px;height:64px}
  .split{gap:32px}
  .hero{min-height:calc(100vh - 64px);min-height:calc(100svh - 64px);padding:32px 0 48px}
  .hero-inner{gap:32px}
  .hero-art{height:280px}
  .hero-text{gap:20px}
  .h1{font-size:52px}
  .lead{font-size:19px}
  .h2{font-size:38px}
  .term,.choice-label{font-size:26px}
  .lattice .guide,.lattice .wire1,.lattice .wire2,.lattice .node{stroke-width:1.3}
  .lattice .hub-ring{stroke-width:1.6}
  .area{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px 24px;padding:28px 0;align-items:baseline}
  .area .term,.area .look{grid-column:2}
  .plan{padding:28px}
  .mailbox{padding:28px}
  .modal{padding:32px}
}

/* wide: 1024 and up */
@media (min-width:1024px){
  .section{padding:104px 0}
  .strand{top:-40px;height:80px}
  .hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
  .hero-art{order:2;height:auto;aspect-ratio:5 / 4}
  .hero-text{order:1}
  .h1{font-size:60px}
  .h2{font-size:44px}
  .split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
  .areas-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:end;margin-bottom:48px}
  .area{grid-template-columns:48px calc((100% - 64px)*5/12 - 48px) minmax(0,1fr);gap:0 32px;padding:32px 0}
  .area .term,.area .look{grid-column:auto}
  .get,.contact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}
  .lattice .guide,.lattice .wire1,.lattice .wire2,.lattice .node{stroke-width:1.1}
  .lattice .hub-ring{stroke-width:1.5}
}
@media (min-width:1280px){
  .h1{font-size:64px}
}

/* ---------- motion: only where the reader has not asked for less ---------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .btn,.btn-line,a{transition:background-color .15s ease,color .15s ease,border-color .15s ease}
  .mailbox{transition:border-color .15s ease}

  /* the hero drawing: plays once, 4.7 s, and rests on the final frame */
  .lattice .pt{animation:settle 1.5s cubic-bezier(.2,.7,.2,1) both}
  .lattice .c2{animation-delay:.08s}
  .lattice .c3{animation-delay:.16s}
  .lattice .c4{animation-delay:.24s}
  .lattice .guide,.lattice .wire1,.lattice .wire2{stroke-dasharray:1;animation:draw .8s ease-in-out both}
  .lattice .guide{animation-duration:.7s;animation-delay:1s}
  .lattice .g2{animation-delay:1.06s}
  .lattice .g3{animation-delay:1.12s}
  .lattice .g4{animation-delay:1.18s}
  .lattice .g5{animation-delay:1.24s}
  .lattice .w1{animation-delay:1.9s}
  .lattice .w2{animation-delay:2s}
  .lattice .w3{animation-delay:2.1s}
  .lattice .w4{animation-delay:2.2s}
  .lattice .w5{animation-delay:2.3s}
  .lattice .node,.lattice .hub-ring,.lattice .hub-dot{transform-box:fill-box;transform-origin:center;animation:appear .4s ease-out both}
  .lattice .n1{animation-delay:2.7s}
  .lattice .n2{animation-delay:2.8s}
  .lattice .n3{animation-delay:2.9s}
  .lattice .v1{animation-delay:3.3s}
  .lattice .v2{animation-delay:3.4s}
  .lattice .v3{animation-delay:3.5s}
  .lattice .hub-ring{animation-duration:.5s;animation-delay:4.2s}
  .lattice .hub-dot{animation-duration:.5s;animation-delay:4.2s}

  /* the modal eases in */
  .modal{transition:opacity .18s ease,translate .18s ease,display .18s allow-discrete,overlay .18s allow-discrete;opacity:0;translate:0 8px}
  .modal:popover-open{opacity:1;translate:0 0}
  @starting-style{.modal:popover-open{opacity:0;translate:0 8px}}
  /* the two choices come up one after the other */
  .choice{transition:opacity .3s ease,translate .3s ease,border-color .15s ease}
  .choice-soon{transition-delay:.1s}
  @starting-style{.modal:popover-open .choice{opacity:0;translate:0 10px}}

  /* sections: tied to the scroll position, only where the browser supports it. Content is visible everywhere else. */
  @supports (animation-timeline:view()){
    /* every block finishes within 160px of entering, so nothing is left part-faded at the end of the page */
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0px entry 96px}
    /* why now: the two things slide in from the left */
    .two .reveal{animation-name:slide}
    /* what I review: a row fades without moving while its rule draws across */
    .area.reveal{animation-name:fade;border-bottom-color:transparent;position:relative}
    .area::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--rule);transform-origin:left center;animation:rule linear both;animation-timeline:view();animation-range:entry 0px entry 260px}
    /* what you get: the card stays still and its five lines fill in, one after another */
    .plan.reveal{animation:none}
    .plan-item{animation:fill linear both;animation-timeline:view();animation-range:entry 10px entry 106px}
    /* experience: the three figures arrive in the accent and settle to the text colour */
    .fig{animation:settle-colour linear both;animation-timeline:view();animation-range:entry 60px entry 240px}
    /* what it does not include: a plain fade, no movement */
    .quiet .reveal{animation-name:fade}
    /* contact: the mailbox comes up into place */
    .mailbox.reveal{animation-name:arrive}
    /* section backgrounds: each strand wipes in from its edge, then drifts a little for as long as it is on screen */
    .section{overflow-x:clip}
    .strand{animation:wipe linear both,drift linear both;animation-timeline:view();animation-range:entry 0px entry 260px,cover}
    .strand-r{animation-name:wipe,drift-r}
    /* the first strand's rule is at the fold, so its wipe starts only when all of it has scrolled into view and
       nothing of it shows in the first screen at load. Without scroll animation, or with reduced motion, it is
       simply there, on its rule like the rest. */
    .strand-b{animation-range:entry 40px entry 300px,cover}
    @media (min-width:601px){.strand-b{animation-range:entry 64px entry 324px,cover}}
    @media (min-width:1024px){.strand-b{animation-range:entry 80px entry 340px,cover}}
    .words span{animation:word linear both;animation-timeline:view();animation-range:entry 20px entry 100px}
    .words span:nth-child(2){animation-range:entry 40px entry 120px}
    .words span:nth-child(3){animation-range:entry 60px entry 140px}
    .words span:nth-child(4){animation-range:entry 80px entry 160px}
    .words span:nth-child(5){animation-range:entry 100px entry 180px}
    .words span:nth-child(6){animation-range:entry 120px entry 200px}
    .words span:nth-child(7){animation-range:entry 140px entry 220px}
    .words span:nth-child(8){animation-range:entry 160px entry 240px}
    .words span:nth-child(9){animation-range:entry 180px entry 260px}
    .words span:nth-child(10){animation-range:entry 200px entry 280px}
  }
}

@keyframes settle{
  0%{opacity:0;transform:translate(var(--dx,0),var(--dy,0))}
  22%{opacity:1;transform:translate(var(--dx,0),var(--dy,0))}
  100%{opacity:1;transform:translate(0,0)}
}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes appear{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes rise{from{opacity:.8;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes slide{from{opacity:.8;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}
@keyframes fade{from{opacity:.8}to{opacity:1}}
@keyframes rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fill{from{opacity:.8;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@keyframes settle-colour{from{color:var(--accent)}to{color:var(--ink)}}
@keyframes arrive{from{opacity:.8;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes wipe{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes drift{from{translate:-28px}to{translate:0}}
@keyframes drift-r{from{translate:28px}to{translate:0}}
@keyframes word{from{opacity:.62}to{opacity:1}}

/* where each point starts before it lines up (user units of the drawing) */
.lattice .p1{--dx:-34px;--dy:-58px}
.lattice .p2{--dx:22px;--dy:-41px}
.lattice .p3{--dx:-12px;--dy:-66px}
.lattice .p4{--dx:48px;--dy:-30px}
.lattice .p5{--dx:-52px;--dy:18px}
.lattice .p6{--dx:16px;--dy:-24px}
.lattice .p7{--dx:38px;--dy:26px}
.lattice .p8{--dx:-20px;--dy:-36px}
.lattice .p9{--dx:-44px;--dy:-14px}
.lattice .p10{--dx:30px;--dy:34px}
.lattice .p11{--dx:-8px;--dy:-28px}
.lattice .p12{--dx:56px;--dy:12px}
.lattice .p13{--dx:-36px;--dy:40px}
.lattice .p14{--dx:12px;--dy:22px}
.lattice .p15{--dx:-26px;--dy:52px}
.lattice .p16{--dx:44px;--dy:-18px}
.lattice .p17{--dx:-50px;--dy:62px}
.lattice .p18{--dx:24px;--dy:46px}
.lattice .p19{--dx:-14px;--dy:70px}
.lattice .p20{--dx:40px;--dy:54px}

/* ================= R8: drawn depth =================
   Everything below is new in R8. The static rules are the final, still state; movement is in the
   motion block at the end, inside the same two tests the page already uses. */

/* soft points: the hero's points, far away and out of focus. Filled with a gradient, no filter. */
.b0,.b1{stop-color:var(--point)}
.a0,.a1{stop-color:var(--accent)}
.b1,.a1{stop-opacity:0}

/* a soft band behind every strand, across the section's top rule, inside the empty padding */
.soft{position:absolute;left:0;top:-32px;width:min(80vw,340px);height:64px;pointer-events:none;opacity:.5;
  mask-image:linear-gradient(90deg,#000 25%,transparent),linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-composite:intersect}
.soft-r{left:auto;right:0;transform:scaleX(-1)}
/* the first band stays below its rule, so the first screen is as it was */
.soft-b{top:0;height:32px;mask-image:linear-gradient(90deg,#000 25%,transparent),linear-gradient(#000 40%,transparent)}

/* the column field: only where the heading has a column to itself (1024 and up) */
.head-col{display:flex;flex-direction:column;min-width:0}
.colfield{display:none}

/* what I review: a rail down the five rows, a point at each numeral, ending in a node on the next rule */
.areas{position:relative}
.area{position:relative}
.area::before{content:"";position:absolute;left:-8px;top:0;width:1px;height:100%;background:var(--line);transform-origin:center top}
.area:last-child::before{height:calc(100% + 56px)}
.num{position:relative}
.num::before{content:"";position:absolute;left:-11px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.areas::after{content:"";position:absolute;left:-14px;bottom:-63px;width:13px;height:13px;box-sizing:border-box;border:1.5px solid var(--accent);border-radius:50%;
  background:radial-gradient(circle,var(--accent) 0 2px,var(--ground) 2.4px)}

/* the modal: the email choice only. The meeting choice stays in the markup, hidden from everyone, until booking is live
   (his decision 8 in the change brief of 2026-11-12). */
.choices{gap:0}
.choice-soon{display:none}

/* sticky header. Not on very short windows. */
.site-head{position:sticky;top:0;z-index:5}
html{scroll-padding-top:72px}
@media (max-height:559px){
  .site-head{position:static;z-index:auto}
  html{scroll-padding-top:0}
}

@media (min-width:601px){
  .soft{top:-56px;height:112px;width:min(70vw,520px)}
  .soft-b{top:0;height:56px}
  .area::before{left:-17px}
  .area:last-child::before{height:calc(100% + 80px)}
  .num::before{left:-20px}
  .areas::after{left:-23px;bottom:-87px}
  html{scroll-padding-top:88px}
}
@media (min-width:601px) and (max-height:559px){html{scroll-padding-top:0}}

/* not sticky where the hero drawing's top row reaches the header's lower rule (R7.3 draws the points over the rule there;
   a sticky header is a positioned box and would paint over them). Measured: widths 1000 and 1023 at heights up to 730;
   the range here is wider on purpose. In it the header is the R7.3 one. */
@media (min-width:901px) and (max-width:1023px) and (max-height:767px){
  .site-head{position:static;z-index:auto}
  html{scroll-padding-top:0}
}

@media (min-width:1024px){
  .soft{top:-80px;height:160px;width:min(58vw,760px)}
  .soft-b{top:0;height:80px}
  .area:last-child::before{height:calc(100% + 104px)}
  .areas::after{bottom:-111px}
  .head-col{align-self:stretch;gap:40px}
  .colfield{display:block;position:relative;flex:1 1 auto;min-height:140px;margin-left:calc(-32px - max(0px,(100vw - 1200px)/2));
    mask-image:linear-gradient(90deg,#000 30%,transparent 97%),linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-composite:intersect}
  .cf{position:absolute;left:0;top:0;width:100%;height:100%}
  .cf-far{opacity:.4}
  .cf-near{opacity:.6}
  /* the generated still behind the drawn field. This rule and still.webp are the whole of it: remove both and the field is drawn only. */
  .colfield{background:url(still.webp) left center/cover no-repeat}
}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* soft bands and fields move less than the strand in front of them: two depths */
    .soft{animation:soft-in linear both,far linear both;animation-timeline:view();animation-range:entry 0px entry 260px,cover}
    .soft-r{animation-name:soft-in,far-r}
    .cf-far{animation:far-c linear both;animation-timeline:view();animation-range:cover}
    .cf-near{animation:near-c linear both;animation-timeline:view();animation-range:cover}
    /* the rail draws down each row as the row passes the lower third of the window; its point lights as it does */
    .area::before{animation:grow linear both;animation-timeline:view(block 0% 35%);animation-range:entry 0% entry 100%}
    .num::before{animation:lit linear both;animation-timeline:view(block 0% 35%);animation-range:entry 0% entry 100%}
    .areas::after{animation:appear linear both;animation-timeline:view(block 0% 35%);animation-range:entry 0% entry 100%}
  }
  @supports (animation-timeline:scroll()){
    /* a hairline on the header's lower edge that fills with the page and ends in the hero's ring */
    .site-head{overflow-x:clip}
    /* it rests off to the left: on a page that cannot scroll (the 404 page) the timeline is inactive and nothing shows */
    .site-head::after{content:"";position:absolute;left:0;bottom:-5px;width:100%;height:9px;pointer-events:none;translate:-100%;
      background:radial-gradient(circle at calc(100% - 5px) 50%,var(--accent) 0 1.5px,var(--ground) 1.7px 2.9px,var(--accent) 3.1px 4.1px,transparent 4.5px),
        linear-gradient(var(--accent),var(--accent)) left center/calc(100% - 9px) 1px no-repeat;
      animation:progress linear both;animation-timeline:scroll(root)}
    /* no hairline where the header is not sticky */
    @media (max-height:559px),(min-width:901px) and (max-width:1023px) and (max-height:767px){
      .site-head{overflow-x:visible}
      .site-head::after{content:none}
    }
  }
}
@keyframes soft-in{from{opacity:0}to{opacity:.5}}
@keyframes far{from{translate:-10px -10px}to{translate:0 10px}}
@keyframes far-r{from{translate:10px -10px}to{translate:0 10px}}
@keyframes far-c{from{translate:-8px -8px}to{translate:8px 8px}}
@keyframes near-c{from{translate:-40px 12px}to{translate:24px -12px}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes lit{from{background-color:var(--edge)}to{background-color:var(--accent)}}
@keyframes progress{from{translate:-100%}to{translate:0}}