/* ==========================================================================
   Self-hosted fonts. Replaces the Google Fonts <link> (removed from every
   page's <head>) — these are the same two families, sourced from the brand
   asset download and converted from .ttf to .woff2 with fonttools.
   font-display: swap avoids invisible text while a face loads; the
   print/onload trick the Google Fonts link used to defer its own external
   stylesheet fetch is gone entirely, since these are just declarations
   inside this already-blocking, same-origin stylesheet now.

   DM Sans ships as one variable file: font-weight covers its full native
   axis range (100–1000) so the browser resolves any weight in between to
   the real instance instead of synthesizing it. Syncopate has no variable
   version and no italic — the site's Syncopate `em` elements render with a
   browser-synthesized oblique, same as they did on Google Fonts. */
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/dm-sans-variable.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Syncopate";
  src: url("/assets/fonts/syncopate-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Syncopate";
  src: url("/assets/fonts/syncopate-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   GIK Marketplace — shared site styles
   Consolidated from the per-page <style> blocks of index.html, about.html,
   terms.html, privacy.html, and webinar.html.

   Layout:
     1. Base + home page (also defines the shared nav, footer, buttons,
        ribbon, skip link, and subscribe dropdown used by every page)
     2. About page (.who-*, .team-*)
     3. Legal pages — terms.html and privacy.html (.legal-content)
     4. Webinar page (only the components unique to that page)
   ========================================================================== */

/* ==========================================================================
   1. BASE + HOME PAGE (index.html)
   ========================================================================== */

   :root {
     --vivid-orange: #F44F1C;
     --vivid-orange-hover: #D13E10;
     --supply-white: #FBFEF9;
     --market-blue: #16364B;
     --dutch-blue: #63ADF2;
     --dutch-blue-light: #CEE5FB;
     --lightest-dutch-blue: #d2e7fb;
     --market-blue-deep: #0f2530;
     --text-dark: #211B1B;
     --text-muted: #5a6570;
     --border-light: #e8ebed;
   }
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   html {
     scroll-behavior: smooth;
     overflow-x: hidden;
   }
   body {
     font-family: "DM Sans", sans-serif;
     color: var(--text-dark);
     background: var(--supply-white);
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
   }

   /* === GIK Icon Set === */
   .gik-icon {
     width: 36px;
     height: 36px;
     object-fit: contain;
   }

   /* ===== ANIMATIONS ===== */
   @keyframes slideInLeft {
     from {
       opacity: 0;
       transform: translateX(-60px);
     }
     to {
       opacity: 1;
       transform: translateX(0);
     }
   }
   @keyframes slideInRight {
     from {
       opacity: 0;
       transform: translateX(60px);
     }
     to {
       opacity: 1;
       transform: translateX(0);
     }
   }
   @keyframes floatUp {
     0%,
     100% {
       transform: translateY(0);
     }
     50% {
       transform: translateY(-12px);
     }
   }
   /* Ends at the image's real overflow -- its height minus the 480px
      window -- instead of a fixed -45%, which ran ~90px past the bottom of
      the image at desktop width and further as the viewport narrowed. The
      min() keeps it still if the image is ever shorter than the window. */
   @keyframes screenScroll {
     0% {
       transform: translateY(0);
     }
     30% {
       transform: translateY(min(0px, calc((480px - 100%) * 0.333)));
     }
     60% {
       transform: translateY(min(0px, calc((480px - 100%) * 0.667)));
     }
     100% {
       transform: translateY(min(0px, calc(480px - 100%)));
     }
   }
   @keyframes kenBurns {
     0% {
       transform: scale(1);
     }
     100% {
       transform: scale(1.08);
     }
   }

   /* Scoped under .js (added by the inline script in every page's <head>,
      the earliest point a script can run — site.js itself is deferred and
      would run far too late) rather than applied unconditionally. Without
      JS, .no-js stays on <html> instead, this rule never matches, and
      .reveal elements are just... elements: visible at their natural
      opacity with no transform, which is what most of the homepage would
      otherwise be if the script that reveals them never got to run.

      Deliberately `.js .reveal`, not `html:not(.no-js) .reveal`: both
      express the same intent, but the :not() form has higher specificity
      (0,2,1) than `.reveal.visible` (0,2,0) below and would permanently
      beat it once JS *has* run — the opposite of what a reveal animation
      needs. `.js .reveal` ties .reveal.visible at (0,2,0), so the visible
      state wins on source order the moment IntersectionObserver adds it,
      exactly like it always has. */
   .js .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
   }
   .reveal.visible {
     opacity: 1;
     transform: translateY(0);
   }
   .reveal-delay-1 {
     transition-delay: 0.1s;
   }
   .reveal-delay-2 {
     transition-delay: 0.2s;
   }
   .reveal-delay-3 {
     transition-delay: 0.3s;
   }

   /* ===== VIDEO BG ===== */
   .video-bg-wrap {
     position: absolute;
     inset: 0;
     overflow: hidden;
     z-index: 0;
   }
   .video-bg-wrap video {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transform: scale(1.15);
     transform-origin: center center;
     transition: opacity 1s ease;
   }
   .video-bg-wrap::after {
     content: "";
     position: absolute;
     inset: 0;
   }

   /* ===== EDITORIAL PHOTO BACKGROUNDS ===== */
   .photo-bg {
     position: absolute;
     inset: 0;
     overflow: hidden;
     z-index: 0;
   }
   .photo-bg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     filter: blur(2px) saturate(0.7);
     transform: scale(1.04); /* compensate for blur edge bleed */
   }
   /* Color tint overlay */
   .photo-bg::after {
     content: "";
     position: absolute;
     inset: 0;
     z-index: 1;
   }
   /* Film grain texture */
   .photo-bg::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: 2;
     opacity: 0.06;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
     background-repeat: repeat;
     background-size: 200px 200px;
     mix-blend-mode: overlay;
     pointer-events: none;
   }
   /* Tint variants */
   .photo-bg.tint-dark::after {
     background: linear-gradient(
       135deg,
       rgba(15, 37, 48, 0.85) 0%,
       rgba(15, 37, 48, 0.72) 50%,
       rgba(15, 37, 48, 0.85) 100%
     );
   }
   .photo-bg.tint-orange::after {
     background: linear-gradient(
       180deg,
       rgba(244, 79, 28, 0.2) 0%,
       rgba(244, 79, 28, 0.65) 50%,
       rgba(180, 50, 14, 0.88) 100%
     );
   }
   .photo-bg.tint-blue::after {
     background: linear-gradient(
       135deg,
       rgba(15, 37, 48, 0.88) 0%,
       rgba(15, 37, 48, 0.78) 50%,
       rgba(15, 37, 48, 0.9) 100%
     );
   }
   .photo-bg.tint-teal::after {
     background: linear-gradient(
       180deg,
       rgba(15, 37, 48, 0.6) 0%,
       rgba(15, 37, 48, 0.82) 50%,
       rgba(15, 37, 48, 0.92) 100%
     );
   }
   /* ===== SKIP LINK ===== */
   .skip-link {
     position: absolute;
     top: -100%;
     left: 16px;
     z-index: 200;
     padding: 12px 24px;
     background: var(--vivid-orange);
     color: #fff;
     font-weight: 600;
     font-size: 14px;
     border-radius: 0 0 8px 8px;
     text-decoration: none;
     transition: top 0.2s ease;
   }
   .skip-link:focus {
     top: 0;
   }

   /* ===== SR-ONLY UTILITY ===== */
   .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border: 0;
   }

   /* ===== FOCUS STYLES ===== */
   *:focus {
     outline: none;
   }
   *:focus-visible {
     outline: 3px solid var(--vivid-orange);
     outline-offset: 3px;
     border-radius: 4px;
   }
   .btn-nav:focus-visible {
     outline-color: var(--vivid-orange);
     outline-offset: 2px;
   }
   .btn:focus-visible {
     outline-color: var(--vivid-orange);
     outline-offset: 3px;
   }
   .btn-white-outline:focus-visible {
     outline-color: #fff;
   }
   footer a:focus-visible {
     outline-color: var(--vivid-orange);
     outline-offset: 2px;
   }
   .nav-links a:focus-visible {
     outline-color: var(--vivid-orange);
     outline-offset: 4px;
   }

   /* ===== HAMBURGER NAV TOGGLE (hidden on desktop) ===== */
   .nav-toggle {
     display: none;
   }

   /* ===== NAV ===== */
   /* ===== ANNOUNCEMENT RIBBON ===== */
   /* The header is the single fixed element; the ribbon and nav stack inside it
in normal flow. This avoids hardcoding the nav's top offset to the ribbon's
height, which drifts whenever the ribbon's padding or font size changes. */
   header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 101;
   }
   .ribbon {
     background: var(--market-blue);
     color: #fff;
     padding: 8px 24px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     font-size: 13px;
     font-weight: 500;
     letter-spacing: 0.01em;
     text-align: center;
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   }
   .ribbon-link {
     text-decoration: none;
     color: #fff;
     transition: background 0.2s;
   }
   .ribbon-link:hover {
     background: var(--market-blue-deep);
   }
   .ribbon-link .ribbon-text {
     border-bottom: none;
   }
   .ribbon-arrow {
     flex-shrink: 0;
     transition: transform 0.2s;
   }
   .ribbon-link:hover .ribbon-arrow {
     transform: translateX(3px);
   }
   .ribbon-tag {
     display: inline-block;
     background: var(--vivid-orange);
     color: #fff;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.08em;
     padding: 3px 8px;
     border-radius: 3px;
     text-transform: uppercase;
     white-space: nowrap;
   }
   .ribbon-text {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   @media (max-width: 600px) {
     .ribbon {
       padding: 7px 12px;
       font-size: 12px;
       gap: 8px;
     }
     .ribbon-tag {
       font-size: 9px;
       padding: 2px 6px;
     }
   }

   nav {
     /* relative, not static: the mobile menu is absolutely positioned at
  top:100% and must resolve against the nav, not the fixed header. */
     position: relative;
     z-index: 100;
     padding: 16px 48px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: rgba(255, 255, 255, 0.96);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid rgba(0, 0, 0, 0.06);
     transition: all 0.3s ease;
   }
   nav.scrolled {
     padding: 12px 48px;
     box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
   }
   .nav-logo img {
     height: 36px;
     width: auto;
     display: block;
   }
   .nav-logo a {
     display: block;
     line-height: 0;
   }
   .nav-links {
     display: flex;
     align-items: center;
     gap: 32px;
   }
   .nav-links a {
     font-size: 14px;
     font-weight: 500;
     color: var(--market-blue);
     text-decoration: none;
     letter-spacing: 0.02em;
     transition: color 0.2s;
   }
   .nav-links a:hover {
     color: var(--vivid-orange);
   }
   .btn-nav {
     font-size: 14px;
     font-weight: 600;
     padding: 10px 24px;
     border-radius: 6px;
     text-decoration: none;
     transition: all 0.25s ease;
     cursor: pointer;
     letter-spacing: 0.02em;
   }
   .btn-nav-outline {
     border: 1.5px solid var(--market-blue);
     color: var(--market-blue);
     background: transparent;
   }
   .btn-nav-outline:hover {
     background: var(--market-blue);
     color: #fff;
   }
   .btn-nav-primary {
     background: var(--vivid-orange);
     color: #fff;
     border: 1.5px solid var(--vivid-orange);
   }
   .btn-nav-primary:hover {
     background: var(--vivid-orange-hover);
     border-color: var(--vivid-orange-hover);
     color: #fff;
   }

   /* ===== SUBSCRIBE DROPDOWN ===== */
   .subscribe-wrap {
     position: relative;
     display: inline-block;
   }
   .subscribe-dropdown {
     display: none;
     position: absolute;
     top: calc(100% + 10px);
     right: 0;
     background: #fff;
     border-radius: 12px;
     padding: 16px;
     box-shadow:
       0 12px 40px rgba(0, 0, 0, 0.15),
       0 0 0 1px rgba(0, 0, 0, 0.05);
     z-index: 1000;
     min-width: 320px;
   }
   .subscribe-dropdown.open {
     display: block;
     animation: fadeInDown 0.2s ease;
   }
   @keyframes fadeInDown {
     from {
       opacity: 0;
       transform: translateY(-8px);
     }
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }

   /* ===== NAV ITEM DROPDOWN ===== */
   .nav-item-dropdown {
     position: relative;
     display: inline-block;
   }
   .nav-dropdown-toggle {
     background: none;
     border: none;
     cursor: pointer;
     font-size: 14px;
     font-weight: 500;
     color: var(--market-blue);
     letter-spacing: 0.02em;
     transition: color 0.2s;
     display: inline-flex;
     align-items: center;
     gap: 6px;
   }
   .nav-dropdown-toggle:hover {
     color: var(--vivid-orange);
   }
   .nav-dropdown-caret {
     transition: transform 0.2s ease;
   }
   .nav-dropdown-toggle[aria-expanded="true"] .nav-dropdown-caret {
     transform: rotate(180deg);
   }
   .nav-dropdown-menu {
     display: none;
     position: absolute;
     top: calc(100% + 10px);
     left: 0;
     background: #fff;
     border-radius: 12px;
     padding: 8px;
     box-shadow:
       0 12px 40px rgba(0, 0, 0, 0.15),
       0 0 0 1px rgba(0, 0, 0, 0.05);
     z-index: 1000;
     min-width: 200px;
   }
   .nav-dropdown-menu.open {
     display: block;
     animation: fadeInDown 0.2s ease;
   }
   .nav-dropdown-menu a {
     display: block;
     padding: 8px 12px;
     border-radius: 8px;
   }
   @media (prefers-reduced-motion: reduce) {
     .nav-dropdown-menu.open {
       animation: none;
     }
     .nav-dropdown-caret {
       transition: none;
     }
   }
   .subscribe-form {
     display: flex;
     gap: 8px;
   }
   .subscribe-form input[type="email"] {
     flex: 1;
     padding: 10px 14px;
     border: 1.5px solid #ddd;
     border-radius: 6px;
     font-size: 14px;
     font-family: inherit;
     outline: none;
     transition: border-color 0.2s;
   }
   .subscribe-form input[type="email"]:focus {
     border-color: var(--vivid-orange);
   }
   .subscribe-submit {
     white-space: nowrap;
     font-size: 13px !important;
     padding: 10px 16px !important;
   }
   .subscribe-msg {
     margin: 8px 0 0;
     font-size: 13px;
     text-align: center;
     min-height: 18px;
   }
   .subscribe-msg.success {
     color: #16a34a;
   }
   .subscribe-msg.error {
     color: var(--vivid-orange);
   }
   .subscribe-msg.loading {
     color: var(--text-muted);
   }

   /* ===== COOKIE CONSENT BANNER ===== */
   .cookieBox {
      color: var(--text-dark);
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
   }

   .cookieDialog {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--supply-white);
    padding: 16px 24px;
   }

   .cookie-btn-row {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex: none; /* the text column absorbs the spare width, not the buttons */
   }

   .cookie-btn {
     font-size: 14px;
     font-weight: 600;
     padding: 10px 24px;
     border-radius: 6px;
     text-decoration: none;
     transition: all 0.25s ease;
     cursor: pointer;
     letter-spacing: 0.02em;
   }
    .cookie-btn-outline {
     border: 1.5px solid var(--market-blue);
     color: var(--market-blue);
     background: transparent;

   }
   .cookie-btn-outline:hover {
     background: var(--market-blue);
     color: #fff;
   }
   .cookie-btn-primary {
     background: var(--vivid-orange);
     color: #fff;
     border: 1.5px solid var(--vivid-orange);
   }
   .cookie-btn-primary:hover {
     background: var(--vivid-orange-hover);
     border-color: var(--vivid-orange-hover);
     color: #fff;
   }

   /* On a phone the row has nowhere to put the copy: the two buttons hold
      their width, so the text is squeezed into a narrow strip that wraps to
      one or two words a line. Stack it instead, with the buttons full-width
      underneath. The bottom padding clears the iOS home indicator, which
      otherwise sits over them — the banner is fixed to the bottom edge. */
   @media (max-width: 640px) {
     .cookieBox {
       flex-flow: column nowrap;
       align-items: stretch;
       gap: 16px;
     }
     .cookieDialog {
       padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
     }
     .cookieBox p {
       margin: 0;
     }
     .cookie-btn-row {
       justify-content: stretch;
     }
     .cookie-btn {
       flex: 1;
       text-align: center;
     }
   }

   /* In-page twin of the footer's Cookie Preferences link, for the Privacy
      Policy's cookies section — the banner tells people they can change
      their settings on that page, so the control belongs in the text rather
      than only in the footer. Same data-cookie-preferences hook; consent.js
      listens on the document and picks up either one. Its own font-family
      because .cookie-btn sits inside the banner, where the family is
      already inherited, and a bare <button> would otherwise fall back to
      the system font. */
   .cookie-prefs-button {
     display: inline-flex;
     align-items: center;
     font-family: "DM Sans", sans-serif;
     font-size: 15px;
     font-weight: 600;
     padding: 12px 24px;
     margin-top: 8px;
     border-radius: 8px;
     border: 1.5px solid var(--market-blue);
     background: transparent;
     color: var(--market-blue);
     cursor: pointer;
     letter-spacing: 0.02em;
     transition: all 0.25s ease;
   }
   .cookie-prefs-button:hover {
     background: var(--market-blue);
     color: #fff;
   }



   /* ===== ACTIVE DISASTERS BAND ===== */
   .section-title {
    color: var(--vivid-orange);
    font-family: "Syncopate", sans-serif;
    text-align: left;
    text-transform: uppercase;
   }
   .live-disasters {
     background: #13303d; /* slightly lighter than the hero overlay for separation */
     background-image: linear-gradient(180deg, #13303d 0%, #102a36 100%);
     /* sits below the impact stories, normal section spacing */
     padding: 72px 0 64px;
     position: relative;
     overflow: hidden;
     border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   }
   .fd-inner {
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 48px;
   }
   .fd-head {
     display: flex;
     align-items: space;
     justify-content: space-between;
     margin-bottom: 32px;
   }
   /* Below the carousel, right-aligned under the cards. */
   .fd-foot {
     margin-top: 20px;
     text-align: right;
     font-size: 15px;
     line-height: 1.6;
     color: rgba(255, 255, 255, 0.62);
   }
   .fd-foot[hidden] {
     display: none;
   }
   .fd-tagline {
     font-family: "Syncopate", sans-serif;
     font-weight: 700;
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 0.18em;
     color: var(--vivid-orange);
     margin-bottom: 14px;
     display: flex;
     align-items: center;
     gap: 12px;
   }
   .fd-tagline::before {
     content: "";
     width: 32px;
     height: 2px;
     background: var(--vivid-orange);
     flex: none;
   }
   .fd-count {
     font-family: "Syncopate", sans-serif;
     font-weight: 700;
     font-size: 12px;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.45);
     white-space: nowrap;
   }
   .fd-head-controls {
     display: flex;
     align-items: center;
     gap: 16px;
     flex: none;
   }
   .fd-nav {
     display: flex;
     gap: 8px;
   }
   .fd-nav[hidden] {
     display: none;
   }
   /* Mirrors .fd-cta-outline so the arrows read as part of the card set. */
   .fd-nav-btn {
     width: 40px;
     height: 40px;
     flex: none;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0;
     border-radius: 50%;
     background: transparent;
     border: 1.5px solid rgba(255, 255, 255, 0.25);
     color: rgba(255, 255, 255, 0.85);
     cursor: pointer;
     transition:
       border-color 0.25s ease,
       background 0.25s ease,
       color 0.25s ease,
       opacity 0.25s ease;
   }
   .fd-nav-btn svg {
     width: 18px;
     height: 18px;
   }
   .fd-nav-btn:hover:not(:disabled) {
     border-color: #fff;
     color: #fff;
     background: rgba(255, 255, 255, 0.06);
   }
   .fd-nav-btn:disabled {
     opacity: 0.35;
     cursor: default;
   }

   .fd-viewport {
     position: relative;
     overflow-x: auto;
     overflow-y: hidden;
     scrollbar-width: none;
     -ms-overflow-style: none;
     cursor: grab;
     /* Each edge fades only when there is content hidden past it. An edge
        set to #000 is flat against its neighbouring stop, so no fade is
        drawn; set to transparent, it ramps over 32px (left) or 64px
        (right). JS toggles the two classes below as the track scrolls. */
     --fd-edge-left: #000;
     --fd-edge-right: transparent;
     -webkit-mask-image: linear-gradient(
       90deg,
       var(--fd-edge-left) 0,
       #000 32px,
       #000 calc(100% - 64px),
       var(--fd-edge-right) 100%
     );
     mask-image: linear-gradient(
       90deg,
       var(--fd-edge-left) 0,
       #000 32px,
       #000 calc(100% - 64px),
       var(--fd-edge-right) 100%
     );
   }
   .fd-viewport.is-scrolled {
     --fd-edge-left: transparent;
   }
   .fd-viewport.is-at-end {
     --fd-edge-right: #000;
   }
   .fd-track {
     display: flex;
     gap: 20px;
     padding: 8px 48px 8px 0;
     will-change: transform;
   }
   .fd-viewport::-webkit-scrollbar {
     display: none;
     height: 0;
   }
   .fd-viewport.dragging {
     cursor: grabbing;
   }
   .fd-viewport.dragging .fd-track {
     transition: none;
   }

   .fd-card {
     /* No cursor: pointer — the card itself is not clickable; its two CTAs are. */
     flex: 0 0 280px;
     width: 280px;
     min-height: 404px;
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 16px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     transition:
       transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
       box-shadow 0.35s ease,
       border-color 0.35s ease;
     backdrop-filter: blur(8px);
   }
   .fd-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
     border-color: rgba(244, 79, 28, 0.4);
   }
   /* The card is no longer focusable, so this tracks focus on either CTA
      instead — the whole card lifts to show which one the keyboard is on,
      while the button keeps its own ring from the global :focus-visible rule. */
   .fd-card:focus-within {
     border-color: rgba(244, 79, 28, 0.4);
     background: rgba(255, 255, 255, 0.07);
   }
   .fd-card-media {
     position: relative;
     height: 168px;
     flex: none;
     overflow: hidden;
     background: var(--dark-navy, #0a1929);
   }
   /* Darkened, color-tinted incident photo reads as texture, not focal point. */
   .fd-card-photo {
     position: absolute;
     inset: 0;
     object-fit: cover;
     width: 100%;
     height: 100%;
     display: block;
     filter: grayscale(0.4) brightness(0.35) contrast(1.1);
   }
   .fd-card-photo-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(
       135deg,
       rgba(10, 25, 41, 0.85),
       rgba(244, 79, 28, 0.25)
     );
     mix-blend-mode: multiply;
   }
   /* Crisp white state outline floats over the tinted photo. */
   .fd-state-outline {
     position: absolute;
     inset: 12%;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1;
   }
   .fd-state-outline svg {
     width: 100%;
     height: 100%;
   }
   .fd-state-outline path {
     fill: rgba(255, 255, 255, 0.92);
     stroke: rgba(255, 255, 255, 0.4);
     stroke-width: 0.5;
     filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
   }
   .fd-state-label {
     position: absolute;
     top: 12px;
     right: 12px;
     z-index: 2;
     font-family: "Syncopate", sans-serif;
     font-size: 14px;
     font-weight: 700;
     color: var(--vivid-orange, #F44F1C);
     letter-spacing: 0.08em;
     text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
   }
   .fd-badge {
     position: absolute;
     top: 12px;
     left: 12px;
     z-index: 2;
     font-family: "Syncopate", sans-serif;
     font-weight: 700;
     font-size: 9px;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: #fff;
     background: rgba(244, 79, 28, 0.92);
     padding: 6px 10px;
     border-radius: 5px;
   }
   .fd-card-body {
     padding: 18px 18px 16px;
     display: flex;
     flex-direction: column;
     flex: 1;
   }
   .fd-card-title {
     font-family: "DM Sans", sans-serif;
     font-size: 21px;
     line-height: 1.18;
     color: #fff;
     margin-bottom: 8px;
     /* Clamp to 2 lines with an ellipsis. Prevents long declaration titles
  (e.g. "Severe Storms, Straight-Line Winds, Tornadoes, and Flooding")
  from pushing the CTAs out of the card. */
     display: -webkit-box;
     -webkit-line-clamp: 2;
     line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
     /* Reserve exactly 2 lines of space so 1-line titles don't shift the
  layout up and misalign cards across the row. */
     min-height: calc(1.18em * 2);
   }
   .fd-card-states {
     font-family: "DM Sans", sans-serif;
     font-size: 13px;
     color: var(--dutch-blue);
     margin-bottom: 4px;
   }
   .fd-card-date {
     font-family: "DM Sans", sans-serif;
     font-size: 12px;
     color: rgba(255, 255, 255, 0.5);
     margin-bottom: auto;
   }
   .fd-card-ctas {
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin-top: 14px;
   }
   .fd-cta {
     display: inline-flex;
     align-items: center;
     justify-content: space-between;
     font-family: "DM Sans", sans-serif;
     font-weight: 600;
     font-size: 13px;
     padding: 9px 14px;
     border-radius: 7px;
     text-decoration: none;
     transition: all 0.25s ease;
   }
   .fd-cta-primary {
     background: var(--vivid-orange);
     color: #fff;
     border: 1.5px solid var(--vivid-orange);
   }
   .fd-cta-primary:hover {
     background: var(--vivid-orange-hover);
     border-color: var(--vivid-orange-hover);
   }
   .fd-cta-outline {
     background: transparent;
     color: rgba(255, 255, 255, 0.85);
     border: 1.5px solid rgba(255, 255, 255, 0.25);
   }
   .fd-cta-outline:hover {
     border-color: #fff;
     color: #fff;
     background: rgba(255, 255, 255, 0.06);
   }
   .fd-cta svg {
     width: 14px;
     height: 14px;
     flex: none;
   }

   /* Skeleton loading cards */
   .fd-skeleton {
     flex: 0 0 280px;
     width: 280px;
     height: 404px;
     border-radius: 16px;
     overflow: hidden;
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.06);
   }
   .fd-skeleton .sk-media {
     height: 168px;
     background: rgba(255, 255, 255, 0.07);
   }
   .fd-skeleton .sk-body {
     padding: 18px;
   }
   .fd-skeleton .sk-line {
     height: 14px;
     border-radius: 5px;
     background: rgba(255, 255, 255, 0.07);
     margin-bottom: 12px;
   }
   .fd-skeleton .sk-line.w70 {
     width: 70%;
   }
   .fd-skeleton .sk-line.w40 {
     width: 40%;
   }
   .fd-skeleton .sk-line.tall {
     height: 24px;
     width: 80%;
   }
   .fd-skeleton .sk-media,

   .fd-skeleton .sk-line {
     animation: adPulse 1.5s ease-in-out infinite;
   }
   @keyframes adPulse {
     0%,
     100% {
       opacity: 0.45;
     }
     50% {
       opacity: 0.9;
     }
   }

   /* Empty state */
   .fd-empty {
     display: none;
     padding: 8px 0 4px;
   }
   .fd-empty .fd-tagline {
     margin-bottom: 16px;
   }
   .fd-empty p {
     font-family: "DM Sans", sans-serif;
     font-size: 18px;
     line-height: 1.6;
     color: rgba(255, 255, 255, 0.75);
     max-width: 520px;
   }

   @media (max-width: 768px) {
     .live-disasters {
       padding: 56px 0 48px;
     }
     .fd-inner {
       padding: 0 20px;
     }
     /* Safe against the state classes: they only set custom properties,
        so they cannot override this. */
     .fd-viewport {
       -webkit-mask-image: none;
       mask-image: none;
     }
     .fd-track {
       padding: 8px 20px 8px 0;
       gap: 14px;
       -webkit-overflow-scrolling: touch;
       align-items: stretch;
     }
     .fd-card,
     .fd-skeleton {
       flex-basis: 230px;
       width: 230px;
       height: auto;
       min-height: 0;
     }
     .fd-card-media {
       height: 150px;
     }
     .fd-card-body {
       padding: 16px 16px 14px;
     }
     .fd-card-title {
       font-size: 19px;
       min-height: calc(1.18em * 2);
     }
     .fd-card-date {
       margin-bottom: 12px;
     }
     .fd-card-ctas {
       margin-top: 0;
       gap: 6px;
     }
     .fd-cta {
       padding: 8px 12px;
       font-size: 12.5px;
     }
     .fd-head {
       margin-bottom: 24px;
     }
     .fd-head-controls {
       width: 100%;
       justify-content: space-between;
     }
     .fd-nav-btn {
       width: 44px;
       height: 44px;
     }
     .fd-foot {
       margin-top: 16px;
     }
   }
   @media (prefers-reduced-motion: reduce) {
     .fd-card {
       transition: none;
     }
   }

   /* ===== HERO ===== */
   .hero {
     min-height: 100vh;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
     /* Fallback for narrow viewports, where the <source>'s own `media`
        condition means no video ever loads (see index.html) — matches the
        dark navy the video's gradient overlay sits on top of, so removing
        the video doesn't also remove the backdrop the white hero text
        needs to stay readable. Harmless above that width too: the video
        and its overlay sit on top of it either way. */
     background: var(--market-blue-deep);
   }
   .hero .video-bg-wrap::after {
     background: linear-gradient(
       135deg,
       rgba(15, 37, 48, 0.88) 0%,
       rgba(15, 37, 48, 0.72) 40%,
       rgba(15, 37, 48, 0.85) 100%
     );
   }
   /* Motion pause control. One appearance, placed per context below; every
      instance drives the same shared state (see home.js), so pausing from any
      one of them pauses every video and looping animation on the page. */
   .video-toggle {
     position: absolute;
     z-index: 3;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 14px;
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, 0.35);
     background: rgba(15, 37, 48, 0.55);
     backdrop-filter: blur(8px);
     color: #fff;
     font-family: "DM Sans", sans-serif;
     font-size: 13px;
     font-weight: 500;
     line-height: 1;
     cursor: pointer;
     transition:
       background 0.25s ease,
       border-color 0.25s ease;
   }
   .video-toggle:hover {
     background: rgba(15, 37, 48, 0.75);
     border-color: #fff;
   }
   .video-toggle:focus-visible {
     outline: 2px solid var(--vivid-orange);
     outline-offset: 2px;
   }
   .video-toggle-icon {
     width: 14px;
     height: 14px;
     flex-shrink: 0;
   }
   /* One icon, two glyphs: show whichever matches the next action. The paused
      state is driven by .is-paused on the button, set in home.js. */
   .video-toggle .video-toggle-glyph-play,
   .video-toggle.is-paused .video-toggle-glyph-pause {
     display: none;
   }
   .video-toggle.is-paused .video-toggle-glyph-play {
     display: inline;
   }
   /* Hero placement: sits above .hero-content (z-index 2). The offsets track
      .hero-content's padding at each breakpoint so the button lines up with the
      text column and clears the fixed header. */
   .hero .video-toggle {
     top: 140px;
     right: 48px;
   }
   /* Card placement: tucked into the card's own top-right corner. */
   .audience-video-card .video-toggle {
     top: 16px;
     right: 16px;
   }
   /* Pausing stops CSS motion too, not just video playback: the ken-burns drift
      on the card video would otherwise keep moving over a frozen frame, and the
      flywheel rings would keep spinning.
      The ring selector goes through .flywheel-arrows for specificity — the
      `animation` shorthand on .fw-ring-spin.inner/.outer is declared later in
      this file and resets animation-play-state, so an equally specific selector
      would lose on source order. */
   .motion-paused .hero-screen-wrapper img,
   .motion-paused .hero-stat-float,
   .motion-paused .audience-video-card .video-bg-wrap video,
   .motion-paused .flywheel-img-wrap,
   .motion-paused .flywheel-arrows .fw-ring-spin {
     animation-play-state: paused;
   }
   .hero-grid-lines {
     position: absolute;
     inset: 0;
     z-index: 1;
     opacity: 0.03;
     background-image:
       linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
       linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
     background-size: 80px 80px;
   }
   .cta-grid-lines {
     position: absolute;
     inset: 0;
     z-index: 1;
     opacity: 0.03;
     background-image:
       linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
       linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
     background-size: 80px 80px;
   }
   .hero-content {
     position: relative;
     z-index: 2;
     max-width: 1280px;
     margin: 0 auto;
     padding: 140px 48px 80px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
   }
   .hero-text {
     animation: slideInLeft 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
     container-type: inline-size;
   }
   .hero-tagline {
     font-family: "Syncopate", sans-serif;
     font-weight: 700;
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 0.18em;
     color: var(--vivid-orange);
     margin-bottom: 24px;
     display: flex;
     align-items: center;
     gap: 12px;
   }
   .hero-tagline::before {
     content: "";
     width: 32px;
     height: 2px;
     background: var(--vivid-orange);
   }
   .hero-headline {
     font-family: "Syncopate", sans-serif;
     font-weight: 700;
     text-transform: uppercase;
     font-size: clamp(42px, 5vw, 68px);
     line-height: 1.08;
     color: #fff;
     margin-bottom: 28px;
     letter-spacing: -0.02em;
   }
   .hero-headline em {
     font-style: italic;
     color: var(--dutch-blue);
   }
   .hero-sub {
     font-size: 18px;
     line-height: 1.7;
     color: rgba(255, 255, 255, 0.65);
     max-width: 480px;
     margin-bottom: 40px;
   }
   .hero-ctas {
     display: flex;
     flex-direction: column;
     gap: 16px;
     width: fit-content;
     max-width: 100%;
   }
   .hero-cta-row {
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
   }
   /* Centre the government button under the pair above it only while that
      pair actually shares a line — the two together need 464px. Narrower
      than that all three buttons stack, and it should left-align with them.
      The query is on .hero-text so it follows the hero column rather than
      the viewport: the column also drops below 464px between 1025px and
      1104px, where the two-column hero squeezes it. */
   .hero-cta-row-center {
     justify-content: flex-start;
   }
   @container (min-width: 464px) {
     .hero-cta-row-center {
       justify-content: center;
     }
   }
   .btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-family: "DM Sans", sans-serif;
     font-weight: 600;
     font-size: 15px;
     padding: 16px 32px;
     border-radius: 8px;
     text-decoration: none;
     transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
     cursor: pointer;
     letter-spacing: 0.02em;
     border: none;
   }
   .btn svg {
     width: 16px;
     height: 16px;
   }
   /* Join CTAs: the arrow only shows on hover/focus. The space it occupies
      is always reserved so the buttons never resize or re-wrap mid-hover.
      An empty spacer mirrors the arrow on the leading edge, so the label
      stays centred at rest and nothing shifts when the arrow fades in.
      Side padding drops from 32px to 20px to offset the two 16px slots
      (20 + 16 + 8 gap = the original 32 + 8 gap), keeping widths identical. */
   .hero-ctas .btn,
   .cta-buttons .btn {
     padding-left: 20px;
     padding-right: 20px;
   }
   .hero-ctas .btn::before,
   .cta-buttons .btn::before {
     content: "";
     width: 16px;
     flex: none;
   }
   .hero-ctas .btn svg,
   .cta-buttons .btn svg {
     opacity: 0;
     transform: translateX(-4px);
     transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
       transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   }
   .hero-ctas .btn:hover svg,
   .hero-ctas .btn:focus-visible svg,
   .cta-buttons .btn:hover svg,
   .cta-buttons .btn:focus-visible svg {
     opacity: 1;
     transform: translateX(0);
   }
   @media (prefers-reduced-motion: reduce) {
     .hero-ctas .btn svg,
     .cta-buttons .btn svg {
       transform: none;
       transition: none;
     }
   }
   .btn-orange {
     background: var(--vivid-orange);
     color: #fff;
   }
   .btn-orange:hover {
     background: var(--vivid-orange-hover);
     transform: translateY(-2px);
     box-shadow: 0 8px 24px rgba(244, 79, 28, 0.35);
   }
   .btn-blue {
     background: var(--dutch-blue);
     color: var(--market-blue-deep);
   }
   .btn-blue:hover {
     background: #5a9fd4;
     transform: translateY(-2px);
     box-shadow: 0 8px 24px rgba(99, 173, 242, 0.35);
   }
   .btn-white-outline {
     background: transparent;
     color: #fff;
     border: 1.5px solid rgba(255, 255, 255, 0.3);
   }
   .btn-white-outline:hover {
     border-color: #fff;
     background: rgba(255, 255, 255, 0.06);
     transform: translateY(-2px);
   }

   .hero-visual {
     position: relative;
     animation: slideInRight 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
   }
   .hero-screen-wrapper {
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     box-shadow:
       0 40px 80px rgba(0, 0, 0, 0.4),
       0 0 0 1px rgba(255, 255, 255, 0.06);
     height: 480px;
   }
   .hero-screen-wrapper img {
     width: 100%;
     height: auto;
     display: block;
     animation: screenScroll 12s ease-in-out infinite;
   }
   .hero-screen-glow {
     position: absolute;
     bottom: -40px;
     left: 50%;
     transform: translateX(-50%);
     width: 80%;
     height: 80px;
     background: radial-gradient(
       ellipse,
       rgba(244, 79, 28, 0.2),
       transparent
     );
     filter: blur(20px);
   }
   .hero-stat-float {
     position: absolute;
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(12px);
     border-radius: 10px;
     padding: 14px 18px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
     animation: floatUp 4s ease-in-out infinite;
   }
   .hero-stat-float.s1 {
     top: -10px;
     right: -20px;
   }
   .hero-stat-float.s2 {
     bottom: 40px;
     left: -30px;
     animation-delay: 1.5s;
   }
   .hero-stat-float .stat-icon {
     display: flex;
     align-items: center;
     gap: 10px;
   }
   .hero-stat-float .icon-circle {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
   }
   .hero-stat-float .icon-circle.orange {
     background: rgba(244, 79, 28, 0.1);
     color: var(--vivid-orange);
   }
   .hero-stat-float .icon-circle.blue {
     background: rgba(99, 173, 242, 0.2);
     color: var(--market-blue);
   }
   .hero-stat-float .stat-label {
     font-size: 13px;
     font-weight: 600;
     color: var(--market-blue);
     line-height: 1.3;
   }
   .hero-stat-float .stat-sub {
     font-size: 11px;
     color: var(--text-muted);
   }

   /* ===== VALUE BAR ===== */
   .value-bar {
     background: var(--supply-white);
     padding: 56px 48px;
     border-bottom: 1px solid var(--border-light);
   }
   .value-bar-inner {
     max-width: 1280px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 32px;
     text-align: center;
   }
   .value-item .value-icon {
     width: 48px;
     height: 48px;
     border-radius: 12px;
     margin: 0 auto 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
   }
   .value-item .value-icon.o {
     background: rgba(244, 79, 28, 0.08);
     color: var(--vivid-orange);
   }
   .value-item .value-icon.b {
     background: rgba(99, 173, 242, 0.15);
     color: var(--market-blue);
   }
   .value-item h3 {
     font-family: "Syncopate", sans-serif;
     font-weight: 700;
     text-transform: uppercase;
     font-size: 17px;
     color: var(--market-blue);
     margin-bottom: 4px;
   }
   .value-item p {
     font-size: 13px;
     color: var(--text-muted);
     line-height: 1.5;
   }

   /* ===== SHARED SECTION ===== */
   .section-label {
     font-family: "Syncopate", sans-serif;
     font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.18em;
     color: var(--vivid-orange);
     margin-bottom: 20px;
     display: flex;
     align-items: center;
     gap: 10px;
   }
   .section-label::before {
     content: "";
     width: 24px;
     height: 2px;
     background: var(--vivid-orange);
   }
   .section-headline {
     font-family: "Syncopate", sans-serif;
     font-weight: 700;
     text-transform: uppercase;
     font-size: clamp(32px, 3.5vw, 48px);
     line-height: 1.15;
     color: var(--market-blue);
     margin-bottom: 24px;
     letter-spacing: -0.02em;
   }
   .section-headline em {
     font-style: italic;
     color: var(--vivid-orange);
   }
   .section-body {
     font-size: 17px;
     line-height: 1.8;
     color: var(--text-muted);
     margin-bottom: 32px;
   }

   /* ===== IMPACT STORIES ===== */
   .stories-section {
     padding: 120px 48px 48px;
     max-width: 1280px;
     margin: 0 auto;
   }
   .stories-header {
     max-width: 720px;
     margin: 0 auto 56px;
     text-align: center;
   }
   .stories-header .section-label {
     justify-content: center;
   }
   .stories-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
   }
   /* Homepage link out to the full /impact-stories page. */
   .stories-cta {
     margin-top: 48px;
     text-align: center;
   }
   .story-card {
     display: flex;
     flex-direction: column;
     background: var(--supply-white);
     border: 1px solid var(--border-light);
     border-radius: 16px;
     overflow: hidden;
     transition: all 0.4s ease;
   }
   .story-card:hover {
     transform: translateY(-4px);
     border-color: rgba(244, 79, 28, 0.35);
   }
   .story-media {
     position: relative;
     aspect-ratio: 4 / 3;
     overflow: hidden;
     background: var(--dutch-blue-light);
   }
   .story-media img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
   }
   /* Photo and frame share a 4:3 ratio, so object-fit: cover leaves no
      slack to crop into. Oversizing the box and centring it pulls the
      framing in without disturbing the hover transform. */
   .story-media img.zoom-in {
     width: 116%;
     height: 116%;
     margin-left: -8%;
     /* margin % resolves against width, so on a 4:3 frame -6% is what
        halves the vertical overflow, not -8%. */
     margin-top: -6%;
   }
   .story-card:hover .story-media img {
     transform: scale(1.04);
   }
   .story-tag {
     position: absolute;
     left: 16px;
     bottom: 16px;
     font-family: "Syncopate", sans-serif;
     font-size: 10px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.14em;
     color: #fff;
     background: rgba(22, 54, 75, 0.85);
     backdrop-filter: blur(6px);
     padding: 7px 12px;
     border-radius: 6px;
   }
   .story-body {
     display: flex;
     flex-direction: column;
     flex: 1;
     padding: 28px;
   }
   .story-org {
     font-family: "Syncopate", sans-serif;
     font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.14em;
     color: var(--vivid-orange);
     margin-bottom: 12px;
   }
   .story-card h3 {
     font-family: "Syncopate", sans-serif;
     font-weight: 700;
     text-transform: uppercase;
     font-size: 19px;
     line-height: 1.3;
     color: var(--market-blue);
     margin-bottom: 12px;
   }
   .story-card p {
     font-size: 14px;
     line-height: 1.8;
     color: var(--text-muted);
   }
   .story-card p:not(:last-child) {
     margin-bottom: 20px;
   }
   /* Logo bar. Bounded box rather than fixed height, so wide, square,
      and stacked lockups can share a row without one dwarfing the rest. */
   .story-logos {
     margin-top: auto;
     padding-top: 28px;
     border-top: 1px solid var(--border-light);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     gap: 16px 15px;
   }
   .story-logos img {
     max-height: 56px;
     max-width: 112px;
     width: auto;
     height: auto;
     object-fit: contain;
     /* Ozarka (JPEG) and ALAN (PNG, no alpha) carry solid white
        backgrounds; multiply drops them out against the light card. */
     mix-blend-mode: multiply;
   }
   .story-metric {
     margin: -28px -28px 20px;
     padding: 20px 28px;
     background: var(--lightest-dutch-blue);
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 18px;
   }
   .story-metric-text {
     min-width: 0;
   }
   .story-metric-art {
     flex-shrink: 0;
     height: 56px;
     width: auto;
   }
   .story-metric-num {
     font-family: "Syncopate", sans-serif;
     font-weight: 700;
     font-size: 30px;
     line-height: 1;
     color: var(--vivid-orange);
     margin-bottom: 6px;
   }
   .story-metric-label {
     font-size: 16px;
     line-height: 1.5;
     color: var(--text-muted);
   }

   /* ===== PROBLEM ===== */
   .problem-section {
     padding: 120px 48px;
     max-width: 1280px;
     margin: 0 auto;
   }
   .problem-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
   }
   .pain-visual {
     position: relative;
     border-radius: 20px;
     overflow: hidden;
     min-height: 460px;
   }
   .pain-overlay {
     position: relative;
     z-index: 5;
     padding: 44px;
     display: flex;
     flex-direction: column;
     gap: 0;
     height: 100%;
   }
   .pain-point {
     padding: 20px 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
     display: flex;
     align-items: flex-start;
     gap: 16px;
   }
   .pain-point:last-child {
     border-bottom: none;
   }
   .pain-icon {
     width: 48px;
     height: 48px;
     border-radius: 8px;
     background: rgba(244, 79, 28, 0.35);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     color: var(--vivid-orange);
     font-size: 18px;
     font-weight: 700;
   }
   .pain-icon svg {
     width: 28px;
     height: 28px;
     stroke-width: 3.5;
     opacity: 1;
   }
   .pain-point h3 {
     font-size: 16px;
     font-weight: 600;
     color: #fff;
     margin-bottom: 4px;
   }
   .pain-point p {
     font-size: 14px;
     color: rgba(255, 255, 255, 0.6);
     line-height: 1.6;
   }

   /* ===== Recent News ===== */
   .news-section {
     padding: 120px 48px 48px;
     max-width: 1280px;
     margin: 0 auto;
   }
   .news-header {
     max-width: 720px;
     margin: 0 auto 56px;
     text-align: center;
   }
   .news-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
   }
   /* A single entry would otherwise stretch across the full 1280px row and
      read as a banner rather than as the first card of an archive. */
   .news-grid:has(.news-card:only-child) {
     grid-template-columns: minmax(0, 420px);
     justify-content: center;
   }
   .news-card {
     position: relative;
     display: flex;
     flex-direction: column;
     background: var(--supply-white);
     border: 1px solid var(--border-light);
     border-radius: 16px;
     overflow: hidden;
     transition: transform 0.4s ease, border-color 0.4s ease;
   }
   .news-card:hover {
     transform: translateY(-4px);
     border-color: rgba(244, 79, 28, 0.35);
   }
   /* The card's only focusable element is the read link, so its focus ring
      has to read as the whole tile being focused. */
   .news-card:focus-within {
     border-color: rgba(244, 79, 28, 0.35);
     outline: 2px solid var(--vivid-orange);
     outline-offset: 3px;
   }
   .news-card-media {
     position: relative;
     aspect-ratio: 16 / 9;
     overflow: hidden;
     background: var(--dutch-blue-light);
   }
   .news-card-media img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
   }
   .news-card:hover .news-card-media img {
     transform: scale(1.04);
   }
   /* Source-mark tile, for an entry with no photo but a logo we can show.
      Flat market blue rather than a gradient: the FEMA lockup's wordmark is
      white, so the tile has to stay dark and even behind it. */
   .news-card-logo {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     padding: 32px;
     background: var(--market-blue);
   }
   .news-card-logo img {
     width: auto;
     max-width: 78%;
     max-height: 52%;
     object-fit: contain;
   }
   /* Last-resort tile for an entry with neither a photo nor a usable mark —
      a document glyph and the outlet's name, in GIK type. */
   .news-card-doc {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 18px;
     height: 100%;
     padding: 24px;
     text-align: center;
     color: var(--supply-white);
     background: var(--market-blue);
   }
   .news-card-doc svg {
     width: 44px;
     height: 44px;
     opacity: 0.9;
     stroke-linecap: round;
     stroke-linejoin: round;
   }
   .news-card-doc-source {
     font-family: "Syncopate", sans-serif;
     font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.14em;
     line-height: 1.6;
     max-width: 16ch;
   }
   /* Over a photo the chip needs to be darker than what is behind it; over
      the flat blue tiles it would disappear, so there it inverts to a light
      outline instead. */
   .news-card-media:has(.news-card-logo) .news-card-tag,
   .news-card-media:has(.news-card-doc) .news-card-tag {
     background: rgba(251, 254, 249, 0.12);
     box-shadow: inset 0 0 0 1px rgba(251, 254, 249, 0.35);
   }
   .news-card-tag {
     position: absolute;
     left: 16px;
     bottom: 16px;
     font-family: "Syncopate", sans-serif;
     font-size: 10px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.14em;
     color: #fff;
     background: rgba(22, 54, 75, 0.85);
     backdrop-filter: blur(6px);
     padding: 7px 12px;
     border-radius: 6px;
   }
   .news-card-body {
     display: flex;
     flex-direction: column;
     flex: 1;
     padding: 28px;
   }
   /* Source first, in the same orange eyebrow the story cards use for the
      organization, then the date and any byline under it. Keeping them on
      separate lines means a long outlet name never pushes the date onto a
      line of its own behind a stray separator. */
   .news-card-source {
     font-family: "Syncopate", sans-serif;
     font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.14em;
     line-height: 1.5;
     color: var(--vivid-orange);
     margin-bottom: 8px;
   }
   .news-card-meta {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 8px;
     font-size: 12px;
     color: var(--text-muted);
     margin-bottom: 14px;
   }
   /* The separator lives in CSS rather than in the markup, so an entry with
      no byline never leaves a stray middot behind. */
   .news-card-meta > * + *::before {
     content: "\00b7";
     margin-right: 8px;
     color: var(--border-light);
   }
   .news-card-headline {
     font-family: "Syncopate", sans-serif;
     font-weight: 700;
     text-transform: uppercase;
     font-size: 19px;
     line-height: 1.3;
     color: var(--market-blue);
     margin-bottom: 12px;
     margin-top: 0px;
   }
   .news-card-subtitle {
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--vivid-orange);
   }
   .news-card-summary {
     font-size: 14px;
     line-height: 1.8;
     color: var(--text-muted);
     margin-bottom: 24px;
   }
   .news-card-disclaimer {
    font-size: 10px;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: 10px;
   }
   .news-card-link {
     margin-top: auto;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 4px 10px;
     padding-top: 24px;
     border-top: 1px solid var(--border-light);
     font-family: "Syncopate", sans-serif;
     font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.12em;
     color: var(--market-blue);
     text-decoration: none;
     transition: color 0.3s ease;
   }
   /* Stretched hit area: the whole card is clickable, while the accessible
      name still comes from this one link's own text. */
   .news-card-link::after {
     content: "";
     position: absolute;
     inset: 0;
   }
   .news-card-link:hover {
     color: var(--vivid-orange);
   }
   .news-card-link svg {
     width: 15px;
     height: 15px;
     transition: transform 0.3s ease;
   }
   .news-card-link:hover svg {
     transform: translateX(4px);
   }
   /* Download weight and the new-tab warning, in the link's accessible name
      but typographically subordinate to it. */
   .news-card-link-note {
     flex-basis: 100%;
     order: 1;
     font-family: "DM Sans", sans-serif;
     font-size: 11px;
     font-weight: 400;
     letter-spacing: 0;
     text-transform: none;
     color: var(--text-muted);
   }
   .news-card-link:focus-visible {
     outline: none;
   }

   /* ==============================================
ECOSYSTEM FLYWHEEL — NOVEL ANIMATED DIAGRAM
============================================== */
   .ecosystem-section {
     padding: 120px 48px 100px;
     background: var(--market-blue-deep);
     position: relative;
     overflow: hidden;
   }
   .ecosystem-section::before {
     content: "";
     position: absolute;
     inset: 0;
     background:
       radial-gradient(
         ellipse 40% 40% at 50% 48%,
         rgba(244, 79, 28, 0.05),
         transparent
       ),
       radial-gradient(
         ellipse 60% 60% at 50% 48%,
         rgba(99, 173, 242, 0.03),
         transparent
       );
   }
   .ecosystem-inner {
     max-width: 1100px;
     margin: 0 auto;
     position: relative;
     z-index: 2;
   }
   .ecosystem-header {
     text-align: center;
     margin-bottom: 72px;
   }
   .ecosystem-header .section-label {
     justify-content: center;
   }

   /* === Flywheel Container === */
   .flywheel {
     position: relative;
     width: 100%;
     max-width: 1100px;
     margin: 0 auto;
     text-align: center;
   }
   .flywheel-img-wrap {
     position: relative;
     display: inline-block;
     width: 100%;
     animation: flywheelPulse 6s ease-in-out infinite;
   }
   .flywheel-img-wrap img {
     width: 100%;
     height: auto;
     display: block;
   }
   /* Subtle pulse animation on the flywheel graphic */
   @keyframes flywheelPulse {
     0% {
       filter: drop-shadow(0 0 40px rgba(244, 79, 28, 0.12));
     }
     50% {
       filter: drop-shadow(0 0 60px rgba(244, 79, 28, 0.22));
     }
     100% {
       filter: drop-shadow(0 0 40px rgba(244, 79, 28, 0.12));
     }
   }
   /* Rotating arrow overlays — subtle motion on top of the static PNG */
   .flywheel-arrows {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
   }
   /* Each ring is its own square <svg> box centered on the artwork hub
      (2666,1504 of 5334x3000) and rotated as a plain CSS box about its
      own center. Safari's compositor mishandles transform-box: view-box
      on animated SVG children (rings orbit instead of spinning in
      place), so no CSS transform-origin may target SVG internals here.
      Ring geometry is authored centered at 0,0; box widths keep the
      same px-per-artwork-unit as the PNG. */
   .flywheel-arrows svg {
     position: absolute;
     left: 49.9813%; /* 2666 / 5334 */
     top: 50.1333%; /* 1504 / 3000 */
     transform: translate(-50%, -50%);
     overflow: visible;
   }
   .fw-ring-spin.inner {
     width: 20.9974%; /* 1120 / 5334 */
     aspect-ratio: 1;
     animation: spinCW 50s linear infinite;
   }
   .fw-ring-spin.outer {
     width: 41.9948%; /* 2240 / 5334 */
     aspect-ratio: 1;
     animation: spinCW 70s linear infinite;
   }
   /* === Rotating Orbit Rings with Arrows === */
   /* Inner ring — counter-clockwise */
   /* Outer ring — clockwise */

   @keyframes spinCW {
     from {
       transform: translate(-50%, -50%) rotate(0deg);
     }
     to {
       transform: translate(-50%, -50%) rotate(360deg);
     }
   }
   /* === Center Hub === */
   /* === Flow Nodes — positioned absolutely around the wheel === */
   /* Pulsing glow ring */
   /* Stagger the glow pulses */
   /* Node positions — placed at compass points */
   /* === Animated Connection Paths with Particles === */
   /* Traveling particles on paths */
   /* Path labels */
   /* Label positions */

   /* === Mobile Flywheel (vertical stack) === */
   .flywheel-mobile {
     display: none;
     flex-direction: column;
     align-items: center;
     gap: 0;
     margin-top: 48px;
     padding: 0 8px;
     max-width: 320px;
     margin-left: auto;
     margin-right: auto;
   }
   .fwm-node {
     display: flex;
     align-items: center;
     gap: 16px;
     width: 100%;
     padding: 20px 0;
     position: relative;
   }
   .fwm-node-icon {
     width: 56px;
     height: 56px;
     min-width: 56px;
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
   }
   .fwm-node-icon svg {
     width: 28px;
     height: 28px;
   }
   .fwm-node-icon.blue {
     background: linear-gradient(135deg, var(--dutch-blue), #5a9fd4);
   }
   .fwm-node-icon.orange {
     background: linear-gradient(135deg, var(--vivid-orange), #D13E10);
   }
   .fwm-node-icon.dark {
     background: linear-gradient(135deg, var(--market-blue), #153040);
   }
   .fwm-node-text {
     flex: 1;
   }
   .fwm-node-name {
     font-size: 15px;
     font-weight: 700;
     color: #fff;
     margin-bottom: 2px;
   }
   .fwm-node-desc {
     font-size: 13px;
     color: rgba(255, 255, 255, 0.65);
     line-height: 1.4;
   }
   .fwm-connector {
     width: 2px;
     height: 32px;
     background: linear-gradient(
       to bottom,
       rgba(99, 173, 242, 0.3),
       rgba(99, 173, 242, 0.08)
     );
     position: relative;
     margin-left: 28px;
   }
   .fwm-connector::before {
     content: "";
     position: absolute;
     left: -3px;
     bottom: -2px;
     width: 0;
     height: 0;
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
     border-top: 6px solid rgba(99, 173, 242, 0.3);
   }
   .fwm-hub {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 64px;
     height: 64px;
     min-width: 64px;
     border-radius: 50%;
     background: radial-gradient(
       circle,
       var(--vivid-orange) 0%,
       #D13E10 100%
     );
     box-shadow:
       0 0 40px rgba(244, 79, 28, 0.3),
       0 8px 24px rgba(0, 0, 0, 0.3);
   }
   .fwm-hub-node {
     display: flex;
     align-items: center;
     gap: 16px;
     width: 100%;
     padding: 20px 0;
   }
   .fwm-hub-label {
     font-size: 14px;
     font-weight: 700;
     color: var(--vivid-orange);
     letter-spacing: 0.05em;
   }

   /* === Feature Badges (Restyled per designer feedback — no pills, larger text) === */
   .flow-badges {
     display: flex;
     justify-content: center;
     gap: 32px;
     margin-top: 72px;
     flex-wrap: wrap;
   }
   .flow-badge {
     display: flex;
     align-items: center;
     gap: 12px;
     background: none;
     border: none;
     border-radius: 0;
     padding: 8px 0;
     cursor: default;
   }
   .flow-badge:hover {
     background: none;
   }
   .flow-badge-icon {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .flow-badge-icon.orange {
     background: rgba(244, 79, 28, 0.15);
     color: var(--vivid-orange);
   }
   .flow-badge-icon.blue {
     background: rgba(99, 173, 242, 0.15);
     color: var(--dutch-blue);
   }
   .flow-badge-text {
     font-family: "Syncopate", sans-serif;
     font-weight: 700;
     text-transform: uppercase;
     font-size: 15px;
     letter-spacing: 0.06em;
     color: #fff;
   }
   .flow-badge-sub {
     font-size: 12px;
     color: rgba(255, 255, 255, 0.6);
   }

   /* ===== PLATFORM ===== */
   .platform-section {
     padding: 120px 48px 240px;
     background: var(--supply-white);
   }
   .platform-inner {
     max-width: 1280px;
     margin: 0 auto;
   }
   .platform-header {
     text-align: center;
     max-width: 640px;
     margin: 0 auto 80px;
   }
   .platform-screens {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 32px;
   }
   .screen-card {
     position: relative;
     border-radius: 16px;
     overflow: hidden;
     background: var(--supply-white);
     border: 1px solid var(--border-light);
     transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   }
   .screen-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 24px 64px rgba(0, 0, 0, 0.08);
     border-color: var(--dutch-blue);
   }
   .screen-card-img {
     height: 300px;
     overflow: hidden;
     position: relative;
   }
   .screen-card-img img {
     width: 100%;
     height: auto;
     display: block;
     transition: transform 8s ease-in-out;
   }
   .screen-card:hover .screen-card-img img {
     transform: translateY(-40%);
   }
   .screen-card-img::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 80px;
     background: linear-gradient(transparent, #fff);
   }
   .screen-card-body {
     padding: 24px 28px 28px;
   }
   .screen-card-body h3 {
     font-family: "Syncopate", sans-serif;
     font-weight: 700;
     text-transform: uppercase;
     font-size: 22px;
     color: var(--market-blue);
     margin-bottom: 8px;
   }
   .screen-card-body p {
     font-size: 14px;
     color: var(--text-muted);
     line-height: 1.7;
   }
   .screen-badge {
     display: none;
   }
   /* Moved to tag row above cards */

   /* ==============================================
MOBILE OVERLAP BAND
============================================== */
   .mobile-band {
     position: relative;
     margin-top: -140px; /* Pull up into platform section — more breathing room per designer feedback */
     padding: 0 48px 120px;
     z-index: 10;
     overflow: visible;
   }
   .mobile-band-inner {
     max-width: 1100px;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     align-items: center;
   }
   .mobile-band-phones {
     display: flex;
     gap: 20px;
     justify-content: center;
     align-items: flex-start;
     position: relative;
     margin-bottom: 48px;
   }
   .phones-glow {
     position: absolute;
     bottom: -20px;
     left: 50%;
     transform: translateX(-50%);
     width: 460px;
     height: 100px;
     background: radial-gradient(
       ellipse,
       rgba(244, 79, 28, 0.08),
       transparent
     );
     filter: blur(30px);
     pointer-events: none;
   }
   .phone-mockup {
     width: 240px;
     position: relative;
     border-radius: 32px;
     background: #111;
     padding: 10px;
     box-shadow:
       0 40px 80px rgba(0, 0, 0, 0.18),
       0 16px 40px rgba(0, 0, 0, 0.1),
       0 0 0 1px rgba(255, 255, 255, 0.06);
     transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
   }
   /* Phone hover animation removed per designer feedback */
   .phone-mockup.tilt-left {
     transform: rotate(-5deg) translateY(24px);
   }
   .phone-mockup.tilt-right {
     transform: rotate(5deg);
   }
   .phone-notch {
     display: none; /* Hidden — was covering the logo in screenshots */
   }
   .phone-screen {
     border-radius: 24px;
     overflow: hidden;
     position: relative;
     background: #16364B; /* Matches app nav bar so rounded corners blend seamlessly */
     padding-top: 0;
   }
   .phone-screen img {
     width: 100%;
     height: auto;
     display: block;
   }
   .phone-home-bar {
     width: 90px;
     height: 4px;
     border-radius: 2px;
     background: rgba(255, 255, 255, 0.3);
     margin: 7px auto 3px;
   }
   .mobile-band-text {
     text-align: center;
     max-width: 520px;
   }
   .mobile-band-headline {
     font-family: "Syncopate", sans-serif;
     font-weight: 700;
     text-transform: uppercase;
     font-size: clamp(24px, 3vw, 32px);
     line-height: 1.2;
     color: var(--market-blue);
     margin-bottom: 12px;
   }
   .mobile-band-headline em {
     font-style: italic;
     color: var(--vivid-orange);
   }
   .mobile-band-sub {
     font-size: 16px;
     color: var(--text-muted);
     line-height: 1.7;
   }

   /* ===== AUDIENCE ===== */
   .audience-section {
     padding: 120px 48px;
   }
   .audience-section.alt {
     background: var(--supply-white);
   }
   .audience-inner {
     max-width: 1280px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
   }
   /* Grid items default to min-width: auto, which for a 1fr track means
      "never shrink below this item's own intrinsic content width" — so one
      long, unbreakable word in a headline can force the whole row (and
      everything in it, including the image on the other side) wider than
      the viewport instead of wrapping. That's what made the supplier card's
      image bleed past the mobile edge while the nonprofits card, whose
      headline's longest word happens to be shorter, didn't. min-width: 0
      lets the track size to the container like normal and leaves wrapping
      to the text itself. Safe at every width, not just mobile — desktop's
      two columns have room to spare either way. */
   .audience-inner > * {
     min-width: 0;
   }
   .audience-inner.reverse {
     direction: rtl;
   }
   .audience-inner.reverse > * {
     direction: ltr;
   }
   .audience-features {
     display: flex;
     flex-direction: column;
     gap: 20px;
     margin-top: 32px;
   }
   .audience-feature {
     display: flex;
     gap: 16px;
     align-items: flex-start;
   }
   .feature-check {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     background: rgba(244, 79, 28, 0.08);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     margin-top: 2px;
   }
   .feature-check svg {
     width: 14px;
     height: 14px;
     color: var(--vivid-orange);
   }
   .audience-feature h3 {
     font-size: 15px;
     font-weight: 600;
     color: var(--market-blue);
     margin-bottom: 2px;
   }
   .audience-feature p {
     font-size: 14px;
     color: var(--text-muted);
     line-height: 1.6;
   }
   .audience-video-card {
     border-radius: 20px;
     overflow: hidden;
     position: relative;
     min-height: 440px;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
   }
   .audience-video-card .video-bg-wrap video {
     animation: kenBurns 20s ease-in-out infinite alternate;
   }
   .audience-video-card.blue-card .video-bg-wrap::after {
     background: linear-gradient(
       180deg,
       rgba(22, 54, 75, 0.3) 0%,
       rgba(22, 54, 75, 0.75) 60%,
       rgba(15, 37, 48, 0.92) 100%
     );
   }
   .audience-card-content {
     position: relative;
     z-index: 5;
     padding: 40px;
   }
   .audience-card-content .card-headline {
     font-family: "Syncopate", sans-serif;
     font-weight: 700;
     text-transform: uppercase;
     font-size: 32px;
     color: #fff;
     line-height: 1.2;
     /* Belt-and-suspenders alongside the min-width: 0 fix on .audience-inner:
        that fix stops one long word from blowing out the grid row, but a
        genuinely too-long word still needs somewhere to go once the box
        can no longer grow to fit it. hyphens (with <html lang="en"> already
        set site-wide, so the browser has a dictionary to work from) breaks
        at a real syllable with a hyphen when it can; overflow-wrap is the
        fallback for whenever it can't. */
     hyphens: auto;
     overflow-wrap: break-word;
     margin-bottom: 14px;
   }

   /* ===== CTA ===== */
   /* ===== SPONSOR CALLOUT ===== */
   .sponsor-callout {
     padding: 80px 48px;
     background: var(--supply-white);
     border-top: 1px solid var(--border-light);
     border-bottom: 1px solid var(--border-light);
   }
   .sponsor-callout-inner {
     max-width: 920px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: auto 1fr;
     align-items: center;
     gap: 48px;
   }
   .sponsor-callout-mark {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 140px;
     height: 140px;
     background: #fff;
     border: 1px solid var(--border-light);
     border-radius: 12px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
     font-family: "Syncopate", sans-serif;
     font-weight: 700;
     color: var(--market-blue);
     text-align: center;
     line-height: 1;
     font-size: 26px;
     letter-spacing: 0.04em;
     padding: 16px 12px;
   }
   .sponsor-callout-mark span {
     display: block;
     font-size: 9px;
     letter-spacing: 0.18em;
     color: var(--vivid-orange);
     margin-top: 10px;
     line-height: 1.3;
     font-weight: 700;
   }
   .sponsor-callout-body .section-label {
     color: var(--vivid-orange);
     margin-bottom: 16px;
   }
   .sponsor-callout-body h2 {
     font-family: "DM Sans", sans-serif;
     font-size: 32px;
     line-height: 1.2;
     color: var(--market-blue);
     margin-bottom: 12px;
   }
   .sponsor-callout-body p {
     font-size: 16px;
     line-height: 1.6;
     color: var(--text-muted);
     max-width: 560px;
   }
   @media (max-width: 720px) {
     .sponsor-callout {
       padding: 56px 24px;
     }
     .sponsor-callout-inner {
       grid-template-columns: 1fr;
       gap: 24px;
       text-align: center;
       justify-items: center;
     }
     .sponsor-callout-body h2 {
       font-size: 26px;
     }
     .sponsor-callout-body .section-label {
       justify-content: center;
     }
   }

   .cta-section {
     padding: 120px 48px;
     text-align: center;
     position: relative;
     overflow: hidden;
   }
   .cta-section::before {
     display: none;
   }
   .cta-inner {
     max-width: 720px;
     margin: 0 auto;
     position: relative;
     z-index: 5;
   }
   .cta-inner .section-label {
     justify-content: center;
   }
   .cta-headline {
     font-family: "Syncopate", sans-serif;
     font-weight: 700;
     text-transform: uppercase;
     font-size: clamp(36px, 4vw, 56px);
     color: #fff;
     line-height: 1.12;
     margin-bottom: 24px;
     letter-spacing: -0.02em;
   }
   .cta-headline em {
     font-style: italic;
     color: var(--vivid-orange);
   }
   .cta-sub {
     font-size: 18px;
     color: rgba(255, 255, 255, 0.65);
     line-height: 1.7;
     margin-bottom: 40px;
     max-width: 540px;
     margin-left: auto;
     margin-right: auto;
   }
   .cta-buttons {
     display: flex;
     gap: 16px;
     justify-content: center;
     flex-wrap: wrap;
   }

   /* ===== FOOTER ===== */
   footer {
     background: var(--market-blue-deep);
     padding: 64px 48px 40px;
     color: rgba(255, 255, 255, 0.6);
   }
   .footer-inner {
     max-width: 1280px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: 48px;
   }
   .footer-brand img {
     height: 56px;
     width: auto;
     margin-bottom: 16px;
   }
   .footer-brand p {
     font-size: 14px;
     line-height: 1.7;
     max-width: 280px;
   }
   /* Rating belongs to International Aid, GIK's parent 501(c)(3). */
   .footer-badge {
     margin: 20px 0 0;
     display: flex;
     align-items: center;
     gap: 16px;
     flex-wrap: wrap;
   }
   .footer-badge a {
     display: inline-block;
     transition: opacity 0.2s;
   }
   .footer-badge a:hover {
     opacity: 0.85;
   }
   .footer-badge img {
     display: block;
     width: 84px;
     height: auto;
   }
   .footer-col h3 {
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.15em;
     color: var(--dutch-blue);
     margin-bottom: 20px;
   }
   .footer-col a {
     display: block;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.6);
     text-decoration: none;
     margin-bottom: 12px;
     transition: color 0.2s;
   }
   .footer-col a:hover {
     color: var(--vivid-orange);
   }
   /* .footer-subscribe-link is a <button>, not an <a> (it opens the nav
      dropdown in place rather than navigating), so it needs its own rule
      rather than sharing .footer-col a: a button has UA chrome — border,
      background, font, centered text — that an anchor never did, and
      .footer-col a's selector wouldn't match a non-<a> element anyway.
      Matches .footer-col a visually once that chrome is reset. */
   .footer-subscribe-link {
     display: block;
     width: 100%;
     background: none;
     border: none;
     padding: 0;
     font: inherit;
     text-align: left;
     cursor: pointer;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.6);
     text-decoration: none;
     margin-bottom: 12px;
     transition: color 0.2s;
   }
   .footer-subscribe-link:hover {
     color: var(--vivid-orange);
   }
   .footer-contact-label {
     display: block;
     font-size: 14px;
     color: var(--dutch-blue);
     margin-bottom: 12px;
   }
   .footer-contact {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
   }
   .footer-col .footer-contact a {
     display: inline-flex;
     align-items: center;
     gap: 8px;
   }
   .footer-contact svg {
     width: 16px;
     height: 16px;
     flex: none;
     fill: currentColor;
   }
   .footer-connect-row {
     display: flex;
     gap: 14px;
     margin-top: 20px;
   }
   .footer-col .footer-connect-row a {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     margin-bottom: 0;
     border-radius: 50%;
     color: rgba(255, 255, 255, 0.6);
     background: rgba(255, 255, 255, 0.06);
     transition:
       color 0.2s,
       background-color 0.2s;
   }
   .footer-col .footer-connect-row a:hover {
     color: var(--vivid-orange);
     background: rgba(255, 255, 255, 0.12);
   }
   .footer-connect-row svg {
     width: 18px;
     height: 18px;
     fill: currentColor;
   }
   .footer-bottom {
     max-width: 1280px;
     margin: 40px auto 0;
     padding-top: 24px;
     border-top: 1px solid rgba(255, 255, 255, 0.06);
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 13px;
   }
   .footer-bottom a {
     color: rgba(255, 255, 255, 0.6);
     text-decoration: none;
     transition: color 0.2s;
   }
   .footer-bottom a:hover {
     color: #fff;
   }

   /* ===== REDUCED MOTION ===== */
   @media (prefers-reduced-motion: reduce) {
     *,
     *::before,
     *::after {
       animation-duration: 0.01ms !important;
       animation-iteration-count: 1 !important;
       transition-duration: 0.01ms !important;
       scroll-behavior: auto !important;
     }
     html {
       scroll-behavior: auto;
     }
     .reveal {
       opacity: 1;
       transform: none;
     }
     .hero-text,
     .hero-visual {
       animation: none;
     }
     .fw-ring-spin {
       animation: none;
     }
     .hero-screen-wrapper img {
       animation: none;
     }
     .audience-video-card .video-bg-wrap video {
       animation: none;
     }
   }
   /* ===== RESPONSIVE ===== */
   @media (max-width: 1024px) {
     .stories-grid,
     .news-grid {
       grid-template-columns: repeat(2, 1fr);
     }
     nav {
       padding: 14px 24px;
     }
     nav.scrolled {
       padding: 12px 24px;
     }
     .nav-toggle {
       display: flex;
       flex-direction: column;
       gap: 5px;
       background: none;
       border: none;
       cursor: pointer;
       padding: 8px;
       z-index: 101;
     }
     .nav-toggle-bar {
       display: block;
       width: 24px;
       height: 2px;
       background: var(--market-blue);
       border-radius: 2px;
       transition: all 0.3s ease;
     }
     .nav-links {
       display: none;
       position: absolute;
       top: 100%;
       left: 0;
       right: 0;
       background: var(--supply-white);
       flex-direction: column;
       padding: 12px 24px 32px;
       gap: 0;
       border-bottom: 1px solid rgba(0, 0, 0, 0.08);
       box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
       z-index: 100;
       align-items: stretch;
     }
     .nav-links.open {
       display: flex;
     }
     .nav-links a {
       padding: 14px 0;
       border-bottom: 1px solid var(--border-light);
       font-size: 16px;
       text-align: center;
     }
     .nav-links a.btn-nav {
       border-bottom: none;
       margin-top: 8px;
       text-align: center;
       display: block;
       width: 100%;
     }
     .nav-links a.btn-nav-outline {
       margin-top: 20px;
       border: 1.5px solid var(--market-blue);
     }
     .btn-nav-primary:hover {
       background: var(--vivid-orange-hover);
       border-color: var(--vivid-orange-hover);
       box-shadow: 0 2px 8px rgba(212, 66, 21, 0.35);
     }

     /* Nav item dropdown – mobile */
     .nav-item-dropdown {
       display: block;
       width: 100%;
     }
     .nav-dropdown-toggle {
       width: 100%;
       justify-content: center;
       padding: 14px 0;
       border-bottom: 1px solid var(--border-light);
       font-size: 16px;
     }
     .nav-dropdown-menu {
       position: relative;
       top: auto;
       left: auto;
       min-width: 0;
       width: 100%;
       margin: 0;
       box-shadow: none;
       border: 1.5px solid var(--border-light);
       border-top: none;
     }
     .nav-dropdown-menu a {
       text-align: center;
       padding: 12px 0;
     }

     /* Subscribe dropdown – mobile */
     .subscribe-wrap {
       display: block;
       width: 100%;
       margin-top: 12px;
     }
     .subscribe-wrap .btn-nav-primary {
       width: 100%;
       text-align: center;
       display: block;
       font-size: 16px !important;
       padding: 14px 20px !important;
     }
     .subscribe-dropdown {
       position: relative;
       top: auto;
       right: auto;
       min-width: 0;
       width: 100%;
       margin-top: 10px;
       box-shadow: none;
       border: 1.5px solid var(--border-light);
       padding: 14px;
     }
     .subscribe-form {
       flex-direction: column;
       gap: 10px;
     }
     .subscribe-form input[type="email"] {
       width: 100%;
       font-size: 16px;
       padding: 12px 14px;
     }
     .subscribe-submit {
       width: 100%;
       font-size: 16px !important;
       padding: 12px 20px !important;
     }

     .hero-content {
       grid-template-columns: 1fr;
       gap: 48px;
       padding: 120px 24px 60px;
     }
     /* Below ~1024px the two-column layout in .hero-content collapses to a
        single column (text stacked above the dashboard screenshot), so a
        fixed `top` offset that used to land beside the text now lands ON
        it instead — and how far down depends on how many lines the
        headline wraps to, which varies by viewport width and copy length,
        so no single `top` value is reliably safe. Anchoring from the
        bottom instead keeps this clear of the text: the screenshot is
        always the last thing in the stack, so a bottom offset lands near
        it regardless of how tall the text above ends up being. */
     .hero .video-toggle {
       top: auto;
       bottom: 14px;
       right: 24px;
     }
     .hero-visual {
       max-width: 560px;
     }
     .problem-grid,
     .audience-inner,
     .audience-inner.reverse {
       grid-template-columns: 1fr;
       gap: 48px;
     }
     .audience-inner.reverse {
       direction: ltr;
     }
     .platform-screens {
       grid-template-columns: 1fr;
       max-width: 480px;
       margin: 0 auto;
     }
     .platform-section {
       padding-bottom: 160px !important;
     }
     .mobile-band {
       margin-top: -140px;
       padding: 0 24px 80px;
     }
     .pillars-grid {
       grid-template-columns: 1fr;
       max-width: 480px;
       margin: 0 auto;
     }
     .footer-inner {
       grid-template-columns: 1fr 1fr;
     }
     .value-bar-inner {
       grid-template-columns: 1fr 1fr;
       gap: 24px;
     }
     .flywheel {
       max-width: 100%;
     }
     .phone-mockup {
       width: 220px;
     }
     .problem-section,
     .audience-section,
     .platform-section,
     .pillars-section,
     .cta-section,
     .ecosystem-section {
       padding: 80px 24px;
     }
   }
   @media (max-width: 640px) {
     .stories-section,
     .news-section {
       padding: 80px 24px 36px;
     }
     .stories-grid,
     .news-grid {
       grid-template-columns: 1fr;
     }
     .value-bar-inner {
       grid-template-columns: 1fr;
     }
     .footer-inner {
       grid-template-columns: 1fr;
     }
     .hero-stat-float {
       display: none;
     }
     .phone-mockup {
       width: 170px;
     }
     .phone-mockup.tilt-left,
     .phone-mockup.tilt-right {
       transform: none;
     }
     .mobile-band {
       margin-top: -100px;
       padding: 0 16px 60px;
     }
     .flow-badges {
       gap: 12px;
     }
     .flow-badge {
       padding: 10px 16px;
     }
     nav {
       padding: 14px 16px;
     }
     nav.scrolled {
       padding: 12px 16px;
     }
     .hero-content {
       padding: 120px 16px 60px;
     }
     /* Nothing to pause on either video below this width: both <source>
        elements carry their own media condition (see index.html), so
        neither ever loads here — each toggle would just be clutter with
        no video behind it to act on. The still poster frame that replaces
        the nonprofits-card video needs no control of its own either. */
     .hero .video-toggle,
     .audience-video-card .video-toggle {
       display: none;
     }
     .value-bar {
       padding: 40px 16px;
     }
     .problem-section {
       padding: 60px 16px;
     }
     .ecosystem-section {
       padding: 60px 16px;
     }
     .platform-section {
       padding: 60px 16px 160px;
     }
     .audience-section {
       padding: 60px 16px;
     }
     .pillars-section {
       padding: 60px 16px;
     }
     .cta-section {
       padding: 60px 16px;
     }
     footer {
       padding: 48px 16px 32px;
     }
     .phones-glow {
       width: 280px;
     }
     .flywheel {
       display: none;
     }
     .flywheel-mobile {
       display: flex;
     }
   }

/* ==========================================================================
   2. ABOUT PAGE (about.html)
   ========================================================================== */

.who-section { padding: 120px 48px; background: var(--supply-white); }
.who-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  column-gap: 80px;
  row-gap: 32px;
  align-items: start;
}
.who-copy p + p { margin-top: 18px; }
.who-body-lead { font-size: 19px; line-height: 1.75; color: var(--text-dark); }
.who-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.who-value::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--vivid-orange);
  margin-bottom: 14px;
}
.who-value h2 {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--market-blue);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.who-value p { font-size: 14px; line-height: 1.65; color: var(--text-muted); }
.who-body-fine { font-size: 15px; line-height: 1.75; }
.who-rating { margin: 0; }
.who-rating a { display: block; }
.who-rating img { display: block; width: 33%; height: auto; margin: 0 auto; }
.who-photo { border-radius: 20px; overflow: hidden; margin: 0; }
.who-photo img { display: block; width: 100%; height: 614px; object-fit: cover; object-position: 50% 50%; }
.team-section { padding: 120px 48px; background: #fff; border-top: 1px solid var(--border-light); }
.team-inner { max-width: 1280px; margin: 0 auto; }
.team-header { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.team-header .section-label { justify-content: center; }
.team-header .section-headline { margin-bottom: 0; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 720px;
  margin: 0 auto;
}
.team-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--supply-white);
  border: 1px solid var(--border-light);
  padding: 32px 28px 28px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 64px rgba(0,0,0,0.08);
  border-color: var(--dutch-blue);
}
.team-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(150deg, var(--market-blue) 0%, var(--market-blue-deep) 100%);
  border: 2px solid var(--border-light);
  position: relative;
  overflow: hidden;
}
.team-card.is-lead .team-avatar { background: linear-gradient(150deg, var(--vivid-orange) 0%, #B8380F 100%); }
.team-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
  transform: scale(var(--z, 1));
  transform-origin: var(--fx, 50%) var(--fy, 50%);
}
.team-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.team-role {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--vivid-orange);
  margin-bottom: 16px;
}
.team-bio { font-size: 14px; line-height: 1.7; color: var(--text-muted); }
.team-links { display: flex; gap: 14px; margin-top: 20px; }
.team-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  color: var(--market-blue);
  background: #fff;
  transition: all 0.25s ease;
}
.team-links a:hover { background: var(--market-blue); color: #fff; border-color: var(--market-blue); }
.team-links svg { width: 15px; height: 15px; }
@media (max-width: 1024px) {
  .who-inner { grid-template-columns: 1fr; gap: 56px; }
  .who-photo, .who-rating { display: none; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .who-section { padding: 100px 24px 80px; }
  .team-section { padding: 80px 24px; }
  .who-values { grid-template-columns: 1fr; gap: 24px; }
  .team-grid { grid-template-columns: 1fr; }
  .team-header { margin-bottom: 44px; }
}
@media (max-width: 600px) {
  .who-section { padding: 100px 16px 64px; }
  .team-section { padding: 64px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .team-card { transition: none; }
  .team-card:hover { transform: none; }
}

/* ==========================================================================
   3. LEGAL PAGES (terms.html, privacy.html)
   ========================================================================== */

.legal-content { max-width: 800px; margin: 0 auto; padding: 120px 48px 80px; }
.legal-content .last-updated { font-size: 14px; color: var(--text-muted); margin-bottom: 32px; }
.legal-content h1 {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.2;
  color: var(--market-blue);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.legal-content .legal-intro {
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-muted);
  margin-bottom: 48px;
}
.legal-content h2 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--market-blue);
  margin: 40px 0 16px;
}
.legal-content p { font-size: 16px; line-height: 1.8; color: var(--text-dark); margin-bottom: 16px; }
.legal-content ul { margin: 0 0 16px 24px; font-size: 16px; line-height: 1.8; color: var(--text-dark); }
.legal-content ul li { margin-bottom: 8px; }
.legal-content a { color: var(--vivid-orange); text-decoration: none; transition: color 0.2s; }
.legal-content a:hover { color: var(--vivid-orange-hover); text-decoration: underline; }
.faq-content h1 { margin-bottom: 40px; }
.faq-item { padding: 24px 0; border-top: 1px solid var(--border-light); }
.faq-item:last-child { border-bottom: 1px solid var(--border-light); }
.faq-content .faq-question { font-size: 18px; margin: 0 0 8px; }
.faq-content .faq-item p { margin-bottom: 0; }

/* The demo page reuses .legal-content for its nav clearance and type styles,
   but needs a wider column than the 800px reading measure: Calendly's inline
   embed collapses to a stacked, very tall mobile layout below ~700px of
   available width, and .legal-content's border-box 800px minus 48px padding
   either side leaves only 704px. Widen the container for the widget and hold
   the prose to a readable measure inside it. */
.demo-content { max-width: 1120px; }
.demo-content h1,
.demo-content .legal-intro { max-width: 720px; }
.demo-content .calendly-inline-widget { width: 100%; margin-top: 8px; }
/* The mount reserves the widget's full height from first paint, so swapping
   the placeholder for the iframe moves nothing on the page. */
.demo-content .calendly-mount { width: 100%; margin-top: 8px; min-height: 700px; }
.calendly-placeholder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 720px;
  padding: 40px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--supply-white);
}
.calendly-placeholder h2 { margin: 0; }
.calendly-placeholder p { margin: 0; color: var(--text-muted); max-width: 56ch; }
.calendly-placeholder .btn[disabled] { opacity: 0.6; cursor: default; }
.calendly-fallback { color: var(--text-muted); }
@media (max-width: 640px) {
  .calendly-placeholder { padding: 24px; }
}
@media (max-width: 1024px) {
  .legal-content { padding: 100px 24px 60px; }
}
@media (max-width: 640px) {
  .legal-content { padding: 100px 16px 48px; }
}

