/* ============================================================
   SELF-HOSTED FONTS
   Replaces the Google Fonts <link>. No third-party request is
   made when this page loads. Files live in /public/fonts/.
   Cormorant Garamond, Source Serif 4 and Source Sans 3 are all
   licensed under the SIL Open Font License; the license texts
   ship alongside the .woff2 files.
   Latin subset only, which is all this site uses.
   ============================================================ */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/source-serif-4-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/source-sans-3-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
}

:root {
    --arc-gold: #C9A96E;
    --arc-gold-light: #D4B97E;
    --silver-light: #E8ECF1;
    --silver-mid: #B0BEC5;
    --cream: #FAF8F5;
    --cream-dark: #F0EDE8;
    --text-navy: #0B1D36;
    --text-muted: #5A6E80;
    --text-secondary: #8FA4B8;
    --deep-navy: #0A1628;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; overflow-x: hidden; }
  body {
    font-family: 'Source Sans 3', sans-serif;
    background: var(--cream);
    color: var(--text-navy);
    overflow-x: hidden;
  }

  /* ========= NAV ========= */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 1.5rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.5s ease;
  }

  nav.scrolled {
    background: rgba(250,248,245,0.95);
    backdrop-filter: blur(12px);
    padding: 1rem 3rem;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  }

  .logo {
    text-decoration: none;
    font-family: 'Source Serif 4', Georgia, 'Gelasio', serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1.25rem;
    font-weight: 300;
    letter-spacing: 0.22em;
    white-space: nowrap;
    text-transform: uppercase;
    color: white;
    transition: color 0.5s ease;
  }

  nav.scrolled .logo { color: var(--text-navy); }

  .logo .gold { font-weight: inherit; transition: color 0.5s ease; }
  .lr { font-size: 0.8em; }
  nav:not(.scrolled) .logo .gold { color: var(--arc-gold); }
  nav.scrolled .logo .gold { color: var(--arc-gold); }

  .nav-links { display: flex; gap: 2.5rem; list-style: none; }

  .nav-links a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: color 0.4s;
  }

  nav.scrolled .nav-links a { color: var(--text-muted); }
  .nav-links a:hover { color: var(--arc-gold) !important; }

  /* Mobile menu */
  .nav-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0.4rem;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: white;
    margin: 5px 0;
    transition: all 0.3s ease;
  }
  nav.scrolled .nav-toggle span { background: var(--text-navy); }
  @media (max-width: 768px) {
    .nav-toggle { display: block; }
    .nav-links {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      gap: 0;
      background: rgba(10,22,40,0.97);
      backdrop-filter: blur(12px);
      padding: 0.5rem 0 1rem;
    }
    nav.menu-open .nav-links { display: flex; }
    .nav-links li { text-align: center; }
    .nav-links a {
      display: block;
      padding: 1rem 1.5rem;
      color: rgba(255,255,255,0.85) !important;
      font-size: 0.95rem;
    }
    nav.scrolled .nav-links { background: rgba(250,248,245,0.98); }
    nav.scrolled .nav-links a { color: var(--text-navy) !important; }
    nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
    nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  }

  /* ========= HERO SKY ========= */
  .hero-sky {
    position: relative;
    height: 70vh;
    min-height: 500px;
    overflow: hidden;
  }

  /* Sky canvas - gradient set by JS */
  .sky-canvas {
    position: absolute;
    inset: 0;
    transition: background 2s ease;
  }

  /* Sun/moon glow */
  .celestial-glow {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 250px;
    border-radius: 50%;
    pointer-events: none;
    transition: background 2s ease, opacity 2s ease;
    animation: celestialPulse 8s ease-in-out infinite alternate;
  }

  @keyframes celestialPulse {
    0% { opacity: 0.7; transform: translateX(-50%) scale(1); }
    100% { opacity: 1; transform: translateX(-50%) scale(1.05); }
  }

  /* Haze */
  .haze {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 35%;
    pointer-events: none;
    transition: background 2s ease;
  }

  /* Clouds */
  .day-clouds {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 2s ease;
  }

  .day-cloud {
    position: absolute;
    border-radius: 50%;
    filter: blur(30px);
    transition: background 2s ease;
  }

  .day-cloud:nth-child(1) { width: 400px; height: 80px; top: 18%; left: -5%; animation: cloudFloat 90s linear infinite; }
  .day-cloud:nth-child(2) { width: 300px; height: 60px; top: 25%; left: 30%; filter: blur(40px); animation: cloudFloat 120s linear infinite; animation-delay: -30s; }
  .day-cloud:nth-child(3) { width: 500px; height: 90px; top: 12%; right: -10%; filter: blur(35px); animation: cloudFloat 100s linear infinite; animation-delay: -60s; }
  .day-cloud:nth-child(4) { width: 250px; height: 50px; top: 35%; left: 60%; filter: blur(45px); animation: cloudFloat 110s linear infinite; animation-delay: -45s; }
  .day-cloud:nth-child(5) { width: 350px; height: 70px; bottom: 30%; left: 10%; filter: blur(50px); animation: cloudFloat 130s linear infinite; animation-delay: -20s; }

  @keyframes cloudFloat {
    0% { transform: translateX(0); }
    100% { transform: translateX(100vw); }
  }

  /* Stars */
  .stars-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 2s ease;
  }

  .star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: twinkle var(--dur) ease-in-out infinite alternate;
    opacity: 0;
  }

  @keyframes twinkle {
    0% { opacity: 0.1; transform: scale(1); }
    100% { opacity: var(--max-o, 0.8); transform: scale(1.3); }
  }

  /* Silver Arc */
  .arc-container {
    position: absolute;
    bottom: -5%;
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    height: 60%;
    pointer-events: none;
  }

  .silver-arc {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    border: 1.5px solid transparent;
    border-radius: 50% 50% 0 0;
    transition: border-top-color 2s ease;
    animation: arcGlow 6s ease-in-out infinite alternate;
  }

  .silver-arc::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 10%;
    right: 10%;
    height: 3px;
    filter: blur(1.5px);
    animation: arcShimmer 4s ease-in-out infinite alternate;
    transition: background 2s ease;
  }

  .silver-arc-outer {
    position: absolute;
    bottom: -2%;
    left: 50%;
    transform: translateX(-50%);
    width: 110%;
    height: 105%;
    border: 1px solid transparent;
    border-radius: 50% 50% 0 0;
    transition: border-top-color 2s ease;
  }

  .silver-arc-inner {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 88%;
    height: 92%;
    border: 1px solid transparent;
    border-radius: 50% 50% 0 0;
    transition: border-top-color 2s ease;
  }

  @keyframes arcGlow {
    0% { filter: brightness(0.85); }
    100% { filter: brightness(1.15); }
  }

  @keyframes arcShimmer {
    0% { opacity: 0.4; }
    100% { opacity: 1; }
  }

  .horizon-glow {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 25%;
    pointer-events: none;
    transition: background 2s ease;
  }

  /* Wordmark */
  .sky-wordmark {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    text-align: center;
    opacity: 0;
    animation: fadeIn 1.5s ease 0.5s forwards;
  }

  .sky-wordmark-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.35rem, 3.4vw, 2.7rem);
    font-weight: 300;
    letter-spacing: 0.28em;
    white-space: nowrap;
    text-transform: uppercase;
    color: white;
    text-shadow: 0 2px 40px rgba(10,22,40,0.15);
  }

  .sky-wordmark-text .gold { font-weight: inherit; }

  .sky-wordmark-sub {
    font-size: 0.65rem;
    font-weight: 300;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-top: 0.8rem;
    text-shadow: 0 1px 20px rgba(10,22,40,0.1);
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -50%); }
    to { opacity: 1; transform: translate(-50%, -60%); }
  }

  /* Time indicator */
  .time-indicator {
    position: absolute;
    bottom: 1.2rem;
    right: 2rem;
    z-index: 10;
    font-size: 0.6rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
  }

  /* Scroll arrow */
  .scroll-arrow {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    opacity: 0;
    animation: fadeIn 1.5s ease 1.2s forwards;
  }

  /* The chevron sits on the horizon, which runs from near-black at
     night to pale gold at sunrise. No single colour holds a readable
     contrast across that range, so updateSky() picks the ink from the
     horizon's own luminance and sets the halo the opposite way. The
     fallbacks here are what shows in the instant before the first
     updateSky(), and if the script never runs at all. */
  .scroll-arrow svg {
    width: 20px;
    height: 20px;
    color: var(--chevron-ink, #FFFFFF);
    filter: drop-shadow(0 0 3px var(--chevron-halo, rgba(10,22,40,0.75)));
    animation: bobDown 2s ease-in-out infinite;
  }

  /* The pulse used to bottom out at 0.4, which multiplied against a
     0.4-alpha white left the chevron at an effective 0.16 -- invisible
     against a daytime sky. It now stays near full strength, and the
     movement alone carries the animation. */
  @keyframes bobDown {
    0%, 100% { transform: translateY(0); opacity: 0.75; }
    50% { transform: translateY(6px); opacity: 1; }
  }

  /* ========= CONTENT SECTIONS ========= */
  .headline-section {
    background: var(--cream);
    padding: 5rem 3rem 4rem;
    text-align: center;
  }

  .headline-section h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.6rem, 5.4vw, 4.3rem);
    font-weight: 300;
    line-height: 1.15;
    color: var(--text-navy);
    margin-bottom: 1.5rem;
  }

  .headline-section h1 em {
    font-style: italic;
    color: #1a3f6f;
  }

  .headline-section p {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    font-weight: 300;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 680px;
    margin: 0 auto 2.5rem;
    text-wrap: balance;
  }

  .headline-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 2.5rem;
    border: 1px solid rgba(11,29,54,0.15);
    background: transparent;
    color: var(--text-navy);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: all 0.4s ease;
  }

  .headline-cta:hover {
    background: var(--text-navy);
    color: var(--cream);
    border-color: var(--text-navy);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(10,22,40,0.1);
  }

  .headline-cta svg { width: 14px; height: 14px; transition: transform 0.3s; }
  .headline-cta:hover svg { transform: translateX(4px); }

  .accent-line {
    width: 60px;
    height: 1px;
    background: var(--arc-gold);
    margin: 0 auto 1.5rem;
    opacity: 0.4;
  }

  .about-section {
    background: var(--cream);
    padding: 4rem 3rem 5rem;
    text-align: center;
  }

  .about-section .section-label {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: #A07E3B;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(160,126,59,0.55);
    margin-bottom: 1.5rem;
  }

  .about-section h1,
  .about-section h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 3.3vw, 2.8rem);
    font-weight: 300;
    line-height: 1.25;
    color: var(--text-navy);
    margin-bottom: 1.5rem;
  }

  .about-section h1 em,
  .about-section h2 em {
    font-style: italic;
    color: #1a3f6f;
  }

  .about-section p {
    font-size: 1.08rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 560px;
    margin: 0 auto;
  }

  .pillars-section {
    background: var(--cream-dark);
    padding: 5rem 3rem;
  }

  .pillars-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .pillar-card {
    padding: 1.5rem 2rem 2rem;
    background: var(--cream);
    border: 1px solid rgba(0,0,0,0.04);
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
  }

  .pillar-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 20%; right: 20%;
    height: 2px;
    background: var(--arc-gold);
    opacity: 0;
    transition: opacity 0.4s, left 0.4s, right 0.4s;
  }

  .pillar-card:hover::after { opacity: 0.5; left: 10%; right: 10%; }
  .pillar-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(10,22,40,0.06); }

  .pillar-number {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    color: var(--arc-gold);
    margin-bottom: 1rem;
    font-weight: 400;
    letter-spacing: 0.1em;
  }

  .pillar-card h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 0.8rem;
    color: var(--text-navy);
  }

  .pillar-card p {
    font-size: 0.98rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--text-muted);
  }

  footer {
    padding: 2.5rem 3rem;
    text-align: center;
    border-top: 1px solid rgba(0,0,0,0.05);
    background: var(--cream-dark);
  }

  .footer-logo {
    font-family: 'Source Serif 4', Georgia, 'Gelasio', serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-navy);
    margin-bottom: 0.8rem;
  }

  .footer-logo .gold { color: var(--arc-gold); }

  .footer-text {
    font-size: 0.8125rem;
    color: rgba(90,110,128,0.65);
    font-weight: 300;
    letter-spacing: 0.05em;
    line-height: 1.65;
  }
  .footer-text.left { text-align: left; }

  /* ========= RESPONSIVE ========= */
  @media (max-width: 768px) {
    .headline-section h1 { font-size: 2rem; }
    .headline-section h1 .h1-br { display: none; }
    .about-section h1,
    .about-section h2 { font-size: 1.7rem; }
    nav { padding: 1rem 1.5rem; }
    nav.scrolled { padding: 0.8rem 1.5rem; }
    .logo { font-size: 0.95rem; letter-spacing: 0.16em; }
    .nav-links { display: none; }
    .pillars-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .headline-section, .about-section, .pillars-section { padding-left: 1.5rem; padding-right: 1.5rem; }
    .hero-sky { height: 75vh; min-height: 500px; }
    .time-indicator { display: none; }
  }

  .lead-form {
    max-width: 420px;
    margin: 1.6rem auto 0;
    text-align: center;
  }
  .lead-form[hidden] { display: none; }
  button.headline-cta {
    background: transparent;
    font-family: 'Source Sans 3', sans-serif;
    cursor: pointer;
  }
  .lead-form input {
    display: block;
    width: 100%;
    padding: 0.85rem 1rem;
    margin-bottom: 0.8rem;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(11,29,54,0.15);
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--text-navy);
    box-sizing: border-box;
    transition: border-color 0.3s;
  }
  .lead-form input:focus {
    outline: none;
    border-color: var(--arc-gold);
  }
  .lead-form input::placeholder { color: rgba(90,110,128,0.55); }
  .lead-form button {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 2.5rem;
    margin-top: 0.4rem;
    border: 1px solid rgba(11,29,54,0.15);
    background: transparent;
    color: var(--text-navy);
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s ease;
  }
  .lead-form button:hover {
    background: var(--text-navy);
    color: var(--cream);
    border-color: var(--text-navy);
  }

  /* Left-aligned body copy (labels and headings stay centered) */
  #opportunity p:not(.section-label),
  #about p:not(.section-label),
  #research p:not(.section-label),
  #webinar p:not(.section-label),
  #privacy p:not(.section-label) {
    text-align: left;
  }
  .pillar-card p { text-align: left; }

  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

