/* ==========================================================================
   Best View Agency
   Built to the Echo Manual, Edition 02.
   One stylesheet. No frameworks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Ground */
  --indigo:     #2A1063;   /* Imperial Indigo — carries the surface */
  --ink:        #180939;   /* Ink Violet */
  --deep:       #12062E;   /* deepest ground */

  /* Actives */
  --gold:       #FFB547;   /* Signal Gold — the subject. Never text on light. */
  --gold-deep:  #B0741C;   /* Deep Gold — gold type on light, large sizes only */
  --violet:     #6B4BFF;   /* Electric Violet — movement only, capped ~5% */

  /* Light */
  --white-gold: #EFEAE0;
  --veil:       #F3EFFF;   /* Lavender Veil — light section ground */
  --white:      #FFFFFF;

  /* Text roles, flipped by .dark */
  --bg:      var(--white);
  --tx:      var(--indigo);
  --tx-soft: #5B4C7A;
  --line:    rgba(42, 16, 99, 0.16);   /* indigo 16% on light */
  --line-2:  rgba(42, 16, 99, 0.30);

  /* Type — Archivo displays and operates, Bricolage reads. No third face. */
  --display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --read:    'Bricolage Grotesque', 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --t-hero: clamp(2.9rem, 1.1rem + 7.2vw, 6rem);
  --t-h1:   clamp(2.35rem, 1.4rem + 3.7vw, 4.1rem);
  --t-h2:   clamp(1.95rem, 1.35rem + 2.5vw, 3.1rem);
  --t-h3:   clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  --t-lede: clamp(1.1rem, 1rem + 0.5vw, 1.32rem);
  --t-body: clamp(1.02rem, 0.99rem + 0.16vw, 1.1rem);
  --t-sm:   0.9rem;
  --t-xs:   0.72rem;

  /* Space — 12 columns, 24px gutters */
  --pad:    clamp(4rem, 2.5rem + 6vw, 7rem);
  --wrap:   1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --ease:   cubic-bezier(0.2, 0.8, 0.2, 1);   /* the echo easing */
  --r:      3px;                               /* panels */
  --r-icon: 24%;                               /* icon squares */
  --pill:   100px;                             /* fully rounded */
}

.dark, .hero, .phero, .crowd-sec, .ftr, .mnav {
  --bg:      var(--indigo);
  --tx:      var(--white-gold);
  --tx-soft: #B4A6D8;
  --line:    rgba(255, 181, 71, 0.26);   /* gold 26% on dark */
  --line-2:  rgba(255, 181, 71, 0.42);
  color: var(--tx);
}

/* --------------------------------------------------------------------------
   02 · BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Exactly the header's height, so an anchored section lands flush under it
     and no sliver of the previous one shows. */
  scroll-padding-top: 4.75rem;
}
@media (min-width: 900px) { html { scroll-padding-top: 5.5rem; } }

body {
  background: var(--white);
  color: var(--indigo);
  font-family: var(--read);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--indigo); }

.skip-link {
  position: absolute; left: 1rem; top: 1rem; z-index: 999;
  transform: translateY(-200%);
  background: var(--gold); color: var(--indigo);
  padding: 0.7rem 1.1rem; border-radius: var(--r);
  font-family: var(--display); font-size: var(--t-sm); font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   03 · TYPE
   Archivo Black, caps, tight, stopped with a full point.
   Bricolage reads. Neither face is ever italic.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.032em;
  word-spacing: 0.09em;
  text-wrap: balance;
}

.hero-title { font-size: var(--t-hero); line-height: 0.94; letter-spacing: -0.04em; word-spacing: 0.1em; }
h1, .h1 { font-size: var(--t-h1); }
h2, .h2 { font-size: var(--t-h2); }
h3, .h3 { font-size: var(--t-h3); font-weight: 800; line-height: 1.14; letter-spacing: -0.02em; }
h4      { font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; }

.gold      { color: var(--gold); }

/* The lowercase tail under the caps headline. Caps then not-caps — the
   contrast is the point, so this one span opts out of the uppercase rule. */
.mark {
  display: block;
  margin-top: 0.16em;
  color: var(--gold);
  text-transform: none;
  font-weight: 800;
  font-size: 0.56em;
  letter-spacing: -0.03em;
}
.gold-deep { color: var(--gold-deep); }

p { text-wrap: pretty; }
p + p { margin-top: 1em; }

.lede {
  font-size: var(--t-lede);
  line-height: 1.62;
  color: var(--tx-soft);
  max-width: 60ch;
}

/* Caps label. +200 tracking, per the type spec. */
.label {
  display: block;
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1rem;
}
.dark .label { color: var(--gold); }

.prose { max-width: 66ch; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 1.9em; }
.prose h3 { margin-top: 1.6em; }
.prose strong { font-weight: 600; }
.prose ul { margin-top: 1em; display: grid; gap: 0.6em; }
.prose li { position: relative; padding-left: 1.5rem; }
.prose li::before {
  content: ""; position: absolute; left: 0; top: 0.66em;
  width: 0.5rem; height: 0.5rem; background: var(--gold);
}