/* ==========================================================================
   4. WEBINAR PAGE (webinar.html)

   Only the components that exist nowhere else live here. The page's nav,
   ribbon, footer, buttons, section labels and headlines, and closing CTA all
   come from section 1, so nothing in this block redefines them.
   ========================================================================== */

/* ===== Hero =====
   A shorter, two-column variant of the home page hero: copy on the left, the
   registration card on the right. The dark ground is the shared
   .photo-bg.tint-teal treatment, so the gradient matches the rest of the site. */
.webinar-hero {
  position: relative;
  overflow: hidden;
  background: var(--market-blue-deep);
}
.webinar-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 172px 48px 110px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 72px;
  align-items: center;
}
.webinar-hero .section-label {
  color: var(--dutch-blue);
}
.webinar-hero .section-label::before {
  background: var(--dutch-blue);
}
.webinar-title {
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 26px;
  text-wrap: balance;
}
.webinar-title em {
  font-style: italic;
  color: var(--vivid-orange);
}
.webinar-lede {
  font-size: 18px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.7);
  max-width: 54ch;
  margin-bottom: 40px;
}

/* Date / time / format strip */
.detail-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 24px 28px;
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  margin-bottom: 40px;
}
.detail {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.detail-icon {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(99, 173, 242, 0.16);
  color: var(--dutch-blue);
}
.detail-label {
  font-family: "Syncopate", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 5px;
}
.detail-value {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

/* Registration card -- the page's single conversion point */
.reg-card {
  background: var(--supply-white);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
}
.reg-card .section-label {
  margin-bottom: 16px;
}
.reg-card h2 {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  color: var(--market-blue);
  margin-bottom: 14px;
}
.reg-card > p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.reg-card .btn {
  width: 100%;
  justify-content: center;
}
.reg-small {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
}
.reg-small a {
  color: var(--vivid-orange);
  text-decoration: none;
  font-weight: 600;
}
.reg-small a:hover {
  text-decoration: underline;
}

/* ===== Section scaffolding for this page's body content ===== */
.webinar-section {
  padding: 120px 48px;
}
.webinar-section-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.ground-white {
  background: #fff;
  border-top: 1px solid var(--border-light);
}
.ground-supply {
  background: var(--supply-white);
}

/* ===== Gallery ===== */
.gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 56px;
}
.g-item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--border-light);
  background: var(--supply-white);
  margin: 0;
}
.g-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.g-item:hover img {
  transform: scale(1.05);
}
.g-item:nth-child(1) { grid-column: span 4; aspect-ratio: 4 / 3; }
.g-item:nth-child(2) { grid-column: span 2; aspect-ratio: 3 / 4; }
.g-item:nth-child(3),
.g-item:nth-child(4),
.g-item:nth-child(5) { grid-column: span 2; aspect-ratio: 4 / 3; }

