/* =====================================================================
   HERO — the opening dot sequence. Copied verbatim from inter.css on
   3 September 2026 for the redesign. Jon: do not change this animation.
   Two numbers were adapted to the new header: the pull-up under the
   header and the sticky top (see the two lines marked REDESIGN).
   ===================================================================== */
/* =====================================================================
   THE OPENING SEQUENCE. One coral dot, alone, close up. Scroll: the
   camera pulls back, the dot becomes thousands, the interconnections
   appear, the crowd organises into the +, and the summit states its
   name. The ending words are real HTML in the document from frame
   zero — search engines and no-JavaScript readers get the finished
   frame; the scrub is only how a scrolling reader arrives at it.
   ===================================================================== */
/* 500vh: the sequence runs slowly, and the back third-plus of the
   scrub — about a viewport and a half — is a deliberate hold on the
   resolved + before the page releases. */
/* Click-to-play: the stage is one viewport tall — the sequence runs
   on a clock, not on scroll. (Jon, 2026-08-26.) */
.hero2 { position: relative; height: auto; }
/* The opening plays by itself. A click skips it, so the stage shows
   the pointer while it runs. (Jon and Jade, 2026-10-01.) */
.hero2[data-wait] .hero2-sticky { cursor: pointer; }
/* A dragged finger leads the dot. Vertical panning is left alone, so
   the page can always be scrolled away from. (Jon, 2026-08-27.) */
.hero2[data-wait] .hero2-sticky { touch-action: pan-y; }
/* The stage sits below the two bars (97px together; 93px on a phone),
   so the whole frame — cue included — fits the first viewport. */
/* The stage runs from under the top bar, behind the nav bar's 59px.
   During the opening that bar is clear, so the field fills the space
   instead of leaving a dead strip; afterwards the bar is opaque over a
   band the reader has already left. The pull-up is constant, so the
   page never shifts. (Jon, 2026-08-27.) */
.hero2 { margin-top: calc(-1 * var(--head-h)); } /* REDESIGN: was -59px */
.hero2-sticky { position: sticky; top: 0; height: 100svh; /* REDESIGN: was top 38px */
  overflow: clip;
  /* the atmosphere: pine vignette, dot-grid texture, a bloom high and
     a glow rising under the crowd — a stage, not a swatch */
  background:
    radial-gradient(150% 120% at 50% 42%, transparent 55%, rgba(11,21,19,.65) 100%),
    radial-gradient(rgba(168,215,192,.09) 1px, transparent 1.5px) 0 0 / 19px 19px,
    radial-gradient(1240px 780px at 76% 8%, var(--teal-lift), transparent 66%),
    radial-gradient(1040px 660px at 50% 116%, var(--teal-lift), transparent 68%),
    var(--ink-deep); }
@media (max-width: 640px) {
  .hero2-sticky { top: 0; height: 100svh; }
}
/* The words sit on their own ground: the field fades out under them so
   no dot ever crosses a letter. Stacked, that ground is the bottom of
   the stage; split, it is the right-hand half. */
.hero2-sticky::after { content: ""; position: absolute; left: 0; right: 0;
  bottom: 0; height: 66%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(16,43,53,.98) 0%,
    rgba(16,43,53,.96) 34%, rgba(16,43,53,.78) 62%,
    rgba(16,43,53,.3) 84%, transparent 100%);
  transition: opacity 1.4s ease; }
/* The ground the words will stand on is not laid until they are on
   their way. While the stage waits there is only the question and one
   dot, over an untouched field. (Jon, 2026-08-27.) */
.hero2[data-wait] .hero2-sticky::after { opacity: 0; }
.hero2 { overflow-x: clip; }
@media (max-width: 350px) { .hero2[data-landed] [data-hero-field] { opacity: .08 !important; } }
.hero2-end { z-index: 2; }

/* ---- the split hero, on roomy desktop screens ---------------------
   The mark holds the left of the stage and the words hold the right:
   one asymmetric spread rather than a centred stack. Nothing here uses
   transform — the sequence owns that property on .hero2-end.
   (Jon, 2026-08-27.) */
@media (min-width: 1100px) {
  .hero2-sticky::after { left: 44%; right: 0; top: 0; bottom: 0;
    height: auto;
    background: linear-gradient(to right, transparent 0%,
      rgba(16,43,53,.42) 22%, rgba(16,43,53,.82) 48%,
      rgba(16,43,53,.92) 72%, rgba(16,43,53,.94) 100%); }
  .hero2-sticky .hero2-end { left: 52%; right: var(--gutter);
    top: 0; bottom: 0; display: flex; flex-direction: column;
    justify-content: center; align-items: flex-start; text-align: left; }
  /* The short items carry the column, so they are given weight: the
     wordmark runs large enough to set the column's width, and the two
     one-line items each end in a rule that reaches the right edge, so
     nothing short is left hanging. (Jon, 2026-08-27.) */
  .hero2-sticky .hero2-end h1 { font-size: clamp(64px, 9vw, 140px);
    margin: 0; }
  .hero2-sticky .hero2-eyebrow { margin: 14px 0 0; }
  .hero2-sticky .hero2-line { margin: 16px 0 0; max-width: 30ch;
    text-wrap: pretty; }
  .hero2-sticky .hero2-line br { display: none; }
  /* the ticker's words are absolute, so the line must keep its width;
     the rule starts at a fixed column so it never jumps between
     pillars of different lengths */
  .hero2-sticky .hero2-cycle { margin: 24px 0 0; align-self: stretch;
    display: grid; grid-template-columns: 215px 1fr;
    align-items: center; gap: 22px; }
  .hero2-sticky .hero2-cycle span { width: 215px; }
  .hero2-sticky .hero2-cycle::after { content: ""; grid-column: 2;
    height: 1px; background: linear-gradient(to right,
      rgba(127,203,214,.5), rgba(127,203,214,.12)); }
  .hero2-sticky .hero2-payoff { margin: 24px 0 0; max-width: 34ch;
    grid-template-columns: auto 1fr; justify-items: start; }
  .hero2-sticky .hero2-payoff::before { display: none; }
  .hero2-sticky .hero2-end .btn { margin: 34px 0 0; padding: 16px 30px;
    font-size: var(--text-base); letter-spacing: .02em; }
}
.hero2-sticky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The prelude draws on its own canvas and the field waits unseen
   beneath it. When the prelude ends the two swap in one frame: the
   coral dot is already where the field's seed dot stands. */
/* The swap is a short cross-fade: the figure's lines go as the crowd
   that lies along them comes up. */
.hero2-prelude, [data-hero-field] { transition: opacity 480ms ease; }
.hero2:not([data-prelude]) .hero2-prelude { opacity: 0; pointer-events: none; }
.hero2[data-prelude] [data-hero-field] { opacity: 0; }
/* the first landing: the + comes up out of nothing as its dots gather */
.hero2[data-appear] [data-hero-field] { animation: heroAppear 1600ms ease-out both; }
@keyframes heroAppear { from { opacity: 0; } }
/* Others, already out there. Three quiet lights hold the far corners
   while the reader is still alone with one dot — independence is not
   an empty universe, only a distant one. They stand down as the crowd
   arrives. (Jon, 2026-08-27.) */
.hero2-orb { position: absolute; z-index: 1; pointer-events: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.85) 0%,
    rgba(255,255,255,.5) 32%, rgba(210,213,206,.16) 55%, transparent 72%);
  box-shadow: 0 0 26px 10px rgba(210,213,206,.09);
  opacity: .78; transition: opacity 1s ease; }
.hero2-orb--a { left: 11%; bottom: 16%;
  animation: heroOrb 26s ease-in-out infinite; }
.hero2-orb--b { left: 22%; bottom: 27%; width: 8px; height: 8px; opacity: .5;
  animation: heroOrb 34s ease-in-out infinite reverse; }
.hero2-orb--c { right: 14%; top: 26%; width: 10px; height: 10px; opacity: .62;
  animation: heroOrb 30s ease-in-out infinite; animation-delay: -12s; }
@keyframes heroOrb {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(16px, -22px); }
  50%  { transform: translate(-12px, -34px); }
  75%  { transform: translate(-20px, -9px); }
  100% { transform: translate(0, 0); }
}
.hero2-orb--d { right: 19%; bottom: 21%; width: 9px; height: 9px; opacity: .55;
  animation: heroOrb 38s ease-in-out infinite reverse; animation-delay: -20s; }
.hero2-orb--e { left: 7%; top: 11%; width: 6px; height: 6px; opacity: .4;
  animation: heroOrb 44s ease-in-out infinite; animation-delay: -31s; }
/* Eight more lights, so the first screen reads as a field rather than a
   single dot in the dark: the dots are what the picture is made of.
   (Jon, on the preview.) */
.hero2-orb--f { left: 30%; top: 18%; width: 7px; height: 7px; opacity: .46;
  animation: heroOrb 40s ease-in-out infinite; animation-delay: -6s; }
.hero2-orb--g { left: 16%; top: 40%; width: 5px; height: 5px; opacity: .36;
  animation: heroOrb 48s ease-in-out infinite reverse; animation-delay: -17s; }
.hero2-orb--h { left: 4%; bottom: 36%; width: 8px; height: 8px; opacity: .42;
  animation: heroOrb 33s ease-in-out infinite; animation-delay: -25s; }
.hero2-orb--i { left: 38%; bottom: 12%; width: 6px; height: 6px; opacity: .5;
  animation: heroOrb 36s ease-in-out infinite reverse; animation-delay: -9s; }
.hero2-orb--j { left: 26%; bottom: 42%; width: 5px; height: 5px; opacity: .34;
  animation: heroOrb 52s ease-in-out infinite; animation-delay: -33s; }
.hero2-orb--k { right: 8%; bottom: 34%; width: 7px; height: 7px; opacity: .4;
  animation: heroOrb 42s ease-in-out infinite reverse; animation-delay: -14s; }
.hero2-orb--l { right: 26%; top: 46%; width: 5px; height: 5px; opacity: .3;
  animation: heroOrb 50s ease-in-out infinite; animation-delay: -28s; }
.hero2-orb--m { left: 45%; top: 62%; width: 6px; height: 6px; opacity: .38;
  animation: heroOrb 46s ease-in-out infinite reverse; animation-delay: -21s; }
.hero2-orb--desktop { display: none; }
.hero2-orb--coral {
  background: radial-gradient(circle, rgba(244,154,128,.92) 0%,
    rgba(244,154,128,.5) 32%, rgba(232,111,81,.14) 56%, transparent 74%);
  box-shadow: 0 0 22px 8px rgba(232,111,81,.08);
}
/* Split, the right half belongs to the words: the lights keep to the
   half the mark lives in. */
@media (min-width: 1100px) {
  .hero2-orb--c { right: auto; left: 36%; }
  .hero2-orb--d { right: auto; left: 43%; }
  .hero2-orb--k { right: auto; left: 48%; }
  .hero2-orb--l { right: auto; left: 33%; }
  .hero2-orb--desktop {
    display: block;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    opacity: calc(var(--o) + .18);
    filter: drop-shadow(0 0 5px rgba(255,255,255,.3));
    animation: heroOrb var(--d) ease-in-out infinite var(--dir, normal);
    animation-delay: var(--delay);
  }
}
/* once the sequence runs, the crowd is the company */
.hero2:not([data-wait]) .hero2-orb { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hero2-orb { animation: none; } }
.hero2-end { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 7%;
  text-align: center; opacity: 0; transform: translateY(18px); pointer-events: none; }
/* The summit and its dates: bigger and brighter than the tagline
   beneath — the reader gets the facts without working for them. */
.hero2-eyebrow { font: 700 clamp(14px, 1.5vw, 19px)/1.2 var(--font-sans);
  letter-spacing: .18em; text-transform: uppercase; color: var(--mist);
  margin: 16px 0 0; max-width: none; }
.hero2-date { display: inline-block; white-space: nowrap; }
.hero2-end h1 { font-size: clamp(72px, 15vw, 104px); line-height: .9; }
.hero2-end h1 i { font-style: normal; color: var(--coral-tint); }
.hero2-end .btn { margin-top: 26px; }
.hero2-sub { margin-top: 20px; font: 700 var(--text-md)/1.4 var(--font-sans);
  color: var(--mist); letter-spacing: .01em; max-width: none; }
