/* ============================================================
   TAKE CHARGE EUROPE — 2026 concept · v3 "one living charge"
   Environment fonts only (per WP): Hagrid, Expressway, script.
   HARD RULE — the server's Hagrid is a trial cut with broken
   digits: numerals NEVER render in display faces. Anything
   numeric wears .num (Expressway Bold).
   Script face: logo lockup only.
   ============================================================ */

@font-face {
  font-family: 'Hagrid X';
  src: url('/wp-content/uploads/2025/08/Hagrid-Text-Extrabold.ttf') format('truetype');
  font-weight: 800 900;
  font-display: swap;
}
/* Declared AFTER the base face, so it wins the overlapping range: any digit
   (plus + and %) asked to render in Hagrid is served from Expressway instead.
   The trial cut's broken numerals become unreachable at the font level —
   no matter who types what, in the editor or on the page. */
@font-face {
  font-family: 'Hagrid X';
  src: url('/wp-content/uploads/2025/08/Expressway-Bold.ttf') format('truetype');
  font-weight: 800 900;
  unicode-range: U+0030-0039, U+002B, U+0025;
  font-display: swap;
  /* Expressway's cap height runs ~7% under Hagrid's (measured 70-72px
     vs 75px at 100px), so substituted numerals looked shrunken inside
     display headings — "STAND FIRM ON 2035" with a small 2035. Scale
     the face so digits sit cap-to-cap with the letters around them. */
  size-adjust: 107%;
}
@font-face {
  font-family: 'Expressway X';
  src: url('/wp-content/uploads/2025/08/expresswayfree.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Expressway X';
  src: url('/wp-content/uploads/2025/08/Expressway-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'TCE Script';
  src: url('/wp-content/uploads/2025/08/fonnts.com-ccspaghettiwestern-script.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  --tcd-ground: #101021;
  --tcd-ground-deep: #0A0A16;
  --tcd-ink: #EBE3E0;
  --tcd-brand: #0472FD;
  --tcd-cta: #FF4F00;
  --tcd-n-green: #008433;
  --tcd-n-pink: #E703AA;
  --tcd-n-yellow: #F6AC08;
  --tcd-line: color-mix(in srgb, var(--tcd-ink) 15%, transparent);
  --tcd-ink-dim: color-mix(in srgb, var(--tcd-ink) 62%, transparent);
  --tcd-display: 'Hagrid X', 'Arial Black', sans-serif;
  --tcd-body: 'Expressway X', 'Segoe UI', sans-serif;
  --tcd-script: 'TCE Script', cursive;
  --tcd-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* One gutter for the whole system. On desktop a boxed container's
     max-width supplies the margin by itself; at narrow widths it does not,
     and text ends up touching the screen edge. */
  --tcd-gutter: 22px;
}


.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* digits and symbol-heavy strings always render in the complete face */
.num { font-family: var(--tcd-body); font-weight: 700; letter-spacing: -.01em; }

.cssdot {
  display: inline-block; width: 6px; height: 6px; border-radius: 99px;
  background: var(--tcd-brand); vertical-align: 2px; margin: 0 4px;
}


/* ============================================= the charge spine
   A live current runs the length of the page and fills as you
   scroll: the site charging up as one circuit. */
.spine {
  /* Retired in the 10 Sept neon pass: a glowing progress line reads
     as ornament now. Markup and JS stay; nothing renders. */
  display: none;
  position: fixed; left: 26px; top: 0; bottom: 0; width: 3px; z-index: 40;
  background: color-mix(in srgb, var(--tcd-ink) 8%, transparent);
  pointer-events: none;
}
.spine .fill {
  position: absolute; top: 0; left: 0; right: 0; height: 0%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tcd-brand) 55%, transparent), var(--tcd-brand));
  box-shadow: 0 0 12px color-mix(in srgb, var(--tcd-brand) 55%, transparent);
}
.spine .node {
  position: absolute; left: 50%; transform: translate(-50%, -50%);
  width: 11px; height: 11px; border-radius: 99px;
  background: var(--tcd-brand);
  box-shadow: 0 0 16px var(--tcd-brand), 0 0 4px #fff inset;
}
@media (max-width: 1080px) { .spine { display: none; } }

/* ------------------------------------------------ header */
header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  backdrop-filter: blur(14px) saturate(1.2);
  background: color-mix(in srgb, var(--tcd-ground) 72%, transparent);
  border-bottom: 1px solid var(--tcd-line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }

/* the brand lockup — Hagrid caps, script Europe tucked under-right */
.lockup { text-decoration: none; display: inline-block; line-height: 1; }
.lockup .l-main {
  font-family: var(--tcd-display); text-transform: uppercase;
  color: var(--tcd-ink); letter-spacing: -.01em; display: block;
}
.lockup .l-script {
  font-family: var(--tcd-script); color: var(--tcd-brand);
  display: block; text-align: right; line-height: .62;
  text-transform: none;
}
.lockup-nav .l-main { font-size: 17px; }
.lockup-nav .l-script { font-size: 15px; margin-top: 2px; margin-right: -2px; }

.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a {
  color: var(--tcd-ink-dim); text-decoration: none; font-size: 14.5px;
  letter-spacing: .02em; transition: color .2s var(--tcd-ease);
}
.nav-links a:hover { color: var(--tcd-ink); }
.nav-cta {
  background: var(--tcd-cta); color: #fff !important; font-weight: 700;
  padding: 9px 18px; border-radius: 11px;
  transition: transform .18s var(--tcd-ease), box-shadow .18s var(--tcd-ease);
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px var(--tcd-cta); }

/* ------------------------------------------------ hero */
.hero {
  min-height: 100svh;
  display: grid; place-items: center;
  position: relative;
  padding-top: 64px;
  background:
    radial-gradient(900px 520px at 68% 18%, color-mix(in srgb, var(--tcd-brand) 10%, transparent), transparent 70%),
    var(--tcd-ground);
  overflow: hidden;
}

.hero-inner { position: relative; text-align: center; padding: 40px 24px 90px; width: 100%; }

.hero-eyebrow {
  font-weight: 700; font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--tcd-brand);
  opacity: 0; transform: translateY(12px);
}
.booted .hero-eyebrow { animation: rise .7s var(--tcd-ease) 2.1s forwards; }

/* ------- the plug-in rig: the cable plugs EUROPE in, and stays in */
.lockup-stage { position: relative; display: inline-block; margin: 26px 0 6px; }

.hero-lockup .l-main { font-size: clamp(54px, 11vw, 150px); line-height: .92; }
.hero-lockup .l-script {
  font-size: clamp(36px, 6.4vw, 88px);
  margin-top: 4px; margin-right: -.04em; line-height: .8;
}
.hero-lockup { opacity: 0; display: inline-block; }
.booted .hero-lockup { animation: ignite 1.15s steps(1, end) 1.5s forwards; }
/* The flicker stays; the halos went with the 10 Sept neon pass. */
@keyframes ignite {
  0%   { opacity: .07; }
  7%   { opacity: .95; }
  11%  { opacity: .12; }
  17%  { opacity: 1; }
  23%  { opacity: .35; }
  31%  { opacity: 1; }
  40%  { opacity: .75; }
  48%  { opacity: 1; }
  100% { opacity: 1; }
}

/* socket bolted to the wordmark's left edge — Europe's inlet */
.inlet {
  position: absolute; left: -46px; top: 42%;
  width: 34px; height: 56px; border-radius: 10px;
  transform: translateY(-50%);
  background: var(--tcd-ground-deep);
  border: 2px solid color-mix(in srgb, var(--tcd-ink) 30%, var(--tcd-ground));
  display: grid; place-items: center; grid-auto-flow: row; gap: 6px; padding-block: 10px;
  transition: border-color .4s var(--tcd-ease), box-shadow .4s var(--tcd-ease);
  z-index: 2;
}
.inlet i {
  width: 6px; height: 6px; border-radius: 99px;
  background: color-mix(in srgb, var(--tcd-ink) 30%, var(--tcd-ground));
  transition: background .3s, box-shadow .3s;
}
.docked .inlet {
  border-color: var(--tcd-brand);
}
.docked .inlet i { background: var(--tcd-n-green); }

/* the cable: v1's sweeping arc, thicker, anchored to the inlet */
.cablewrap {
  position: absolute;
  right: calc(100% + 26px);   /* nose lands under the inlet: docked, not near it */
  top: 42%; transform: translateY(-50%);
  width: 52vw; max-width: 900px; height: 340px;
  pointer-events: none;
}
.cablewrap svg { width: 100%; height: 100%; overflow: visible; }
.cable {
  fill: none; stroke: color-mix(in srgb, var(--tcd-ink) 32%, var(--tcd-ground));
  stroke-width: 16; stroke-linecap: round;
  stroke-dasharray: 2000; stroke-dashoffset: 2000;
}
.booted .cable { animation: draw 1.1s var(--tcd-ease) .35s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.current {
  fill: none; stroke: var(--tcd-brand); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 70 1930; stroke-dashoffset: 2000;
  opacity: 0;
}
.booted.docked .current { animation: flow 2.6s linear infinite; opacity: 1; }
@keyframes flow { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: -2000; } }

.plug {
  offset-path: path('M -1150 -120 C -760 -120 -560 190 -230 190 C -110 190 -110 6 34 6');
  offset-distance: 0%; offset-rotate: auto;
  opacity: 0;
}
.booted .plug { animation: travel 1.1s var(--tcd-ease) .35s forwards; }
@keyframes travel {
  0%   { offset-distance: 0%; opacity: 1; }
  100% { offset-distance: 100%; opacity: 1; }
}
.spark {
  fill: var(--tcd-n-yellow); opacity: 0;
  transform-origin: center; transform-box: fill-box;
}
.booted .spark { animation: spark .4s ease-out 1.42s; }
@keyframes spark {
  0% { opacity: 1; transform: scale(.2) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.8) rotate(24deg); }
}

.hero-sub {
  max-width: 620px; margin: 22px auto 0;
  color: var(--tcd-ink-dim); font-size: clamp(16px, 1.6vw, 19px);
  opacity: 0; transform: translateY(12px);
}
.booted .hero-sub { animation: rise .7s var(--tcd-ease) 2.25s forwards; }