/* ===== Agenda =====
   The numbers stay because a session agenda is a real running order. */
.agenda-list {
  display: grid;
  gap: 20px;
  margin-top: 56px;
  max-width: 900px;
}
.agenda-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
  background: var(--supply-white);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 32px 36px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.agenda-item:hover {
  transform: translateY(-4px);
  border-color: var(--dutch-blue);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.07);
}
.agenda-num {
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--dutch-blue-light);
  font-variant-numeric: tabular-nums;
}
.agenda-item h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--market-blue);
  margin-bottom: 8px;
}
.agenda-item p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ===== Who should attend ===== */
.attendee-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.attendee-card {
  background: var(--supply-white);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 36px 32px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.attendee-card:hover {
  transform: translateY(-8px);
  border-color: var(--dutch-blue);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.08);
}
.attendee-card::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: var(--vivid-orange);
  margin-bottom: 20px;
}
.attendee-card h3 {
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--market-blue);
  margin-bottom: 14px;
}
.attendee-card p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ===== Host ===== */
.host-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 48px;
  max-width: 900px;
  background: var(--supply-white);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 40px;
}
.host-avatar {
  width: 140px;
  height: 140px;
  border-radius: 16px;
  object-fit: cover;
  flex: none;
}
.host-name {
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 17px;
  color: var(--market-blue);
  margin-bottom: 6px;
}
.host-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vivid-orange);
  margin-bottom: 16px;
}
.host-bio {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-muted);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .webinar-hero-inner {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 130px 32px 88px;
  }
  .webinar-section { padding: 88px 32px; }
  .attendee-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .g-item:nth-child(1),
  .g-item:nth-child(2),
  .g-item:nth-child(3),
  .g-item:nth-child(4),
  .g-item:nth-child(5) {
    grid-column: span 1;
    aspect-ratio: 4 / 3;
  }
  .host-card { grid-template-columns: 1fr; gap: 24px; padding: 32px; }
  .agenda-item { padding: 26px 24px; gap: 18px; }
}

@media (max-width: 600px) {
  .webinar-hero-inner { padding: 120px 20px 68px; }
  .webinar-section { padding: 64px 20px; }
  .reg-card { padding: 30px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-item:hover img { transform: none; }
  .agenda-item:hover,
  .attendee-card:hover { transform: none; }
}

/* ==========================================================================
   5. 404 PAGE (404.html)
   Deliberately light on new rules — the headline and buttons reuse the shared
   section components, so this only handles the centred layout.
   ========================================================================== */

.notfound {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 160px 48px 96px;
}
.section-headline#notfound-heading {
  font-family: "DM Sans", sans-serif;
  text-transform: capitalize;
}
.notfound-inner {
  max-width: 640px;
  text-align: center;
}
.notfound-ctas {
  margin-bottom: 64px;
}
@media (max-width: 1024px) {
  .notfound { padding: 130px 24px 72px; }
}
@media (max-width: 640px) {
  .notfound { padding: 120px 16px 56px; }
  .notfound-ctas { margin-bottom: 48px; }
}