/* --------------------------------------------------------------------------
   04 · LAYOUT
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 780px; }

.sec { padding-block: var(--pad); background: var(--bg); }
.sec-sm { padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); }

.bg-indigo { background: var(--indigo); --bg: var(--indigo); }
.bg-ink    { background: var(--ink);    --bg: var(--ink); }
.bg-veil   { background: var(--veil);   --bg: var(--veil); }

.center { text-align: center; }
.center .lede { margin-inline: auto; }

.head { max-width: 40rem; margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem); }
.head.center { margin-inline: auto; }
.head .lede { margin-top: 1rem; }

.grid { display: grid; gap: 24px; }
@media (min-width: 640px)  { .g2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px)  { .g3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .g3 { grid-template-columns: repeat(3, 1fr); } }

.two-col { display: grid; gap: clamp(2rem, 1.2rem + 3.5vw, 4rem); }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; align-items: center; } }

hr, .rule { border: 0; height: 1px; background: var(--line); }

/* --------------------------------------------------------------------------
   05 · MOTION
   The echo is the animation. Nothing else moves on the same beat.
   -------------------------------------------------------------------------- */
/* How far a thing travels on the way in depends on how fast you were going
   when it arrived. Slow scroll, small move. Fast scroll, it comes in hot. */
.js .up {
  opacity: 0;
  transform: translateY(var(--upY, 16px));
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .up.in { opacity: 1; transform: none; }

/* Logo entrance: violet arrives from 2x offset, gold lands 90ms behind it
   and settles at zero. Once per session, never looped.
   --ex / --ey carry the asset's own echo offset, set on the markup. */
.logo-svg { display: block; height: 100%; width: auto; }
.js .logo-anim .echo-violet { animation: echoViolet 240ms var(--ease) both; }
.js .logo-anim .echo-gold   { animation: echoGold 180ms var(--ease) 90ms both; }

@keyframes echoViolet {
  from { transform: translate(var(--ex, -13.6px), var(--ey, -7.7px)); }
  to   { transform: translate(0, 0); }
}
@keyframes echoGold {
  from { transform: translate(calc(var(--ex, -13.6px) * -0.5), calc(var(--ey, -7.7px) * -0.5)); opacity: 0; }
  to   { transform: translate(0, 0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .up { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   06 · BUTTONS & LINKS
   -------------------------------------------------------------------------- */
a { color: inherit; }

.link { color: var(--violet); font-weight: 400; text-underline-offset: 0.2em; }
.dark .link { color: var(--gold); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  border: 2px solid transparent;
  border-radius: var(--pill);
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  word-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn svg { flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Gold is the one action colour. Indigo type on it — never gold type. */
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--indigo); }
.btn-gold:hover { background: #FFC873; border-color: #FFC873; }

.btn-line { background: transparent; border-color: var(--line-2); color: var(--tx); }
.btn-line:hover { border-color: var(--tx); }
.dark .btn-line:hover { background: rgba(255, 181, 71, 0.12); border-color: var(--gold); }

.btn-sm { padding: 0.62rem 1.2rem; font-size: 0.8rem; }
.btn-lg { padding: 1.1rem 2rem; font-size: 0.95rem; }

.btns { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.center .btns, .btns-center { justify-content: center; }

.more {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--display); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--violet); text-decoration: none;
}
.dark .more { color: var(--gold); }
.more span:last-child { transition: transform 0.25s var(--ease); }
.more:hover span:last-child { transform: translateX(4px); }
.more:hover span:first-child { text-decoration: underline; text-underline-offset: 0.24em; }

/* --------------------------------------------------------------------------
   07 · HEADER
   Ground is Imperial Indigo, so the header takes 20-lockup-h-dark.
   -------------------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 200;
  background: var(--indigo);
  border-bottom: 1px solid rgba(255, 181, 71, 0);
  transition: border-color 0.3s var(--ease);
}
.hdr.stuck { border-bottom-color: rgba(255, 181, 71, 0.26); }

.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 4.75rem; }
@media (min-width: 900px) { .hdr-in { height: 5.5rem; } }

/* 36px cap height at desktop, per section 14. The V is 0.52 of the
   lockup's height, so the image height carries the cap height. */
.logo { display: inline-flex; align-items: center; flex: none; height: 2.05rem; }
@media (min-width: 900px) { .logo { height: 2.6rem; } }
.logo .logo-svg, .logo img { height: 100%; width: auto; }

.nav { display: none; }
@media (min-width: 1000px) { .nav { display: flex; align-items: center; gap: 0.5rem; } }
.nav ul { display: flex; align-items: center; gap: 0.25rem; }
.nav ul a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  font-family: var(--display); font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(239, 234, 224, 0.78);
  text-decoration: none;
  border-radius: var(--pill);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav ul a:hover { color: var(--white-gold); background: rgba(255, 255, 255, 0.08); }
.nav ul a[aria-current="page"] { color: var(--gold); }
.nav .btn { margin-left: 0.6rem; }

.burger {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.95rem 0.5rem 0.8rem;
  border: 2px solid rgba(255, 181, 71, 0.42);
  border-radius: var(--pill);
  color: var(--white-gold);
  font-family: var(--display); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
@media (min-width: 1000px) { .burger { display: none; } }
.burger .bars { display: grid; gap: 4px; width: 16px; }
.burger .bars i { display: block; height: 2px; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.2s; }
[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mnav {
  position: fixed; inset: 4.75rem 0 0; z-index: 190;
  background: var(--ink); color: var(--white-gold);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.75rem 0 3rem;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}
.mnav.open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1000px) { .mnav { display: none; } }
.mnav .btn { width: 100%; }
.mnav ul { margin-top: 1.5rem; }
.mnav li + li { border-top: 1px solid rgba(255, 181, 71, 0.26); }
.mnav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0;
  font-family: var(--display); font-weight: 800; font-size: 1.35rem;
  text-transform: uppercase; letter-spacing: -0.02em;
  color: var(--white-gold); text-decoration: none;
}
body.locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   08 · HERO
   The violet glow runs the full ceiling. Home page only.
   -------------------------------------------------------------------------- */
/* The hero owns the first screen on its own — nothing from the next section
   shows until the visitor scrolls. The header is sticky, so its height comes
   off the top. */
.hero {
  position: relative; overflow: hidden;
  background: var(--indigo);
  color: var(--white-gold);
  display: grid; align-content: center;
  min-height: calc(100svh - 4.75rem);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.25rem);
}
@media (min-width: 900px) { .hero { min-height: calc(100svh - 5.5rem); } }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(165% 78% at 50% -20%,
      rgba(107, 75, 255, 0.85) 0%,
      rgba(107, 75, 255, 0.46) 26%,
      rgba(107, 75, 255, 0.16) 46%,
      rgba(107, 75, 255, 0) 74%);
}
.hero-in { position: relative; z-index: 2; }
.hero-title { max-width: 14ch; margin-inline: auto; }
.hero .lede { color: rgba(239, 234, 224, 0.82); margin: 1.4rem auto 0; }
.hero .btns { margin-top: clamp(2rem, 1.4rem + 2vw, 2.75rem); }

/* Flat mark, low opacity. Flat because the header lockup already carries
   the echo, and there is one echo per surface. */
.watermark {
  position: absolute; z-index: 1; pointer-events: none;
  right: clamp(1rem, 5vw, 4.5rem); bottom: clamp(1rem, 4vw, 3rem);
  width: clamp(6rem, 15vw, 11rem);
  opacity: 0.13;
}
@media (max-width: 720px) { .watermark { opacity: 0.09; } }

/* Inner pages: no glow. */
.phero {
  background: var(--indigo); color: var(--white-gold);
  padding-block: clamp(3rem, 2rem + 4vw, 4.75rem);
  border-bottom: 1px solid rgba(255, 181, 71, 0.26);
}
.phero-in { max-width: 46rem; margin-inline: auto; text-align: center; }
.phero .lede { color: rgba(239, 234, 224, 0.82); margin: 1.1rem auto 0; }

.crumbs {
  display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center;
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(239, 234, 224, 0.6); margin-bottom: 1.1rem;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--white-gold); }
.crumbs li { display: flex; gap: 0.45rem; }
.crumbs li + li::before { content: "/"; opacity: 0.5; }
.crumbs [aria-current] { color: var(--gold); }

/* --------------------------------------------------------------------------
   09 · BUBBLES
   The heading and all six bubbles share one screen, so the bubbles are sized
   against the viewport height as well as its width.
   -------------------------------------------------------------------------- */
.help-sec {
  display: grid; align-content: center;
  min-height: 100svh;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.25rem);
}
.help-sec .head-tight { margin-bottom: clamp(1.5rem, 0.9rem + 2.4vw, 2.75rem); }

.bubbles {
  display: grid;
  gap: clamp(1rem, 0.5rem + 2vw, 2.25rem);
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  max-width: 62rem;
  margin-inline: auto;
}
@media (min-width: 860px) { .bubbles { grid-template-columns: repeat(3, 1fr); } }

.bubble {
  position: relative;
  /* display and text-decoration matter because the free-audit bubble is an <a>,
     not a <button> — an inline element ignores width and aspect-ratio. */
  display: block;
  text-decoration: none;
  width: clamp(8.5rem, min(26vw, 22vh), 12.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  animation: bob calc(6s + var(--i) * 0.8s) ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.1s);
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-13px); }
}