.hero-ctas {
  display: flex; gap: 14px; justify-content: center; margin-top: 30px;
  opacity: 0; transform: translateY(12px);
}
.booted .hero-ctas { animation: rise .7s var(--tcd-ease) 2.4s forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

.btn {
  font-family: var(--tcd-body); font-weight: 700; font-size: 16px;
  padding: 15px 30px; border-radius: 13px; text-decoration: none;
  display: inline-block; letter-spacing: .02em; border: 0; cursor: pointer;
  transition: transform .18s var(--tcd-ease), box-shadow .18s var(--tcd-ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--tcd-cta); color: #fff; }
.btn-primary:hover { box-shadow: 0 12px 30px -10px var(--tcd-cta); }
.btn-ghost { color: var(--tcd-ink); border: 1px solid var(--tcd-line); background: none; }
.btn-ghost:hover { border-color: var(--tcd-brand); box-shadow: 0 12px 30px -14px var(--tcd-brand); }
/* buttons are not links: their text colour must survive any global
   anchor rule the kit (or our canvas defaults) paints on the page */
.tce .btn-primary, .tce .btn-primary:hover { color: #fff; }
.tce .btn-ghost, .tce .btn-ghost:hover { color: var(--tcd-ink); }

.hero-stats {
  display: flex; gap: 48px; justify-content: center; margin-top: 56px;
  opacity: 0; transform: translateY(12px);
}
.booted .hero-stats { animation: rise .7s var(--tcd-ease) 2.55s forwards; }
.stat { text-align: center; }
.stat b {
  font-family: var(--tcd-body); font-weight: 700;
  font-size: clamp(30px, 4vw, 44px);
  display: block; color: var(--tcd-ink); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.stat b .accent { color: var(--tcd-brand); }
.stat span {
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tcd-ink-dim);
}
.stat .led {
  display: inline-block; width: 7px; height: 7px; border-radius: 99px;
  margin-right: 7px; vertical-align: 1px;
}
.led-g { color: var(--tcd-n-green); background: var(--tcd-n-green); }
.led-y { color: var(--tcd-n-yellow); background: var(--tcd-n-yellow); }
.led-p { color: var(--tcd-n-pink); background: var(--tcd-n-pink); }

/* ------------------------------------------------ ticker */
/* Deliberately still. The logo wall already moves, and two things sliding
   past each other reads as restless rather than alive. */
.ticker {
  border-block: 1px solid var(--tcd-line);
  background: var(--tcd-ground-deep);
  padding: 14px 24px;
}
.ticker-track {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 18px;
  max-width: 1180px; margin: 0 auto;
}
.ticker span {
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tcd-ink-dim);
}
.ticker .cssdot { margin: 0; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------ sections */
/* 60px since 10 Sept (was 110px): the client wants the next section's
   text arriving as you scroll, not two screens of navy between bands. */
.section { padding: 60px var(--tcd-gutter); position: relative; }
.section-eyebrow {
  font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  font-size: 13px; color: var(--tcd-brand); margin-bottom: 14px;
}
.section h2,
.mission h2,
.tcx-mission h2 {
  font-family: var(--tcd-display);
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.02; letter-spacing: -.015em; text-transform: uppercase;
  max-width: 820px;
}
.section-intro { color: var(--tcd-ink-dim); max-width: 560px; margin-top: 18px; font-size: 18px; }

/* ------------------------------------------------ logo wall */
.logo-rows { margin-top: 60px; display: grid; gap: 18px; overflow: hidden; }
.logo-row { display: flex; gap: 18px; width: max-content; }
.logo-row.r1 { animation: marquee 42s linear infinite; }
.logo-row.r2 { animation: marquee 42s linear infinite reverse; }
.logo-chip {
  background: #fff; border-radius: 16px;
  height: 84px; width: 200px; flex: none;
  display: grid; place-items: center; padding: 18px 26px;
  /* a definite 100% track: percentage sizes on the image resolve against
     the content box instead of collapsing to auto (which let tall logos
     size by aspect ratio and spill out of the chip) */
  grid-template: 100% / 100%;
  overflow: hidden;
}
.logo-chip img {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* ------------------------------------------------ the full logo wall
   Every signatory of the 2025 letter, one uniform grid (client ask,
   10 Sept). Neatness rules: identical tiles, identical optical logo
   scale (the tiles are pre-normalised 300x150 renders), alphabetical,
   no motion. The mass of the coalition is the message. */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
  margin-top: 44px;
}
.wall-chip {
  background: #fff;
  border-radius: 10px;
  aspect-ratio: 2 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 7px 9px;
}
.wall-chip img {
  width: 100%; height: 100%;
  object-fit: contain;
}
@media (max-width: 640px) {
  .logo-wall { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-top: 32px; }
  .wall-chip { border-radius: 8px; padding: 5px 7px; }
}
/* Each row rolls down into place in step with the scroll (Anthony,
   10 Sept). Scroll-driven, so it reverses on the way back up; tiles
   already inside the viewport on load sit settled. No support, or
   reduced motion: the wall simply stands. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wall-chip {
      animation: wallroll linear both;
      animation-timeline: view();
      /* entry -> a third of the viewport up: each row's roll spans a
         few hundred pixels of scroll, so the wave reads at mouse-wheel
         speed (entry-only was over in one wheel tick) */
      animation-range: entry 0% cover 35%;
    }
  }
}
@keyframes wallroll {
  from { opacity: 0; transform: translateY(-26px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------ letter */
.quote-band { background: var(--tcd-ground-deep); border-block: 1px solid var(--tcd-line); }
.letter-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 70px; align-items: center; }
.letter-quote {
  font-family: var(--tcd-display); font-size: clamp(30px, 4vw, 52px);
  line-height: 1.05; letter-spacing: -.015em; text-transform: uppercase;
}
.letter-quote em, .letter-quote .num { color: var(--tcd-brand); font-style: normal; }
/* Digits in display headings ride the size-adjusted Hagrid X digit face
   (see the @font-face guard) instead of dropping to the body font at a
   reduced em — that is what made heading numbers render small. */
.letter-quote .num { font-family: inherit; font-weight: inherit; font-size: 1em; }
.letter-card {
  border: 1px solid var(--tcd-line); border-radius: 20px; padding: 38px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tcd-ink) 5%, transparent), transparent 55%);
  position: relative;
  /* the accent rail rides the left edge; clip it to the rounded corners
     so it can never poke past the border curve */
  overflow: hidden;
}
.letter-card::before {
  content: ''; position: absolute; left: 0; top: 24px; bottom: 24px; width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--tcd-brand), var(--tcd-n-pink));
}
.letter-card p { color: var(--tcd-ink-dim); margin-bottom: 16px; }
.sig-count {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--tcd-line); border-radius: 99px; padding: 7px 16px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 22px;
}
.sig-count i {
  width: 7px; height: 7px; border-radius: 99px; background: var(--tcd-n-green);
}
.letter-link {
  color: var(--tcd-brand); font-weight: 700; text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--tcd-brand) 40%, transparent);
  transition: border-color .2s;
  display: inline-flex; align-items: center; gap: 8px;
}
.letter-link:hover { border-color: var(--tcd-brand); }
.letter-link svg { width: 15px; height: 15px; }

/* ------------------------------------------------ pillars — alive on arrival */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 64px; }
.pillar {
  border: 1px solid var(--tcd-line); border-radius: 18px; overflow: hidden;
  background: var(--tcd-ground-deep);
  transition: transform .3s var(--tcd-ease), border-color .3s var(--tcd-ease), box-shadow .3s var(--tcd-ease);
  position: relative;
}
/* colour from the start: per-pillar accent duotone, not black and white */
.pillar figure,
.pillar .pillar-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; margin: 0; }
.pillar .pillar-media img { width: 100%; height: 100%; }
.pillar figure img,
.pillar .pillar-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.85) contrast(1.05) brightness(.9);
  transition: filter .5s var(--tcd-ease), transform .6s var(--tcd-ease);
}
.pillar figure::after,
.pillar .pillar-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pc, var(--tcd-brand)) 26%, transparent),
    color-mix(in srgb, var(--tcd-ground) 66%, transparent) 92%);
  mix-blend-mode: multiply;
}
.pillar figure::before,
.pillar .pillar-media::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 3px; z-index: 2;
  background: var(--pc, var(--tcd-brand));
  transform: scaleX(0); transform-origin: left;
}
.pillar:hover figure img,
.pillar:hover .pillar-media img { filter: saturate(1.05) contrast(1) brightness(.98); transform: scale(1.05); }
.pillar:hover { transform: translateY(-6px); }
.pillar-body { padding: 24px 24px 30px; }
.pillar h3,
.pillar .elementor-widget-heading .elementor-heading-title {
  color: var(--tcd-ink);
  font-family: var(--tcd-display); font-size: 19px; letter-spacing: -.01em;
  text-transform: uppercase; line-height: 1.15; margin-bottom: 10px;
}
.pillar p,
.pillar .elementor-widget-text-editor { color: var(--tcd-ink-dim); font-size: 15px; line-height: 1.6; }

/* The glow relay is retired (10 Sept neon pass — it superseded the
   same-day hover fix): the cards stand still. Hover lifts the card,
   colours its edge and draws its flat accent line. No glow, no
   animation clocks; .is-live stays on the row but drives nothing. */
.pillar:hover { border-color: color-mix(in srgb, var(--pc, var(--tcd-brand)) 55%, transparent); }
.pillar:hover figure::before,
.pillar:hover .pillar-media::before { transform: scaleX(1); }

/* every band carries the gutter; a .wrap inside must not add a second one */
.tce.tcx-mission, .tce.foot-band, .tce.entry-band, .tce.form-band { padding-inline: var(--tcd-gutter); }
.tce.section > .wrap,
.tce.tcx-mission > .wrap,
.tce.foot-band > .wrap,
.tce.journey > .wrap { padding-inline: 0; }

/* ------------------------------------------------ mission — the photo is the point */
.mission {
  position: relative; overflow: hidden;
  border-block: 1px solid var(--tcd-line);
  min-height: 78vh;
  display: grid; align-items: end;
}
.mission .bg { position: absolute; inset: -12% 0; }
.mission .bg img {
  width: 100%; height: 100%; object-fit: cover;
  /* colour photo, gently graded into the world — not black and white */
  filter: saturate(.95) contrast(1.04) brightness(.9);
}
.mission .bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--tcd-ground) 92%, transparent) 10%, transparent 52%),
    linear-gradient(90deg, color-mix(in srgb, var(--tcd-ground) 45%, transparent), transparent 40%);
}
.mission .shade {
  position: absolute; inset: 0; background: var(--tcd-ground); opacity: .18;
}
.mission h2, .mission .section-intro, .mission .section-eyebrow {
  text-shadow: 0 2px 26px rgba(10, 10, 22, .85), 0 1px 4px rgba(10, 10, 22, .6);
}
.mission .wrap { position: relative; padding-block: 0 70px; }
.mission h2 { max-width: 640px; }
.mission h2 .accent { color: var(--tcd-brand); }
.mission .section-intro { max-width: 480px; }

/* scroll-driven parallax where supported; static and lovely where not */
@supports (animation-timeline: view()) {
  .mission .bg img {
    animation: par linear both;
    animation-timeline: view();
  }
  @keyframes par {
    /* anti-scroll: image drifts against the page for depth */
    from { transform: translateY(7%)  scale(1.08); }
    to   { transform: translateY(-7%) scale(1.08); }
  }
  .mission .shade {
    animation: shade linear both;
    animation-timeline: view();
  }
  @keyframes shade {
    from { opacity: .08; }
    60%  { opacity: .35; }
    to   { opacity: .72; }
  }
  .pillar figure img {
    animation: par2 linear both;
    animation-timeline: view();
  }
  @keyframes par2 {
    from { transform: translateY(-4%) scale(1.09); }
    to   { transform: translateY(4%)  scale(1.09); }
  }
}

