/* Eric McDermott · Refined concept (Home, About, Topics, keynote, Inquire)
   One system: black for the stage and bold statements, white for reading.
   Every drawn mark is a stand-in for Eric's own (ids M1–M16, see marks.html). */
:root{
  --black:#060707;
  --black-2:#0E1010;
  --white:#FBFBF8;
  --chalk:#F2F1EA;
  --ink:#141515;

  /* the six keynote colours (from Transit Line); bright on black only */
  --coral:#FA7878; --lemon:#FAFA5A; --spring:#96FA78; --sky:#8BCDED; --amber:#FAA03C; --lilac:#CE9AF0;
  /* the same hues, deep enough for text and marks on white */
  --coral-ink:#C23B3B; --lemon-ink:#8A7A00; --spring-ink:#2F7A1F; --sky-ink:#1F6E96; --amber-ink:#A85A06; --lilac-ink:#7B45B0;

  /* lemon's ink, a step deeper so white body text on it still reads (5.6:1) */
  --lemon-deep:#756800;

  --display:"Archivo",system-ui,sans-serif;
  --read:"Instrument Sans",system-ui,-apple-system,sans-serif;

  --gut:clamp(1.25rem,5vw,5rem);
  --wrap:76rem;
  --measure:38rem;
  --sec:clamp(6rem,16vh,11rem);
  --ease:cubic-bezier(.16,1,.3,1);
  /* the cloud is drawn 105.49% wide (viewBox 2555×692), so its height grows with the viewport */
  --cloud-h:calc(105.49vw * 692 / 2555);
}