.hero2-sub b { color: #fff; }
/* The tagline sets up the five values; the values are the payload, so
   they are a list, not a run of full stops. (Jon, 2026-08-27.) */
.hero2-line { margin: 14px auto 0; max-width: 34ch;
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(18px, 1.8vw, 24px); line-height: 1.35; letter-spacing: -.01em;
  color: var(--mist); text-wrap: balance; }
.hero2-line br { display: none; }
@media (min-width: 721px) { .hero2-line br { display: inline; } }
/* The five pillars, one at a time: each swipes in, holds, and swipes
   out, so the hero names one pillar at a time instead of listing a
   block. The ticker gives the week a visual rhythm. Reduced motion gets
   them stacked and still.
   (Jon, 2026-08-27.) */
.hero2-cycle { position: relative; display: block; margin: 22px auto 0;
  height: 1.5em; padding: 0; max-width: none;
  font: 600 clamp(14px, 1.3vw, 17px)/1.5 var(--font-sans);
  letter-spacing: .22em; text-transform: uppercase; color: var(--teal-lt); }
.hero2-cycle span { position: absolute; left: 0; right: 0; top: 0;
  opacity: 0; will-change: transform, opacity;
  animation: heroCycle 6s cubic-bezier(.22,.61,.36,1) infinite;
  animation-delay: calc(var(--i) * 1.2s); }
/* Each familiar word gets enough time to read, plus a small overlap
   while the next word arrives. */
@keyframes heroCycle {
  0%    { opacity: 0; transform: translateX(26px); }
  3.6%  { opacity: 1; transform: translateX(0); }
  16.4% { opacity: 1; transform: translateX(0); }
  23.6% { opacity: 0; transform: translateX(-26px); }
  100%  { opacity: 0; transform: translateX(-26px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero2-cycle { height: auto; display: flex; flex-wrap: wrap;
    justify-content: center; gap: 6px 20px; }
  .hero2-cycle span { position: static; opacity: 1; animation: none;
    transform: none; }
}
/* The payoff: the last line of the hero, ruled off. The hairlines fade
   toward the gutters so nothing hard-stops at the edge, and the closing
   word carries the editorial emphasis.
   (Jon picked this, 2026-08-27.) */
.hero2-payoff { display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: clamp(16px, 2.4vw, 32px);
  margin: 26px auto 0; max-width: 38ch; }
.hero2-payoff::before, .hero2-payoff::after { content: ""; height: 1px;
  background: linear-gradient(to right, transparent, rgba(244,154,128,.55)); }
.hero2-payoff::after { background: linear-gradient(to left, transparent, rgba(244,154,128,.55)); }
.hero2-payoff span { font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(23px, 3.1vw, 42px); line-height: 1.1;
  letter-spacing: -.018em; color: var(--mist); white-space: nowrap; }
.hero2-payoff em { font-style: italic; color: var(--coral-mist); }
@media (max-width: 640px) {
  .hero2-payoff { grid-template-columns: 1fr; justify-items: center;
    gap: 13px; margin-top: 22px; max-width: none; }
  .hero2-payoff::before, .hero2-payoff::after { width: 64px;
    background: linear-gradient(to right, transparent, rgba(244,154,128,.55), transparent); }
  /* One line, always: the phrase is the beat, and a wrap breaks it. */
  .hero2-payoff span { font-size: clamp(21px, 6.1vw, 34px); }
}

/* Premium thesis study, 6 September 2026.
   The dotted plus is the visual proof. The thesis is the reason for
   gathering. Only the plus inside in+sights carries coral; resolution
   remains one cream word while an editorial italic and hairline reveal
   the solution already held inside it. */
.hero2-sticky .hero2-end {
  --hero-cream: #F4F1E9;
  --hero-mist: #D6DDD7;
  --hero-hairline: rgba(244,154,128,.34);
}
.hero2-sticky .hero2-end h1 {
  color: var(--hero-cream);
  font-weight: 500;
  letter-spacing: -.04em;
}
.hero2-sticky .hero2-eyebrow {
  font-family: var(--f-ui);
  font-weight: 500;
  color: var(--hero-mist);
  letter-spacing: .19em;
}
.hero2-thesis {
  margin: 0;
  color: var(--hero-cream);
  font-family: "Newsreader", var(--font-serif);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero2-insights,
.hero2-resolution { white-space: nowrap; }
.hero2-insights i {
  color: var(--coral-tint);
  font-style: normal;
  font-weight: 500;
}
.hero2-resolution,
.hero2-resolution span { color: inherit; }
.hero2-resolution span {
  position: relative;
  font-style: italic;
  font-weight: 480;
}
.hero2-resolution span::after {
  content: "";
  position: absolute;
  left: .01em;
  right: -.02em;
  bottom: -.075em;
  height: 1px;
  background: var(--teal-lt);
  opacity: .86;
}
.hero2-sticky .hero2-line {
  color: var(--hero-mist);
  font-weight: 500;
  letter-spacing: -.018em;
}
.hero2-sticky .hero2-cycle {
  color: var(--teal-lt);
  font-family: var(--f-ui);
  font-weight: 500;
}
.hero2-sticky .hero2-payoff span {
  color: var(--hero-mist);
  font-family: "Newsreader", var(--font-serif);
  font-weight: 450;
}
.hero2-sticky .hero2-payoff em {
  color: var(--teal-lt);
  font-weight: 450;
}
.hero2-sticky .hero2-end .btn {
  min-height: 48px;
  font-family: var(--f-ui);
  font-weight: 500;
  box-shadow: 0 12px 32px -18px rgba(232,111,81,.7);
}

/* Phone: a compact editorial stack. The thesis holds two deliberate
   beats while the mark keeps enough air to remain an image, not a logo. */
@media (max-width: 640px) {
  .hero2-sticky canvas {
    opacity: .92;
    transform: scale(.92);
  }
  .hero2-sticky .hero2-end {
    left: 22px;
    right: 22px;
    bottom: clamp(28px, 5.2svh, 44px);
  }
  .hero2-sticky .hero2-end h1 {
    font-size: clamp(66px, 20vw, 78px);
    line-height: .86;
  }
  .hero2-sticky .hero2-eyebrow {
    margin-top: 16px;
    font-size: 11px;
    line-height: 1.25;
    letter-spacing: .13em;
    white-space: nowrap;
  }
  .hero2-thesis {
    max-width: 335px;
    margin: 22px auto 0;
    font-size: clamp(26px, 7.25vw, 29px);
    line-height: 1;
  }
  .hero2-break-desktop { display: none; }
  .hero2-sticky .hero2-line {
    max-width: 29ch;
    margin-top: 21px;
    font-size: 16px;
    line-height: 1.24;
  }
  .hero2-sticky .hero2-cycle {
    margin-top: 16px;
    height: 1.4em;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: .18em;
  }
  .hero2-sticky .hero2-payoff {
    grid-template-columns: 46px auto 46px;
    gap: 13px;
    margin-top: 18px;
  }
  .hero2-sticky .hero2-payoff::before,
  .hero2-sticky .hero2-payoff::after { width: auto; }
  .hero2-sticky .hero2-payoff span { font-size: 22px; }
  .hero2-sticky .hero2-end .btn {
    margin-top: 22px;
    padding: 15px 24px;
  }
}

/* Tablet: intentionally taller and calmer than the phone. The + owns
   the first half; the words form a centred editorial colophon below. */
@media (min-width: 641px) and (max-width: 1099px) {
  .hero2-sticky .hero2-end {
    left: clamp(64px, 11vw, 96px);
    right: clamp(64px, 11vw, 96px);
    bottom: 5.2%;
  }
  .hero2-sticky .hero2-end h1 {
    font-size: clamp(86px, 13.5vw, 108px);
    line-height: .88;
  }
  .hero2-sticky .hero2-eyebrow {
    margin-top: 17px;
    font-size: 13px;
    line-height: 1.25;
    letter-spacing: .17em;
  }
  .hero2-thesis {
    max-width: 560px;
    margin: 27px auto 0;
    font-size: clamp(34px, 4.8vw, 40px);
    line-height: 1.01;
  }
  .hero2-break-desktop { display: none; }
  .hero2-sticky .hero2-line {
    margin-top: 24px;
    font-size: 18px;
  }
  .hero2-sticky .hero2-cycle {
    margin-top: 16px;
    font-size: 13px;
  }
  .hero2-sticky .hero2-payoff { margin-top: 21px; }
  .hero2-sticky .hero2-payoff span { font-size: 28px; }
  .hero2-sticky .hero2-end .btn {
    margin-top: 25px;
    padding: 15px 28px;
  }
}

/* Desktop: an editorial split, not two competing logos. The mark is
   monumental on the left; the thesis gets the strongest typographic
   voice on the right, with the identity and facts acting as context. */
@media (min-width: 1100px) {
  .hero2-sticky .hero2-end {
    left: 52%;
    right: clamp(52px, 5.2vw, 86px);
    top: 0;
    bottom: 0;
    justify-content: center;
  }
  .hero2-sticky .hero2-end h1 {
    font-size: clamp(88px, 8.2vw, 118px);
    line-height: .84;
  }
  .hero2-sticky .hero2-eyebrow {
    margin-top: 22px;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: .19em;
  }
  .hero2-thesis {
    margin-top: 36px;
    font-size: clamp(43px, 3.75vw, 54px);
    line-height: .92;
  }
  .hero2-sticky .hero2-line {
    margin-top: 34px;
    max-width: 34ch;
    font-size: 20px;
    line-height: 1.25;
  }
  .hero2-sticky .hero2-cycle {
    margin-top: 19px;
    grid-template-columns: 190px 1fr;
    gap: 18px;
    font-size: 13px;
  }
  .hero2-sticky .hero2-cycle span { width: 190px; }
  .hero2-sticky .hero2-payoff {
    margin-top: 26px;
    max-width: none;
    grid-template-columns: auto 1fr;
    gap: 24px;
  }
  .hero2-sticky .hero2-payoff span { font-size: 38px; }
  .hero2-sticky .hero2-end .btn {
    margin-top: 31px;
    padding: 15px 28px;
  }
}

/* Short stacked stages keep the approved wordmark and copy, but tighten
   their vertical rhythm so the resolved + has a real band above them. */
@media (max-width: 1099px) and (max-height: 700px) {
  .hero2-end { bottom: max(8px, 2svh); }
  .hero2-eyebrow { margin-top: 8px; }
  .hero2-line { margin-top: 8px; line-height: 1.15; }
  .hero2-cycle { margin-top: 8px; }
  .hero2-payoff { margin-top: 8px; }
  .hero2-end .btn { margin-top: 10px; }
}
@media (max-width: 640px) and (max-height: 700px) {
  .hero2-payoff { gap: 5px; }
}
/* A phone in landscape has only a few hundred vertical pixels. This is
   the same final frame, compacted just enough to remain wholly visible. */
@media (max-width: 1099px) and (max-height: 500px) and (orientation: landscape) {
  .hero2-end { bottom: 4px; }
  .hero2 h1, .hero2-end h1 { font-size: clamp(56px, 18svh, 72px); }
  .hero2-eyebrow { margin-top: 4px; font-size: 11px; line-height: 1.1;
    letter-spacing: .1em; white-space: nowrap; }
  .hero2-line { margin-top: 4px; font-size: 14px; line-height: 1.15;
    white-space: nowrap; }
  .hero2-cycle { margin-top: 4px; height: 1.35em;
    font-size: 12px; line-height: 1.35; }
  .hero2-payoff { grid-template-columns: 1fr auto 1fr; gap: 10px;
    margin-top: 4px; }
  .hero2-payoff::before, .hero2-payoff::after { width: auto; }
  .hero2-payoff span { font-size: clamp(18px, 5svh, 22px); }
  .hero2-end .btn { min-height: 44px; margin-top: 6px; padding: 14px 18px; }
}
/* The prelude's question holds the top of the stage, where the site's
   address usually stands; the address steps down to the foot, small
   and quiet, so the reader still knows where they are. Every size here
   is fluid, so the stage holds at any screen. (Jon, 2026-10-01.) */
.hero2-ask { position: absolute; left: var(--gutter); right: var(--gutter);
  top: clamp(14px, 2.4svh, 30px); z-index: 3; margin: 0; max-width: none;
  text-align: center; pointer-events: none;
  font-family: var(--font-serif); font-weight: 500; font-style: italic;
  font-size: clamp(23px, 1.5vw + 18px, 42px); line-height: 1.15; letter-spacing: -.015em;
  color: #fff; text-shadow: 0 1px 2px rgba(8,18,17,.55), 0 2px 26px rgba(8,18,17,.75);
  opacity: 0; transition: opacity 600ms ease; }
.hero2[data-prelude][data-asked] .hero2-ask { opacity: 1; transition-delay: 450ms; }
/* The opening is first said large, alone, in the centre of the stage:
   "You learned to be independent." Then, after a beat, the open
   question under it: "What comes next?", which sits a while. When the
   picture begins it all rises toward the top and fades, and the
   question settles there, smaller. (Jade and Jon, 2026-10-04; replaces
   "Can you see the difference?".) */
.hero2-ask-big { position: absolute; left: var(--gutter); right: var(--gutter); top: 44%;
  z-index: 3; margin: 0; max-width: none; text-align: center; text-wrap: balance;
  pointer-events: none; transform: translateY(-50%);
  font-family: var(--font-serif); font-weight: 500; font-style: italic;
  font-size: clamp(32px, 3vw + 22px, 76px); line-height: 1.08; letter-spacing: -.025em;
  color: #fff; text-shadow: 0 1px 2px rgba(8,18,17,.55), 0 2px 26px rgba(8,18,17,.75);
  opacity: 0; transition: opacity 900ms ease, transform 1200ms var(--ease-out); }
.hero2[data-prelude]:not([data-asked]) .hero2-ask-big { opacity: 1; }
.hero2-ask-big span { display: block; }
.hero2-ask-big__next { margin-top: .45em; color: var(--teal-lt);
  text-shadow: 0 0 2px rgba(127,203,214,.4), 0 2px 26px rgba(8,18,17,.75);
  opacity: 0; transform: translateY(.25em);
  transition: opacity 900ms ease, transform 900ms var(--ease-out); }
.hero2[data-prelude]:not([data-asked]) .hero2-ask-big__next { opacity: 1; transform: none;
  transition-delay: 1900ms; }
.hero2[data-asked] .hero2-ask-big { transform: translateY(calc(-50% - 36svh)) scale(.5); }
/* the address, under the name */
.hero2-brand { margin: .7em 0 0; max-width: none;
  font: 600 clamp(11px, .3vw + 10px, 14px)/1 var(--font-sans);
  letter-spacing: .26em; text-transform: uppercase; color: var(--mist); }
.hero2-brand span { color: var(--coral-tint); }
.hero2-brand + .hero2-thesis { margin-top: .7em; }
/* The tagline. "you" and "us all" carry it: italic, light teal, each on a
   hairline that fades at both ends. Light weight and open tracking
   keep it quiet and exact. (Jon, 2026-10-01.) */
.hero2-sticky .hero2-end .hero2-thesis { font-weight: 400; letter-spacing: -.028em; line-height: 1.04; }
.hero2-thesis em, .foot-tag em { font-style: italic; font-weight: 500; white-space: nowrap;
  color: var(--teal-lt); padding-bottom: .06em;
  background: linear-gradient(to right, rgba(127,203,214,0), rgba(127,203,214,.8) 18%,
    rgba(127,203,214,.8) 82%, rgba(127,203,214,0)) left bottom / 100% 1px no-repeat;
  text-shadow: 0 0 28px rgba(127,203,214,.28); }
/* only "us all" keeps the hairline (Jon, 2026-10-01) */
.hero2-thesis em:first-of-type, .foot-tag em:first-of-type { background: none; }
/* The pillar stories. One stage holds five cards and the tagline, all in
   one cell, so its height never changes. A card is three lines: the
   pain, the pillar's name, the want. inter.js brings the pain up first,
   then the want, then the name between them, then sends the card off to
   the left. Under the stage a bar counts them, like a player's. */
.hero2-story { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 2.2svh, 24px); margin-top: 1.3em; justify-items: center; }
/* minmax(0, 1fr): a long line wraps inside the stage instead of widening it */
.hero2-story__stage { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; width: 100%; }
.hero2-story__stage > * { grid-area: 1 / 1; }
/* The closing line stands in the middle of the stage when stacked. It
   leaves quickly, so it is gone before the first story comes up again,
   and arrives slowly. While it stands, "you" and "us all" pulse. */
.hero2-story .hero2-story__end { margin: 0; max-width: none; justify-self: center; text-align: center;
  opacity: 0; transform: translateY(8px);
  transition: opacity 380ms ease, transform 380ms ease; }
.hero2-story .hero2-story__end.is-on { opacity: 1; transform: none;
  transition: opacity 900ms ease, transform 900ms var(--ease-out); }
.hero2-story__end em { display: inline-block; }
.hero2-story.is-live .hero2-story__end.is-on em { animation: heroLit 2.2s ease-in-out infinite; }
.hero2-story.is-live .hero2-story__end.is-on em + br + em,
.hero2-story.is-live .hero2-story__end.is-on em:last-of-type { animation-delay: 1.1s; }
.hero2-story__card { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6em; visibility: hidden;
  transition: transform 700ms var(--ease-out), opacity 600ms ease; }
.hero2-story__card.is-on { visibility: visible; }
.hero2-story__card.is-out { transform: translateX(-38%); opacity: 0; }
.hero2-story__card p { margin: 0; max-width: none; }
.hero2-story__pain, .hero2-story__want { font-family: "Newsreader", var(--font-serif);
  font-size: clamp(19px, .6vw + 16.5px, 26px); line-height: 1.22; letter-spacing: -.012em;
  color: var(--hero-cream, #eef1ea); text-wrap: balance; }
.hero2-story__want { color: var(--mist); }
/* Captions. Each word waits unseen, then comes up in turn: it arrives
   bright, with a little light behind it, and settles to the line's own
   colour. The words a line turns on are italic and keep their light:
   white in the pain, light teal in the want. */
.hero2-story__card .w { display: inline-block; opacity: 0; }
.hero2-story__card.show-pain .hero2-story__pain .w,
.hero2-story__card.show-want .hero2-story__want .w {
  animation: heroWord 420ms var(--ease-out) both;
  animation-delay: calc(var(--w) * 75ms); }
.hero2-story__card .w.is-key { font-style: italic; font-weight: 500; }
.hero2-story__pain .w.is-key { color: #fff; text-shadow: 0 0 22px rgba(255,255,255,.35); }
.hero2-story__want .w.is-key { color: var(--teal-lt); text-shadow: 0 0 22px rgba(127,203,214,.4); }
@keyframes heroWord {
  0%   { opacity: 0; transform: translateY(.42em); filter: blur(3px); }
  45%  { opacity: 1; filter: blur(0); text-shadow: 0 0 18px rgba(255,255,255,.75); }
  100% { opacity: 1; transform: none; }
}
/* The pillar's name comes in between the two lines: wide and faint at
   first, it draws together and takes the light, with a hairline
   opening out on either side of it. */
.hero2-story__pillar { display: flex; align-items: center; justify-content: center; gap: .7em;
  font: 600 clamp(22px, 1.2vw + 17px, 36px)/1.15 var(--font-sans);
  letter-spacing: .6em; text-indent: .6em; text-transform: uppercase; color: var(--teal-lt);
  opacity: 0; transform: scale(.94);
  transition: opacity 700ms ease, transform 900ms var(--ease-out), letter-spacing 900ms var(--ease-out),
    text-indent 900ms var(--ease-out); }
.hero2-story__pillar::before, .hero2-story__pillar::after { content: ""; flex: 0 0 auto;
  width: clamp(18px, 6vw, 54px); height: 1px; background: currentColor; opacity: .55;
  transform: scaleX(0); transition: transform 900ms var(--ease-out) 250ms; }
.hero2-story__pillar::before { transform-origin: right; }
.hero2-story__pillar::after { transform-origin: left; }
.hero2-story__card.show-pillar .hero2-story__pillar { opacity: 1; transform: none;
  letter-spacing: .22em; text-indent: .22em; animation: heroName 2.4s ease-in-out 300ms 1; }
.hero2-story__card.show-pillar .hero2-story__pillar::before,
.hero2-story__card.show-pillar .hero2-story__pillar::after { transform: scaleX(1); }
@keyframes heroName {
  0%, 100% { text-shadow: 0 0 26px rgba(127,203,214,.35); }
  40%      { text-shadow: 0 0 16px rgba(127,203,214,.95), 0 0 46px rgba(127,203,214,.6); }
}
/* The bar, like a player's: one light teal dash for each story and one
   for the closing line. The dash playing fills over its own time
   (inter.js); the ones before it stand full. Each dash is a button: a
   thin line to the eye, a full 44px tall to the finger. (Jon,
   2026-10-03: back to the bar from the dots.) */
.hero2-story__bar { display: flex; gap: 6px; margin: -8px 0; }
.hero2-story__bar button { display: flex; align-items: center; width: clamp(28px, 7.4vw, 46px);
  height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  touch-action: manipulation; -webkit-appearance: none; appearance: none; }
.hero2-story__bar i { position: relative; display: block; width: 100%; height: 3px; overflow: hidden;
  border-radius: 2px; background: rgba(217, 221, 214, .24);
  transition: height 160ms ease, background 160ms ease; }
.hero2-story__bar button:hover i, .hero2-story__bar button:focus-visible i { height: 5px;
  background: rgba(217, 221, 214, .42); }
.hero2-story__bar button:focus-visible { outline: 2px solid var(--teal-lt); outline-offset: 2px; }
.hero2-story__bar b { position: absolute; inset: 0; background: var(--teal-lt);
  transform: scaleX(0); transform-origin: left; }
.hero2-story:not(.is-live) .hero2-story__bar { display: none; }
@media (prefers-reduced-motion: reduce) {
  /* still stories stand whole, every word in place */
  .hero2-story__card .w { opacity: 1; animation: none !important; }
  .hero2-story__card, .hero2-story__pillar, .hero2-story__pillar::before,
  .hero2-story__pillar::after { transition: none; animation: none !important; }
}
/* The two questions open the stories and are told exactly like them:
   the same lines, sizes, light and word-by-word arrival. Where a pillar
   card names its pillar, this one gives the answer, in the pillar
   name's own voice: teal capitals, tracked, between the two hairlines,
   set smaller so the whole sentence holds. (Jon, 2026-10-03.) */
.hero2-story__answer { font-size: clamp(13px, .45vw + 11px, 18px); text-wrap: balance;
  text-align: center; }
.hero2-story__answer { transition: opacity 1400ms ease, transform 1600ms var(--ease-out); }
/* The answer keeps one letter-spacing from first to last. A pillar name
   comes in wide and closes up; the answer did too, so a line that fits
   on one row at the end began on two and jumped. (Jon, 2026-10-04.) */
.hero2-story__answer,
.hero2-story__card.show-pillar .hero2-story__answer { letter-spacing: .18em; text-indent: .18em; }
/* One line wherever the screen has room for it (Jon, 2026-10-04). From
   600px up the answer never wraps: the hairlines beside it give way
   first, then the type steps down only as far as it must to fit the
   lockup's column (about 32 of its own em across, spacing and all). On a phone
   one line would be too small to read, so it keeps two. */
@media (min-width: 600px) {
  .hero2-end { container-type: inline-size; }   /* left and right are set: its width never comes from its content */
  .hero2-story__answer { white-space: nowrap;
    font-size: min(clamp(13px, .45vw + 11px, 18px), calc((100cqi - 26px) / 32)); }
  .hero2-story__answer::before, .hero2-story__answer::after { flex: 0 1 auto; min-width: 0; }
}
@media (min-width: 1100px) {
  .hero2-story__answer { text-align: left; }
  .hero2-story__answer,
  .hero2-story__card.show-pillar .hero2-story__answer { text-indent: 0; }
}
.hero2-story + .btn { margin-top: clamp(4px, 1svh, 12px); }
/* The last question, a card of its own after the closing line: one line
   in the display face, as large as the stage lets it stand on one line.
   The bulbs light round the ticket while it stands. At the end of the
   opening, the same question comes down from the ring into this place.
   (Jon, 2026-10-03.) */
.hero2-story__card--worth .hero2-story__pain { font: 600 clamp(28px, 2vw + 14px, 44px)/1.1 var(--f-display, "Cormorant Garamond", serif);
  letter-spacing: -.01em; white-space: nowrap; color: #fff; text-shadow: 0 2px 24px rgba(8, 18, 17, .75); }
.hero2-story__card--worth .hero2-story__pain .w.is-key { font-weight: 600; color: var(--teal-lt);
  text-shadow: 0 0 2px rgba(127, 203, 214, .55), 0 0 20px rgba(127, 203, 214, .7); }
/* On a wide screen the question takes all the room its column gives
   it, on one line. */
@media (min-width: 600px) {
  .hero2-story__card--worth .hero2-story__pain { font-size: min(clamp(28px, 2vw + 14px, 44px), calc(100cqi / 12.6)); }
}
/* While it stands, "worth to you?" breathes with light. */
.hero2-story__card--worth.is-on .hero2-story__pain .w.is-key {
  animation: heroWord 420ms var(--ease-out) both, heroWorthGlow 2.4s ease-in-out 1.2s infinite;
  animation-delay: calc(var(--w) * 75ms), 1.2s; }
.hero2-story__card--worth.is-on.is-arrived .hero2-story__pain .w.is-key {
  animation: heroWorthGlow 2.4s ease-in-out infinite !important; }
@keyframes heroWorthGlow {
  0%, 100% { text-shadow: 0 0 2px rgba(127, 203, 214, .55), 0 0 20px rgba(127, 203, 214, .7); }
  50%      { text-shadow: 0 0 6px rgba(127, 203, 214, .95), 0 0 34px rgba(127, 203, 214, .9), 0 0 64px rgba(127, 203, 214, .45); }
}
@media (prefers-reduced-motion: reduce) {
  .hero2-story__card--worth.is-on .hero2-story__pain .w.is-key,
  .hero2-story__card--worth.is-on.is-arrived .hero2-story__pain .w.is-key { animation: none !important; }
}
.hero2-story__card.is-arrived .w { opacity: 1; animation: none !important; }
@media (min-width: 1100px) {
  .hero2-story { justify-items: start; }
  /* split, the closing line lines up on the left with everything else in the lockup */
  .hero2-story .hero2-story__end { justify-self: start; text-align: left; }
  .hero2-story__end em { transform-origin: left center; }
  .hero2-story__pillar { justify-content: flex-start; text-indent: 0; }
  .hero2-story__pillar::before { display: none; }
  .hero2-story__card.show-pillar .hero2-story__pillar { text-indent: 0; }
}
@keyframes heroLit {
  0%, 100% { transform: scale(1); text-shadow: 0 0 28px rgba(127,203,214,.28); }
  50%      { transform: scale(1.07); text-shadow: 0 0 18px rgba(127,203,214,.95), 0 0 44px rgba(127,203,214,.55); }
}
/* The summit's details stand above the +, at the head of the stage,
   where the site's address used to be. inter.js brings them in with
   the name. They stay centred on the stage at every width. */
.hero2-sticky .hero2-eyebrow.hero2-top { position: absolute; z-index: 3; margin: 0;
  left: var(--gutter); right: var(--gutter); top: clamp(16px, 2.6svh, 32px);
  max-width: none; text-align: center; text-wrap: balance; opacity: 0;
  font-size: clamp(11px, .45vw + 9.5px, 15px); line-height: 1.4; letter-spacing: .08em;
  color: #eef1ea; text-shadow: 0 1px 14px rgba(8,18,17,.6); }
html:not(.js) .hero2-sticky .hero2-eyebrow.hero2-top { position: static; opacity: 1; }
/* Let the full description wrap above the mark on narrow screens. */
@media (max-width: 480px) {
  .hero2-sticky .hero2-eyebrow.hero2-top { left: 12px; right: 12px;
    font-size: clamp(9.5px, 2.75vw, 11px); letter-spacing: .04em; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .hero2-sticky .hero2-eyebrow.hero2-top { opacity: 1; }
}
/* After the + has formed, each line of the lockup opens out of a
   bubble: a small circle that widens until the whole line stands
   clear, one line after another. Without JavaScript, and for reduced
   motion, the lines simply stand. (Jon, 2026-10-01.) */
html.js .hero2:not([data-landed]) .hero2-end > * { opacity: 0; }
/* Fill backwards only: once a line has opened, nothing of the animation
   is left on it. A clip-path, filter or transform held on the row of
   buttons after the fact is one more thing between a finger and a link. */
.hero2[data-landed] .hero2-end > * {
  animation: heroBubble 950ms var(--ease-out) backwards;
  animation-delay: calc(var(--n, 0) * 160ms); }
.hero2-end > :nth-child(2) { --n: 1; } .hero2-end > :nth-child(3) { --n: 2; }
.hero2-end > :nth-child(4) { --n: 3; } .hero2-end > :nth-child(5) { --n: 4; }
.hero2-end > :nth-child(6) { --n: 5; } .hero2-end > :nth-child(7) { --n: 6; }
.hero2-end > :nth-child(8) { --n: 7; } .hero2-end > :nth-child(9) { --n: 8; }
@keyframes heroBubble {
  0%   { opacity: 0; clip-path: circle(4% at 50% 50%); transform: scale(.82); filter: blur(6px); }
  45%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; clip-path: circle(160% at 50% 50%); transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero2 .hero2-end > * { opacity: 1; animation: none; }
}
/* One soft cream light runs round the edge of each action, both at once
   but half a lap apart: when the light on "Explore the summit" is at the
   bottom, the light on the ticket is at the top. They never move in
   step, so the pair feels alive without flashing together. 3.8 seconds
   a lap; still for reduced motion. (Jon, 2026-10-02; replaces the twin
   white pulses of 2026-10-01.) */
@property --hero-lap { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
:is(.hero2-end, .home-pillars__actions) .btn { position: relative; overflow: visible; }
:is(.hero2-end, .home-pillars__actions) .btn::after { content: ""; position: absolute; inset: -2px; padding: 2px;
  border-radius: inherit; pointer-events: none;
  /* a single light with a long, fading tail; its head sits at 356deg */
  background: conic-gradient(from var(--hero-lap),
    rgba(244,241,233,0) 0deg 285deg, rgba(244,241,233,.4) 330deg, #F4F1E9 356deg, rgba(244,241,233,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 3px rgba(244,241,233,.5));
  animation: heroLapLow 3.8s linear infinite; }
:is(.hero2-end, .home-pillars__actions) .btn.hero2-ticket::after { animation-name: heroLapHigh; }
/* the first light starts at the bottom edge, the second at the top */
@keyframes heroLapLow { from { --hero-lap: 184deg; } to { --hero-lap: 544deg; } }
@keyframes heroLapHigh { from { --hero-lap: 4deg; } to { --hero-lap: 364deg; } }
@media (prefers-reduced-motion: reduce) {
  :is(.hero2-end, .home-pillars__actions) .btn::after { display: none; }
}
@media (forced-colors: active) { .home-pillars__actions .btn::after { display: none; } }
/* Stacked, the lockup stands near the foot of the stage. */
@media (max-width: 1099px) and (min-height: 501px) {
  .hero2 .hero2-sticky .hero2-end { bottom: clamp(18px, 3.4svh, 40px); }
}
@media (max-width: 1099px) and (min-height: 501px) and (max-height: 700px) {
  .hero2 .hero2-sticky .hero2-end { bottom: 12px; }
}
/* The way into the opening, under the two buttons and as wide as both:
   a third action in the same family. Same shape, type and height; an
   outline in place of a fill, its white edge still. It asks "What comes
   after independence?" and says how long the film is, so the click is
   easy; it never gives the answer away. (Jon, 2026-10-04; it was "What's
   the difference?" with the three words taking turns.) */
.hero2-cta { display: grid; gap: 24px; width: fit-content; max-width: 100%;
  margin-inline: auto; }
@media (min-width: 1100px) { .hero2-cta { margin-inline: 0; } }
@media (max-width: 480px) { .hero2-cta { width: 100%; gap: 16px; } }
.hero2-play { position: relative; display: flex; align-items: center; justify-content: center;
  gap: 14px; min-height: 48px; padding: 12px 22px; border-radius: 2px;
  border: 1.5px solid rgba(244, 241, 233, .5); background: transparent; color: var(--paper, #F4F1E9);
  font: 600 16px/1 var(--f-ui, "Prompt", sans-serif); cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: border-color 200ms ease, background-color 200ms ease; }
.hero2-play:hover, .hero2-play:focus-visible { border-color: #F4F1E9;
  background: rgba(244, 241, 233, .07); }
.hero2-play:focus-visible { outline: 2px solid var(--teal-lt); outline-offset: 3px; }
.hero2-play:active { transform: translateY(1px); }
.hero2-play__ask { white-space: nowrap; }
.hero2-play__ask::after { content: ""; display: inline-block; width: 4px; height: 4px; margin-left: 14px;
  border-radius: 50%; background: var(--coral); vertical-align: middle; }
/* how long it runs, in light teal, after a small coral dot */
.hero2-play__len { white-space: nowrap; color: var(--teal-lt); }
.hero2-play__len span { display: inline-block; margin-right: .3em; font-size: .7em;
  vertical-align: .12em; }
html:not(.js) .hero2-play { display: none; }
/* with reduced motion the button shows the last question, not a film */
@media (prefers-reduced-motion: reduce) {
  .hero2-play__len, .hero2-play__ask::after { display: none; }
}
/* A phone keeps the whole landing page on one screen. */
@media (max-width: 480px) {
  .hero2-play { min-height: 46px; gap: 10px; padding: 12px 10px; font-size: clamp(12px, 3.6vw, 15px); }
  .hero2-play__ask::after { margin-left: 10px; }
}
@media (max-width: 360px) {
  .hero2-play { width: 100%; max-width: calc(100vw - 44px); min-width: 0; gap: 6px; padding-inline: 7px; line-height: 1.2; }
  .hero2-play__ask { white-space: normal; }
  .hero2-play__ask::after { margin-left: 5px; }
}
/* The ending, folded into the return. "What is it worth?" comes up in
   the ring as the + forms, word by word like the story lines, then
   follows the dots down and stands over the ticket in place of the line
   under the button. inter.js sets its place and size (a transform from
   the stage's top left). The dots stand round the ticket button, pulse
   in a wave, and fade; the ticket takes a soft light while they hold.
   (Jon, 2026-10-03.) */
.hero2-worth { position: absolute; z-index: 4; left: 0; top: 0; margin: 0; max-width: none;
  white-space: nowrap; transform-origin: 50% 50%; pointer-events: none;
  font: 600 48px/1.1 var(--f-display, "Cormorant Garamond", serif); letter-spacing: -.01em;
  color: #fff; text-shadow: 0 2px 24px rgba(8, 18, 17, .75);
  visibility: hidden; opacity: 0; transition: opacity 700ms ease, visibility 0s linear 700ms; }
.hero2[data-worth] .hero2-worth { visibility: visible; opacity: 1; transition: opacity 400ms ease; }
.hero2[data-worth][data-settling] .hero2-worth { opacity: 0; transition: opacity 700ms ease; }
.hero2-worth span { display: inline-block; opacity: 0; }
.hero2[data-worth] .hero2-worth span { animation: heroWord 760ms var(--ease-out) both; }
.hero2-worth span:nth-of-type(2) { animation-delay: 140ms; }
.hero2-worth span:nth-of-type(3) { animation-delay: 300ms; }
.hero2-worth span:nth-of-type(4) { animation-delay: 460ms; }
.hero2-worth span:nth-of-type(5) { animation-delay: 580ms; }
/* "worth to you?" is the turn of the question */
.hero2-worth span:nth-of-type(n+3) { font-style: italic; color: var(--teal-lt);
  text-shadow: 0 0 2px rgba(127, 203, 214, .55), 0 0 24px rgba(127, 203, 214, .8); }
.hero2-escort { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  transition: opacity 700ms ease; }
/* Marquee bulbs: a warm cream core with a soft halo; coral and light
   teal ones carry their own light. Once every bulb is in place they
   chase round the ticket in three phases, the way sign lights run. Still
   and all lit for reduced motion. (Jon, 2026-10-03.) */
.hero2-escort i { position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px;
  border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff 0 28%, #FFF0D2 58%, #F4CF97 100%);
  box-shadow: 0 0 5px 1px rgba(255, 222, 168, .85), 0 0 14px 3px rgba(255, 196, 128, .35); }
.hero2-escort i.is-coral { background: radial-gradient(circle at 40% 35%, #FFD9CC 0 25%, var(--coral) 70%);
  box-shadow: 0 0 5px 1px rgba(232, 111, 81, .9), 0 0 14px 3px rgba(232, 111, 81, .35); }
.hero2-escort i.is-teal { background: radial-gradient(circle at 40% 35%, #E6F7FA 0 25%, var(--teal-lt) 70%);
  box-shadow: 0 0 5px 1px rgba(127, 203, 214, .9), 0 0 14px 3px rgba(127, 203, 214, .35); }
/* a bulb is dim two beats in three: it goes down to a faint warm glass,
   never a dark blot, so the light runs round the sign */
.hero2-escort.is-framing i { animation: heroChase .96s steps(1, end) infinite;
  animation-delay: calc(var(--chase) * -.32s); }
@keyframes heroChase {
  0%    { opacity: 1; }
  33.3% { opacity: .3; }
  100%  { opacity: .3; }
}
.hero2-escort.is-fresh { animation: heroEscortIn 700ms ease backwards; }
@keyframes heroEscortIn { from { opacity: 0; } }
.hero2-escort.is-leaving { opacity: 0; }
.hero2 .btn.hero2-ticket.is-pointed { box-shadow: 0 0 0 3px rgba(127, 203, 214, .35),
  0 14px 36px -12px rgba(127, 203, 214, .95); }
html:not(.js) .hero2-worth { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero2-worth, .hero2[data-worth] .hero2-worth { transition: none; }
  .hero2[data-worth] .hero2-worth span { opacity: 1; animation: none; }
  .hero2-escort i { animation: none !important; opacity: 1; }
}
/* the tagline again at the foot of Home, under the mark */
.foot-tag { margin: 10px 0 0; text-align: center; font-family: var(--font-serif);
  font-style: italic; font-size: clamp(16px, .5vw + 14px, 20px); color: var(--mist); }
.hero2-site { position: absolute; left: 0; right: 0; bottom: clamp(10px, 1.6svh, 16px);
  z-index: 3; text-align: center; pointer-events: none;
  font: 600 10px/1 var(--font-sans); letter-spacing: .24em; text-transform: uppercase;
  color: rgba(217, 221, 214, .5); opacity: 0; transition: opacity 600ms ease; }
.hero2-site b { font-weight: inherit; color: rgba(244, 154, 128, .7); }
.hero2[data-prelude] .hero2-site { opacity: 1; }
/* Under the picture: the title of the beat and the line that tells it.
   The titles share one place and the lines share the place beneath;
   one of each is lit at a time. inter.js sets `top` from the figure's
   own size, so they sit just under it at any scale; the value here is
   the fallback. */
.hero2-q { position: absolute; left: var(--gutter); right: var(--gutter); top: 66%;
  display: grid; justify-items: center; margin: 0;
  text-align: center; font-family: var(--font-serif); font-weight: 500; font-style: italic;
  font-size: clamp(30px, 2.2vw + 22px, 54px); line-height: 1.1; letter-spacing: -.02em;
  color: #fff; max-width: none; pointer-events: none;
  text-shadow: 0 1px 2px rgba(8,18,17,.55), 0 2px 26px rgba(8,18,17,.75); }
.hero2-q span, .hero2-q small { opacity: 0; transform: translateY(8px);
  transition: opacity 560ms ease, transform 560ms var(--ease-out); }
.hero2-q span { grid-area: 1 / 1; }
.hero2-q .is-on { opacity: 1; transform: none; transition-delay: 180ms; }
/* Interdependence is the reveal: it comes up larger, in light teal,
   and a light swells through it before it settles. */
.hero2-q .hero2-q__reveal.is-on { color: var(--teal-lt);
  animation: heroReveal 1800ms var(--ease-out) 180ms both; }
@keyframes heroReveal {
  0%   { opacity: 0; transform: scale(.86); letter-spacing: -.06em;
         text-shadow: 0 2px 26px rgba(8,18,17,.75); }
  55%  { opacity: 1; text-shadow: 0 0 18px rgba(127,203,214,.95), 0 0 48px rgba(127,203,214,.6); }
  100% { opacity: 1; transform: scale(1.14); letter-spacing: -.02em;
         text-shadow: 0 0 2px rgba(127,203,214,.55), 0 0 24px rgba(127,203,214,.55); }
}
/* the line under each title tells the story the picture shows */
.hero2-q small { grid-area: 2 / 1; display: block; margin-top: .5em;
  font: 500 clamp(16px, .5vw + 14px, 22px)/1.35 var(--font-sans); font-style: normal;
  letter-spacing: .02em; color: var(--mist); }
html:not(.js) .hero2-q small { display: none; }
html:not(.js) .hero2-q span { grid-area: auto; opacity: 1; transform: none; }
/* A quiet way past the prelude, for a reader who wants the page now.
   48px tall, mist on deep, as the old cue was. */
.hero2-skip { position: absolute; left: 50%; bottom: clamp(34px, 5svh, 46px); transform: translateX(-50%);
  z-index: 3; min-height: 48px; padding: 0 20px;
  font: 600 var(--text-sm)/1 var(--font-sans); letter-spacing: .14em;
  text-transform: uppercase; color: var(--mist); white-space: nowrap;
  background: rgba(15, 34, 41, .55); border: 1px solid rgba(217, 221, 214, .38);
  border-radius: 999px; cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: border-color var(--t-colour) ease, color var(--t-colour) ease; }
.hero2-skip:hover, .hero2-skip:focus-visible { color: #fff; border-color: #fff; }
.hero2-skip:focus-visible { outline: 2px solid var(--teal-lt); outline-offset: 3px; }
.hero2:not([data-playing]) .hero2-skip { display: none; }
html:not(.js) .hero2-skip { display: none; }
html:not(.js) .hero2-q { position: static; margin-bottom: 34px; }
@media (prefers-reduced-motion: reduce) { .hero2-q { display: none; } }
/* On a short landscape screen, keep the question beside the central seed.
   This changes only the waiting composition; the field animation and its
   completed plus retain their existing coordinates and timing. */
@media (max-width: 1099px) and (max-height: 500px) and (orientation: landscape) {
  .hero2-q { top: clamp(72px, 20svh, 84px); left: clamp(24px, 5vw, 48px);
    right: auto; width: min(35vw, 300px); text-align: left;
    font-size: clamp(18px, 3vw, 24px); line-height: 1.15; }
  /* the question joins the title in the same left column, clear of the figure */
  .hero2-q { justify-items: start; }
  .hero2-ask { top: clamp(40px, 11svh, 50px); left: clamp(24px, 5vw, 48px);
    right: auto; text-align: left; font-size: 15px; }
}

/* Without JavaScript the sequence cannot run: the finished frame stands. */
html:not(.js) .hero2 { height: auto; }
html:not(.js) .hero2-sticky { position: static; height: auto;
  padding: calc(var(--band) * 1.2) 0; }
html:not(.js) .hero2-sticky canvas { display: none; }
html:not(.js) .hero2-end { position: static; opacity: 1; transform: none;
  pointer-events: auto; }
/* Reduced motion: the resolved +, still, with the words beneath it. */
@media (prefers-reduced-motion: reduce) {
  .hero2 { height: auto; }
  .hero2-sticky { position: static; height: 92svh; }
  .hero2-end { opacity: 1; transform: none; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1099px) and
    (max-height: 500px) and (orientation: landscape) {
  .hero2-sticky { height: 100svh; }
  .hero2-cycle { flex-wrap: nowrap; gap: 4px 10px; height: auto;
    font-size: 9px; line-height: 1.2; letter-spacing: .1em; }
  .hero2-cycle span { white-space: nowrap; }
}




/* ---- REDESIGN, 4 September 2026: the hero keeps its last live look.
   Jon: "adopt exactly what was on the last version". The wordmark and
   tagline stay in Newsreader at the old weight and size; the button is
   the old coral button; the words are white on the dark stage. */
.hero2 { --font-serif: "Newsreader", Georgia, "Times New Roman", serif; }
.hero2 h1, .hero2-end h1 { font-family: var(--font-serif); font-weight: 560; color: #fff;
  font-size: clamp(72px, 15vw, 104px); line-height: .93; letter-spacing: -.035em; }
.hero2-end h1 i { font-style: normal; color: var(--coral-tint); }
.hero2 .btn { display: inline-block; font: 700 14px/1 var(--font-sans); text-decoration: none;
  border: 1px solid var(--ink); border-radius: 2px; padding: 14px 24px; cursor: pointer;
  transition: transform 120ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
.hero2 .btn::before { display: none; }
:is(.hero2 .hero2-actions, .home-pillars__actions) .btn:not(.btn--coral) { color: var(--paper); border-color: rgba(244, 241, 233, .62);
  background: rgba(244, 241, 233, .06); }
:is(.hero2 .hero2-actions, .home-pillars__actions) .btn:not(.btn--coral):hover,
:is(.hero2 .hero2-actions, .home-pillars__actions) .btn:not(.btn--coral):focus-visible { color: var(--ink-deep);
  border-color: var(--paper); background: var(--paper); }
.hero2 .btn.btn--coral { background: var(--coral); color: var(--ink-deep); border-color: var(--coral); }
:is(.hero2, .home-pillars__actions) .btn.btn--coral:is(:hover, :focus-visible) { background: var(--coral-tint);
  border-color: var(--coral-tint); color: var(--ink-deep); transform: translateY(-1px); }
:is(.hero2, .home-pillars__actions) .btn.btn--coral:active { transform: translateY(1px) scale(.985); transition-duration: 0ms; }

/* The opening is a required first act, not a scrollable cover. The class
   exists only while that act is waiting or playing and is removed by its
   own completion callback. scrollbar-gutter prevents a desktop width jump. */
html.hero-sequence-locked { overflow: hidden; background: var(--ink-deep); }
html.cross-transition-autoscroll { scroll-behavior: auto; }
html.hero-sequence-locked body { position: fixed; inset: 0; width: 100%; height: 100%;
  overflow: hidden; overscroll-behavior: none; }
@media (min-width: 1100px) {
  html.hero-sequence-locked { scrollbar-gutter: stable; }
}

/* ================================================= PLUS HAND-OFF
   The completed opening gives way to the first real homepage screen
   through the opening's own dotted plus. The document still scrolls normally:
   a tall track provides distance, one viewport stays pinned, and
   inter.js maps native progress to the captured mark and real claim.
   There is no morph, particle hand-off, scroll snap or extra ornament. */
.cross-transition { position: relative; height: 300svh; background: var(--paper); }
.cross-transition-sticky { position: sticky; top: 0; height: 100svh;
  overflow: hidden; overflow: clip; isolation: isolate; background: transparent; }
.cross-transition-sticky::after { content: ""; position: absolute; z-index: 2;
  inset: 0; pointer-events: none; opacity: var(--landing-gradient-opacity, 0);
  background: linear-gradient(180deg,
    rgba(15,34,41,.96) 0%,
    rgba(15,34,41,.68) 7%,
    rgba(25,101,116,.28) 18%,
    rgba(112,166,170,.12) 27%,
    rgba(242,241,236,0) 38%); }
.cross-transition-sticky.is-fixed { position: fixed; inset: 0; z-index: 100;
  pointer-events: none; }
.cross-transition-glyph { --cross-arm: 24%; position: absolute; z-index: 2;
  left: 50%; top: 50%; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; transform: translate3d(-50%, -50%, 0);
  transform-origin: 50% 50%; will-change: left, top, transform; }
.cross-transition-surface { position: absolute; inset: 0; opacity: 0; }
.cross-transition-surface::before,
.cross-transition-surface::after { content: ""; position: absolute; display: block;
  background: var(--paper); border-radius: 2px; }
.cross-transition-surface::before { left: 0; top: 50%; width: 100%; height: var(--cross-arm);
  transform: translateY(-50%); }
.cross-transition-surface::after { left: 50%; top: 0; width: var(--cross-arm); height: 100%;
  transform: translateX(-50%); }
.cross-transition-snapshot { position: absolute; left: 50%; top: 50%;
  max-width: none; height: auto; transform: translate(-50%, -50%); }
.cross-transition-detail { position: absolute; z-index: 2; inset: 0;
  width: 100%; height: 100%; pointer-events: none; }
.cross-transition-content.scr { position: absolute; z-index: 3; inset: 0;
  width: 100%; height: 100%; min-height: 100%; margin: 0; background: transparent;
  opacity: 0; transform: translate3d(50vw, 0, 0); pointer-events: none;
  will-change: transform, opacity; }
.cross-transition-content .tex { opacity: 0; transition: none; }
.cross-transition-sticky > .claim-transition-gradient { position: absolute; z-index: 1;
  inset: 0 0 auto; height: 48%; pointer-events: none;
  opacity: 1;
  background: linear-gradient(180deg,
    #0F2229 0%,
    rgba(15,34,41,.98) 10%,
    rgba(25,101,116,.76) 24%,
    rgba(85,153,161,.38) 34%,
    rgba(178,211,205,.14) 42%,
    rgba(242,241,236,0) 100%); }

/* Constellation of Presence. Individual points enter the field without
   drawing a network diagram: the gathering is felt, while the locked claim
   remains the still centre of the screen. */
.cross-transition-content .st-statement { position: relative; z-index: 2; }
.cross-transition-content .st-statement .label { transform: translateY(-22px); }
.cross-transition-content .claim-constellation { position: absolute; z-index: 1; inset: 8% 4% 7%;
  overflow: hidden; pointer-events: none; }
.cross-transition-content .claim-constellation i { --dot: 5px; --halo: rgba(30,115,131,.12);
  position: absolute; width: var(--dot); height: var(--dot); border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 0 8px var(--halo); opacity: 0;
  animation: claim-gather 13s cubic-bezier(.22,.61,.36,1) infinite; }
.claim-constellation i:nth-child(1) { --dot: 7px; --halo: rgba(232,111,81,.12);
  left: 7%; top: 23%; background: var(--coral); --from-x: -20px; --from-y: -14px; animation-delay: -.8s; }
.claim-constellation i:nth-child(2) { right: 11%; top: 17%;
  background: #78BDAF; --from-x: 18px; --from-y: -16px; animation-delay: -4.2s; }
.claim-constellation i:nth-child(3) { --dot: 6px; left: 13%; bottom: 17%;
  background: #6FAEB8; --from-x: -16px; --from-y: 18px; animation-delay: -7.6s; }
.claim-constellation i:nth-child(4) { --dot: 4px; --halo: rgba(190,145,72,.11);
  right: 8%; bottom: 21%; background: #BE9148; --from-x: 16px; --from-y: 16px; animation-delay: -10.8s; }
.claim-constellation i:nth-child(5) { --dot: 4px; left: 27%; top: 10%;
  --from-x: -8px; --from-y: -18px; animation-delay: -2.5s; }
.claim-constellation i:nth-child(6) { --dot: 5px; --halo: rgba(232,111,81,.1);
  right: 26%; bottom: 10%; background: var(--coral); --from-x: 9px; --from-y: 18px; animation-delay: -6s; }
.claim-constellation i:nth-child(7) { --dot: 6px; right: 21%; top: 42%;
  background: #78BDAF; --from-x: 17px; --from-y: -2px; animation-delay: -9.2s; }
.claim-constellation i:nth-child(8) { --dot: 3px; left: 23%; top: 45%;
  background: #BE9148; --from-x: -15px; --from-y: 2px; animation-delay: -11.8s; }
.claim-constellation i:nth-child(9) { --dot: 4px; right: 36%; top: 13%;
  background: #6FAEB8; --from-x: 5px; --from-y: -15px; animation-delay: -5.1s; }
@keyframes claim-gather {
  0%, 100% { opacity: 0; transform: translate3d(var(--from-x),var(--from-y),0) scale(.55); }
  18%, 72% { opacity: .72; transform: translate3d(0,0,0) scale(1); }
  86% { opacity: .28; transform: translate3d(3px,-2px,0) scale(.86); }
}
/* The statement under the headline, set as three ranks: what it is (lead),
   the proof (two facts side by side between hairlines, in the display face),
   and how to join (small print). The heading stays the only large line. */
.claim-invitation { display: grid; justify-items: center; gap: var(--s-5);
  margin: var(--s-4) auto 0; color: var(--ink-2); }
.claim-invitation p { margin: 0; text-wrap: balance; }
.claim-invitation .claim-invitation__what { max-width: 44ch;
  font: 400 var(--t-lead)/1.5 var(--font-sans); letter-spacing: -.008em; }
.claim-invitation .claim-invitation__call { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center; width: 100%; padding-block: var(--s-4); color: var(--ink);
  border-block: 1px solid rgba(25,101,116,.42);
  background: linear-gradient(rgba(25,101,116,.42), rgba(25,101,116,.42)) center / 1px calc(100% - 2 * var(--s-4)) no-repeat;
  font: 600 clamp(21px,1.9vw,26px)/1.15 var(--font-serif); letter-spacing: -.01em; }
.claim-invitation__call > span { display: block; padding-inline: var(--s-5); }
.claim-invitation .claim-invitation__close { max-width: 54ch; color: var(--ink-2);
  font: 400 var(--t-small)/1.55 var(--font-sans); }

/* One continuous light field, from the claim through the social mirror.
   The page reveals different parts of this static atmosphere as it scrolls;
   individual sections do not restart a gradient at their edges. */
.home-atmosphere {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(168deg, #F2F1EC 0%, #EEF1EB 32%, #F3F0E9 59%, #EAEFEA 82%, #F2F1EC 100%);
}
.home-atmosphere__orbs { position: absolute; z-index: 0; inset: 0; overflow: hidden;
  pointer-events: none; }
.home-atmosphere__orbs i { --orb-size: clamp(360px,55vw,840px); position: absolute;
  width: var(--orb-size); aspect-ratio: 1; border-radius: 50%; opacity: .72;
  transform: translate3d(0,0,0); animation: atmosphere-drift-a 24s ease-in-out infinite alternate; }
.home-atmosphere__orbs i:nth-child(1) { top: -2%; right: -27%;
  background: radial-gradient(circle,rgba(25,101,116,.27) 0%,rgba(74,151,159,.14) 34%,transparent 70%); }
.home-atmosphere__orbs i:nth-child(2) { --orb-size: clamp(300px,42vw,650px); top: 15%; left: -13%;
  background: radial-gradient(circle,rgba(232,111,81,.18) 0%,rgba(244,154,128,.095) 37%,transparent 72%);
  animation-name: atmosphere-drift-b; animation-duration: 29s; }
.home-atmosphere__orbs i:nth-child(3) { --orb-size: clamp(380px,57vw,880px); top: 33%; right: -22%;
  background: radial-gradient(circle,rgba(104,181,164,.24) 0%,rgba(143,212,182,.13) 38%,transparent 73%);
  animation-duration: 32s; animation-delay: -11s; }
.home-atmosphere__orbs i:nth-child(4) { --orb-size: clamp(310px,46vw,700px); top: 54%; left: -14%;
  background: radial-gradient(circle,rgba(58,139,153,.22) 0%,rgba(127,203,214,.11) 40%,transparent 72%);
  animation-name: atmosphere-drift-b; animation-duration: 27s; animation-delay: -7s; }
.home-atmosphere__orbs i:nth-child(5) { --orb-size: clamp(280px,39vw,610px); top: 72%; right: -12%;
  background: radial-gradient(circle,rgba(232,111,81,.17) 0%,rgba(244,154,128,.085) 39%,transparent 73%);
  animation-duration: 30s; animation-delay: -18s; }
.home-atmosphere__orbs i:nth-child(6) { --orb-size: clamp(380px,58vw,900px); bottom: -5%; left: -28%;
  background: radial-gradient(circle,rgba(104,181,164,.23) 0%,rgba(25,101,116,.11) 42%,transparent 74%);
  animation-name: atmosphere-drift-b; animation-duration: 34s; animation-delay: -14s; }
@keyframes atmosphere-drift-a { to { transform: translate3d(-3.5vw,2.2vh,0) scale(1.045); } }
@keyframes atmosphere-drift-b { to { transform: translate3d(4vw,-2.5vh,0) scale(.96); } }
.home-atmosphere > section { position: relative; z-index: 1; }
@media (max-width: 700px) {
  .home-atmosphere__orbs i { --orb-size: clamp(300px,112vw,520px); opacity: .82; }
  .home-atmosphere__orbs i:nth-child(2),
  .home-atmosphere__orbs i:nth-child(4) { left: -38%; }
  .home-atmosphere__orbs i:nth-child(1),
  .home-atmosphere__orbs i:nth-child(3) { right: -42%; }
}
@media (prefers-reduced-motion: reduce) {
  .home-atmosphere__orbs i { animation: none; }
}
.home-atmosphere .cross-transition,
.home-atmosphere .cross-transition-sticky,
.home-atmosphere .cross-transition-content.scr,
.home-atmosphere .freedom-is,
.home-atmosphere #doorway,
.home-atmosphere #pillars,
.home-atmosphere #inside,
.home-atmosphere #speakers-strip,
.home-atmosphere .outcome-poll { background: transparent; }
/* Homepage speakers, "Drift" (Jon, 2 October 2026). Two full-width rows of
   faces, one per summit day, that assets/home-speakers.js moves slowly in
   opposite directions. Every face and the card box have fixed sizes, so the
   shuffle and the card swaps never shift the layout. Without scripting, or
   with reduced motion, the rows stand still and scroll sideways. */
#speakers-strip { grid-template-columns: minmax(0, 1fr); }
#speakers-strip > .drift, #speakers-strip .drift > .shell { width: 100%; min-width: 0; }
.drift { margin-top: var(--s-7); }
.drift__rows { display: grid; gap: var(--s-4); }
.drift__row { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.drift__row::-webkit-scrollbar { display: none; }
.drift__track { display: flex; gap: var(--s-6); list-style: none; margin: 0; padding: 8px var(--gutter); width: max-content; }
.drift__track > li { flex: 0 0 auto; }
.drift__face { display: grid; justify-items: center; align-content: start; gap: 8px; width: 140px; min-height: 176px; padding: 6px 4px;
  background: none; border: 0; border-radius: 4px; cursor: pointer; color: var(--ink); text-align: center; font: inherit; }
.drift__face img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; background: var(--tint);
  filter: grayscale(.65) contrast(1.02); box-shadow: 0 0 0 0 var(--pc, var(--teal));
  transition: filter var(--t-surface) ease, transform var(--t-move) var(--ease-out), box-shadow var(--t-surface) ease; }
.drift__name { font: 500 14px/1.25 var(--f-ui); text-wrap: balance; }
.drift__pillar { font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pc-text, var(--muted)); }
.drift__face:hover img, .drift__face:focus-visible img, .drift__face[aria-pressed="true"] img {
  filter: none; transform: scale(1.06); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--pc, var(--teal)); }
.drift__face:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.drift__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); min-height: 44px; margin-top: var(--s-4); }
.drift__toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
  font: 500 14px/1 var(--f-ui); color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  transition: border-color var(--t-colour) ease; }
.drift__toggle:hover { border-color: var(--ink); }
.drift__toggle[hidden], .drift__hint[hidden] { display: none; }
.drift__toggle-icon { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.drift__toggle[aria-pressed="true"] .drift__toggle-icon { width: 0; height: 0; border: 0;
  border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.drift__hint { margin: 0; }
/* The card box keeps one height for every person, so the actions below never jump. */
.drift__card { margin-top: var(--s-5); max-width: 760px; min-height: 324px; }
.drift__empty { padding: var(--card-pad); border: 1px dashed var(--line); border-radius: 2px; }
.drift-card { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-5); align-items: start;
  padding: var(--card-pad); padding-right: calc(var(--card-pad) + 40px); background: var(--chalk); border: 1px solid var(--line);
  border-top: 3px solid var(--pc, var(--teal)); border-radius: 2px; }
.drift-card__img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; background: var(--tint); }
.drift-card__body { display: grid; gap: var(--s-2); min-width: 0; }
.drift-card__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
  font: 500 12px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.drift-card__pillar { display: inline-flex; align-items: center; gap: 6px; color: var(--pc-text, var(--teal)); }
.drift-card__pillar::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pc, var(--teal)); }
.drift-card__name { font: 600 clamp(24px, 2.4vw, 32px)/1.08 var(--f-display); color: var(--ink); }
.drift-card__org { font-size: var(--t-small); color: var(--ink-2); }
.drift-card__session { margin-top: var(--s-1); font: italic 500 clamp(19px, 1.8vw, 24px)/1.25 var(--f-display); color: var(--ink); text-wrap: pretty; }
.drift-card__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin-top: var(--s-2); }
.drift-card__links a { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px/1.3 var(--f-ui); }
.drift-card__links .arw { margin-left: 6px; }
.drift-card__close { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; background: none; border: 0; border-radius: 50%; color: var(--muted); font: 400 26px/1 var(--f-ui); cursor: pointer; }
.drift-card__close:hover { color: var(--ink); }
.drift-card--enter { animation: drift-card-in 420ms var(--ease-out) both; }
@keyframes drift-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Still rows (no scripting, or reduced motion): no copies, a visible thin
   scrollbar so the row reads as scrollable, and the same card. */
.drift:not(.is-live) .drift__row, .drift.is-static .drift__row { scrollbar-width: thin; padding-bottom: 6px; }
.drift:not(.is-live) .drift__row::-webkit-scrollbar, .drift.is-static .drift__row::-webkit-scrollbar { display: block; height: 6px; }
.drift:not(.is-live) .drift-card__close { display: none; }
.drift.is-static [data-copy] { display: none; }
@media (max-width: 640px) {
  .drift { margin-top: var(--s-6); }
  .drift__track { gap: var(--s-3); }
  .drift__face { width: 104px; min-height: 150px; }
  .drift__face img { width: 84px; height: 84px; }
  .drift__name { font-size: 13px; }
  .drift__card { min-height: 424px; }
  .drift-card { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding-right: var(--card-pad); }
  .drift-card__img { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .drift [data-copy] { display: none; }
  .drift__row { scrollbar-width: thin; }
  .drift__face img, .drift-card--enter { transition: none; animation: none; }
  .drift__face:hover img, .drift__face:focus-visible img, .drift__face[aria-pressed="true"] img { transform: none; }
}
/* The new homepage sections hold plain copy, so their shell must take the
   full column instead of shrinking to its text, and the copy needs air. */
#speakers-strip > .shell, #before-you-buy > .shell, #join > .shell { width: 100%; }
#speakers-strip .title + .body, #join .title + .body, #doorway .doors + .body { margin-top: var(--s-5); }
#speakers-strip .actions, #before-you-buy .actions { margin-top: var(--s-6); }
#before-you-buy .faq-group { margin-top: var(--s-6); max-width: 760px; }
/* The longer "Who's behind it" heading needs more than the old 9ch measure. */
#home-origin .home-origin__copy .title { max-width: 15ch; }
/* The email form under the Start free doors. */
.join-updates { margin-top: var(--s-7); }
.join-updates .form { margin-top: var(--s-4); }
/* "What time is it where I live?": the time zone calculator
   (assets/summit-times.js). Hidden until the script has filled it. */
.more .layer .tzcalc { display: grid; gap: var(--s-4); max-width: 30em; margin: var(--s-4) 0; }
.more .layer .tzcalc[hidden] { display: none; }
.tzcalc .field select { max-width: 100%; }
.tzcalc__out { padding: var(--s-4) var(--card-pad); background: var(--chalk); border: 1px solid var(--line);
  border-left: 3px solid var(--teal); color: var(--ink-2); }
.tzcalc__place { margin: 0; }
.tzcalc__place b { color: var(--ink); }
.tzcalc__days { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.tzcalc__days li { display: grid; gap: 2px; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.tzcalc__day { font: 500 12px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tzcalc__date { color: var(--ink); font-weight: 600; }
.tzcalc__time { color: var(--ink); font: 600 var(--t-heading)/1.15 var(--f-display); font-variant-numeric: lining-nums tabular-nums; }
.tzcalc__note { font-size: 14px; color: var(--ink-2); }
.more .layer .tzcalc + p, .more .layer [data-summit-times-static] + p { margin-top: var(--s-3); }
/* The Free column is cream inside a dark section: its link takes the dark
   teal, not the light teal meant for dark ground. */
.scr--deep .ticket-choice .ticket-choice__column--free a:not(.btn):not(.door):not(.card) { color: var(--teal);
  text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.scr--deep .ticket-choice .ticket-choice__column--free a:not(.btn):not(.door):not(.card):hover,
.scr--deep .ticket-choice .ticket-choice__column--free a:not(.btn):not(.door):not(.card):focus-visible { color: var(--ink); }
.home-atmosphere .cross-transition-sticky::after,
.home-atmosphere .claim-transition-gradient,
.home-atmosphere .freedom-is::before,
.home-atmosphere .freedom-is::after,
.home-atmosphere .outcome-poll::before { display: none; }
.home-atmosphere .cross-transition-content .tex { display: none; }
.home-atmosphere .cross-transition.is-complete,
.home-atmosphere .cross-transition.is-complete .cross-transition-sticky,
.home-atmosphere .cross-transition.is-complete .cross-transition-content.scr {
  background: transparent !important;
}
.home-atmosphere .cross-transition.is-complete .cross-transition-sticky::after,
.home-atmosphere .cross-transition.is-complete :is(
  .cross-transition-glyph,
  .cross-transition-detail,
  .cross-transition-snapshot,
  .cross-transition-surface,
  .tex
) { display: none !important; }
/* Once the transition is done the claim is an ordinary section: it takes the
   height its words need (min-height, never a fixed height), so the last
   paragraph can not run into the section below at any width or text size. */
.cross-transition.is-complete { height: auto; min-height: clamp(580px, 76svh, 760px); }
.cross-transition.is-complete .cross-transition-sticky { position: relative; top: auto;
  display: grid; height: auto; min-height: inherit; }
.cross-transition.is-complete .cross-transition-content.scr { position: relative; inset: auto;
  height: auto; min-height: 0; padding-block: 0; }
.cross-transition.is-complete .cross-transition-glyph,
.cross-transition.is-complete .cross-transition-detail { display: none; }
.cross-transition.is-complete .cross-transition-content.scr { opacity: 1; transform: none;
  pointer-events: auto; }
.cross-transition.is-complete .cross-transition-content .tex { opacity: 1; }
.cross-transition.is-complete .cross-transition-content.scr > .shell {
  align-content: center; padding-block: clamp(76px, 9svh, 112px); }

@media (max-width: 700px) {
  .cross-transition { height: 280svh; }
  .cross-transition.is-complete { height: auto; min-height: clamp(500px, 70svh, 620px); }
  .cross-transition-sticky::after { background: linear-gradient(180deg,
    rgba(15,34,41,.94) 0%, rgba(15,34,41,.55) 6%,
    rgba(25,101,116,.22) 15%, rgba(242,241,236,0) 28%); }
  .cross-transition-content.scr { padding-top: clamp(64px, 9svh, 82px);
    padding-bottom: clamp(44px, 7svh, 62px); }
  .cross-transition-sticky > .claim-transition-gradient { height: 44%;
    background: linear-gradient(180deg,
      #0F2229 0%, rgba(15,34,41,.97) 12%, rgba(25,101,116,.72) 27%,
      rgba(102,169,171,.3) 38%, rgba(242,241,236,0) 100%); }
  .cross-transition.is-complete .cross-transition-content.scr > .shell {
    padding-block: clamp(58px, 8svh, 76px); }
  .cross-transition-content .claim-constellation { inset: 5% -7% 5%; }
  .claim-constellation i:nth-child(5),
  .claim-constellation i:nth-child(9) { display: none; }
  .claim-invitation { gap: var(--s-4); margin-top: var(--s-3); }
  .claim-invitation .claim-invitation__what { max-width: 31ch; font-size: 17px; }
  .claim-invitation .claim-invitation__call { grid-template-columns: 1fr; gap: var(--s-3);
    max-width: 19em; padding-block: var(--s-3); background: none; font-size: 21px; }
  .claim-invitation__call > span { padding-inline: var(--s-3); }
  .claim-invitation__call > span + span { padding-top: var(--s-3); border-top: 1px solid rgba(25,101,116,.42); }
  .claim-invitation .claim-invitation__close { max-width: 34ch; }
}
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .cross-transition { height: 260svh; }
  .cross-transition-sticky::after { background: linear-gradient(180deg,
    rgba(15,34,41,.94) 0%, rgba(15,34,41,.55) 6%,
    rgba(25,101,116,.22) 15%, rgba(242,241,236,0) 28%); }
  .cross-transition-content.scr { padding-top: 72px; padding-bottom: 32px; }
  .cross-transition-content .stack { gap: 12px; }
  .cross-transition-content .display { font-size: clamp(36px, 10svh, 48px); }
  .cross-transition-content .lead { font-size: 15px; line-height: 1.35; }
}

/* The content is the page, not an animation payload. With scripting
   unavailable, motion reduced or on paper, present it as an ordinary
   semantic section and remove the transition-only track. */
html:not(.js) .cross-transition,
html:not(.js) .cross-transition-sticky,
html:not(.js) .cross-transition-content.scr { height: auto; min-height: 0; }
html:not(.js) .cross-transition-sticky,
html:not(.js) .cross-transition-content.scr { position: relative; inset: auto; }
html:not(.js) .cross-transition-sticky { background: var(--paper); }
html:not(.js) .cross-transition-glyph,
html:not(.js) .cross-transition-detail { display: none; }
html:not(.js) .cross-transition-content.scr { min-height: 70vh; opacity: 1;
  transform: none; pointer-events: auto; }
html:not(.js) .cross-transition-content .tex { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cross-transition,
  .cross-transition-sticky,
  .cross-transition-content.scr { height: auto; min-height: 0; }
  .cross-transition-sticky,
  .cross-transition-content.scr { position: relative; inset: auto; }
  .cross-transition-sticky { --landing-gradient-opacity: 1; background: var(--paper); }
  .cross-transition-glyph,
  .cross-transition-detail { display: none; }
  .cross-transition-content.scr { min-height: 70vh; opacity: 1 !important;
    transform: none !important; pointer-events: auto !important; }
  .cross-transition-content .tex { opacity: 1 !important; }
  .cross-transition-content .claim-constellation i { animation: none; opacity: .58; transform: none; }
}

@media (forced-colors: active) {
  .cross-transition-content .claim-constellation { display: none; }
  .cross-transition-sticky > .claim-transition-gradient { display: none; }
}

@media print {
  .cross-transition-sticky::after { display: none; }
  .cross-transition,
  .cross-transition-sticky,
  .cross-transition-content.scr { height: auto; min-height: 0; }
  .cross-transition-sticky,
  .cross-transition-content.scr { position: relative; inset: auto; background: #fff; }
  .cross-transition-glyph,
  .cross-transition-detail { display: none; }
  .cross-transition-content.scr { min-height: 0; opacity: 1 !important;
    transform: none !important; pointer-events: auto !important; }
  .cross-transition-content .claim-constellation { display: none; }
  .cross-transition-sticky > .claim-transition-gradient { display: none; }
}

/* Freedom in practice. The sentence stays fixed while a restrained set of
   typographic voices moves through present-tense acts. The static HTML is
   complete without scripting; the homepage-only runtime adds the sequence. */
.freedom-is {
  position: relative;
  overflow: hidden;
  min-height: clamp(540px, 70svh, 690px);
  display: flex;
  align-items: center;
  color: var(--ink);
  background:
    linear-gradient(180deg,
      var(--paper) 0%, rgba(244, 240, 230, 0) 18%,
      rgba(230, 232, 226, 0) 80%, var(--tint) 100%),
    radial-gradient(ellipse at 100% 18%, rgba(168, 215, 192, .42), transparent 48%),
    linear-gradient(118deg, var(--cream) 0%, var(--paper) 58%, var(--tint) 145%);
}
.freedom-is::before {
  content: ""; position: absolute; inset: -18% -10%; pointer-events: none; opacity: .72;
  background:
    radial-gradient(ellipse at 16% 16%, rgba(244,154,128,.13), transparent 34%),
    radial-gradient(ellipse at 88% 82%, rgba(30,115,131,.12), transparent 38%);
}
.freedom-is::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: var(--grain);
}
.freedom-is__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: clamp(72px, 8vw, 112px);
}
.freedom-is .label { color: var(--coral-deep); }
.freedom-is__statement {
  margin: clamp(22px, 4vw, 42px) 0 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(58px, 10vw, 136px);
  font-weight: 560;
  line-height: .88;
  letter-spacing: -.05em;
}
.freedom-is__fixed {
  display: block;
  margin-bottom: .12em;
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: clamp(27px, 3.2vw, 44px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  white-space: nowrap;
}
.freedom-is__words {
  position: relative;
  display: block;
  width: 100%;
  height: 1.03em;
  color: var(--coral-deep);
}
.freedom-is__word {
  position: absolute;
  inset: 0 auto auto 0;
  white-space: nowrap;
  opacity: 0;
  filter: blur(1px);
  transform: translate3d(0, 6px, 0);
  transform-origin: left center;
  transition:
    opacity 190ms ease,
    filter 190ms ease,
    transform 210ms var(--ease-out);
  will-change: opacity, transform, filter;
}
.freedom-is__word.is-current {
  opacity: 1;
  filter: none;
  transform: none;
}
.freedom-is__word.is-leaving {
  opacity: 0;
  filter: blur(1px);
  transform: translate3d(0, -5px, 0);
}
.freedom-is__word.voice-reflective {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 480;
  letter-spacing: -.035em;
}
.freedom-is__word.voice-declarative {
  color: var(--ink);
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 650;
  letter-spacing: -.07em;
}
.freedom-is__word.voice-enduring {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 620;
  letter-spacing: -.02em;
}
.freedom-is__word.is-long { font-size: .91em; }
.freedom-is__word.is-longer { font-size: .84em; }
.freedom-is__word.is-longest { font-size: .78em; }
.freedom-is__support {
  max-width: 610px;
  margin: clamp(26px, 4vw, 42px) 0 0;
  color: var(--ink-2);
  font: 400 clamp(16px, 1.5vw, 18px)/1.55 var(--font-sans);
}
.freedom-is__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
}
.freedom-is .btn { margin-top: 0; }
.freedom-is__toggle {
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-2) 38%, transparent);
  color: var(--ink-2);
  background: transparent;
  font: 600 12px/1 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.freedom-is__toggle:hover { color: var(--coral-deep); }
.freedom-is__toggle:focus-visible {
  outline: 2px solid var(--coral-deep);
  outline-offset: 4px;
}

@media (max-width: 700px) {
  .freedom-is { min-height: clamp(500px, 68svh, 580px); }
  .freedom-is__inner { padding-block: 64px; }
  .freedom-is__statement { font-size: clamp(47px, 15vw, 78px); }
  .freedom-is__fixed { margin-bottom: .16em; }
  .freedom-is__word.is-long { font-size: .87em; }
  .freedom-is__word.is-longer { font-size: .77em; }
  .freedom-is__word.is-longest { font-size: .69em; }
  .freedom-is__actions { align-items: flex-start; flex-direction: column; gap: 10px; }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .cross-transition.is-complete { height: auto; min-height: clamp(560px, 72svh, 700px); }
  .freedom-is { min-height: clamp(530px, 68svh, 650px); }
  .freedom-is__inner { padding-block: clamp(68px, 8vw, 92px); }
}

@media (prefers-reduced-motion: reduce) {
  .freedom-is__word { transition: none; filter: none; transform: none; }
  .freedom-is__toggle { display: none; }
}

@media (forced-colors: active) {
  .home-atmosphere { background: Canvas; color: CanvasText; }
  .home-atmosphere__orbs { display: none; }
  .freedom-is { background: Canvas; color: CanvasText; }
  .freedom-is__fixed,
  .freedom-is__words,
  .freedom-is__word,
  .freedom-is__support,
  .freedom-is .label { color: CanvasText; }
}

@media print {
  .home-atmosphere { background: #fff; }
  .home-atmosphere__orbs { display: none; }
  .freedom-is { min-height: 0; background: #fff; }
  .freedom-is::after { display: none; }
  .freedom-is__inner { padding-block: 48px; }
}

/* The collective outcome question sits between seeing the rooms and deciding
   on a ticket. Its surface carries the paper palette forward instead of
   introducing another isolated dark card. */
.outcome-poll { position: relative; overflow: hidden; color: var(--ink); background:
  linear-gradient(180deg, var(--paper), rgba(230,232,226,.92) 48%, var(--cream)); }
.outcome-poll::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 90% 14%, rgba(168,215,192,.36), transparent 44%),
    radial-gradient(ellipse at 8% 92%, rgba(244,154,128,.12), transparent 34%); }
.outcome-poll__layout { position: relative; padding-block: clamp(96px,12vw,164px); }
.outcome-poll__question { max-width: 780px; margin-inline: auto; }
.outcome-poll.has-results .outcome-poll__layout { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(320px,.92fr);
  gap: clamp(48px,8vw,120px); align-items: center; }
.outcome-poll.has-results .outcome-poll__question { margin-inline: 0; }
.outcome-poll__question .title { max-width: 760px; margin-top: 18px; text-wrap: balance; }
.outcome-poll__question .body { margin-top: 20px; }
.outcome-poll fieldset { display: grid; gap: 0; margin: 30px 0 22px; padding: 0; border: 0; }
.outcome-poll label { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 14px;
  align-items: center; min-height: 58px; border-top: 1px solid rgba(35,74,85,.22); cursor: pointer; }
.outcome-poll label:last-child { border-bottom: 1px solid rgba(35,74,85,.22); }
.outcome-poll label:has(input:checked) { color: var(--coral-deep); }
.outcome-poll input { width: 18px; height: 18px; margin: 0; accent-color: var(--coral-deep); }
.outcome-poll label span { font: 500 clamp(16px,1.5vw,19px)/1.3 var(--font-sans); }
.outcome-poll__status { min-height: 1.5em; margin-top: 13px; color: var(--ink-2); font: 400 13px/1.5 var(--font-sans); }
.outcome-poll__verify { margin: 0 0 20px; }
.outcome-poll__verify p { margin-bottom: 8px; color: var(--ink-2); font: 400 13px/1.45 var(--font-sans); }
.outcome-poll__result { display: grid; gap: 34px; }
.outcome-poll__chart { --poll-chart: conic-gradient(var(--teal) 0 100%); position: relative; display: grid; place-items: center;
  width: min(100%,420px); aspect-ratio: 1; margin-inline: auto; border-radius: 50%; background: var(--poll-chart);
  box-shadow: 0 28px 80px rgba(15,34,41,.12); }
.outcome-poll__chart::before { content: ""; width: 58%; aspect-ratio: 1; border-radius: 50%; background: var(--cream); }
.outcome-poll__chart span { position: absolute; color: var(--ink); font: 600 clamp(34px,5vw,58px)/1 var(--font-serif); }
.outcome-poll__chart span::after { content: " people"; display: block; margin-top: 5px; font: 600 10px/1 var(--font-mono);
  letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.outcome-poll__result h3 { margin: 12px 0 20px; font: 560 clamp(28px,3vw,44px)/1 var(--font-serif); letter-spacing: -.035em; }
.outcome-poll__result ul { display: grid; gap: 12px; padding: 0; list-style: none; }
.outcome-poll__result li { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center;
  font: 500 14px/1.3 var(--font-sans); }
.outcome-poll__result li i { width: 10px; height: 10px; border-radius: 50%; background: var(--swatch); }
.outcome-poll__result li b { font-variant-numeric: tabular-nums; }
.outcome-poll__result .small { max-width: 56ch; margin-top: 24px; color: var(--ink-2); }
@media (max-width: 760px) {
  .outcome-poll__layout,
  .outcome-poll.has-results .outcome-poll__layout { display: block; padding-block: 84px 96px; }
  .outcome-poll__result { margin-top: 62px; }
  .outcome-poll__chart { width: min(82vw,360px); }
}
@media (forced-colors: active) {
  .outcome-poll { background: Canvas; color: CanvasText; }
  .outcome-poll__chart { background: CanvasText; border: 2px solid CanvasText; }
  .outcome-poll__chart::before { background: Canvas; }
}
@media (prefers-reduced-motion: reduce) {
  .outcome-poll *, .outcome-poll *::before { transition: none !important; }
}

/* Freedom in practice. The sentence stays fixed while a restrained set of
   typographic voices moves through present-tense acts. The static HTML is
   complete without scripting; the homepage-only runtime adds the sequence. */
.freedom-is {
  position: relative;
  overflow: hidden;
  min-height: min(780px, 82svh);
  display: flex;
  align-items: center;
  color: var(--ink);
  background:
    linear-gradient(180deg,
      var(--paper) 0%, rgba(244, 240, 230, 0) 18%,
      rgba(230, 232, 226, 0) 80%, var(--tint) 100%),
    radial-gradient(ellipse at 100% 18%, rgba(168, 215, 192, .42), transparent 48%),
    linear-gradient(118deg, var(--cream) 0%, var(--paper) 58%, var(--tint) 145%);
}
.freedom-is::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: var(--grain);
}
.freedom-is__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: clamp(84px, 12vw, 150px);
}
.freedom-is .label { color: var(--coral-deep); }
.freedom-is__statement {
  margin: clamp(22px, 4vw, 42px) 0 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(58px, 10vw, 136px);
  font-weight: 560;
  line-height: .88;
  letter-spacing: -.05em;
}
.freedom-is__fixed {
  display: block;
  margin-bottom: .12em;
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: clamp(27px, 3.2vw, 44px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  white-space: nowrap;
}
.freedom-is__words {
  position: relative;
  display: block;
  width: 100%;
  height: 1.03em;
  color: var(--coral-deep);
}
.freedom-is__word {
  position: absolute;
  inset: 0 auto auto 0;
  white-space: nowrap;
  opacity: 0;
  filter: blur(1px);
  transform: translate3d(0, 6px, 0);
  transform-origin: left center;
  transition:
    opacity 190ms ease,
    filter 190ms ease,
    transform 210ms var(--ease-out);
  will-change: opacity, transform, filter;
}
.freedom-is__word.is-current {
  opacity: 1;
  filter: none;
  transform: none;
}
.freedom-is__word.is-leaving {
  opacity: 0;
  filter: blur(1px);
  transform: translate3d(0, -5px, 0);
}
.freedom-is__word.voice-reflective {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 480;
  letter-spacing: -.035em;
}
.freedom-is__word.voice-declarative {
  color: var(--ink);
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 650;
  letter-spacing: -.07em;
}
.freedom-is__word.voice-enduring {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 620;
  letter-spacing: -.02em;
}
.freedom-is__word.is-long { font-size: .91em; }
.freedom-is__word.is-longer { font-size: .84em; }
.freedom-is__word.is-longest { font-size: .78em; }
.freedom-is__support {
  max-width: 610px;
  margin: clamp(26px, 4vw, 42px) 0 0;
  color: var(--ink-2);
  font: 400 clamp(16px, 1.5vw, 18px)/1.55 var(--font-sans);
}
.freedom-is__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
}
.freedom-is .btn { margin-top: 0; }
.freedom-is__toggle {
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-2) 38%, transparent);
  color: var(--ink-2);
  background: transparent;
  font: 600 12px/1 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.freedom-is__toggle:hover { color: var(--coral-deep); }
.freedom-is__toggle:focus-visible {
  outline: 2px solid var(--coral-deep);
  outline-offset: 4px;
}

@media (max-width: 700px) {
  .freedom-is { min-height: min(660px, 78svh); }
  .freedom-is__inner { padding-block: 78px; }
  .freedom-is__statement { font-size: clamp(47px, 15vw, 78px); }
  .freedom-is__fixed { margin-bottom: .16em; }
  .freedom-is__word.is-long { font-size: .87em; }
  .freedom-is__word.is-longer { font-size: .77em; }
  .freedom-is__word.is-longest { font-size: .69em; }
  .freedom-is__actions { align-items: flex-start; flex-direction: column; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .freedom-is__word { transition: none; filter: none; transform: none; }
  .freedom-is__toggle { display: none; }
}

@media (forced-colors: active) {
  .freedom-is { background: Canvas; color: CanvasText; }
  .freedom-is__fixed,
  .freedom-is__words,
  .freedom-is__word,
  .freedom-is__support,
  .freedom-is .label { color: CanvasText; }
}

@media print {
  .freedom-is { min-height: 0; background: #fff; }
  .freedom-is::after { display: none; }
  .freedom-is__inner { padding-block: 48px; }
}
/* Homepage participation threshold: public voice first, ticketed rooms second. */
.participation-invitation {
  margin-top: 0;
  border-top: 0;
  background: var(--paper) !important;
  box-shadow: none;
}
.home-atmosphere .participation-invitation { background: transparent !important; }
.participation-invitation::before { display: none !important; }

/* Give the Five Pillars relay its own half of the split without obscuring copy. */
#pillars .tex--pillars {
  left: 1.5%;
  right: auto;
  top: auto;
  bottom: -1%;
  width: 47%;
  height: 48%;
  opacity: 1;
}
#pillars .st-split { position: relative; }
#pillars .st-split::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(53.5% - (var(--s-8) / 2));
  width: 1px;
  background: var(--line);
  pointer-events: none;
}

.participation-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
  gap: 28px 72px;
  align-items: end;
  margin-bottom: clamp(42px, 6vw, 78px);
}
.participation-heading .label { grid-column: 1 / -1; }
.participation-heading .body { margin-bottom: 0; padding-bottom: .28em; }
.participation-heading em { color: var(--coral-deep); }
.participation-options { display: block; }
.participation-path { display: flex; flex-direction: column; min-width: 0; }
.participation-path__label {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-bottom: 0;
  color: var(--ink-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.35;
  text-transform: uppercase;
}
.participation-path__label strong {
  color: var(--coral-deep);
  font: inherit;
  font-weight: 800;
}
.participation-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; flex: 1; }
.participation-doors .door { min-height: 255px; padding: 28px 24px; }
.participation-doors .door + .door { border-left: 0; }
.participation-doors .door .t { font-size: clamp(20px, 1.8vw, 26px); }
.participation-doors .door .s { font-size: var(--text-sm); line-height: 1.5; }
.participation-doors .door-sym { width: 112px; height: 112px; opacity: .38; }

.ticket-threshold__layout {
  display: grid;
  grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr);
  gap: clamp(52px, 7vw, 104px);
  align-items: start;
}
.ticket-threshold__intro .actions { margin-top: 32px; }
.ticket-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid rgba(210, 213, 206, .28);
}
.ticket-choice__column { padding: clamp(28px, 3.5vw, 48px); }
.ticket-choice__column + .ticket-choice__column { border-left: 1px solid rgba(210, 213, 206, .28); }
.ticket-choice__column--free { background: var(--cream); color: var(--ink); }
.ticket-choice__column--ticket { background: rgba(49, 95, 105, .28); }
.ticket-choice__kicker {
  margin-bottom: 20px;
  color: var(--coral-mist);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .15em;
  line-height: 1.35;
  text-transform: uppercase;
}
.ticket-choice h3 { font-size: clamp(25px, 2.5vw, 36px); }
.ticket-choice ul { margin: 28px 0 0; padding: 0; list-style: none; }
.ticket-choice li {
  position: relative;
  padding: 12px 0 12px 26px;
  border-top: 1px solid rgba(210, 213, 206, .18);
  color: var(--mist);
  font-size: var(--text-base);
}
.ticket-choice li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--coral-tint);
  font-weight: 700;
}
.ticket-choice .ticket-choice__column--free h3 { color: var(--ink); }
.ticket-choice .ticket-choice__column--free .ticket-choice__kicker { color: var(--coral-deep); }
.ticket-choice .ticket-choice__column--free li {
  border-top-color: var(--line-strong);
  color: var(--ink-2);
}
.ticket-choice .ticket-choice__column--free li::before { color: var(--coral-deep); }

@media (max-width: 1020px) {
  .participation-doors .door { min-height: 245px; }
  .ticket-threshold__layout { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  #pillars .st-split::after { display: none; }
}
@media (max-width: 700px) {
  .participation-heading,
  .participation-doors,
  .ticket-choice { grid-template-columns: 1fr; }
  .participation-heading { gap: 22px; }
  .participation-heading .label { grid-column: auto; }
  .participation-doors .door { min-height: 210px; padding: 24px 22px; }
  .participation-doors .door + .door { border-top: 0; border-left: 1px solid var(--line); }
  .ticket-choice__column + .ticket-choice__column {
    border-top: 1px solid rgba(210, 213, 206, .28);
    border-left: 0;
  }
}
@media (forced-colors: active) {
  .ticket-choice__column--free,
  .ticket-choice__column--ticket { background: Canvas; color: CanvasText; }
}

/* The ticket sits beside "Explore the summit" in light teal: the coral
   button stays the way in, the teal one is the way to buy. (Jon, 2026-10-02.) */
.hero2-sticky .hero2-end .hero2-actions { display: flex; flex-wrap: nowrap;
  justify-content: center; gap: 22px; margin-top: 26px; }
.hero2-next { margin: 0; color: var(--teal-lt); font: 600 clamp(11px, 1vw, 13px)/1.4 var(--font-sans); letter-spacing: .07em; text-transform: uppercase; text-wrap: balance; }
.hero2-cta { gap: 12px; }
.hero2-sticky .hero2-end .hero2-actions { margin-top: 10px; }
.hero2-sticky .hero2-end .hero2-actions .btn { display: inline-flex; flex: 1 1 0; min-width: 0;
  align-items: center; justify-content: center; margin: 0; white-space: nowrap; }
/* The two always sit side by side, never stacked. On a narrow phone they
   share the row evenly and the type steps down to fit. (Jon, 2026-10-02.) */
@media (max-width: 480px) {
  .hero2-sticky .hero2-end .hero2-actions { gap: 8px; }
  .hero2-sticky .hero2-end .hero2-actions .btn { padding: 14px 6px;
    font-size: clamp(11.5px, 3.45vw, 14px); letter-spacing: 0; }
}
:is(.hero2, .home-pillars__actions) .btn.hero2-ticket { background: var(--teal-lt); border-color: var(--teal-lt);
  color: var(--ink-deep); box-shadow: 0 12px 32px -18px rgba(127,203,214,.7); }
@media (min-width: 1100px) {
  .hero2-sticky .hero2-end .hero2-actions { justify-content: flex-start; margin-top: 10px; }
}
/* The way on, under the closing line: after five wants, one plain line
   says where to meet the people working on them. No speaker count here;
   the number changes as speakers are added. (Jon, 2026-10-02.) */
.hero2-story__way { display: block; margin-top: .95em;
  font: 500 clamp(13px, .3vw + 12px, 16px)/1.35 var(--font-sans);
  letter-spacing: .05em; color: var(--mist); }
/* The pain turns on italics alone; the want carries the light. The
   trouble is said quietly and the hope words are lit: heavier, teal,
   with a steady glow. (Jon, 2026-10-02.) */
.hero2-story__pain .w.is-key { color: inherit; text-shadow: none; }
.hero2-story__want em,
.hero2-story__want .w.is-key { color: var(--teal-lt); font-weight: 600;
  text-shadow: 0 0 2px rgba(127,203,214,.55), 0 0 20px rgba(127,203,214,.7); }
/* On a phone the story lines step down with the screen, so a want line
   of about forty characters always holds one row whichever font has
   loaded. (Jon, 2026-10-02.) */
@media (max-width: 480px) {
  .hero2-story__pain, .hero2-story__want { font-size: min(19px, 4.6vw); }
}

/* Light meets dark through a gradient, never a hard edge. The dark band
   itself fades in (a mask on its own edge), so its real colour, the
   pillars web's own gradient and the grain all carry through, and the
   light page shows behind the fade: one seamless blend, no second band
   and no line. The fade stays inside the dark band's padding, clear of
   its text. Only for the bands inside .home-atmosphere: site.js lays its
   own seams between the screens that sit directly in <main> (tickets ->
   Before you buy, Start free -> footer), and a second fade there doubled
   up. (Jon, 2026-10-02.) */
#pillars { --fade: clamp(40px, 6vw, 72px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); }
#home-origin { --fade: var(--screen-pad);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade));
          mask-image: linear-gradient(to bottom, transparent, #000 var(--fade)); }
/* The pillars web's fades happen in its own padding, painted in the
   web's colours, so the fade never dims the web's text. */
.home-atmosphere #pillars { padding: var(--fade) 0;
  background: linear-gradient(to bottom, #07343C, #062D35); }