/* ------------------------------------------------ voices */
.bigquote {
  font-family: var(--tcd-display);
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1.08; letter-spacing: -.015em; text-transform: uppercase;
  max-width: 900px; position: relative; padding-top: 34px;
}
.bigquote::before {
  content: '"'; font-family: var(--tcd-body); font-weight: 700;
  position: absolute; top: -6px; left: 0;
  font-size: 74px; line-height: 1; color: var(--tcd-brand); opacity: .85;
}
.bigquote mark {
  background: none; color: var(--tcd-ink);
  /* one flat editorial underline — the blue-to-pink gradient read as
     a neon highlight (10 Sept pass) */
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--tcd-brand) 40%, transparent), color-mix(in srgb, var(--tcd-brand) 40%, transparent));
  background-repeat: no-repeat; background-size: 100% 30%; background-position: 0 90%;
}
.attrib { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--tcd-line); border-radius: 99px; padding: 8px 18px;
  font-size: 13.5px; letter-spacing: .06em; color: var(--tcd-ink-dim);
}

/* ------------------------------------------------ insights — colour first */
.insights { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 60px; }
.insight {
  border: 1px solid var(--tcd-line); border-radius: 18px; overflow: hidden;
  background: var(--tcd-ground-deep); text-decoration: none; color: var(--tcd-ink);
  transition: transform .3s var(--tcd-ease), border-color .3s var(--tcd-ease);
  display: block;
}
.insight:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--tcd-brand) 50%, transparent); }
.insight figure { aspect-ratio: 21 / 9; overflow: hidden; position: relative; }
.insight figure img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) brightness(.92);
  transition: filter .5s var(--tcd-ease), transform .6s var(--tcd-ease);
}
.insight figure::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--tcd-ground) 82%, transparent));
}
.insight:hover figure img { filter: saturate(1.05) brightness(1); transform: scale(1.03); }
.insight-body { padding: 24px 26px 28px; }
.insight .meta {
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tcd-brand); margin-bottom: 10px;
}
.insight h3 {
  font-family: var(--tcd-display); font-size: 21px; line-height: 1.2;
  letter-spacing: -.01em; text-transform: uppercase;
}
.insight h3 .num { font-family: inherit; font-weight: inherit; font-size: 1em; }

/* ------------------------------------------------ voices, as cards
   Restyled from the 2025 carousel: standing still, in the campaign's
   own palette, with the person as prominent as the sentence. */
.voices {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 48px;
}
.voice {
  margin: 0; padding: 26px 24px 22px;
  border: 1px solid var(--tcd-line); border-radius: 18px;
  background: var(--tcd-ground);
  display: flex; flex-direction: column; gap: 20px;
  position: relative; overflow: hidden;
  transition: border-color .3s var(--tcd-ease), transform .3s var(--tcd-ease), box-shadow .3s var(--tcd-ease);
}
/* the charge running along the top edge, lit on hover */
.voice::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--tcd-brand), var(--tcd-n-green));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--tcd-ease);
}
.voice:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--tcd-brand) 45%, transparent);
}
.voice:hover::before { transform: scaleX(1); }

.voice-quote {
  margin: 0; flex: 1;
  font-size: 15.5px; line-height: 1.62; color: var(--tcd-ink);
}
.voice-quote::before {
  content: '“';
  font-family: var(--tcd-display); font-size: 34px; line-height: 0;
  color: var(--tcd-brand); vertical-align: -.18em; margin-right: 4px;
}
.voice-quote::after { content: '”'; }

.voice-who { display: flex; align-items: center; gap: 12px; }
.voice-portrait {
  flex: none; width: 46px; height: 46px; border-radius: 99px; overflow: hidden;
  background: var(--tcd-ground-deep);
  border: 1px solid color-mix(in srgb, var(--tcd-ink) 18%, transparent);
}
.voice-portrait img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) contrast(1.03);
}
.voice-id { display: flex; flex-direction: column; min-width: 0; }
.voice-name { font-weight: 700; font-size: 14.5px; color: var(--tcd-ink); }
.voice-role { font-size: 12.5px; color: var(--tcd-ink-dim); line-height: 1.35; }

@media (max-width: 1000px) { .voices { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .voices { grid-template-columns: 1fr; margin-top: 32px; } }

/* ------------------------------------------------ CTA */
.cta-band { text-align: center; position: relative; overflow: hidden; }
.cta-band .grid-lines {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--tcd-ink) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--tcd-ink) 4%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(600px 380px at 50% 50%, #000, transparent);
}
/* charge races through the grid: pulses on the traces, cells lighting up */
.circuit { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* The circuit-board backdrop is retired with the rest of the neon
   (10 Sept): the support band stands on plain ground. Widget and
   markup remain; nothing renders. */
.tce .cta-decor { display: none; }
.trace {
  position: absolute; height: 2px; width: 160px;
  background: linear-gradient(90deg, transparent, var(--tcd-brand) 55%, transparent);
  filter: drop-shadow(0 0 7px var(--tcd-brand));
  left: -180px;
  animation: traceX var(--tdur, 6s) linear var(--tdelay, 0s) infinite;
  opacity: .85;
}
.trace.v {
  width: 2px; height: 140px; left: auto; top: -160px;
  background: linear-gradient(180deg, transparent, var(--tcd-brand) 55%, transparent);
  animation: traceY var(--tdur, 7s) linear var(--tdelay, 0s) infinite;
}
@keyframes traceX { to { transform: translateX(calc(100vw + 360px)); } }
@keyframes traceY { to { transform: translateY(620px); } }
.cell {
  position: absolute; width: 10px; height: 10px; border-radius: 3px;
  background: var(--tcd-brand); opacity: 0;
  box-shadow: 0 0 16px var(--tcd-brand);
  animation: cellblink var(--cdur, 5.2s) ease-in-out var(--cdelay, 0s) infinite;
}
@keyframes cellblink {
  0%, 78%, 100% { opacity: 0; }
  84% { opacity: .95; }
  90% { opacity: .25; }
  94% { opacity: .7; }
}
.cta-band h2, .cta-band .section-intro { margin-inline: auto; }
.cta-band form { margin-top: 38px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-band input {
  font-family: var(--tcd-body); font-size: 16px; color: var(--tcd-ink);
  background: color-mix(in srgb, var(--tcd-ink) 7%, transparent);
  border: 1px solid var(--tcd-line); border-radius: 13px;
  padding: 15px 20px; width: min(360px, 80vw);
  transition: border-color .2s, box-shadow .2s;
}
.cta-band input::placeholder { color: var(--tcd-ink-dim); }
.cta-band input:focus {
  outline: none; border-color: var(--tcd-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tcd-brand) 25%, transparent);
}

/* ------------------------------------------------ footer */
footer { border-top: 1px solid var(--tcd-line); padding: 44px 0 60px; color: var(--tcd-ink-dim); font-size: 14px; }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
footer nav a { color: var(--tcd-ink-dim); text-decoration: none; margin-left: 22px; }
footer nav a:hover { color: var(--tcd-ink); }

/* ------------------------------------------------ reveal */
.rev { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--tcd-ease), transform .8s var(--tcd-ease); }
.rev.is-on { opacity: 1; transform: none; }
.rev.d1 { transition-delay: .08s; } .rev.d2 { transition-delay: .16s; }
.rev.d3 { transition-delay: .24s; } .rev.d4 { transition-delay: .32s; }

/* ------------------------------------------------ responsive */
@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr 1fr; }
  .letter-grid { grid-template-columns: 1fr; gap: 40px; }
  .insights { grid-template-columns: 1fr; }
  .nav-links a:not(.nav-cta) { display: none; }
  .cablewrap, .inlet { display: none; }   /* the plug-in is a desktop moment */
  .hero-stats { gap: 26px; flex-wrap: wrap; }
}
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }

/* ------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .booted .cable, .booted .current, .booted .plug, .booted .spark,
  .booted .hero-lockup, .booted .hero-eyebrow, .booted .hero-sub,
  .booted .hero-ctas, .booted .hero-stats {
    animation: none !important; opacity: 1 !important; transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .booted .hero-lockup { filter: none; }
  .ticker-track, .logo-row, .ion, .trace, .cell { animation: none !important; }
  .trace, .cell { opacity: 0 !important; }
  .mission .shade { animation: none !important; opacity: .3 !important; }
  .pillars.is-live .pillar, .pillars.is-live .pillar figure::before,
.pillar .pillar-media::before { animation: none !important; }
  .mission .bg img, .pillar figure img { animation: none !important; }
  .rev { opacity: 1; transform: none; transition: none; }
  .spine .node { box-shadow: none; }
}


/* pillar accent variants (widget-assigned) */
.pillar--blue   { --pc: #0472FD; }
.pillar--green  { --pc: #008433; }
.pillar--yellow { --pc: #F6AC08; }
.pillar--pink   { --pc: #E703AA; }

/* ==========================================================
   .tce scope: the widgets' own foundation, so the design
   holds on Elementor pages where body is styled by the kit.
   ========================================================== */
.tce, .tce *, .tce *::before, .tce *::after { box-sizing: border-box; }
.tce {
  font-family: var(--tcd-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tcd-ink);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
.tce img { max-width: 100%; display: block; border-radius: 0; }
/* zero only the block axis: inline margins stay available for
   auto-centering (.hero-sub and friends centre themselves) */
.tce p { margin-block: 0; }
.tce.section { background: var(--tcd-ground); }
.tce.quote-band, .tce.ticker { background: var(--tcd-ground-deep); }
.tce ::selection { background: var(--tcd-brand); color: #fff; }

/* the prototype leaned on browser-default bold; WP themes set 500 on headings,
   so the weight is now explicit */
.tce h2, .tce h3 { font-weight: 700; }

/* native compositions need no inline vars: stagger by position */
.pillar:nth-child(1) { --i: 0; }
.pillar:nth-child(2) { --i: 1; }
.pillar:nth-child(3) { --i: 2; }
.pillar:nth-child(4) { --i: 3; }
.pillar:nth-child(5) { --i: 4; }
.pillar:nth-child(6) { --i: 5; }

/* ==========================================================
   Canvas defaults: on campaign pages (Elementor canvas), ANY
   element the team adds — plain heading, text, button — wakes
   up already wearing the system. Specificity ladder, low → high:
   kit globals (0,2,0) < these defaults (0,2,1) < .tce system
   classes (0,3,0) < per-element editor styling (0,4,0).
   ========================================================== */
body.elementor-template-canvas {
  background: var(--tcd-ground);
  color: var(--tcd-ink);
  font-family: var(--tcd-body);
}
body.elementor-template-canvas .elementor-heading-title {
  font-family: var(--tcd-display);
  color: var(--tcd-ink);
  text-transform: uppercase;
  letter-spacing: -.015em;
  line-height: 1.05;
}
body.elementor-template-canvas .elementor-widget-text-editor {
  font-family: var(--tcd-body);
  color: var(--tcd-ink-dim);
}
body.elementor-template-canvas .elementor-button {
  background: var(--tcd-cta);
  color: #fff;
  font-family: var(--tcd-body);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 13px;
  padding: 14px 24px;
}
/* content links only — buttons and chips keep their own colours */
body.elementor-template-canvas .elementor-widget-text-editor a {
  color: var(--tcd-brand);
}

/* ==========================================================
   Native adapters: our typographic classes applied to
   Elementor widget WRAPPERS pass their look to the inner
   element, so headings and text editors wear the system.
   ========================================================== */
.letter-quote.elementor-widget .elementor-heading-title,
.bigquote.elementor-widget .elementor-heading-title,
.section-eyebrow.elementor-widget .elementor-heading-title,
.section-intro.elementor-widget p,
.section-intro.elementor-widget .elementor-heading-title {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
  margin: 0;
}
.letter-quote em,
.tcx-mission h2 em,
.tcx-mission .elementor-heading-title em {
  font-style: normal;
  color: var(--tcd-brand);
}

/* the letter's link as a native button — .tce prefix outguns the kit's
   button globals (0,3,0 vs 0,2,0), while per-element editor styling
   (0,4,0) still wins, so the team can restyle it deliberately */
.tce .letter-link-btn .elementor-button {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 0 2px;
  color: var(--tcd-brand);
  font-family: var(--tcd-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 2px solid color-mix(in srgb, var(--tcd-brand) 40%, transparent);
  transition: border-color .2s;
}
.tce .letter-link-btn .elementor-button:hover,
.tce .letter-link-btn .elementor-button:focus {
  border-bottom-color: var(--tcd-brand);
  background: none;
  color: var(--tcd-brand);
  transform: none;
  box-shadow: none;
}

/* mission as a native container: overlay + scroll shade ride on pseudos */
.tcx-mission {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--tcd-line);
}
/* default presentation lives here, deterministically; an editor who sets a
   background or height in Elementor overrides via element-id specificity */
.tce.tcx-mission {
  /* Elementor's own min-height var chain zeroes out inside its flex plumbing;
     this is a layout constant of the section, so it holds firmly */
  min-height: 78vh !important;
  justify-content: flex-end;
}
/* the photo is a real image widget: editors click it and swap it */
.tcx-mission .mission-bg {
  position: absolute;
  inset: 0;
  z-index: 0 !important;
  margin: 0;
}
.tcx-mission .mission-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.95) contrast(1.04) brightness(.9);
}
.tcx-mission .mission-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--tcd-ground) 92%, transparent) 10%, transparent 52%),
    linear-gradient(90deg, color-mix(in srgb, var(--tcd-ground) 45%, transparent), transparent 40%);
}
.tcx-mission h2,
.tcx-mission .elementor-heading-title,
.tcx-mission p {
  text-shadow: 0 2px 26px rgba(10, 10, 22, .85), 0 1px 4px rgba(10, 10, 22, .6);
}
@supports (animation-timeline: view()) {
  .tcx-mission .mission-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--tcd-ground);
    opacity: .08;
    pointer-events: none;
    z-index: 1;
    animation: tcxshade linear both;
    animation-timeline: view();
  }
  @keyframes tcxshade {
    from { opacity: .08; }
    60%  { opacity: .35; }
    to   { opacity: .72; }
  }
}

/* grid must beat the container's own flex regardless of stylesheet order */
.tce .pillars { display: grid; }

/* CTA as a native container: the circuit board is a decor widget pinned
   across the whole band; everything else is ordinary editable widgets. */
.tce.cta-band { position: relative; overflow: hidden; }
.tce.cta-band .elementor-widget.cta-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  pointer-events: none;
}
.tce.cta-band .elementor-widget:not(.cta-decor) {
  position: relative;
  z-index: 1;
}
.tce.cta-band .elementor-heading-title,
.tce.cta-band .elementor-widget-text-editor p {
  margin-inline: auto;
}
.tce.cta-band .support-embed { margin-top: 38px; }

/* ==========================================================
   Campaign subpages: top bar, invitation journey, form skin.
   ========================================================== */

/* ---- slim header for canvas subpages */
/* The homepage's floating nav is styled on the bare `header` element, which
   also matches this one — leaving the subpage bar fixed over the top of the
   page it belongs to, hiding the greeting beneath it. This bar sits in the
   flow. */
.tce.topbar {
  position: static;
  backdrop-filter: none;
  border-bottom: 1px solid var(--tcd-line);
  background: var(--tcd-ground);
}
/* Sticky, not fixed: it keeps its place in the flow, so it can never sit
   on top of the content beneath it. */
.tce.topbar--sticky { position: sticky; top: 0; z-index: 50; }
.topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 16px; }
.topbar-aside { display: flex; align-items: center; gap: 22px; }
.topbar .nav-links { gap: 26px; }
.topbar .nav-links a { font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.topbar .nav-cta { font-size: 14px; padding: 9px 18px; text-decoration: none; white-space: nowrap; }
/* No burger menu yet: below this width the links give way to the button,
   which is the only one that has to survive. */
@media (max-width: 900px) { .topbar .nav-links { display: none; } }

/* ---- the fuller footer: contact, campaign links, socials */
.foot-top { padding-bottom: 4px; }
.tce .foot-heading {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tcd-brand); margin: 0;
}
.tce .foot-brand {
  font-family: var(--tcd-display); font-size: 19px; text-transform: uppercase;
  color: var(--tcd-ink); margin: 0;
}
.tce .foot-note { font-size: 13.5px; color: var(--tcd-ink-dim); margin: 0; max-width: 34ch; line-height: 1.6; }
.foot-contact, .foot-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-contact li { font-size: 13.5px; color: var(--tcd-ink-dim); line-height: 1.5; }
.foot-contact li span { display: block; font-weight: 700; color: var(--tcd-ink); }
.foot-menu li { font-size: 13.5px; }
/* The canvas default paints text-editor links brand blue at (0,2,2)
   — `body.elementor-template-canvas .elementor-widget-text-editor a`.
   A whole footer of blue links reads as a page full of warnings, so these
   go one class deeper to (0,3,1). */
.tce.foot-band .foot-contact a,
.tce.foot-band .foot-menu a,
.tce.foot-band .foot-links a {
  color: var(--tcd-ink-dim); text-decoration: none;
}
.tce.foot-band .foot-contact a:hover,
.tce.foot-band .foot-menu a:hover,
.tce.foot-band .foot-links a:hover { color: var(--tcd-brand); }
/* one row, always: Elementor's own grid would wrap three icons to two lines
   inside a narrow column */
.foot-social .elementor-grid { display: flex; gap: 10px; }
.foot-social .elementor-grid-item { width: auto; }
/* the social buttons wear the campaign, not Elementor's defaults */
.foot-social .elementor-social-icon {
  background: color-mix(in srgb, var(--tcd-ink) 8%, transparent);
  border: 1px solid var(--tcd-line);
  width: 38px; height: 38px; border-radius: 11px;
  transition: background .2s, border-color .2s, transform .2s var(--tcd-ease);
}
.foot-social .elementor-social-icon:hover {
  background: var(--tcd-brand); border-color: var(--tcd-brand); transform: translateY(-2px);
}
.foot-social .elementor-social-icon i,
.foot-social .elementor-social-icon svg { color: var(--tcd-ink); fill: var(--tcd-ink); font-size: 16px; }
.foot-social .elementor-social-icon:hover i,
.foot-social .elementor-social-icon:hover svg { color: #fff; fill: #fff; }

/* footer links row */
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.tce .foot-row strong { color: var(--tcd-ink); }
.topbar-note {
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tcd-ink-dim);
}
.topbar-link {
  font-size: 14px; font-weight: 700; color: var(--tcd-brand); text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--tcd-brand) 40%, transparent);
  padding-bottom: 1px; transition: border-color .2s;
}
.topbar-link:hover { border-bottom-color: var(--tcd-brand); }
@media (max-width: 640px) { .topbar-note { display: none; } }

/* ---- the entry band: the ask is in the fold, everything else is below it */
.tce.entry-band { padding: 26px var(--tcd-gutter) 44px; background: var(--tcd-ground); }
/* the journey renders its own .wrap; inside a boxed band that would inset it
   out of line with the columns below */
.entry-band .journey .wrap { max-width: none; padding: 0; }
.entry-band .elementor-widget-heading h1.elementor-heading-title {
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.02; letter-spacing: -.015em;
  max-width: 14ch;
}
.entry-band .section-intro { margin-top: 0; }
.entry-band .reassure { margin: 4px 0 0; }
/* facts and chips share one text block, so no container gap separates them */
.entry-band .factlist + .reassure { margin-top: 24px; }

/* the facts that decide whether they can come at all: in the fold, factual */
.factlist { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.factlist li {
  display: flex; gap: 16px; align-items: baseline;
  border-top: 1px solid var(--tcd-line); padding-top: 12px;
}
.factlist li:first-child { border-top: 0; padding-top: 0; }
.fact-k {
  flex: none; width: 58px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tcd-brand);
}
.fact-v { font-size: 16px; font-weight: 700; color: var(--tcd-ink); line-height: 1.4; }
.fact-sub { display: block; font-weight: 400; font-size: 14px; color: var(--tcd-ink-dim); margin-top: 3px; }

/* ---- rehearsal bar: only ever shown to test invitations */
.rehearsal-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 9px 14px;
  border: 1px dashed color-mix(in srgb, var(--tcd-n-yellow) 45%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--tcd-n-yellow) 6%, transparent);
}
.rehearsal-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tcd-n-yellow);
}
.rehearsal-note { font-size: 13px; color: var(--tcd-ink-dim); }
.rehearsal-reset {
  margin-left: auto; font-size: 13px; font-weight: 700;
  color: var(--tcd-ink); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--tcd-ink) 35%, transparent);
  transition: border-color .2s, color .2s;
}
.rehearsal-reset:hover { color: var(--tcd-n-yellow); border-bottom-color: var(--tcd-n-yellow); }
@media (max-width: 767px) {
  .rehearsal-reset { margin-left: 0; }
  .rehearsal-note { width: 100%; order: 3; }
}

/* ---- the journey rail: who you are and where you are, in one strip */
.tce.journey { padding: 0 0 26px; background: none; }
.journey-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
/* Rhythm by flex gap, not margins: the foundation's `.tce p` reset (0,1,1)
   outranks a bare class, so margin-based spacing here silently collapsed. */
.journey-who {
  min-width: 260px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 11px;
}
.journey .section-eyebrow { margin-bottom: 0; }
.tce .journey-heading {
  font-family: var(--tcd-display); text-transform: uppercase;
  font-size: clamp(19px, 2.1vw, 26px); line-height: 1.1; letter-spacing: -.01em;
  color: var(--tcd-ink); margin: 0;
}
.tce .journey-id {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  border: 1px solid var(--tcd-line); border-radius: 99px; padding: 7px 16px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .03em; color: var(--tcd-ink-dim);
  background: color-mix(in srgb, var(--tcd-ink) 4%, transparent);
}
.tce .journey-note { color: var(--tcd-ink-dim); margin: 0; max-width: 46ch; font-size: 14.5px; }