/* tone: each section sets its own ground and ink */
.dark{--bg:var(--black);--fg:var(--chalk);--muted:#A9ACAA;--rule:#262A29;--tbc-bg:#1B1E1D;--tbc-fg:#C9CAC5;color-scheme:dark}
.light{--bg:var(--white);--fg:var(--ink);--muted:#4D5150;--rule:#DEDEDA;--tbc-bg:#EFEFEA;--tbc-fg:#4D5150;color-scheme:light}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--black);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--read);font-size:clamp(1.0625rem,1rem + .25vw,1.2rem);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
p{margin:0 0 1.15rem}
h1,h2,h3{margin:0;font-weight:700;text-wrap:balance}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.nw{white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--lemon);color:var(--black);padding:.6rem .9rem;font-weight:600;text-decoration:none}
.skip:focus{top:1rem}

/* ---------- type ---------- */
.display{
  font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 700;
  font-size:clamp(2.8rem,1rem + 6.2vw,7.4rem);line-height:.96;letter-spacing:-.032em;
}
@media (max-width:30rem){.display{font-variation-settings:"wdth" 106,"wght" 700;letter-spacing:-.025em}}
.h2{
  font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 680;
  font-size:clamp(1.9rem,1.1rem + 2.4vw,3.4rem);line-height:1.04;letter-spacing:-.022em;
}
h3{font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 660;font-size:1.3rem;line-height:1.2;letter-spacing:-.01em}

/* ---------- sections ---------- */
.sec{position:relative;background:var(--bg);color:var(--fg);padding-block:var(--sec)}
.sec + .sec.light,.sec.light + .sec.light{padding-top:var(--sec)}
.sec-head{max-width:46rem;margin-bottom:clamp(3rem,7vh,5rem)}
.sec-head p{color:var(--muted);margin:1.25rem 0 0;max-width:var(--measure)}

/* ---------- HERO ---------- */
.hero{
  position:relative;z-index:2;background:var(--black);color:var(--chalk);overflow-x:clip;
  /* the footage fills the first screen; the cloud line sits at the fold and its ground runs on into the page */
  height:calc(100svh + var(--cloud-h) * .1);min-height:40rem;
}
.hero-video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:60% 40%;background:#000}
/* legibility: darken the left and the top, keep Eric bright */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,#000b 0,#0000 9rem),
    linear-gradient(90deg,#000d 0%,#000a 24%,#0003 44%,#0000 58%)}

.top{position:absolute;inset:0 0 auto;z-index:5;color:var(--chalk);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.4rem var(--gut)}
.brand{font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 700;font-size:1.15rem;letter-spacing:-.01em;text-decoration:none;margin:0}
.nav ul{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.2rem);list-style:none;margin:0;padding:0}
.nav a{font-family:var(--display);font-variation-settings:"wdth" 96,"wght" 600;font-size:.95rem;text-decoration:none;padding:.4rem 0;position:relative}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;border-radius:2px;transform:rotate(-1deg)}
.nav .inq a{background:var(--lemon);color:var(--black);padding:.55rem 1.1rem}
.nav .inq a::after{display:none}
.menu-btn{display:none;align-items:center;gap:.5rem;background:#0008;color:inherit;border:1px solid #F2F1EA55;padding:.5rem .8rem;font:600 .9rem/1 var(--display);cursor:pointer}
.menu-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

.hero-copy{
  position:absolute;left:var(--gut);right:var(--gut);
  /* sit in the clear footage above the cloud's highest bump */
  bottom:calc(var(--cloud-h) * .78 + clamp(1rem,3vh,2.5rem));
  /* the copy holds the left third; the footage gets the rest */
  max-width:calc(36vw - var(--gut));
}
.hero-copy h1{color:#fff;text-shadow:0 2px 30px #0006;font-size:clamp(2.8rem,.4rem + 3.7vw,5.6rem)}
.hero-sub{
  margin:clamp(1.2rem,2.6vh,2rem) 0 0;max-width:30rem;
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 500;
  font-size:clamp(1.25rem,1rem + 1vw,1.9rem);line-height:1.25;color:#F2F1EAE6;
}

/* M2: the underline under "actionable" */
.ul{position:relative;display:inline-block}
/* M2: Eric's loop underline, kept in proportion and hung from just above the baseline. It hangs about
   an em below the line, so the headline it's in leaves that much room before what follows. */
h1:has(> .nw > .ul > .ul-mark){margin-bottom:1.05em}
.ul-mark{position:absolute;left:-3%;top:72%;width:106%;height:auto;color:var(--lemon);--mk-w:clamp(4px,.07em,7px);pointer-events:none}

/* ---------- Eric's drawn marks (.mk) ----------
   His traced strokes. site.js redraws each as a filled outline: an even weight in px (--mk-w) at any size
   or stretch, tapered where a stroke starts or ends on its own, full width where it meets another.
   data-draw="load" draws it on in his pen order; without it the mark simply sits there.
   With no script, the <use> shows the plain strokes. */
.mk{overflow:visible;stroke-width:var(--mk-w,3px)}
.mk use{fill:none;stroke:currentColor;stroke-width:var(--mk-w,3px);stroke-linecap:round;stroke-linejoin:round}
.mk-def path{vector-effect:non-scaling-stroke}
.mk-src{fill:none;stroke:none}
.mk-ink{fill:currentColor}
.anim .mk[data-draw] use{visibility:hidden}
@keyframes draw{to{stroke-dashoffset:0}}

.vid-toggle{position:absolute;right:var(--gut);top:5rem;z-index:5;background:#0007;color:#F2F1EA;border:1px solid #F2F1EA44;font:600 .75rem/1 var(--display);letter-spacing:.04em;padding:.45rem .7rem;cursor:pointer}
.vid-toggle:hover{border-color:#F2F1EAaa}

/* M1: Eric's cloud line. Ground = the white page that follows */
.cloud{position:absolute;left:-1.98%;bottom:-3px;width:105.49%;max-width:none;height:auto;pointer-events:none;overflow:visible;clip-path:inset(0 0 2px 0)}
.cloud .ground{fill:var(--white)}
.cloud .l-dark{fill:#2B2D2C}
.cloud .l-mid{fill:#9A9C99}
.cloud .l-light{fill:#C9CAC5}
.cloud-m{display:none}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:6px;background:var(--white);z-index:3}

/* ---------- testimonials (Eric's speech bubble, M4, above each quote) ---------- */
.quote{position:relative;margin:0;max-width:52rem}
.quote blockquote{margin:0}
.quote blockquote p{
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 560;
  font-size:clamp(1.5rem,1.1rem + 1.4vw,2.4rem);line-height:1.18;letter-spacing:-.015em;margin:0;text-wrap:balance;
}
.quote--lg{max-width:64rem}
.quote--lg blockquote p{font-size:clamp(1.8rem,1.1rem + 2.6vw,3.6rem);line-height:1.1;letter-spacing:-.022em}
.quote--sm blockquote p{font-size:clamp(1.35rem,1.05rem + 1vw,2rem)}
.quote figcaption{margin-top:1.4rem;font-size:.95rem;line-height:1.45;color:var(--muted);max-width:34rem}
.quote figcaption b{display:block;color:var(--fg);font-weight:600}
.q-mark{display:none}

/* a small sketch of Eric's bubble hangs above the quote, which keeps its own quotation marks. Sized by
   height (--q-h) so his round oval and his wide cloud (picked in the review panel) carry the same weight. */
[data-quote="marks"] .q-mark{display:block;width:fit-content;margin-bottom:1.1rem;color:var(--q-c,currentColor);--q-h:clamp(2.8rem,2.2rem + 2vw,4rem)}
.q-mark .mk{display:none;height:var(--q-h);width:auto;--mk-w:2px}
[data-bubble="oval"] .q-mark .q-oval,[data-bubble="cloud"] .q-mark .q-cloud{display:block}
.light .q-mark{--q-c:var(--ink)}
.dark .q-mark{--q-c:var(--lemon)}

/* ---------- WHY ---------- */
.sec--why{padding-top:clamp(3rem,8vh,6rem)}
[data-line="links"] .sec--why{padding-top:clamp(7rem,16vh,9.5rem)} /* room for line B's first arrow */
.why-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--measure));gap:clamp(2rem,6vw,7rem);align-items:start}
.prose p{color:var(--muted)}
.prose .lede{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.45;color:var(--fg)}
.prose .strong{color:var(--fg);font-weight:600}

/* ---------- STATEMENT over a SketchMap (M12) ---------- */
.sec--statement{overflow:hidden;padding-block:clamp(8rem,22vh,14rem);text-align:center}
.sketchmap{position:absolute;inset:-4% -2%;background:url(assets/sketchmap/sketchmap-placeholder.png) center/cover no-repeat;opacity:.13;pointer-events:none}
.statement{
  position:relative;font-family:var(--display);font-variation-settings:"wdth" 116,"wght" 700;
  font-size:clamp(2.2rem,1rem + 4.6vw,5.6rem);line-height:1;letter-spacing:-.03em;max-width:18ch;margin-inline:auto;
}
.statement-sub{position:relative;margin:1.6rem 0 0;font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 500;font-size:clamp(1.2rem,1rem + .8vw,1.7rem);color:var(--muted)}

/* ---------- METHOD: every why falls into line ----------
   Eric's eight whys, scattered, align into one tree as the figure scrolls through the screen (site.js).
   The aligned drawing is the markup, so without JS or with reduced motion it simply shows. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.path{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.5rem,6vw,7rem);align-items:center}
.path-copy p{color:var(--muted);max-width:30rem;margin:1.5rem 0 0}
.path-art{margin:0;width:100%;max-width:34rem;justify-self:center}
.path-art svg{display:block;width:100%;height:auto;overflow:visible}
/* his pen over his pink highlighter, which multiplies over the rings as it does in the drawing */
.why-hl path,.why-pen path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.why-hl path{stroke:#FA92DA;mix-blend-mode:multiply}
.why-pen path{stroke:#623A52}

/* ---------- TOPICS: 2 × 3 (1 × 6 on phones), each card filled with its colour; each card opens its keynote in full ----------
   Two grounds, picked in the review panel: the deep hue with white text (default), or the bright hue with ink. */
.topics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
/* line C runs between the cards, so it needs real gaps */
[data-line="route"] .topics{gap:clamp(3.5rem,8vh,5rem) clamp(3rem,5vw,4.5rem)}
.topics li{--t-bg:var(--cd);--t-fg:#FFF;--t-muted:#FFFFFFDB}
[data-cards="bright"] .topics li{--t-bg:var(--c);--t-fg:var(--ink);--t-muted:#141515CC}
.topics a{display:flex;flex-direction:column;align-items:flex-start;height:100%;text-decoration:none;
  padding:clamp(1.9rem,3vw,2.9rem) clamp(1.5rem,3vw,2.7rem) clamp(1.6rem,2.6vw,2.4rem);background:var(--t-bg);color:var(--t-fg);
  transition:transform .35s var(--ease),filter .35s var(--ease)}
.topics a:hover{transform:translateY(-3px);filter:brightness(1.07)}
.topics a:focus-visible{outline-color:var(--chalk);outline-offset:5px;border-radius:0}
.topics h3{font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 720;font-size:clamp(1.9rem,1.25rem + 1.9vw,3rem);line-height:1.02;letter-spacing:-.024em;color:inherit}
.topics p{color:var(--t-muted);margin:.9rem 0 1.1rem;max-width:32rem}
.topics .for{display:block;font-size:.9rem;line-height:1.45;font-weight:600;color:var(--t-fg);max-width:32rem}
.kn-more{display:inline-flex;align-items:center;gap:.55rem;margin-top:auto;padding-top:1.6rem;color:var(--fg);font:600 .74rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.topics .kn-more{color:var(--t-fg)}
.kn-more svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;overflow:visible;transition:transform .3s var(--ease)}
.topics a:hover .kn-more svg,.topics a:focus-visible .kn-more svg{transform:rotate(90deg)}

/* ---------- KEYNOTE DIALOG: the long form, scrolls inside itself, ends at Book Eric ---------- */
.kn-dlg{width:min(48rem,calc(100vw - 2rem));max-width:none;max-height:min(56rem,calc(100dvh - 2rem));margin:auto;padding:0;border:0;border-top:6px solid var(--cb);
  background:var(--bg);color:var(--fg);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 24px 80px #0008}
.kn-dlg::backdrop{background:#060707d9;backdrop-filter:blur(3px)}
html:has(.kn-dlg[open]){overflow:hidden}
.anim .kn-dlg[open]{animation:rise .45s var(--ease)}
.anim .kn-dlg[open]::backdrop{animation:fade .3s ease}
@keyframes fade{from{opacity:0}}
.kn-in{min-height:100%;padding:0 clamp(1.4rem,5vw,3.6rem) clamp(2.5rem,5vw,3.6rem)}
.kn-bar{position:sticky;top:0;z-index:2;display:flex;justify-content:flex-end;height:0;margin-right:calc(clamp(1.4rem,5vw,3.6rem) * -1 + .75rem)}
.kn-x{flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;margin-top:.75rem;padding:0;border:1px solid var(--rule);border-radius:50%;background:var(--bg);color:var(--fg);cursor:pointer}
.kn-x:hover{border-color:currentColor}
.kn-x svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;overflow:visible;transform:rotate(45deg)}
.kn-dlg .eyebrow{margin:0 0 1.2rem;padding-top:clamp(2.2rem,5vw,3.2rem)}
.kn-t{font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 690;font-size:clamp(2rem,1.3rem + 2.4vw,3.2rem);line-height:1.02;letter-spacing:-.024em;padding-right:2.5rem}
.kn-deck{margin:1rem 0 0;font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 560;font-size:clamp(1.2rem,1rem + .7vw,1.55rem);line-height:1.28;color:var(--c);text-wrap:balance}
.kn-body{margin-top:clamp(1.8rem,4vw,2.6rem);max-width:var(--measure)}
.kn-body p{color:var(--muted);text-wrap:pretty}
.kn-body p:first-child{color:var(--fg)}
.kn-lists{display:grid;gap:clamp(2.2rem,5vw,3rem);margin-top:clamp(2.2rem,5vw,3rem)}
.kn-lists h3{margin-bottom:.9rem;color:var(--c);font:600 .78rem/1.4 var(--display);letter-spacing:.14em;text-transform:uppercase}
.kn-ul{list-style:none;margin:0;padding:0}
.kn-ul li{padding:.95rem 0;border-top:1px solid var(--rule);color:var(--muted);font-size:1rem;line-height:1.5}
.kn-ul li:last-child{border-bottom:1px solid var(--rule)}
.kn-ul b{display:block;margin-bottom:.15rem;color:var(--fg);font-family:var(--display);font-variation-settings:"wdth" 102,"wght" 640;font-weight:inherit;font-size:1.08rem;line-height:1.3}
.kn-end{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2rem;margin-top:clamp(2.4rem,5vw,3.2rem)}
@media (max-width:40rem){
  .kn-dlg{width:100vw;height:100dvh;max-height:none;margin:0;box-shadow:none}
}

/* ---------- TESTIMONIALS: three up on a paper band (one column on small screens) ---------- */
/* (the extra selector outranks the default section spacing) */
.sec.sec--voices{--bg:#ECEBE3}
.sec.light.sec--voices,.sec + .sec.light.sec--voices{padding-block:clamp(4.5rem,11vh,7rem)}
.voices{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.75rem)}
.voices > li{display:flex}
.voice{position:relative;flex:1;display:flex;flex-direction:column;margin:0;padding:clamp(1.8rem,2.6vw,2.6rem) clamp(1.4rem,2.2vw,2.2rem);background:var(--v-bg,#fff);color:var(--fg);text-align:center}
/* each card its own ground (picked in the review panel): black, white and lemon, one of each per band in a
   different order; or the six keynote colours (--hue on each card); or all white */
[data-voices="tones"] .voice[data-tone="ink"]{--v-bg:var(--black);--fg:var(--chalk);--muted:#A9ACAA;--rule:#2A2E2D;color-scheme:dark}
[data-voices="tones"] .voice[data-tone="ink"] .q-mark{--q-c:var(--lemon)}
[data-voices="tones"] .voice[data-tone="lemon"]{--v-bg:var(--lemon);--muted:#3E3F2A;--rule:rgba(20,21,21,.18)}
[data-voices="hues"] .voice{--v-bg:var(--hue);--muted:rgba(20,21,21,.76);--rule:rgba(20,21,21,.18)}
.voice-q{position:relative;flex:1}
.voice blockquote{margin:0}
.voice blockquote p{margin:0;font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 520;font-size:clamp(1.1rem,1rem + .4vw,1.32rem);line-height:1.34;letter-spacing:-.005em;text-wrap:pretty}
.voice blockquote i{font-style:normal;font-variation-settings:"wdth" 100,"wght" 680}
.voice figcaption{margin-top:3.4rem;border-top:1px solid var(--rule);font-size:.88rem;line-height:1.45;color:var(--muted)}
/* the speaker's face (LinkedIn photo, in greyscale so nine different photos sit together) straddles the rule;
   initials stand in until a photo is supplied */
.voice figcaption .v-face{display:grid;place-items:center;width:3.75rem;height:3.75rem;margin:-1.875rem auto .85rem;border-radius:50%;overflow:hidden;background:color-mix(in srgb,var(--fg) 10%,var(--v-bg,#fff));box-shadow:0 0 0 5px var(--v-bg,#fff);color:var(--fg);font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 680;font-size:1.05rem;letter-spacing:.02em}
.v-face img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.voice figcaption b{display:block;margin-bottom:.15rem;color:var(--fg);font-family:var(--display);font-variation-settings:"wdth" 102,"wght" 660;font-weight:inherit;font-size:1.05rem}
.voice figcaption span{display:block}
[data-quote="marks"] .voice .q-mark{--q-h:2.6rem;margin:0 auto 1.2rem}

/* unfold: each card swings down from its top edge like a folded sheet as it comes into view, a shadow lifting
   off it as it flattens; then the words settle and the face pops in. site.js arms it; --d staggers the row. */
.voice::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(6,7,7,.05),rgba(6,7,7,.5));opacity:0}
.anim .voices > li.is-armed{perspective:1300px}
.anim .voices > li.is-armed .voice{transform-origin:50% 0;transform:rotateX(-96deg);opacity:0}
.anim .voices > li.is-armed .voice::after{opacity:1}
.anim .voices > li.is-armed .voice > *{opacity:0;transform:translateY(.7rem)}
.anim .voices > li.is-armed .v-face{transform:scale(.35)}
.anim .voices > li.is-in .voice{transform:none;opacity:1;transition:transform 1.05s cubic-bezier(.2,.8,.25,1.04) var(--d,0s),opacity .2s linear var(--d,0s)}
.anim .voices > li.is-in .voice::after{opacity:0;transition:opacity .9s var(--ease) calc(var(--d,0s) + .1s)}
.anim .voices > li.is-in .voice > *{opacity:1;transform:none;transition:opacity .6s var(--ease) calc(var(--d,0s) + .5s),transform .8s var(--ease) calc(var(--d,0s) + .5s)}
.anim .voices > li.is-in .v-face{transform:none;transition:transform .6s cubic-bezier(.3,1.5,.5,1) calc(var(--d,0s) + .8s)}

/* ---------- PROOF ---------- */
.proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,7rem);align-items:start}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:0}
.facts li{padding:1.1rem 0;border-top:1px solid var(--rule);color:var(--muted);font-size:1rem;line-height:1.5}
.facts li:last-child{border-bottom:1px solid var(--rule)}
.facts b{display:block;color:var(--fg);font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 650;font-size:1.15rem}
.quote--stat{margin-top:clamp(8rem,18vh,12rem)}
.stat{font-family:var(--display);font-variation-settings:"wdth" 120,"wght" 760;font-size:clamp(4rem,2rem + 6vw,7.5rem);line-height:.9;letter-spacing:-.04em;margin:0 0 1rem}
[data-quote="marks"] .quote--stat .q-mark{display:none}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(2rem,6vw,7rem);align-items:start}
.faq-list{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.35rem 0;font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 600;font-size:clamp(1.05rem,1rem + .3vw,1.25rem);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;transition:transform .3s var(--ease)}
.faq summary svg .v{transition:opacity .2s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details[open] summary svg .v{opacity:0}
.faq .a{padding:0 0 1.6rem;max-width:var(--measure);color:var(--muted)}
.tbc{display:inline-block;background:var(--tbc-bg);color:var(--tbc-fg);font-size:.88rem;line-height:1.45;padding:.35rem .6rem;border-left:2px solid var(--lemon-ink)}
.who{list-style:none;margin:0;padding:0}
.who li{padding:.3rem 0 .3rem 1rem;border-left:3px solid var(--c);margin-bottom:.4rem}
.who b{color:var(--fg);font-weight:600}

/* ---------- CLOSE ---------- */
.sec--close{padding-bottom:clamp(8rem,20vh,13rem)}
.close{max-width:60rem}
.display--close{font-size:clamp(2.6rem,1rem + 5vw,6rem)}
.close p{color:var(--muted);margin:1.6rem 0 2.4rem;max-width:30rem}
.btn{display:inline-flex;align-items:center;gap:.8rem;background:var(--lemon);color:var(--black);text-decoration:none;font-family:var(--display);font-variation-settings:"wdth" 96,"wght" 650;font-size:1.05rem;padding:1.05rem 1.6rem;line-height:1.2}
.btn svg{width:1.6em;aspect-ratio:44/24;height:auto;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn:focus-visible{outline-color:var(--lemon)}

/* ---------- footer ---------- */
.foot{background:var(--black);color:var(--chalk);border-top:1px solid #262A29;padding-block:3rem 4rem}
.foot-in{display:grid;grid-template-columns:auto 1fr auto;gap:1rem 3rem;align-items:baseline}
.foot ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;font-size:.95rem}
.foot a{text-decoration:none}.foot a:hover{text-decoration:underline}
.foot-tag{margin:0;color:#A9ACAA;font-size:.95rem}
.foot-meta{grid-column:1 / -1;margin:1.5rem 0 0;color:#7B807A;font-size:.85rem}

/* ---------- the drawn line (M5) ---------- */
main{position:relative}
.route{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:4;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* one line, two inks: black where it crosses white, white where it crosses black */
.route-ink .on-light{stroke:var(--ink);color:var(--ink)}
.route-ink .on-dark{stroke:var(--chalk);color:var(--chalk)}
.route path{stroke-width:3}
.route .head{stroke-width:3}
[data-line="off"] .route{display:none}
/* the thread needs a lane to the left of the copy */
@media (max-width:56rem){
  [data-line="thread"] .sec .wrap,[data-line="route"] .sec--proof .wrap,[data-line="route"] .sec--close .wrap{padding-left:calc(var(--gut) + 1.6rem)}
}
/* the button moves over to make room for Eric's arrow into it: always for the looped arrow, which sets off from
   under the thread, and for the hook where there's little margin left of the thread */
:is([data-line="thread"],[data-line="route"])[data-arrow="loop"] .sec--close .btn{margin-left:5rem}
[data-line="links"] .sec--close .btn{margin-left:clamp(6rem,15vw,11rem)} /* room for line B's squiggle arrow into the button */
@media (max-width:72rem){
  :is([data-line="thread"],[data-line="route"])[data-arrow="hook"] .sec--close .btn{margin-left:2.5rem}
}
@media (max-width:40rem){
  :is([data-line="thread"],[data-line="route"])[data-arrow="hook"] .sec--close .btn{margin-left:1.75rem}
}

/* ---------- review panel (prototype) ---------- */
.review{position:fixed;right:1rem;bottom:1rem;z-index:50;font:500 .85rem/1.4 var(--read);color:var(--ink)}
.review-btn{background:var(--white);color:var(--ink);border:1px solid #BDBDB8;padding:.55rem .85rem;font:600 .8rem/1 var(--read);cursor:pointer;box-shadow:0 4px 18px #0003;float:right}
.review-panel{clear:both;margin-bottom:.5rem;width:17.5rem;background:var(--white);border:1px solid #BDBDB8;box-shadow:0 8px 30px #0004;padding:1rem 1.1rem;position:absolute;right:0;bottom:2.6rem}
.review fieldset{border:0;margin:0 0 .9rem;padding:0}
.review legend{font-weight:700;padding:0;margin-bottom:.35rem}
.review label{display:flex;gap:.5rem;align-items:center;padding:.18rem 0;cursor:pointer}
.review .chk{margin-bottom:.6rem}
.review-note{font-size:.78rem;color:#4D5150;margin:0;border-top:1px solid #DEDEDA;padding-top:.7rem}

/* "Label Eric's marks": outline every stand-in with its inventory id */
[data-marks="on"] [data-mark]{outline:2px dashed #E0218A;outline-offset:3px}
[data-marks="on"] span[data-mark],[data-marks="on"] figure[data-mark]{position:relative}
[data-marks="on"] span[data-mark]::after,[data-marks="on"] figure[data-mark]::after,[data-marks="on"] div.sketchmap::after{content:attr(data-mark);position:absolute;top:-.6rem;right:-.6rem;background:#E0218A;color:#fff;font:700 .65rem/1 var(--read);padding:.2rem .3rem;letter-spacing:.02em;text-shadow:none;z-index:6}
[data-marks="on"] div.sketchmap{opacity:.3}
[data-marks="on"] div.sketchmap::after{top:calc(4% + 1rem);right:auto;left:calc(2% + 1rem);font-size:.8rem;content:"M12 SketchMap background (placeholder: SketchMap Financial)"}

/* ---------- motion: finished is the default, JS only rewinds ---------- */
.anim .hero-copy h1,.anim .hero-sub{animation:rise 1s var(--ease) both}
.anim .hero-sub{animation-delay:.25s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

/* ---------- responsive ---------- */
@media (max-width:56rem){
  .why-grid,.path,.proof,.faq{grid-template-columns:minmax(0,1fr)}
  .voices{grid-template-columns:minmax(0,1fr);max-width:36rem;margin-inline:auto}
  .path-art{justify-self:start}
  .foot-in{grid-template-columns:1fr}
}
/* portrait screens: the hero is sized to the footage, not the screen.
   Across the reel's shots Eric stands centre to right of centre, so the crop leans that way
   (near-square on phones and tablets) to keep him in frame. */
@media (max-aspect-ratio:1/1){
  .hero{height:calc(min(150vw,72svh) + var(--cloud-h) * .1);min-height:0}
  .hero-video{object-position:58% 50%}
  .hero-copy{max-width:none}
  .hero-copy h1{font-size:clamp(2.8rem,1rem + 6.2vw,7.4rem)}
  .hero::before{background:linear-gradient(180deg,#000b 0,#0000 7rem),linear-gradient(0deg,#000d 0%,#0009 38%,#0000 62%)}
}
/* phones: the hero is only as tall as the headline needs, so the crop stays wide enough to keep Eric in frame;
   the headline sits over the darkened stage floor and the cloud line cuts the footage below it */
@media (max-width:40rem){
  :root{--cloud-h:calc(108.56vw * 450 / 1737);--frame:110vw}
  .hero{height:auto;min-height:0;padding:calc(var(--frame) * .58) var(--gut) calc(var(--cloud-h) * .7 + .9rem)}
  .hero-video{object-position:58% 50%}
  .hero::before{background:linear-gradient(180deg,#000b 0,#0000 6rem),linear-gradient(0deg,#000e 0,#000c 30%,#0000 62%)}
  .vid-toggle{top:auto;bottom:calc(var(--cloud-h) * .7 + 1rem)}
  .hero-copy{position:relative;left:auto;right:auto;bottom:auto;max-width:none}
  .hero-copy h1{font-size:clamp(2.2rem,10.6vw,3.2rem)}
  .hero-sub{font-size:1.1rem;margin-top:.8rem}
  .cloud-d{display:none}
  .cloud-m{display:block;left:-3.75%;width:108.56%}
  .js .menu-btn{display:inline-flex}
  .js .nav ul{display:none}
  .js .top[data-open] .nav ul{display:flex;position:absolute;right:var(--gut);top:calc(100% - .4rem);flex-direction:column;align-items:stretch;gap:0;min-width:12rem;background:var(--black-2);border:1px solid #262A29;padding:.5rem 1rem}
  .js .top[data-open] .nav a{display:block;padding:.8rem 0}
  .js .top[data-open] .nav .inq a{margin:.4rem 0 .3rem;text-align:center}
  .topics{grid-template-columns:minmax(0,1fr)}
  .review-panel{width:min(17.5rem,calc(100vw - 2rem))}
}

/* =====================================================================
   INNER PAGES: About, Topics, Team Amplifiers®, Inquire
   A black page head with the title (the bold statement), then the same
   white/black sections as Home. The cloud line stays on the Home hero only.
   ===================================================================== */
.page-head{background:var(--bg);color:var(--fg);padding:clamp(8.5rem,20vh,12rem) 0 clamp(5rem,12vh,8rem)}
.display--page{font-size:clamp(2.7rem,1rem + 5.2vw,6.2rem)}
.deck{margin:clamp(1.2rem,2.6vh,1.8rem) 0 0;max-width:34rem;font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 500;
  font-size:clamp(1.2rem,1rem + .9vw,1.8rem);line-height:1.28;color:#F2F1EAE0}
.head-note{margin:1.4rem 0 0;max-width:var(--measure);color:var(--muted)}
.crumb{display:inline-flex;align-items:center;gap:.55rem;margin:0 0 2.2rem;color:var(--muted);text-decoration:none;
  font:600 .78rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.crumb svg{width:1.5rem;aspect-ratio:44/24;height:auto;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transform:scaleX(-1)}
.crumb:hover{color:var(--fg)}
.ul--lemon .ul-mark{color:var(--lemon)}
.anim .page-head h1,.anim .page-head .deck{animation:rise 1s var(--ease) both}
.anim .page-head .deck{animation-delay:.2s}

/* a quiet link with Eric's small arrow (M6) */
.more{display:inline-flex;align-items:center;gap:.6rem;color:var(--fg);text-decoration:none;
  font-family:var(--display);font-variation-settings:"wdth" 98,"wght" 620;font-size:1rem;line-height:1.3}
.more svg{flex:none;width:1.55em;aspect-ratio:44/24;height:auto;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transition:transform .3s var(--ease)}
.more:hover span,.more:focus-visible span{text-decoration:underline;text-decoration-thickness:1px}
.more:hover svg{transform:translateX(4px)}
.sec-head .more{margin-top:1.6rem}
.proof .more{margin-top:2rem}
.light .btn{background:var(--ink);color:var(--white)}
.light .btn:focus-visible{outline-color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2.4rem}

/* ---------- ABOUT: Eric on the TEDx stage, then his record as badges ---------- */
/* the photo fills the head at its own shape (3:2) up to a screen high; Eric stands left, the title sits in the dark curtain on the right, above the TEDx letters */
.ab-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-start;
  height:min(100svh,66.67vw);min-height:36rem;padding:clamp(6.5rem,16vh,11rem) 0 4rem}
.ab-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:30% 35%;background:#000}
.ab-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,#000a 0,#0000 8rem),
    linear-gradient(270deg,#0009 0%,#0005 38%,#0000 56%),
    linear-gradient(0deg,var(--black) 0,#0000 6rem)}
.ab-hero-in{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ab-copy{grid-column:2;padding-left:clamp(0rem,3vw,3rem)}
.ab-copy .deck{max-width:28ch;margin-bottom:2.2rem}
.anim .ab-copy .btn{animation:rise 1s var(--ease) .35s both}

/* badges: the numbers Eric gives for his record, four across */
.ab-badges{padding-block:clamp(2.5rem,6vh,4rem) var(--sec)}
.badges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.75rem,1.4vw,1.25rem)}
.badges li{display:flex;flex-direction:column;padding:clamp(1.4rem,2.2vw,2rem);background:var(--black-2);border:1px solid var(--rule);border-radius:12px}
.badges .n{display:block;margin-bottom:.8rem;font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 700;font-weight:inherit;
  font-size:clamp(2.4rem,1.6rem + 2vw,3.6rem);line-height:.95;letter-spacing:-.03em;color:var(--fg);font-variant-numeric:lining-nums}
.badges .t{font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 640;font-size:1.08rem;line-height:1.25;color:var(--fg);text-wrap:balance}
.badges .s{margin-top:.35rem;font-size:.95rem;line-height:1.4;color:var(--muted);text-wrap:pretty}

/* biography: a long read with notes in the margin */
.bio{display:grid;grid-template-columns:minmax(8rem,12rem) minmax(0,var(--measure));gap:0 clamp(2rem,5vw,5rem);justify-content:center}
.bio > .h2{grid-column:2;margin-bottom:clamp(2.4rem,5vh,3.4rem)}
.bio .row{display:contents}
.bio .note{grid-column:1;justify-self:end;display:flex;align-items:flex-start;gap:.6rem;margin:0;padding-top:.25rem;text-align:right;
  font-family:var(--display);font-variation-settings:"wdth" 94,"wght" 620;font-size:1rem;line-height:1.3;color:var(--fg)}
.bio .note svg{flex:none;width:1.5rem;aspect-ratio:44/24;height:auto;margin-top:.12rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.bio .row > p:not(.note){grid-column:2;margin-bottom:1.6em;color:var(--muted);text-wrap:pretty}
.bio .row.first > p:not(.note){font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.45;color:var(--fg)}
.bio .row.first > .note{padding-top:.5rem}
.pull,.bio-end{grid-column:2;margin:clamp(1.5rem,4vh,2.5rem) 0 clamp(3rem,7vh,4.5rem);font-family:var(--display);color:var(--fg);text-wrap:balance}
.pull{font-variation-settings:"wdth" 104,"wght" 600;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.3rem);line-height:1.15;letter-spacing:-.016em}
.bio-end{margin-bottom:0;font-variation-settings:"wdth" 110,"wght" 680;font-size:clamp(1.6rem,1.1rem + 1.8vw,2.7rem);line-height:1.08;letter-spacing:-.022em}

/* Why Eric? */
.why-eric{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--measure));gap:clamp(2rem,6vw,7rem);align-items:start}
.say{margin:0 0 1.6rem;font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 600;font-size:clamp(1.4rem,1.05rem + 1.3vw,2.2rem);line-height:1.18;letter-spacing:-.015em;color:var(--fg);text-wrap:balance}
.why-eric .prose p{color:var(--muted)}
.why-eric .cta-row{margin-top:2.6rem}

/* ---------- TOPICS: the Home keynote cards and dialogs as a page ---------- */
.more--quiet{color:var(--muted)}
.more--quiet:hover{color:var(--fg)}
.page-head--topics + .sec--topics-page{padding-top:0}
.topics > li{scroll-margin-top:2rem}
/* without JS a card's link shows its long form in place, under the cards */
html:not(.js) .kn-dlg:target{display:block;position:static;width:auto;max-height:none;box-shadow:none}

/* ---------- KEYNOTE PAGE ---------- */
.eyebrow{display:flex;align-items:center;gap:.7rem;margin:0 0 1.5rem;color:var(--muted);font:600 .78rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.page-head .cta-row{margin-top:2.6rem}
.head-for{margin:0;color:var(--muted);font-size:1rem}
.head-for b{color:var(--c);font:600 .74rem/1.4 var(--display);letter-spacing:.14em;text-transform:uppercase;margin-right:.5rem}
.kp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--measure));gap:clamp(2rem,6vw,7rem);align-items:start}
.prose .turn{margin:2rem 0;font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 650;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.3rem);line-height:1.12;letter-spacing:-.018em;color:var(--fg);text-wrap:balance}
.q3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem clamp(2rem,4vw,4rem);counter-reset:q}
.q3 li{padding-top:1.4rem;border-top:1px solid var(--rule)}
.q3 b{display:block;margin-bottom:.9rem;color:var(--muted);font:600 .78rem/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase}
.q3 p{margin:0;font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 640;font-size:clamp(1.6rem,1.1rem + 1.6vw,2.6rem);line-height:1.08;letter-spacing:-.02em;color:var(--fg);text-wrap:balance}
.lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(4rem,8vh,5rem) clamp(2rem,6vw,7rem)}
.lists h2{margin-bottom:1.8rem;font-size:clamp(1.6rem,1.1rem + 1.4vw,2.4rem)}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{padding:1rem 0;border-top:1px solid var(--rule);color:var(--muted);font-size:1.02rem;line-height:1.5}
.ticks li:last-child{border-bottom:1px solid var(--rule)}

/* ---------- KIT: photos to download, bios to copy ---------- */
.btn-meta{font:500 .85rem/1 var(--read);opacity:.7}
.kit-jump{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;list-style:none;margin:2.4rem 0 0;padding:0}
.kit-jump a{color:var(--muted);font:600 .78rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.kit-jump a:hover{color:var(--fg)}
#photos,#bios,#intro,#titles{scroll-margin-top:1rem}
.sec-head .tbc{margin:.4rem 0 0}
.sec.light + .sec.light.kit-bios{padding-top:clamp(2rem,5vh,3.5rem)} /* follows Photos on the same ground */

.ph-group + .ph-group{margin-top:clamp(3.5rem,8vh,5rem)}
.ph-group > h3{margin-bottom:1.4rem;padding-top:1rem;border-top:1px solid var(--rule)}
.ph-grid{display:grid;gap:2.6rem clamp(1.5rem,3vw,2.6rem);list-style:none;margin:0;padding:0}
.ph-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:52rem}
.ph-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ph-frame{aspect-ratio:1;background:#ECEBE3;overflow:hidden;margin-bottom:1.1rem}
.ph-frame--wide{aspect-ratio:16/9}
.ph-frame img{width:100%;height:100%;object-fit:cover}
.ph--cut .ph-frame img{object-fit:contain;object-position:50% 100%}
.ph-name{margin:0;font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 640;font-size:1.15rem;line-height:1.25}
.ph-use{margin:.2rem 0 0;color:var(--muted);font-size:.95rem}
.ph .tbc{margin:.8rem 0 0}
/* downloads: Eric's small arrow (M6) turned to point down */
.dl{list-style:none;margin:.9rem 0 0;padding:0;border-top:1px solid var(--rule)}
.dl a{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .7rem;padding:.65rem 0;border-bottom:1px solid var(--rule);text-decoration:none;
  font-family:var(--display);font-variation-settings:"wdth" 98,"wght" 620;font-size:1rem;line-height:1.3}
.dl svg{flex:none;align-self:center;width:1.05rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transform:rotate(90deg);transition:transform .3s var(--ease)}
.dl small{font:400 .88rem/1.3 var(--read);color:var(--muted)}
.dl a:hover span{text-decoration:underline;text-decoration-thickness:1px}
.dl a:hover svg{transform:rotate(90deg) translateX(3px)}

/* bios: the length and its use in the margin, the text to copy beside it */
.kb{display:grid;grid-template-columns:minmax(10rem,15rem) minmax(0,var(--measure));gap:1rem clamp(2rem,5vw,5rem);padding-block:2.4rem;border-top:1px solid var(--rule)}
.kb-meta h3{font-size:1.45rem}
.kb-n{margin:.35rem 0 0;font:600 .74rem/1.4 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kb-use{margin:.6rem 0 0;color:var(--muted);font-size:.95rem;line-height:1.45}
.kb-text p{margin-bottom:1em;text-wrap:pretty}
.kb-text p:last-child{margin-bottom:0}
.kb-full summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.7rem;font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 620;font-size:1.05rem}
.kb-full summary::-webkit-details-marker{display:none}
.kb-full summary svg{flex:none;width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;transition:transform .3s var(--ease)}
.kb-full summary svg .v{transition:opacity .2s}
.kb-full[open] summary{margin-bottom:1.4rem}
.kb-full[open] summary svg{transform:rotate(180deg)}
.kb-full[open] summary svg .v{opacity:0}
.copy{display:inline-flex;align-items:center;margin-top:1.4rem;min-width:6.5rem;justify-content:center;background:none;color:var(--fg);border:1px solid currentColor;cursor:pointer;
  padding:.6rem 1.1rem;font-family:var(--display);font-variation-settings:"wdth" 96,"wght" 640;font-size:.95rem;line-height:1.2}
.copy:hover{background:var(--fg);color:var(--bg)}
.copy[data-done]{background:var(--fg);color:var(--bg)}
.kb-tbc{margin:1rem 0 0}

/* the stage introduction is spoken, so it's set big */
.kit-intro-note{margin:1.2rem 0 0;color:var(--muted)}
.kit-intro-text p{margin:0 0 .9em;font-family:var(--display);font-variation-settings:"wdth" 102,"wght" 520;font-size:clamp(1.3rem,1.05rem + .9vw,1.85rem);line-height:1.3;letter-spacing:-.01em;color:var(--fg);text-wrap:pretty}
.kit-intro-text p:last-child{font-variation-settings:"wdth" 108,"wght" 680;margin-bottom:0}
.kit-intro .tbc{display:table;margin-top:1.4rem}

/* keynote titles, as a program would list them */
.kt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2rem,5vw,5rem);list-style:none;margin:0;padding:0}
.kt li{padding:1.3rem 0 1.4rem 1.2rem;border-top:1px solid var(--rule);box-shadow:inset 3px 0 0 var(--c)}
.kt h3{font-size:1.35rem}
.kt p{margin:.4rem 0 0;color:var(--muted);max-width:30rem}

@media (max-width:56rem){
  .ph-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kb{grid-template-columns:minmax(0,1fr)}
  .kt{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:36rem){
  .ph-grid--2,.ph-grid--3{grid-template-columns:minmax(0,1fr)}
}

/* ---------- INQUIRE ---------- */
/* the head: Eric on stage fills the right and fades left into the black under the title; the quote card hangs --lap below the seam */
.inq-head,.inq-head + .sec{--lap:clamp(3.5rem,8vh,5rem)}
.inq-head{position:relative;z-index:2;display:flex;align-items:flex-end;min-height:min(56rem,max(40rem,92svh));padding-bottom:0}
.inq-photo{position:absolute;top:0;right:0;bottom:0;z-index:-1;width:min(68%,78rem);height:100%;object-fit:cover;object-position:42% 30%;
  -webkit-mask-image:linear-gradient(90deg,#0000 0,#000 38%),linear-gradient(0deg,#0000 0,#000 28%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#0000 0,#000 38%),linear-gradient(0deg,#0000 0,#000 28%);mask-composite:intersect}
.anim .inq-photo{animation:fade 1.4s var(--ease) both}
.inq-head .wrap{width:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2.5rem,6vh,4rem) 2rem}
.inq-copy,.inq-card{grid-column:1}
.inq-copy{text-shadow:0 1px 1.5rem #0009}
.inq-head .deck{max-width:28rem}
.inq-card{max-width:34rem;margin:0 0 calc(-1 * var(--lap));padding:clamp(1.5rem,2.4vw,2.1rem) clamp(1.4rem,2.4vw,2.2rem);
  background:var(--lemon);--fg:var(--ink);--muted:#3E3F2A;--rule:rgba(20,21,21,.18);color:var(--fg);box-shadow:0 1.2rem 2.4rem -1.2rem rgba(6,7,7,.45)}
.anim .inq-card{animation:rise 1s var(--ease) .35s both}
.inq-card blockquote{margin:0}
.inq-card blockquote p{margin:0;font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 560;font-size:clamp(1.15rem,1.02rem + .45vw,1.4rem);line-height:1.3;letter-spacing:-.006em;text-wrap:pretty}
[data-quote="marks"] .inq-card .q-mark{--q-c:var(--ink);--q-h:2.2rem;margin-bottom:.9rem}
.inq-card figcaption{display:flex;align-items:center;gap:.9rem;margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--rule);font-size:.88rem;line-height:1.4;color:var(--muted)}
.inq-card figcaption b{display:block;color:var(--fg);font-family:var(--display);font-variation-settings:"wdth" 102,"wght" 660;font-weight:inherit;font-size:1rem}
.inq-card .v-face{flex:none;width:3rem;height:3rem;border-radius:50%;overflow:hidden}
.inq-card .v-face img{width:100%;height:100%;object-fit:cover}
.inq-head + .sec{padding-top:calc(var(--lap) + clamp(3.5rem,9vh,6rem))}
/* the FAQ gets its own warm-grey band (the Home voices ground), after the form's last quote */
.sec.inq-faq{--bg:#ECEBE3;--rule:rgba(20,21,21,.16)}
.inq{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(3rem,7vw,8rem);align-items:start}
.fs{border:0;margin:0 0 clamp(3.5rem,7vh,4.5rem);padding:0;min-width:0}
.fs legend{padding:0;margin:0 0 1.6rem;font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 660;font-size:clamp(1.4rem,1.15rem + .7vw,1.8rem);line-height:1.15;letter-spacing:-.012em}
.fs legend small{display:block;margin-top:.35rem;font:400 1rem/1.4 var(--read);letter-spacing:0;color:var(--muted)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 1.5rem}
.field--full{grid-column:1 / -1}
.field label{display:block;margin-bottom:.45rem;font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 600;font-size:1rem;line-height:1.3}
.opt{font:400 .9rem var(--read);color:var(--muted)}
.field input,.field select,.field textarea{display:block;width:100%;margin:0;padding:.8rem .9rem;border:1px solid #808382;border-radius:0;background:#fff;color:var(--ink);font:400 1.05rem/1.4 var(--read)}
.field textarea{resize:vertical;min-height:8rem}
.field select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.4 9.2 C 8 11.6, 10 13.4, 12.2 15.4 C 14.4 13.2, 16.4 11.2, 18.8 8.8' fill='none' stroke='%23141515' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .8rem center/1.15rem}
.field ::placeholder{color:#6B6F6D}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:0}
.field[data-invalid] input{border:2px solid var(--coral-ink);padding:calc(.8rem - 1px) calc(.9rem - 1px)}
.err{display:none;margin:.5rem 0 0;color:var(--coral-ink);font-size:.95rem;font-weight:600;line-height:1.4}
.field[data-invalid] .err{display:block}
.submit{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem}
.btn[type=submit]{border:0;cursor:pointer;font:inherit;font-family:var(--display);font-variation-settings:"wdth" 96,"wght" 650;font-size:1.05rem}
.form-status{margin:0;color:var(--coral-ink);font-weight:600;font-size:.98rem}
.form-status:empty{display:none}
.near-submit{margin-top:clamp(4rem,9vh,5.5rem)}
.aside{display:grid;gap:0;padding-top:.2rem}
.aside h2{font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 660;font-size:clamp(1.4rem,1.15rem + .7vw,1.8rem);line-height:1.15;letter-spacing:-.012em;margin-bottom:1rem}
.aside > p{color:var(--muted)}
.aside .quote{margin-top:clamp(3rem,6vh,4rem)}
.quote--xs blockquote p{font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem);line-height:1.22}
[data-quote="marks"] .quote--xs .q-mark{--q-h:2.4rem;margin-bottom:.9rem}
.confirm h2{font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 690;font-size:clamp(2.2rem,1.3rem + 3vw,3.8rem);line-height:1;letter-spacing:-.025em}
.confirm h2:focus{outline:none}
.confirm > p{color:var(--muted);margin:1.2rem 0 2rem;max-width:30rem}
.summary{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:0;margin:0 0 2rem;max-width:36rem}
.summary dt,.summary dd{padding:.8rem 0;border-top:1px solid var(--rule)}
.summary dt{color:var(--muted);padding-right:2rem;font-size:.95rem}
.summary dd{margin:0;overflow-wrap:anywhere}
.proto{display:block;background:var(--tbc-bg);color:var(--tbc-fg);font-size:.95rem;line-height:1.5;padding:.8rem 1rem;border-left:2px solid var(--lemon-ink);max-width:36rem;margin:0 0 2.2rem}
.btn--ghost{background:none!important;color:var(--fg)!important;border:1px solid currentColor;padding:.95rem 1.4rem;cursor:pointer;font:inherit;font-family:var(--display);font-variation-settings:"wdth" 96,"wght" 650}

/* ---------- inner pages: responsive ---------- */
/* tablets and phones: the photo runs full width over the title, fading into the black */
@media (max-width:64rem){
  .ab-hero{display:block;height:auto;min-height:0;padding:0 0 1rem}
  .ab-bg{position:relative;z-index:-2;height:auto;aspect-ratio:3/2;max-height:72svh;object-position:24% 30%;
    -webkit-mask-image:linear-gradient(180deg,#000 62%,#0000 98%);mask-image:linear-gradient(180deg,#000 62%,#0000 98%)}
  .ab-hero::before{background:linear-gradient(180deg,#000a 0,#0000 7rem)}
  .ab-hero-in{display:block;margin-top:-3rem}
  .ab-copy{padding-left:0}
  .badges{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:56rem){
  .why-eric,.kp-grid,.inq,.inq-head .wrap,.lists{grid-template-columns:minmax(0,1fr)}
  .q3{grid-template-columns:minmax(0,1fr)}
  .bio{grid-template-columns:minmax(0,1fr)}
  .bio > .h2,.bio .row > p:not(.note),.pull,.bio-end{grid-column:1}
  .bio .note{justify-self:start;text-align:left;padding:0;margin-bottom:.5rem;color:var(--muted)}
  .bio .row.first > .note{padding-top:0}
  .bio .note svg{display:none}
  .aside{border-top:1px solid var(--rule);padding-top:3rem}
  /* Inquire head: the photo runs full width on top, fading into the black over the title */
  .inq-head{display:flow-root;min-height:0;padding-top:clamp(4.5rem,12vw,5.5rem)}
  .inq-photo{position:relative;z-index:-1;width:100%;height:auto;aspect-ratio:4/3;max-height:70svh;object-position:40% 25%;
    -webkit-mask-image:linear-gradient(180deg,#000 60%,#0000 98%);mask-image:linear-gradient(180deg,#000 60%,#0000 98%)}
  .inq-head .wrap{display:block;margin-top:-3.5rem}
  .inq-card{margin-top:2.5rem}
}
/* phones: a portrait crop on Eric */
@media (max-width:48rem){
  .ab-bg{aspect-ratio:4/5}
  .ab-hero-in{margin-top:-5rem}
  .fields{grid-template-columns:minmax(0,1fr)}
}