/* ============================================================
   ARC SHIMMER
   Previously injected at runtime by app.js via a generated
   <style> element. Moved here so the Content-Security-Policy
   does not need to allow inline styles. app.js still sets
   --shimmer-color on .silver-arc; only the rule moved.
   ============================================================ */
  .silver-arc::before {
    background: linear-gradient(
      90deg,
      transparent,
      var(--shimmer-color, rgba(255,255,255,0.6)),
      var(--shimmer-color, rgba(255,255,255,0.95)),
      var(--shimmer-color, rgba(255,255,255,0.6)),
      transparent
    ) !important;
  }

/* ============================================================
   FORM ACCESSIBILITY AND STATUS
   ============================================================ */

  /* Real labels for screen readers, visually identical page. */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Honeypot. Off-screen rather than display:none, which some
     bots check for. Real people never see or tab into it. */
  .hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    overflow: hidden;
  }

  .form-status {
    margin-top: 1rem;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.6;
    text-align: center;
  }
  .form-status:empty { margin-top: 0; }
  .form-status.is-error { color: #8a3324; }
  .form-status.is-success { color: var(--text-navy); }

  /* Soft note under the work email field. Not an error: the form
     still submits. It only asks for a work address. */
  .field-note {
    margin: -0.4rem 0 0.8rem;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: left;
  }
  .field-note[hidden] { display: none; }

  .lead-form button[disabled] {
    opacity: 0.5;
    cursor: default;
  }
  .lead-form button[disabled]:hover {
    background: transparent;
    color: var(--text-navy);
    border-color: rgba(11,29,54,0.15);
  }

  /* Keyboard focus. The design uses outline:none on inputs and
     relies on the gold border, which is fine for a mouse but
     leaves keyboard users without a marker on buttons and links. */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible {
    outline: 2px solid var(--arc-gold);
    outline-offset: 3px;
  }

/* ============================================================
   REDUCED MOTION
   The sky still changes with the time of day and the arc still
   renders; only the perpetual animation stops.
   ============================================================ */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
  }

  /* ============================================================
     WAS INLINE style="..." ATTRIBUTES

     style-src 'self' refuses inline style ATTRIBUTES, not just
     <style> blocks. Splitting the CSS out of the HTML for v20 moved
     the <style> block but left 35 style="..." attributes behind, and
     every one of them was being silently discarded in the browser:
     paragraph spacing, the webinar section's background, the privacy
     page's top padding, the contact link's colour, the footer
     measure and the staggered card reveals.

     Same declarations, same values, now where the CSP allows them.
     Compound selectors where a single class would lose on
     specificity to .about-section.
     ============================================================ */

  .nw { white-space: nowrap; }

  .link-inherit { color: inherit; }

  .about-section.bg-cream { background: var(--cream); }
  .about-section.bg-cream-dark { background: var(--cream-dark); }
  .about-section.legal-top { padding-top: 9rem; }

  .about-section p.mt-para { margin-top: 1.2rem; }
  .about-section p.contact-email { margin-top: 0.4rem; }

  .cta-row { margin-top: 2rem; }

  .footer-logo.contact-logo {
    margin-top: 1.2rem;
    font-size: 1.3rem;
  }

  .footer-text.footer-note {
    max-width: 720px;
    margin: 0 auto 1rem;
  }

  .reveal-delay-1 { transition-delay: 0.15s; }
  .reveal-delay-2 { transition-delay: 0.3s; }

  /* The hero's "Learn More" button is gone, so the standfirst is now the
     last thing in the block. Its 2.5rem bottom margin existed to hold the
     button off; without it the block sat high. Drop that margin and even
     out the section padding so the two lines read as optically centred. */
  .headline-section { padding-bottom: 2.5rem; }
  .headline-section p:last-child { margin-bottom: 0; }

  /* About and Contact share one cream band with no colour change between
     them, so a full section gap reads as a hole rather than a break.
     About gives up most of its bottom padding; Contact keeps its own top
     padding, which is what separates the two. */
  .about-section.band-lead { padding-bottom: 1rem; }