/* the flow itself: sockets on a cable */
/* The journey as a pair of quiet buttons (client, 10 Sept): the page
   you are on reads selected (soft ink fill, no colour), the other is a
   plain outlined pill that walks there, an arrow carries the order and
   a checkmark marks what is done. No glow anywhere. A lone step never
   renders at all — the widget skips the rail (see class-journey.php). */
.steps {
  list-style: none; padding: 0; margin: 0;
  display: flex; align-items: center; row-gap: 10px; flex-wrap: wrap;
  font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
.step {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--tcd-line); border-radius: 11px;
  transition: border-color .2s, background-color .2s;
}
/* the arrow lives in the gap between pills, outside both borders */
.step + .step { margin-left: 34px; }
.step + .step::before {
  content: '\2192';
  position: absolute; left: -34px; top: 50%; transform: translateY(-50%);
  width: 34px; text-align: center;
  color: var(--tcd-ink-dim);
}
.step-dot { display: none; }
.step--done .step-dot { display: inline; line-height: 1; }
.step--done .step-dot::before {
  content: '\2713';
  color: var(--tcd-n-green);
  font-weight: 700; font-size: 14px;
}
.step-label { font-weight: 600; font-size: 14px; color: var(--tcd-ink); }
/* the state still speaks ("this page", "done") — to screen readers;
   sighted visitors read it from the fill and the checkmark */
.step-state {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* selected: where you are */
.step--active {
  background: color-mix(in srgb, var(--tcd-ink) 10%, transparent);
  border-color: color-mix(in srgb, var(--tcd-ink) 26%, transparent);
}
/* de-selected: a door, not a state */
.step--todo .step-label { color: var(--tcd-ink-dim); }
.step--todo:hover { border-color: color-mix(in srgb, var(--tcd-ink) 32%, transparent); }
.step--todo:hover .step-label { color: var(--tcd-ink); }
.step--todo:focus-within { border-color: var(--tcd-brand); }
/* done: quietly green at the edge, the checkmark does the talking */
.step--done { border-color: color-mix(in srgb, var(--tcd-n-green) 34%, transparent); }
.step--done .step-label { color: var(--tcd-ink-dim); }
@media (max-width: 767px) {
  .step { padding: 6px 11px; gap: 6px; }
  .step + .step { margin-left: 24px; }
  .step + .step::before { left: -24px; width: 24px; }
  .step-label { font-size: 12.5px; }
}

/* what's next: hidden until this page's form is done (or on arrival, if it
   already was) — design.js flips it live the moment the submit succeeds */
.next-card {
  display: none; margin-top: 22px; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border: 1px solid color-mix(in srgb, var(--tcd-n-green) 40%, transparent);
  border-radius: 14px; padding: 16px 20px;
  background: color-mix(in srgb, var(--tcd-n-green) 7%, transparent);
}
.next-card.is-on { display: flex; animation: nextin .5s var(--tcd-ease); }
@keyframes nextin { from { opacity: 0; transform: translateY(8px); } }
.next-msg { color: var(--tcd-ink); font-weight: 700; }
.next-link {
  color: var(--tcd-brand); font-weight: 700; text-decoration: none; font-size: 17px;
  border-bottom: 2px solid color-mix(in srgb, var(--tcd-brand) 40%, transparent);
  transition: border-color .2s;
}
.next-link:hover { border-bottom-color: var(--tcd-brand); }

/* the inverse offer: the seat is not conditional on the signature, and the
   page says so before the form does. Same anatomy as .next-card, but neutral:
   nothing has been completed, nothing is being congratulated. */
.offer-card {
  display: flex; margin-top: 22px; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border: 1px solid color-mix(in srgb, var(--tcd-ink) 14%, transparent);
  border-radius: 14px; padding: 16px 20px;
  background: color-mix(in srgb, var(--tcd-ink) 4%, transparent);
}

/* a de-selected pill names another page and walks there; the whole
   pill is the click target, not just the words */
.step-link { color: inherit; text-decoration: none; }
.step-link::after { content: ''; position: absolute; inset: 0; }

/* ---- the form: an instrument, not a stack of boxes */
.tce.form-band { padding: 44px var(--tcd-gutter) 52px; }
.form-shell {
  /* The form card runs the system grotesque (10 Sept): the demo
     Expressway cut renders lowercase "s" as a small capital, and a
     form is where people read their own words back. Scoping the var
     here re-fonts everything inside the shell that asks for
     --tcd-body, on every page the shell appears. */
  --tcd-body: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-family: var(--tcd-body);
  border: 1px solid color-mix(in srgb, var(--tcd-ink) 13%, transparent);
  border-radius: 22px;
  background:
    radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--tcd-brand) 9%, transparent), transparent 62%),
    linear-gradient(168deg, color-mix(in srgb, var(--tcd-ink) 6%, transparent), transparent 58%),
    var(--tcd-ground-deep);
  padding: 32px 30px 28px;
  position: relative; overflow: hidden;
  box-shadow: 0 44px 90px -60px #000;
}
/* the form charges as it fills — design.js sets --charge from 0 to 1 */
.form-shell::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--tcd-brand), var(--tcd-n-green));
  transform: scaleX(var(--charge, 0)); transform-origin: left;
  transition: transform .5s var(--tcd-ease);
}
.tce .form-shell .elementor-field-group { margin-bottom: 4px; }
/* conditional fields: hidden until their toggle is ticked (see design.js).
   Elementor sets display on the group, so this has to out-rank it. */
.tce .form-shell .elementor-form .elementor-field-group.tce-hidden { display: none; }
/* toggles carry their question in the checkbox text, so their label is
   deliberately empty — an empty label should take no space */
.tce .form-shell .elementor-field-group > label:empty { display: none; }
/* a checkbox row is a statement, not a labelled field: tighten it up */
.tce .form-shell .elementor-field-type-checkbox { margin-block: 2px 6px; }
/* Sentence case at reading size since 10 Sept — the spaced-caps
   micro-label treatment is retired on forms, as on the homepage. */
.tce .form-shell .elementor-field-label {
  font-family: var(--tcd-body);
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em; text-transform: none;
  color: color-mix(in srgb, var(--tcd-ink) 62%, transparent);
  margin-bottom: 7px; transition: color .2s;
}
/* checkbox statements: Elementor pins the kit family on subgroup labels
   at (0,2,1), which inheritance alone cannot beat */
.tce .form-shell .elementor-field-subgroup label { font-family: var(--tcd-body); }
.tce .form-shell .elementor-field-group:focus-within .elementor-field-label { color: var(--tcd-brand); }
.tce .form-shell .elementor-mark-required .elementor-field-label::after { color: var(--tcd-cta); }
.tce .form-shell input:not([type='submit']):not([type='checkbox']),
.tce .form-shell textarea,
.tce .form-shell select {
  font-family: var(--tcd-body); font-size: 15.5px; color: var(--tcd-ink);
  background: color-mix(in srgb, var(--tcd-ink) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--tcd-ink) 12%, transparent);
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.tce .form-shell input:not([type='submit']):not([type='checkbox'])::placeholder,
.tce .form-shell textarea::placeholder { color: color-mix(in srgb, var(--tcd-ink) 34%, transparent); }
.tce .form-shell input:not([type='submit']):not([type='checkbox']):hover,
.tce .form-shell textarea:hover { border-color: color-mix(in srgb, var(--tcd-ink) 24%, transparent); }
.tce .form-shell input:not([type='submit']):focus,
.tce .form-shell textarea:focus,
.tce .form-shell select:focus {
  outline: none; border-color: var(--tcd-brand);
  background: color-mix(in srgb, var(--tcd-brand) 7%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tcd-brand) 22%, transparent);
}
.tce .form-shell textarea { min-height: 84px; resize: vertical; }

/* Upload as a dropzone, not a grey OS button.
   The form widget's own generated CSS paints every .elementor-field at
   specificity (0,6,0); these two controls have to out-count it to escape
   the plain-input treatment, hence the long selectors. */
.tce .elementor-element.form-shell .elementor-form .elementor-field-group .elementor-field[type='file'] {
  width: 100%; font-size: 13.5px; color: var(--tcd-ink-dim);
  background: none;
  border: 1px dashed color-mix(in srgb, var(--tcd-ink) 22%, transparent);
  border-radius: 14px; padding: 15px; cursor: pointer;
}
.tce .elementor-element.form-shell .elementor-form .elementor-field-group .elementor-field[type='file']:hover {
  border-color: var(--tcd-brand);
  background: color-mix(in srgb, var(--tcd-brand) 5%, transparent);
}
.tce .form-shell input[type='file']::file-selector-button {
  font-family: var(--tcd-body); font-weight: 700; font-size: 13px;
  color: var(--tcd-ink); background: color-mix(in srgb, var(--tcd-ink) 8%, transparent);
  border: 0; border-radius: 9px;
  padding: 8px 14px; margin-right: 14px; cursor: pointer;
  transition: background .2s, color .2s;
}
.tce .form-shell input[type='file']::file-selector-button:hover { background: var(--tcd-brand); color: #fff; }

/* a real checkbox, drawn by us — box and label on one line */
.tce .form-shell .elementor-field-subgroup .elementor-field-option {
  display: flex; align-items: flex-start; gap: 11px;
}
.tce .form-shell .elementor-field-subgroup label {
  color: var(--tcd-ink-dim); font-size: 14.5px; cursor: pointer; line-height: 1.45;
}
.tce .elementor-element.form-shell .elementor-form .elementor-field-group .elementor-field[type='checkbox'] {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 20px; height: 20px; margin: 1px 0 0; padding: 0;
  border: 1px solid color-mix(in srgb, var(--tcd-ink) 26%, transparent);
  border-radius: 6px; background: color-mix(in srgb, var(--tcd-ink) 5%, transparent);
  display: grid; place-content: center; cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.tce .elementor-element.form-shell .elementor-form .elementor-field-group .elementor-field[type='checkbox']::before {
  content: ''; width: 5px; height: 10px; margin-top: -3px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .18s var(--tcd-ease);
}
.tce .elementor-element.form-shell .elementor-form .elementor-field-group .elementor-field[type='checkbox']:hover { border-color: var(--tcd-brand); }
.tce .elementor-element.form-shell .elementor-form .elementor-field-group .elementor-field[type='checkbox']:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tcd-brand) 25%, transparent); outline: none;
}
.tce .elementor-element.form-shell .elementor-form .elementor-field-group .elementor-field[type='checkbox']:checked {
  background: var(--tcd-brand); border-color: var(--tcd-brand);
}
.tce .elementor-element.form-shell .elementor-form .elementor-field-group .elementor-field[type='checkbox']:checked::before { transform: rotate(45deg) scale(1); }

