/* =====================================================================
   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; }
/* While the stage waits, the coral dot stands in for the pointer on a
   wide screen, so the real cursor steps aside. A phone has no cursor,
   and a narrow window keeps the ordinary one. (Jon, 2026-08-27.) */
.hero2[data-wait] .hero2-sticky { cursor: pointer; }
@media (min-width: 901px) {
  .hero2[data-wait] .hero2-sticky, .hero2[data-wait] .hero2-sticky * {
    cursor: none; }
}
/* 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-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(244,154,128,.5), rgba(244,154,128,.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 .hero2-cue { left: 50%; right: auto; transform: translateX(-50%); }
}
.hero2-sticky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 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. One pillar leads each day of the summit, so this ticker is
   the week in miniature. 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(--coral-mist); }
.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);
}
.hero-lead .tbar-lead { font-family: var(--f-ui); font-weight: 500; }
.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(--coral-mist);
  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 opening question, over the lone dot. It fades as the crowd
   arrives; the sequence is its answer. */
.hero2-q { position: absolute; left: var(--gutter); right: var(--gutter); top: 9%;
  text-align: center; font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(22px, 2.6vw, 34px); line-height: 1.25; letter-spacing: -.02em;
  color: #eef1ea; max-width: none; text-wrap: balance;
  /* The question opens over the lightest part of the ground. It holds
     itself off that ground with a soft shadow on the letters — a pool
     of shade behind the block showed its own edges, which read as a
     smear rather than as atmosphere. (Jon, 2026-08-27.) */
  text-shadow: 0 1px 2px rgba(8,18,17,.55), 0 2px 26px rgba(8,18,17,.75); }
.hero2-q em { color: #fff; font-style: italic; }
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 instruction names the reader's own gesture. */
.hero2-cue .cue-tap { display: none; }
@media (max-width: 1099px) and (hover: none) and (pointer: coarse) {
  .hero2-cue .cue-click { display: none; }
  .hero2-cue .cue-tap { display: inline; }
}
/* F2 (D-01): the cue is a real control, 48 px tall, mist on deep (11.9:1),
   a ring that brightens on hover and focus. The sequence it starts is untouched. */
.hero2-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
  font: 600 var(--text-sm)/1 var(--font-sans); letter-spacing: .14em;
  text-transform: uppercase; color: var(--mist); max-width: none; 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, background var(--t-colour) ease; }
.hero2-cue::after { content: "↓"; font: 500 14px/1 var(--font-sans); letter-spacing: 0;
  transition: transform 180ms var(--ease-out); }
.hero2-cue:hover, .hero2-cue:focus-visible { color: #fff; border-color: #fff; background: rgba(27, 55, 65, .85); }
.hero2-cue:hover::after { transform: translateY(3px); }
.hero2-cue:focus-visible { outline: 2px solid var(--teal-lt); outline-offset: 3px; }
/* 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; }
html:not(.js) .hero2-cue { display: none; }
/* The question is the site's first hello, not the Home destination.
   The head marks later page loads in this tab before first paint, so
   returning Home opens directly on the completed In+ter landing frame. */
html.inter-returning-visit .hero2-q,
html.inter-returning-visit .hero2-cue { display: none; }
html.inter-returning-visit .hero2-end { opacity: 1; transform: none;
  pointer-events: auto; visibility: visible; }
/* 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; }
  .hero2-cue { display: none; }
}
@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; }
}


body.on-dark .hero2-q em { color: var(--coral-mist); }

/* ---- 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; }
.hero2 .btn.btn--coral { background: var(--coral); color: var(--ink-deep); border-color: var(--coral); }
.hero2 .btn.btn--coral:hover, .hero2 .btn.btn--coral:focus-visible { background: var(--coral-tint);
  border-color: var(--coral-tint); color: var(--ink-deep); transform: translateY(-1px); }
.hero2 .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; }
.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); }
}
.claim-invitation { display: grid; justify-items: center; gap: clamp(9px,1.4vw,16px);
  margin: clamp(24px,3.5vw,42px) auto 0; color: var(--ink-2); }
.claim-invitation p { max-width: 47ch; margin: 0; font: 400 clamp(15px,1.35vw,18px)/1.5 var(--font-sans);
  letter-spacing: -.012em; text-wrap: balance; }
.claim-invitation .claim-invitation__call { max-width: 22ch; color: var(--ink);
  font: 560 clamp(24px,2.7vw,38px)/1.04 var(--font-serif); letter-spacing: -.035em; }
.claim-invitation .claim-invitation__close { color: var(--ink-2); font-size: clamp(13px,1.1vw,15px); }

/* 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 .outcome-poll { background: transparent; }
.home-atmosphere .cross-transition-sticky::after,
.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; }
.cross-transition.is-complete { height: clamp(580px, 76svh, 760px); }
.cross-transition.is-complete .cross-transition-sticky { position: relative; top: auto; }
.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: 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: 11px; margin-top: 27px; }
  .claim-invitation p { max-width: 32ch; font-size: clamp(16px,4.7vw,18px); line-height: 1.52; }
  .claim-invitation .claim-invitation__call { max-width: 18ch; font-size: clamp(25px,7.3vw,31px); }
  .claim-invitation .claim-invitation__close { max-width: 29ch; font-size: clamp(16px,4.45vw,17px); line-height: 1.5; }
}
@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: 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; }
}