.bubble-in {
  position: absolute; inset: 0;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.45rem;
  padding: 1rem;
  text-align: center;
  /* The highlight is kept off the middle of the sphere so the type sits on
     an even ground and stays legible. */
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 74% 82%, rgba(107, 75, 255, 0.30) 0%, rgba(107, 75, 255, 0) 54%),
    radial-gradient(circle at 50% 50%, rgba(11, 3, 30, 0.42) 0%, rgba(11, 3, 30, 0) 62%),
    linear-gradient(158deg, #3A1785 0%, #29105F 58%, #1B0944 100%);
  border: 1px solid rgba(255, 181, 71, 0.30);
  box-shadow:
    inset 0 2px 14px rgba(255, 255, 255, 0.16),
    inset 0 -12px 26px rgba(0, 0, 0, 0.32),
    0 16px 36px -18px rgba(0, 0, 0, 0.6);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}

.bubble-t {
  font-family: var(--display);
  word-spacing: 0.09em;
  font-size: clamp(0.84rem, 0.68rem + 0.62vw, 1.05rem);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(10, 3, 26, 0.55);
}
.bubble-more {
  font-family: var(--display);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.92;
  transition: opacity 0.3s var(--ease);
}
.bubble:hover .bubble-more { opacity: 1; }

.bubble-badge {
  font-family: var(--display);
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: var(--pill);
  background: var(--indigo);
  color: var(--gold);
}
/* On a gold field the mark and type go solid indigo — no second colour. */
.bubble-free .bubble-in {
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(158deg, #FFD08A 0%, #FFB547 56%, #E09A2E 100%);
  border-color: rgba(255, 255, 255, 0.55);
}
.bubble-free .bubble-t { color: var(--indigo); text-shadow: none; }
.bubble-free .bubble-more { color: var(--indigo); opacity: 0.72; }
.bubble-free .bubble-badge { background: var(--indigo); color: var(--gold); }

@media (prefers-reduced-motion: reduce) { .bubble { animation: none; } }

/* --------------------------------------------------------------------------
   10 · POP-UP
   Panel corners stay at 3px. The bubble quality is in the physics.
   -------------------------------------------------------------------------- */
.pop { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: clamp(0.75rem, 3vw, 2.5rem); }
.pop[hidden] { display: none; }

.pop-veil {
  position: absolute; inset: 0;
  background: rgba(18, 6, 46, 0.78);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: veilIn 0.28s var(--ease) both;
}
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }

.pop-card {
  position: relative;
  width: min(660px, 100%);
  max-height: min(88vh, 940px);
  overflow-y: auto;
  /* The drifting sheen is an inset:0 pseudo-element that translates sideways,
     which counted as scrollable overflow and put a horizontal scrollbar under
     the panel. Nothing here is meant to scroll sideways. */
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: var(--veil);
  color: var(--indigo);
  border-radius: var(--r);
  border-top: 3px solid var(--gold);
  padding: clamp(1.5rem, 1.1rem + 2vw, 2.6rem);
  box-shadow: 0 44px 90px -34px rgba(18, 6, 46, 0.85);
  animation: bubblePop 0.52s cubic-bezier(0.2, 1.35, 0.4, 1) both;
}
@keyframes bubblePop {
  0%   { transform: scale(0.6) translateY(28px); opacity: 0; }
  55%  { transform: scale(1.035) translateY(-6px); opacity: 1; }
  78%  { transform: scale(0.99) translateY(2px); }
  100% { transform: scale(1) translateY(0); }
}
/* A slow sheen drifts across the panel. The type never moves. */
.pop-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(38% 30% at 18% 8%, rgba(107, 75, 255, 0.14) 0%, rgba(107, 75, 255, 0) 70%);
  animation: sheen 9s ease-in-out infinite alternate;
}
@keyframes sheen {
  from { transform: translate(0, 0); opacity: 0.85; }
  to   { transform: translate(14%, 6%); opacity: 0.45; }
}

/* Above .pop-body, which is z-index 2 — without this the panel paints over
   the button and eats the click, so only the backdrop closes the pop-up.
   The right margin stays at zero: a negative one pushed the button past the
   card's content box and gave the panel a horizontal scrollbar. */