/* the submit: full width, and it sweeps with current on hover */
.tce .form-shell .elementor-field-type-submit { margin-top: 14px; }
.tce .form-shell .elementor-field-type-submit .elementor-field-group { width: 100%; }
.tce .form-shell button[type='submit'] {
  position: relative; overflow: hidden; width: 100%;
  font-family: var(--tcd-body); font-weight: 700; font-size: 16px;
  background: var(--tcd-cta); color: #fff;
  border: 0; border-radius: 13px; padding: 16px 30px;
  letter-spacing: .02em; cursor: pointer;
  transition: transform .18s var(--tcd-ease), box-shadow .18s var(--tcd-ease);
}
.tce .form-shell button[type='submit']::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: translateX(-100%);
}
.tce .form-shell button[type='submit']:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px var(--tcd-cta); }
.tce .form-shell button[type='submit']:hover::after { animation: sweep .7s var(--tcd-ease); }
@keyframes sweep { to { transform: translateX(100%); } }

/* The logo we already hold. design.js moves this into the logo field
   itself — a file input cannot be pre-filled (browsers forbid it), so the
   card stands in for the filled state and the real input hides behind
   "Replace logo". Without JS it stays put and the plain input shows. */
.logo-file {
  display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
  border: 1px solid color-mix(in srgb, var(--tcd-n-green) 35%, transparent);
  border-radius: 14px; padding: 12px 16px 12px 12px;
  background: color-mix(in srgb, var(--tcd-n-green) 6%, transparent);
}
.logo-file--infield { margin-bottom: 0; width: 100%; }
/* Big enough to actually recognise: this chip answers "is that our logo?",
   and supplied artwork often carries its own generous whitespace. */
.logo-file-chip {
  flex: none; width: 104px; height: 68px; border-radius: 10px; background: #fff;
  display: grid; grid-template: 100% / 100%; place-items: center; padding: 8px;
  overflow: hidden;
  transition: transform .22s var(--tcd-ease), box-shadow .22s var(--tcd-ease);
  transform-origin: left center;
}
.logo-file-chip img { width: 100%; height: 100%; object-fit: contain; }

/* Hover lifts it to a size you can check properly. Only where there is a real
   pointer — on touch the chip is already legible, and a stuck :hover state
   would just sit there enlarged. */
@media (hover: hover) and (pointer: fine) {
  .logo-file-chip:hover,
  .logo-file-chip:focus-visible {
    transform: scale(1.75);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .65);
    position: relative;
    z-index: 5;
    outline: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .logo-file-chip { transition: none; }
}
.logo-file-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.logo-file-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .01em; text-transform: none;
  color: var(--tcd-n-green);
}
.tce .logo-file-note { font-size: 13.5px; color: var(--tcd-ink-dim); margin: 0; }
.logo-file-action {
  margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--tcd-body); font-size: 13px; font-weight: 700;
  color: var(--tcd-brand);
  border-bottom: 1px solid color-mix(in srgb, var(--tcd-brand) 40%, transparent);
  transition: border-color .2s;
}
.logo-file-action:hover { border-bottom-color: var(--tcd-brand); }
/* while replacing, the card steps back and the input takes the stage */
.logo-file.is-replacing { border-color: var(--tcd-line); background: color-mix(in srgb, var(--tcd-ink) 4%, transparent); }
.logo-file.is-replacing .logo-file-label { color: var(--tcd-ink-dim); }
.logo-file.is-replacing .logo-file-chip { opacity: .5; }
/* Elementor field groups are flex rows: without an explicit full basis the
   stack sits beside the label instead of under it */
.logo-field-stack {
  display: flex; flex-direction: column; gap: 12px;
  width: 100%; flex: 0 0 100%;
}
.tce .elementor-element.form-shell .elementor-form .elementor-field-group .elementor-field[type='file'].is-stowed { display: none; }
.tce .form-shell .elementor-message { font-weight: 700; margin-top: 14px; }

/* ---------- legal pages: one centred column, nothing else competing.
   Left-aligned inside a centred measure — a centred paragraph of legal text
   is a paragraph nobody finishes. */
.tce.legal-band { padding-block: 78px 96px; }
.tce .legal { max-width: 74ch; margin-inline: auto; }
.tce .legal h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.02; }
.tce .legal-body { margin-top: 18px; }
.tce .legal-body h2 {
  font-family: var(--tcd-display);
  font-size: clamp(19px, 2vw, 23px); line-height: 1.2;
  color: var(--tcd-ink);
  margin: 42px 0 14px;
}
.tce .legal-body h2:first-child { margin-top: 0; }
.tce .legal-body p {
  color: var(--tcd-ink-dim);
  font-size: 16.5px; line-height: 1.75;
  margin-block: 0 16px;
}
.tce .legal-body strong { color: var(--tcd-ink); }
.tce .legal-body ul { margin: 0 0 16px; padding-left: 20px; }
.tce .legal-body li {
  color: var(--tcd-ink-dim);
  font-size: 16.5px; line-height: 1.75; margin-bottom: 8px;
}
.tce .legal-body li::marker { color: color-mix(in srgb, var(--tcd-brand) 70%, transparent); }
.tce .legal-body a { color: var(--tcd-brand); text-decoration: underline; text-underline-offset: 3px; }
/* the unanswered questions should be impossible to miss while this is a draft */
.tce .legal-body p:has(> em), .tce .legal-body em { color: color-mix(in srgb, var(--tcd-ink) 46%, transparent); }

/* Copy that only makes sense to someone who was offered a logo field. The
   body class is already on the page for the fields themselves, so the words
   about them follow the same switch rather than inventing a second one. */
.tce-suppressing .if-logo { display: none; }

/* what happens to what you just typed: present, readable, and out of the way */
/* Factual notice under the submit button — plain words, no box.
   The neon .entry-flag chip retired into this on 10 Sept (client:
   "removing the neon boxes and placing the text in text format
   where it belongs cleans up the overall neon look"). */
.tce .form-note { margin-top: 14px; }
.tce .form-note p {
  margin: 0;
  font-size: 13px; line-height: 1.6;
  color: color-mix(in srgb, var(--tcd-ink) 56%, transparent);
}
/* The event facts, repeated inside the card so the essentials are
   visible without scrolling (client, 11 Sept). The fuller block in
   the copy column stays for readers who go deeper. */
.tce .form-shell .form-facts {
  margin: 14px 0 0; padding: 12px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--tcd-ink) 10%, transparent);
  list-style: none; display: grid; gap: 7px;
}
.tce .form-shell .form-facts li {
  font-size: 13.5px; color: var(--tcd-ink-dim); line-height: 1.5;
  display: flex; gap: 10px;
}
.tce .form-shell .form-facts li span {
  flex: none; width: 48px; font-weight: 600;
  color: color-mix(in srgb, var(--tcd-ink) 62%, transparent);
}
.tce .form-privacy {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--tcd-ink) 10%, transparent);
}
.tce .form-privacy p {
  margin: 0;
  font-size: 12px; line-height: 1.6;
  color: color-mix(in srgb, var(--tcd-ink) 44%, transparent);
}
.tce .form-privacy a {
  color: color-mix(in srgb, var(--tcd-ink) 62%, transparent);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .2s;
}
.tce .form-privacy a:hover { color: var(--tcd-brand); }

/* the logo we hold: keep it, replace it, or say it is wrong */
.logo-file-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; }
/* the buttons carry their own display, which otherwise out-ranks [hidden] */
.logo-file-actions [hidden] { display: none; }
.logo-file-drop {
  font-family: var(--tcd-body); font-size: 12.5px; font-weight: 700;
  color: color-mix(in srgb, var(--tcd-ink) 46%, transparent);
  background: none; border: 0; border-bottom: 1px solid transparent;
  padding: 0; cursor: pointer; transition: color .2s, border-color .2s;
}
.logo-file-drop:hover { color: var(--tcd-cta); border-bottom-color: var(--tcd-cta); }
.logo-file.is-removing .logo-file-chip { opacity: .32; filter: grayscale(1); }
.logo-file.is-removing .logo-file-note { color: var(--tcd-cta); }
/* a green "on file" label above "this will be removed" reads as a contradiction */
.logo-file.is-removing .logo-file-label { color: color-mix(in srgb, var(--tcd-ink) 40%, transparent); }
.logo-file.is-removing .led-g { background: var(--tcd-cta); }
.logo-hint {
  flex: 0 0 100%;
  margin: 7px 0 0;
  font-size: 12.5px; line-height: 1.5;
  color: color-mix(in srgb, var(--tcd-ink) 44%, transparent);
}

/* the door policy, where the ask is rather than below the fold */
.tce .entry-flag {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0;
  padding: 9px 16px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--tcd-ink);
  background: color-mix(in srgb, var(--tcd-cta) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tcd-cta) 42%, transparent);
  border-radius: 999px;
}
.tce .entry-flag::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tcd-cta);
}

/* an h1 that is also the way into the full text: it should read as the
   heading it is, and still show it can be clicked */
/* The pledge has a name of its own now, so the name is the way into the full
   text — the heading above it is the ask, not the document. */
/* Above the phone breakpoint the two columns must stay side by side. They are
   flex items with the default min-width:auto, so once the form's own content
   is wider than its 48% the pair wraps — and the supporting detail lands
   above the form, which is the one place it must never be. Letting them
   shrink keeps the ask beside the copy instead of below all of it. */
@media (min-width: 768px) {
  /* The columns are 45% + 48% with a 56px gap, which together exceed the row
     below roughly 800px — and a wrapping flex container wraps before it
     shrinks. nowrap lets them shrink the few pixels instead. */
  .tce .form-flow, .tce .form-flow > .e-con-inner { flex-wrap: nowrap; }
  .tce .entry-band .entry-copy, .tce .entry-band .form-shell { min-width: 0; }
}

/* the .tce p reset zeroes every margin, so any multi-paragraph block written
   into a text-editor needs its own rhythm stated */
.tce .entry-lede p + p, .tce .entry-aside p + p { margin-top: 16px; }
.tce .entry-aside .factlist { margin-top: 22px; }

.tce .pledge-title {
  margin: 0;
  font-family: var(--tcd-display);
  font-size: clamp(20px, 2.1vw, 25px); line-height: 1.18;
  letter-spacing: -.01em;
}
/* out-ranks the canvas link default at (0,3,1): the title is a heading that
   happens to be clickable, not a link that happens to be big */
.tce.entry-band .entry-lede .pledge-title a {
  color: var(--tcd-ink); text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--tcd-brand) 40%, transparent);
  transition: color .2s, border-color .2s;
}
.tce.entry-band .entry-lede .pledge-title a:hover { color: var(--tcd-brand); border-bottom-color: var(--tcd-brand); }
/* the .tce p reset zeroes margins, so the rhythm inside this one block has
   to be stated: four stacked paragraphs otherwise read as a single mass */
.tce .entry-lede .pledge-standfirst { margin: 11px 0 0; }
.tce .entry-lede .pledge-gist { margin-top: 18px; }
.tce .entry-lede .pledge-more { margin-top: 18px; }
.tce .pledge-standfirst {
  font-size: 15px; line-height: 1.55; font-weight: 700;
  color: color-mix(in srgb, var(--tcd-ink) 66%, transparent);
}

/* carried through from the step before, so the jump needs no countdown */
.tce .journey-done {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 14px;
  padding: 9px 16px 9px 13px;
  font-size: 13.5px; font-weight: 700;
  color: var(--tcd-ink);
  background: color-mix(in srgb, var(--tcd-n-green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tcd-n-green) 38%, transparent);
  border-radius: 999px;
}

/* ---------- additional attendees: repeating rows built by design.js.
   The textarea underneath is still the field that submits; these cards only
   write into it, which is why it is hidden rather than removed. */
.tce .form-shell .person-source { display: none; }
/* An Elementor field group is a centred flex row, so an injected block lands
   BESIDE the label and squeezes into whatever is left — and the label then
   floats to the vertical middle of however many rows there are. Claiming the
   full row puts the label back on top where it belongs. */
.tce .form-shell .elementor-field-group .people { flex: 0 0 100%; width: 100%; }
.people { display: grid; gap: 8px; }
.person-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px; counter-reset: person;
}
.person {
  counter-increment: person;
  position: relative;
  /* the remove control is taken out of flow: in a column this narrow, a
     30px gutter it only uses at the top costs the inputs real width */
  padding: 10px 44px 10px 32px;
  border: 1px solid color-mix(in srgb, var(--tcd-ink) 10%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--tcd-ink) 3%, transparent);
  transition: border-color .2s, background .2s;
}
.person:focus-within {
  border-color: color-mix(in srgb, var(--tcd-brand) 45%, transparent);
  background: color-mix(in srgb, var(--tcd-brand) 5%, transparent);
}
.person::before {
  content: counter(person);
  position: absolute; left: 0; top: 0; bottom: 0; width: 32px;
  display: grid; place-items: center;
  font-family: var(--tcd-body); font-size: 11px; font-weight: 700;
  color: color-mix(in srgb, var(--tcd-ink) 38%, transparent);
}
/* auto-fit rather than a breakpoint: this sits in a column whose width
   depends on the layout around it, so it has to answer to its own size.
   Below ~150px a side, email and company drop to their own lines. */
.person-fields {
  min-width: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px;
}
/* the name carries the row, so it gets the full width above the rest */
.person-f--name { grid-column: 1 / -1; }
/* out-counts the shared input rule, which ties at (0,4,1) */
.tce .form-shell .people .person .person-f {
  width: 100%; padding: 10px 12px; font-size: 14.5px; border-radius: 10px;
}
.person-drop {
  position: absolute; top: 9px; right: 9px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font-size: 17px; line-height: 1;
  color: color-mix(in srgb, var(--tcd-ink) 40%, transparent);
  background: none; border: 1px solid transparent; border-radius: 9px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.person-drop:hover {
  color: var(--tcd-cta);
  border-color: color-mix(in srgb, var(--tcd-cta) 40%, transparent);
  background: color-mix(in srgb, var(--tcd-cta) 10%, transparent);
}
/* there is nothing to remove when one row is all there is */
.person-list > .person:only-child .person-drop { visibility: hidden; }
.person-add {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px 9px 12px;
  font-family: var(--tcd-body); font-size: 13px; font-weight: 700;
  color: var(--tcd-ink-dim);
  background: none;
  border: 1px dashed color-mix(in srgb, var(--tcd-ink) 22%, transparent);
  border-radius: 11px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.person-add::before {
  content: '+';
  display: grid; place-items: center;
  width: 18px; height: 18px;
  font-size: 15px; line-height: 1;
  border-radius: 6px;
  background: color-mix(in srgb, var(--tcd-brand) 18%, transparent);
  color: var(--tcd-brand);
  transition: background .2s, color .2s;
}
.person-add:hover {
  color: var(--tcd-ink);
  border-color: color-mix(in srgb, var(--tcd-brand) 50%, transparent);
  background: color-mix(in srgb, var(--tcd-brand) 6%, transparent);
}
.person-add:hover::before { background: var(--tcd-brand); color: #fff; }

@media (max-width: 767px) {
  .person { padding-left: 28px; }
  .person::before { width: 28px; }
  /* stacked, the number reads better beside the name than floating at the
     midpoint of a tall card */
  .person::before { align-items: start; padding-top: 21px; }
}
.tce .form-shell .elementor-message.elementor-message-success { color: var(--tcd-n-green); }
.tce .form-shell .elementor-message.elementor-message-danger { color: var(--tcd-cta); }
.tce .form-shell .elementor-field-group .elementor-error-message { color: var(--tcd-cta); font-size: 13px; }

/* reassurance chips under the form heading */
.reassure { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 26px; }
.reassure .chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--tcd-line); border-radius: 99px; padding: 7px 15px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--tcd-ink-dim); text-transform: uppercase;
}
.reassure .chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 99px;
  background: var(--tcd-brand);
}

/* A quiet line of reassurance. Pills made three small facts look like
   marketing badges; this says the same thing without the packaging. */
.tce .entry-note {
  font-size: 13.5px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--tcd-ink) 46%, transparent);
  max-width: 44ch;
  margin: 0;
}

/* the pledge in one sentence, with a way down to the whole thing and a way
   back up to the form — the ask stays in the fold either way */
.tce .pledge-gist {
  font-size: 15px; line-height: 1.6; color: var(--tcd-ink);
  border-left: 2px solid color-mix(in srgb, var(--tcd-brand) 55%, transparent);
  padding-left: 14px; margin: 0;
}
.tce .pledge-more { margin: 0; font-size: 16.5px; font-weight: 700; }
.tce.entry-band .pledge-more a {
  color: var(--tcd-brand); text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--tcd-brand) 40%, transparent);
  transition: border-color .2s;
}
/* the arrow is inside the anchor, so it is part of what you click */
.tce.entry-band .pledge-more a::after {
  content: '↓';
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; margin-left: 9px;
  font-size: 15px; line-height: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tcd-brand) 16%, transparent);
  transition: background .2s, transform .2s;
}
.tce.entry-band .pledge-more a:hover::after {
  background: var(--tcd-brand); color: #fff; transform: translateY(2px);
}
.tce.entry-band .pledge-more a:hover { border-bottom-color: var(--tcd-brand); }
.pledge-sign-btn { margin-top: 30px; }
.tce .pledge-sign-btn .elementor-button {
  background: var(--tcd-cta); color: #fff; border-radius: 13px;
  font-family: var(--tcd-body); font-weight: 700; font-size: 16px;
  padding: 15px 30px; text-transform: none; letter-spacing: .02em;
}
.tce .pledge-sign-btn .elementor-button:hover { color: #fff; box-shadow: 0 14px 32px -12px var(--tcd-cta); }

/* ---- detail cards: event facts, what-happens-next */
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.detail-card {
  border: 1px solid var(--tcd-line); border-radius: 18px; padding: 24px;
  background: var(--tcd-ground-deep);
  display: flex; flex-direction: column; gap: 8px;
}
.detail-card .detail-k {
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tcd-brand);
}
.detail-card .detail-v { font-size: 19px; font-weight: 700; color: var(--tcd-ink); line-height: 1.3; }
.detail-card .detail-s { font-size: 14px; color: var(--tcd-ink-dim); line-height: 1.55; }
.tbc {
  display: inline-block; align-self: flex-start;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tcd-n-yellow); border: 1px solid color-mix(in srgb, var(--tcd-n-yellow) 45%, transparent);
  border-radius: 99px; padding: 3px 10px; margin-top: 4px;
}
@media (max-width: 860px) { .detail-grid { grid-template-columns: 1fr; } }

/* ---- the letter, readable */
.reading { max-width: 68ch; position: relative; padding-left: 26px; }
.reading::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--tcd-brand), var(--tcd-n-pink));
}
.reading p { color: var(--tcd-ink-dim); font-size: 17px; line-height: 1.75; margin-block: 0 18px; }
.reading strong, .reading b { color: var(--tcd-ink); }
/* the three asks: numbered, because the pledge numbers them */
.reading .pledge-asks { counter-reset: ask; list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.reading .pledge-asks li {
  counter-increment: ask;
  position: relative; padding-left: 44px;
  color: var(--tcd-ink-dim); font-size: 17px; line-height: 1.7;
}
.reading .pledge-asks li::before {
  content: counter(ask);
  position: absolute; left: 0; top: 2px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  font-family: var(--tcd-body); font-size: 13px; font-weight: 700;
  color: var(--tcd-brand);
  background: color-mix(in srgb, var(--tcd-brand) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tcd-brand) 34%, transparent);
  border-radius: 9px;
}
.reading .pledge-asks b { color: var(--tcd-ink); }
.reading .pledge-close { color: var(--tcd-ink); font-weight: 700; }
/* the section's own standfirst, under the pledge title */
.tce .quote-band .pledge-standfirst { margin: 10px 0 0; font-size: 17px; }

/* ---- the arrival: what success actually feels like.
   Hidden until design.js hears Elementor's submit_success; then the form
   row folds away and this ignites where it stood. */
.form-band .arrival { display: none; }
.form-band.is-arrived .form-flow { display: none; }
.form-band.is-arrived .elementor-message { display: none; }
.form-band.is-arrived .arrival {
  display: flex;
  text-align: center;
  padding: 30px 0 10px;
  animation: arrive .6s var(--tcd-ease) both;
}
@keyframes arrive { from { opacity: 0; transform: translateY(16px); } }
.arrival .section-eyebrow { color: var(--tcd-n-green); }
.arrival .section-eyebrow::before {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 99px;
  background: var(--tcd-n-green); margin-right: 10px; vertical-align: 1px;
  animation: arrivepulse 2.2s var(--tcd-ease) infinite;
}
/* the dot breathes by opacity now — its glow left with the neon pass */
@keyframes arrivepulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
.form-band.is-arrived .arrival-title { animation: ignite 1.15s steps(1, end) both; }
.arrival .section-intro { margin-inline: auto; }
.arrival .elementor-heading-title { margin-inline: auto; }
.arrival .arrival-cta { margin-top: 14px; }

/* the onward step charges itself and fires — no click required, but a click
   goes now and "stay here" stops it. Hovering the button pauses the charge. */
.arrival-cta .elementor-button { position: relative; overflow: hidden; z-index: 0; }
.arrival-cta .elementor-button::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, .22);
  transform: scaleX(0); transform-origin: left;
}
/* the hand-off is immediate now, so nothing counts down here */
.arrival .arrival-back { font-size: 14px; }
.arrival .arrival-back a {
  color: var(--tcd-ink-dim); font-weight: 700; text-decoration: none;
  border-bottom: 2px solid var(--tcd-line); padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.arrival .arrival-back a:hover { color: var(--tcd-ink); border-color: var(--tcd-brand); }

/* ---- quiet footer for subpages */
.tce.foot-band { border-top: 1px solid var(--tcd-line); padding: 34px var(--tcd-gutter) 46px; }
.foot-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap;
  color: var(--tcd-ink-dim); font-size: 14px;
}
.foot-row a { color: var(--tcd-ink-dim); }
.foot-row a:hover { color: var(--tcd-ink); }