.pop-x {
  position: sticky; top: 0; z-index: 4; float: right;
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  margin: -0.4rem 0 0 0.75rem;
  border-radius: var(--pill);
  background: var(--indigo); color: var(--white-gold);
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.pop-x:active { transform: scale(0.92); }
.pop-x svg { pointer-events: none; }
.pop-x:hover { background: var(--violet); }

.pop-card:focus, .pop-card:focus-visible { outline: none; }
.pop-body { position: relative; z-index: 2; }
.pop-panel h3 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem); font-weight: 900; margin-bottom: 0.85rem; }
.pop-lede { font-size: var(--t-lede); line-height: 1.5; color: var(--indigo); font-weight: 400; margin-bottom: 1.1rem; }
.pop-panel p { color: var(--tx-soft); }
.pop-panel h4 { margin-top: 1.6rem; margin-bottom: 0.75rem; letter-spacing: 0.14em; font-size: var(--t-xs); text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
.pop-close-note { margin-top: 1.2rem; font-weight: 400; color: var(--indigo); }
.pop-btns { margin-top: 1.8rem; }

.tagline {
  display: inline-block;
  font-family: var(--display); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.25rem 0.7rem; border-radius: var(--pill);
  background: var(--gold); color: var(--indigo);
  margin-bottom: 0.9rem;
}

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips li {
  font-family: var(--display); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.32rem 0.75rem;
  border-radius: var(--pill);
  background: rgba(42, 16, 99, 0.08);
  color: var(--indigo);
}

/* --------------------------------------------------------------------------
   11 · PANELS, STEPS, LISTS
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  display: flex; flex-direction: column; gap: 0.6rem;
  text-decoration: none; color: inherit;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.bg-veil .card { background: var(--white); border-color: transparent; }
.dark .card, .bg-indigo .card, .bg-ink .card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 181, 71, 0.26);
}
a.card:hover { transform: translateY(-3px); border-color: var(--gold); }
.card h3 { margin-bottom: 0.15rem; }
.card p { color: var(--tx-soft); font-size: var(--t-sm); }
.card .more { margin-top: auto; padding-top: 0.8rem; }

.steps { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); counter-reset: s; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { display: grid; gap: 0.5rem; justify-items: center; text-align: center; }
.steps li::before {
  counter-increment: s;
  content: "0" counter(s);
  font-family: var(--display); font-size: 2.2rem; font-weight: 900;
  line-height: 1; letter-spacing: -0.04em;
  color: var(--gold-deep);
  margin-bottom: 0.3rem;
}
.dark .steps li::before { color: var(--gold); }
.steps p { color: var(--tx-soft); font-size: var(--t-sm); }
.steps.left li { justify-items: start; text-align: left; }

.ticks { display: grid; gap: 0.7rem; text-align: left; }
.ticks li { position: relative; padding-left: 1.75rem; color: var(--tx-soft); font-size: var(--t-sm); line-height: 1.55; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 0.85rem; height: 0.48rem;
  border-left: 2.5px solid var(--gold); border-bottom: 2.5px solid var(--gold);
  transform: rotate(-45deg);
}

.statement {
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.1rem + 3.3vw, 3.4rem);
  font-weight: 900; text-transform: uppercase;
  line-height: 1.02; letter-spacing: -0.035em;
  max-width: 20ch; margin-inline: auto;
}

.about-line {
  font-family: var(--read);
  font-weight: 300;
  font-size: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  line-height: 1.42;
  max-width: 34ch;
  margin-inline: auto;
  color: var(--white-gold);
}

.ph {
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  padding: 1rem 1.25rem;
  background: rgba(255, 181, 71, 0.09);
  font-size: 0.84rem; line-height: 1.55;
  color: var(--tx-soft);
  text-align: left;
}
.ph b {
  display: block; margin-bottom: 0.3rem;
  font-family: var(--display); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep);
}
.dark .ph b, .bg-indigo .ph b { color: var(--gold); }

.note {
  border-left: 3px solid var(--gold);
  padding: 0.35rem 0 0.35rem 1.15rem;
  color: var(--tx-soft); font-size: var(--t-sm);
  text-align: left;
}

/* --------------------------------------------------------------------------
   12 · FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); text-align: left; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.3rem 3rem 1.3rem 0;
  position: relative;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1rem, 0.94rem + 0.4vw, 1.2rem);
  text-transform: uppercase; letter-spacing: -0.015em; line-height: 1.24;
  transition: color 0.2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--violet); }
.dark .faq summary:hover { color: var(--gold); }
.faq summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%;
  width: 14px; height: 14px;
  background:
    linear-gradient(var(--gold), var(--gold)) center/14px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center/2px 14px no-repeat;
  transform: translateY(-50%);
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(135deg); }
.faq .a { padding-bottom: 1.5rem; color: var(--tx-soft); max-width: 66ch; }
.faq .a > * + * { margin-top: 0.9em; }

/* --------------------------------------------------------------------------
   13 · CROWD PANEL
   -------------------------------------------------------------------------- */
.crowd-sec { background: var(--ink); color: var(--white-gold); }
.crowd {
  position: relative;
  max-width: 60rem; margin-inline: auto;
  border-radius: clamp(18px, 3vw, 34px);
  overflow: hidden;
}
/* The picture drifts inside its frame as the panel crosses the screen, and
   the violet behind it opens up as it arrives. */
.crowd img {
  width: 100%;
  transform: scale(1.11) translate3d(0, calc(var(--par, 0) * -3.2%), 0);
}
.crowd::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.18);
  border-radius: inherit;
}
.crowd-sec { position: relative; overflow: hidden; }
.crowd-sec::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 44% at 50% 34%,
    rgba(107, 75, 255, 0.34) 0%, rgba(107, 75, 255, 0.12) 42%, rgba(107, 75, 255, 0) 72%);
}
.crowd, .crowd-say { position: relative; z-index: 1; }
.crowd-screen {
  position: absolute; left: 6%; right: 6%; top: 6%;
  height: 26%;
  display: grid; place-items: center;
}
.crowd-word {
  grid-area: 1/1;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1rem, 0.4rem + 3.4vw, 3rem);
  letter-spacing: -0.03em; text-transform: uppercase;
  color: #17110C;
  opacity: 0;
  animation: cycle 13.2s var(--ease) infinite;
  animation-delay: var(--n);
  white-space: nowrap;
}
@keyframes cycle {
  0%, 1%    { opacity: 0; transform: translateY(0.35em); }
  5%, 21%   { opacity: 1; transform: none; }
  26%, 100% { opacity: 0; transform: translateY(-0.35em); }
}
@media (prefers-reduced-motion: reduce) {
  .crowd-word { animation: none; opacity: 0; }
  .crowd-word:first-child { opacity: 1; }
}
.crowd-say { text-align: center; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.crowd-say .lede { margin: 1.1rem auto 0; color: rgba(239, 234, 224, 0.82); }
.crowd-say .btns { margin-top: 1.9rem; justify-content: center; }

/* --------------------------------------------------------------------------
   14 · FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; text-align: left; }
.card-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.4rem, 1.1rem + 1.5vw, 2rem);
}
.field { display: grid; gap: 0.4rem; }
.field label, .field .lbl {
  font-family: var(--display); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.field .hint { font-size: 0.78rem; color: var(--tx-soft); }
.req { color: var(--gold-deep); }

.input, .select, .textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  font-family: var(--read); font-size: var(--t-body); font-weight: 300;
  line-height: 1.45;
  color: var(--indigo);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.textarea { min-height: 7rem; resize: vertical; }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235B4C7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.6rem; cursor: pointer;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(107, 75, 255, 0.2);
}
.input::placeholder, .textarea::placeholder { color: #9A90B4; }

.form-status { font-size: var(--t-sm); min-height: 1.4em; }
.form-status.ok  { color: #1B7A4B; font-weight: 400; }
.form-status.bad { color: #B3261E; font-weight: 400; }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   15 · FOOTER
   Wordmark only — the V already appears in the header.
   -------------------------------------------------------------------------- */
.ftr { background: var(--deep); color: var(--white-gold); padding-block: clamp(3rem, 2.5rem + 3vw, 4.5rem) 2rem; }
.ftr-top { display: grid; gap: 2.5rem; text-align: left; }
@media (min-width: 860px) { .ftr-top { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; } }
.ftr-mark { display: inline-block; }
.ftr-mark img { width: 14rem; }
.ftr h2 { font-size: var(--t-xs); }
.ftr-t {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.ftr-list li + li { margin-top: 0.55rem; }
.ftr-list a { font-size: var(--t-sm); color: rgba(239, 234, 224, 0.76); text-decoration: none; }
.ftr-list a:hover { color: var(--white-gold); text-decoration: underline; text-underline-offset: 0.22em; }
.ftr-blurb { color: rgba(239, 234, 224, 0.72); font-size: var(--t-sm); max-width: 30ch; margin-top: 1.1rem; }
.ftr-mail {
  display: inline-block; margin-top: 1rem;
  font-family: var(--display); font-weight: 700; font-size: var(--t-sm);
  color: var(--gold); text-decoration: none;
}
.ftr-mail:hover { text-decoration: underline; text-underline-offset: 0.22em; }
.ftr-bot {
  margin-top: 3rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 181, 71, 0.26);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between;
  font-size: 0.78rem; color: rgba(239, 234, 224, 0.6);
}
.ftr-bot a { color: inherit; text-decoration: none; }
.ftr-bot a:hover { color: var(--white-gold); }
.ftr-bot div { display: flex; flex-wrap: wrap; gap: 1.1rem; }

/* --------------------------------------------------------------------------
   16 · UTILITIES
   -------------------------------------------------------------------------- */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.mt1 { margin-top: 0.5rem; }
.mt2 { margin-top: 1rem; }
.mt3 { margin-top: 1.5rem; }
.mt4 { margin-top: 2rem; }
.mt5 { margin-top: 3rem; }
.soft { color: var(--tx-soft); }
.pop-store { display: none; }

/* ==========================================================================
   18 · THE MOTION SYSTEM
   Four parts, one idea: the page behaves like something moving fast.
     A. Signal fall — screens tumble down the hero and light up on the way in.
     B. Slipstream — hairlines that only exist while the page is in motion.
     C. Depth — the hero and the bubbles answer the pointer.
     D. Entrances — the headline rises word by word; rules and wires draw in.
   All of it is transform and opacity, and all of it stops for anyone who has
   asked for reduced motion.
   ========================================================================== */

/* --- A · SIGNAL FALL ----------------------------------------------------- */
.fall {
  position: absolute; inset: -12vh 0 0; z-index: 1;
  overflow: hidden; pointer-events: none;
  perspective: 900px;
  transform: translate3d(calc(var(--px, 0) * -20px), calc(var(--py, 0) * -10px), 0);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  /* Screens dissolve before the bottom edge rather than being cut off by it. */
  -webkit-mask-image: linear-gradient(180deg, #000 0 68%, rgba(0, 0, 0, 0) 94%);
  mask-image: linear-gradient(180deg, #000 0 68%, rgba(0, 0, 0, 0) 94%);
}
.fall .sprite { position: absolute; }
.fs {
  position: absolute; top: 0; left: var(--x);
  width: var(--w); height: auto;
  opacity: 0;
  filter: blur(var(--blur, 0));
  will-change: transform, opacity;
  animation: fsFall var(--dur) linear var(--delay) infinite;
}
/* No preserve-3d here on purpose: the perspective lives on .fall, and a
   promoted 3D layer escapes the parent's mask in Chromium. */
.fs-b {
  display: block;
  animation: fsSpin var(--spin) ease-in-out var(--delay) infinite alternate;
}
.fs svg { display: block; width: 100%; height: auto; }

/* Brightest through the top quarter — the moment it crosses the glow. */
@keyframes fsFall {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  9%   { opacity: var(--op); }
  26%  { opacity: var(--op); }
  70%  { opacity: calc(var(--op) * 0.4); }
  100% { transform: translate3d(var(--drift), 126vh, 0); opacity: 0; }
}
/* A swing, not a full turn — a flat plane at 90 degrees is invisible, and
   the screens should always read as screens. */
@keyframes fsSpin {
  from { transform: rotateX(10deg)  rotateY(-54deg) rotateZ(-7deg); }
  to   { transform: rotateX(-7deg)  rotateY(54deg)  rotateZ(7deg); }
}
/* Half the field on small screens — same effect, a third of the work. */
@media (max-width: 720px) { .fs:nth-child(2n) { display: none; } }
/* Nothing runs once the hero is off screen. */
.hero.rest .fs, .hero.rest .fs-b { animation-play-state: paused; }

/* --- B · SLIPSTREAM ------------------------------------------------------ */
.slip {
  position: fixed; inset: 0; z-index: 6;
  pointer-events: none;
  opacity: var(--slip, 0);
}
.slip span {
  position: absolute; left: var(--l); top: var(--t);
  width: 1px; height: var(--h);
  background: linear-gradient(180deg,
    rgba(107, 75, 255, 0) 0%, rgba(107, 75, 255, 0.85) 45%,
    rgba(255, 181, 71, 0.5) 62%, rgba(107, 75, 255, 0) 100%);
  transform:
    translate3d(0, calc(var(--slip-shift, 0px) * var(--sp)), 0)
    scaleY(var(--slip-y, 1));
  filter: blur(0.35px);
}
/* Air pushed aside at the edges. */
.slip-l, .slip-r {
  position: absolute; top: 0; bottom: 0; width: clamp(2.5rem, 7vw, 6rem);
  opacity: calc(var(--slip, 0) * 0.5);
}
.slip-l { left: 0; background: linear-gradient(90deg, rgba(107, 75, 255, 0.22), rgba(107, 75, 255, 0)); }
.slip-r { right: 0; background: linear-gradient(270deg, rgba(107, 75, 255, 0.22), rgba(107, 75, 255, 0)); }

/* --- C · DEPTH ----------------------------------------------------------- */
.watermark {
  transform:
    translate3d(calc(var(--px, 0) * 16px), calc(var(--py, 0) * 12px + var(--hero-shift, 0px)), 0);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-in { transform: translate3d(0, calc(var(--hero-shift, 0px) * -0.45), 0); }

/* The sphere's highlight is the pointer. When it is not there, it rests
   where the manual puts a light source — high and to the left. */
.bubble-in {
  background:
    radial-gradient(circle at var(--hx, 30%) var(--hy, 20%), rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 36%),
    radial-gradient(circle at 74% 82%, rgba(107, 75, 255, 0.30) 0%, rgba(107, 75, 255, 0) 54%),
    radial-gradient(circle at 50% 50%, rgba(11, 3, 30, 0.42) 0%, rgba(11, 3, 30, 0) 62%),
    linear-gradient(158deg, #3A1785 0%, #29105F 58%, #1B0944 100%);
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) scale(var(--sc, 1));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.bubble:hover .bubble-in,
.bubble:focus-visible .bubble-in {
  --sc: 1.07;
  border-color: var(--gold);
  box-shadow:
    inset 0 2px 14px rgba(255, 255, 255, 0.2),
    inset 0 -12px 26px rgba(0, 0, 0, 0.32),
    0 20px 50px -20px rgba(107, 75, 255, 0.75);
}
.bubble:active .bubble-in { --sc: 1.01; }
.bubble-free .bubble-in {
  background:
    radial-gradient(circle at var(--hx, 30%) var(--hy, 20%), rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(158deg, #FFD08A 0%, #FFB547 56%, #E09A2E 100%);
}
.bubble-free:hover .bubble-in { box-shadow: 0 20px 50px -20px rgba(255, 181, 71, 0.8); }

/* A dark section should not stop dead against a light one. The violet
   carries a little way over the seam. */
.after-dark { position: relative; isolation: isolate; }
.after-dark::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0;
  height: clamp(4rem, 13vw, 10rem);
  background: linear-gradient(180deg, rgba(107, 75, 255, 0.17), rgba(107, 75, 255, 0));
  pointer-events: none;
}

/* --- D · ENTRANCES ------------------------------------------------------- */
/* The headline arrives a word at a time, out of the floor of its own line. */
.wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.js .wm > i { display: inline-block; font-style: inherit; transform: translateY(110%); }
.js .hero-title.words .wm > i {
  animation: wordRise 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--wi, 0) * 70ms + 90ms);
}
@keyframes wordRise { from { transform: translateY(110%); } to { transform: translateY(0); } }
.js .hero-title.words { opacity: 1; }

/* A gold rule that draws itself under the phrase that matters. */
.sweep { position: relative; }
.sweep::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.08em;
  height: 0.09em; background: var(--gold-deep);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.dark .sweep::after { background: var(--gold); }
.js .in .sweep::after, .js .sweep.in::after { transform: scaleX(1); }

/* The three steps are wired together, and the wire draws as you arrive. */
@media (min-width: 800px) {
  .steps-wired { position: relative; }
  .steps-wired::before {
    content: ""; position: absolute; z-index: 0;
    left: 16.6%; right: 16.6%; top: 1.1rem; height: 2px;
    background: linear-gradient(90deg, var(--gold-deep), rgba(176, 116, 28, 0.25));
    transform: scaleX(0); transform-origin: left;
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
  }
  .steps-wired.wired::before { transform: scaleX(1); }
  .steps-wired li { position: relative; z-index: 1; }
  .steps-wired li::before { background: var(--bg); padding: 0 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fall, .slip { display: none; }
  .js .wm > i { transform: none; }
  .sweep::after, .steps-wired::before { transform: scaleX(1); }
  .watermark, .hero-in, .fall { transform: none; }
}

@media print {
  .hdr, .mnav, .pop, .burger, .watermark, .crowd-sec, .fall, .slip { display: none !important; }
  body, .hero, .phero, .ftr, .bg-indigo, .bg-ink { background: #fff !important; color: #000 !important; }
}

/* --- E · A LITTLE LIGHT ACROSS THE GOLD ---------------------------------
   One pass of specular across the primary button on hover. Nothing else on
   the page does this, so it stays the thing your eye goes to. */
.btn-gold { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 66%);
  transform: translateX(-115%);
}
.btn-gold:hover::after, .btn-gold:focus-visible::after { animation: sheen 0.85s var(--ease); }
@keyframes sheen { to { transform: translateX(115%); } }
@media (prefers-reduced-motion: reduce) { .btn-gold::after { display: none; } }

/* ==========================================================================
   19 · THE CLIENT WALL
   Company names set in our own type rather than nine mismatched logo files —
   one weight, one colour, one baseline. The row reads as a set instead of a
   pile of other people's artwork, and it costs nothing to load.
   ========================================================================== */
.clients {
  display: grid; gap: clamp(0.9rem, 0.5rem + 1.6vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .clients { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .clients { grid-template-columns: repeat(3, 1fr); } }

.client {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}
.client:hover, .client:focus-visible {
  border-color: var(--gold-deep);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -26px rgba(42, 16, 99, 0.55);
}
.dark .client:hover, .dark .client:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 18px 44px -24px rgba(107, 75, 255, 0.7);
}

/* A fixed box, so nine marks of nine different proportions sit on one
   baseline instead of stepping up and down the row. */
.client-logo {
  display: flex; align-items: center;
  height: 3.25rem;
  margin-bottom: 0.35rem;
}
.client-logo img {
  max-height: 100%; width: auto; max-width: 11rem;
  object-fit: contain; object-position: left center;
}
.client-line {
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--tx-soft);
  flex: 1;
}
.client-go {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.35rem;
  font-family: var(--display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep);
}
.dark .client-go { color: var(--gold); }
.client-go svg { transition: transform 0.25s var(--ease); }
.client:hover .client-go svg { transform: translateX(4px); }

/* The quiet version, for the homepage. Nine brands in nine palettes would
   fight each other in one row, so the row is held in grey and each mark takes
   its colour back on hover. */
.client-strip {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(1.25rem, 0.6rem + 2.4vw, 2.75rem);
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}
.client-strip a {
  display: flex; align-items: center;
  height: 2.1rem;
  filter: grayscale(1);
  opacity: 0.46;
  transition: opacity 0.3s var(--ease), filter 0.3s var(--ease), transform 0.3s var(--ease);
}
.client-strip img { max-height: 100%; width: auto; max-width: 8rem; object-fit: contain; }
.client-strip a:hover, .client-strip a:focus-visible {
  filter: none; opacity: 1; transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .client-strip a:hover { transform: none; } }

/* ==========================================================================
   20 · THE LEGAL ARTICLE
   The privacy notice reads as one continuous piece rather than a stack of
   sections. Bold lead-ins carry the navigation that headings would.
   ========================================================================== */
.legal-meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--tx-soft);
}
.btn-sm { padding: 0.6rem 1.1rem; font-size: var(--t-xs); letter-spacing: 0.1em; }

.legal-article { max-width: 68ch; }
.legal-article p { margin-top: 1.25em; line-height: 1.72; }
.legal-article p:first-child { margin-top: 0; }
/* The first paragraph carries the weight a standfirst would. */
.legal-article p:first-child {
  font-size: var(--t-lede);
  line-height: 1.6;
  color: var(--indigo);
}
.legal-article strong { font-weight: 600; color: var(--indigo); }