/* ==========================================================
   Inside the Elementor editor everything is simply VISIBLE:
   entrance states and choreography wait for the real page.
   ========================================================== */
.elementor-editor-active .rev,
.elementor-editor-preview .rev {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.elementor-editor-active :is(.hero-eyebrow, .hero-lockup, .hero-sub, .hero-ctas, .hero-stats),
.elementor-editor-preview :is(.hero-eyebrow, .hero-lockup, .hero-sub, .hero-ctas, .hero-stats) {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.elementor-editor-active .hero-lockup,
.elementor-editor-preview .hero-lockup {
  filter: none;
}
.elementor-editor-active .cable,
.elementor-editor-preview .cable {
  stroke-dashoffset: 0 !important;
  animation: none !important;
}
.elementor-editor-active .current,
.elementor-editor-preview .current {
  opacity: 1 !important;
}
.elementor-editor-active .plug,
.elementor-editor-preview .plug {
  opacity: 1 !important;
  offset-distance: 100% !important;
  animation: none !important;
}
.elementor-editor-active .inlet i,
.elementor-editor-preview .inlet i {
  background: var(--tcd-n-green);
}
.elementor-editor-active [data-count],
.elementor-editor-preview [data-count] {
  /* counters do not run in the editor; the target value is in the attribute */
}
/* the success state only shows after a real submit — but the team must be
   able to edit its copy, so in the editor it sits visible below the form */
.elementor-editor-active .form-band .arrival,
.elementor-editor-preview .form-band .arrival {
  display: flex !important;
  animation: none !important;
}


/* ==========================================================
   Phones: put the ask in reach.
   The journey rail compresses, and the supporting detail
   (event facts, reassurance chips) moves BELOW the form —
   context is worth reading, but not before the thing they
   came to do.
   ========================================================== */
@media (max-width: 767px) {
  .tce.entry-band { padding-top: 16px; }
  .tce.journey { padding-bottom: 8px; }
  /* the rail and the ask are one thought; 60-odd px between them read as a
     section break */
  .entry-band > .e-con-inner { --gap: 14px 14px; --row-gap: 14px; }
  .form-flow { --gap: 24px 0px; --row-gap: 24px; }


  /* the eyebrow repeats what the greeting already says */
  .journey .section-eyebrow { display: none; }
  .journey-who { gap: 8px; width: 100%; }
  .tce .journey-heading { font-size: 20px; }
  .tce .journey-id {
    font-size: 11.5px; padding: 5px 12px; gap: 7px;
    max-width: 100%;
  }

  /* the wrapper steps aside so its two halves can be reordered
     around the form */
  .form-flow, .entry-lede, .entry-aside { --padding-left: 0px; --padding-right: 0px; }
  .form-flow > .entry-copy { display: contents; }
  .entry-lede { order: 1; }
  .form-shell { order: 2; }
  .entry-aside { order: 3; }

  .entry-band .elementor-widget-heading h1.elementor-heading-title {
    font-size: 34px; max-width: none;
  }
  .entry-band .section-intro { font-size: 15.5px; }
  .form-shell { padding: 24px 20px 22px; }
}


/* ==========================================================
   Phones: the band owns the gutter, nothing inside adds more.
   ========================================================== */
@media (max-width: 767px) {
  .tce.section .e-con.e-con,
  .tce.entry-band .e-con.e-con,
  .tce.foot-band .e-con.e-con,
  .tce.tcx-mission .e-con.e-con {
    --padding-left: 0px;
    --padding-right: 0px;
  }
}


/* ============================================================
   THEME LAYER — articles, pages, 404, search (v0.28.0)
   The Theme Builder templates wrap editorial content in
   .tce.section bands; these rules style what lives inside.
   Body classes are WordPress's own, so nothing here can leak
   into the canvas campaign pages.
   ============================================================ */
body.single-post, body.page, body.error404, body.search, body.archive {
  background: var(--tcd-ground);
}

.tce.article-hero { padding-bottom: 26px; }
.tce.article-band { padding-top: 10px; }

.tce .article-title .elementor-heading-title {
  font-family: var(--tcd-display);
  font-weight: 900;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--tcd-ink);
  max-width: 24ch;
  text-wrap: balance;
}

.tce .article-meta .elementor-icon-list-icon { display: none; }
.tce .article-meta .elementor-icon-list-text {
  font-family: var(--tcd-body);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tcd-ink-dim);
}

.tce .article-prose { max-width: 68ch; }
.tce .article-prose,
.tce .article-prose p,
.tce .article-prose li {
  font-family: var(--tcd-body);
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--tcd-ink);
}
.tce .article-prose p { margin-block: 0 18px; }
.tce .article-prose h1,
.tce .article-prose h2,
.tce .article-prose h3,
.tce .article-prose h4 {
  font-family: var(--tcd-display);
  font-weight: 900;
  color: var(--tcd-ink);
  line-height: 1.15;
  margin-block: 34px 12px;
}
.tce .article-prose h2 { font-size: clamp(22px, 2.6vw, 30px); }
.tce .article-prose h3 { font-size: 20px; }
.tce .article-prose a { color: var(--tcd-brand); text-underline-offset: 3px; }
.tce .article-prose a:hover { color: var(--tcd-ink); }
.tce .article-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  margin-block: 8px 18px;
}
.tce .article-prose blockquote {
  border-left: 3px solid var(--tcd-brand);
  margin: 22px 0;
  padding: 6px 0 6px 20px;
  font-size: 19px;
}
.tce .article-prose ul,
.tce .article-prose ol { padding-left: 22px; margin-block: 0 18px; }
.tce .article-prose li { margin-block: 0 8px; }
.tce .article-prose figcaption { color: var(--tcd-ink-dim); font-size: 13px; }

.tce .article-back a {
  font-family: var(--tcd-body);
  color: var(--tcd-ink-dim);
  text-decoration: none;
}
.tce .article-back a:hover { color: var(--tcd-brand); }

/* Search results cards (archive-posts classic skin). */
.tce .search-grid .elementor-post {
  background: color-mix(in srgb, var(--tcd-ink) 6%, transparent);
  border: 1px solid var(--tcd-line);
  border-radius: 14px;
  padding: 20px;
}
.tce .search-grid .elementor-post__title,
.tce .search-grid .elementor-post__title a {
  font-family: var(--tcd-display);
  font-weight: 900;
  font-size: 20px;
  color: var(--tcd-ink);
}
.tce .search-grid .elementor-post__excerpt p,
.tce .search-grid .elementor-post__meta-data {
  font-family: var(--tcd-body);
  color: var(--tcd-ink-dim);
}
.tce .search-grid .elementor-post__read-more { color: var(--tcd-brand); }


/* ============================================================
   "CAN'T ATTEND" (v0.30.0) — the quiet exit on the register
   page, and the state it leaves behind.
   ============================================================ */
.tce .journey-decline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
  font-family: var(--tcd-body);
  font-size: 13.5px;
  color: var(--tcd-ink-dim);
}
.tce .journey-decline .decline-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--tcd-ink-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.tce .journey-decline .decline-btn:hover,
.tce .journey-decline .decline-btn:focus-visible {
  color: var(--tcd-brand);
}

.tce .journey-declined {
  border: 1px solid var(--tcd-line);
  border-left: 3px solid var(--tcd-brand);
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 10px;
  font-family: var(--tcd-body);
}
.tce .journey-declined .declined-msg {
  color: var(--tcd-ink);
  font-size: 15.5px;
  margin: 0 0 8px;
}
.tce .journey-declined .declined-pledge {
  display: inline-block;
  color: var(--tcd-cta);
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 8px;
}
.tce .journey-declined .declined-pledge:hover { color: var(--tcd-ink); }
.tce .journey-declined .declined-note {
  color: var(--tcd-ink-dim);
  font-size: 12.5px;
  margin: 0;
}

/* ============================================================
   Homepage look-and-feel pass (10 Sept 2026).
   Client: the page must read as considered and serious. Three
   moves, scoped to body.home so the campaign pages — mid-send,
   verified pixel by pixel — keep the look they were signed
   off with:
   1. Body copy leaves the demo Expressway cut, whose lowercase
      "s" renders as a small capital ("BuSineSS"), for the
      system grotesque. Display headings keep Hagrid.
   2. The spaced-caps micro-label habit is retired: kickers,
      stat labels, card metas and footer headings become
      sentence case at reading sizes.
   3. Header and footer type comes up to reading size.
   ============================================================ */
body.home {
  --tcd-body: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* header */
body.home .topbar .nav-links { gap: 32px; }
body.home .topbar .nav-links a { font-size: 15.5px; font-weight: 600; letter-spacing: 0; }
body.home .lockup-nav .l-main { font-size: 19px; }
body.home .lockup-nav .l-script { font-size: 16px; }

/* kickers: sentence case, reading size, no tracking */
body.home .hero-eyebrow,
body.home .section-eyebrow {
  text-transform: none; letter-spacing: .01em;
  font-size: 16.5px; font-weight: 600;
}

/* hero support text and stats */
body.home .hero-sub { font-size: clamp(17px, 1.7vw, 20px); }
body.home .stat span {
  text-transform: none; letter-spacing: .01em;
  font-size: 14.5px; font-weight: 600;
}

/* cards: metas and counts in words, not codes */
body.home .sig-count { text-transform: none; letter-spacing: .01em; font-size: 14px; padding: 8px 16px; }
body.home .insight .meta { text-transform: none; letter-spacing: .01em; font-size: 14px; }
body.home .letter-card p { font-size: 16px; line-height: 1.65; }
body.home .pillar p,
body.home .pillar .elementor-widget-text-editor { font-size: 15.5px; }

/* support form: the page's own face for labels (Elementor's generated
   CSS pins the kit family). The label-to-input gap is NOT here: the
   template's generated `...labels-above ... > label{padding-bottom:0}`
   sits at (0,5,2), so the gap is set where it lives — the form widget's
   own label_spacing control in template 702 (absence is not neutrality). */
.tce .support-form .elementor-field-group > label {
  font-family: var(--tcd-body);
  font-size: 14.5px;
  font-weight: 600;
}

/* footer: reading sizes, sentence case, more air */
body.home .tce.foot-band { padding-top: 56px; padding-bottom: 64px; }
body.home .tce .foot-heading {
  text-transform: none; letter-spacing: .01em;
  font-size: 15px; color: var(--tcd-ink);
}
body.home .tce .foot-brand { font-size: 22px; }
body.home .tce .foot-note,
body.home .foot-contact li,
body.home .foot-menu li { font-size: 15px; }
body.home .foot-contact { gap: 12px; }