/* ==========================================================================
   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);
     }
   }

   .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);
     }
   }
   .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);
   }

   /* ===== ACTIVE DISASTERS BAND ===== */
   .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: flex-end;
     justify-content: space-between;
     gap: 24px;
     margin-bottom: 32px;
     flex-wrap: wrap;
   }
   .fd-head-text {
     max-width: 640px;
   }
   .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-descriptor {
     font-size: 15px;
     line-height: 1.6;
     color: rgba(255, 255, 255, 0.62);
   }
   .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 {
     cursor: pointer;
     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);
   }
   .fd-card:focus-visible {
     outline: 2px solid var(--vivid-orange);
     outline-offset: 3px;
   }
   .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 Serif Display", 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;
     }
     /* The head stacks here, so give the controls their own full-width
        row: count on the left, arrows on the right. */
     .fd-head-controls {
       width: 100%;
       justify-content: space-between;
     }
     .fd-nav-btn {
       width: 44px;
       height: 44px;
     }
   }
   @media (prefers-reduced-motion: reduce) {
     .fd-card {
       transition: none;
     }
   }

   /* ===== HERO ===== */
   .hero {
     min-height: 100vh;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
   }
   .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%
     );
   }
   .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;
   }

   /* ==============================================
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;
   }
   .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;
     margin-bottom: 14px;
   }

   /* ===== PILLARS ===== */
   .pillars-section {
     padding: 120px 48px;
     position: relative;
     overflow: hidden;
     background: #c8def0;
   }
   .pillars-section .photo-bg {
     display: none;
   } /* Hidden — using solid light blue background */
   .pillars-inner {
     max-width: 1280px;
     margin: 0 auto;
     position: relative;
     z-index: 5;
   }
   .pillars-header {
     text-align: center;
     margin-bottom: 64px;
   }
   .pillars-header .section-label {
     justify-content: center;
   }
   .pillars-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
   }
   .pillar-card {
     background: rgba(255, 255, 255, 0.65);
     border: 1px solid rgba(22, 54, 75, 0.1);
     border-radius: 16px;
     padding: 36px;
     transition: all 0.4s ease;
     position: relative;
     overflow: hidden;
     backdrop-filter: blur(8px);
   }
   .pillar-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: var(--vivid-orange);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.4s ease;
   }
   .pillar-card:hover::before {
     transform: scaleX(1);
   }
   .pillar-card:hover {
     background: rgba(255, 255, 255, 0.85);
     transform: translateY(-4px);
   }
   .pillar-num {
     font-family: "Syncopate", sans-serif;
     font-weight: 700;
     text-transform: uppercase;
     font-size: 48px;
     color: rgba(244, 79, 28, 0.35);
     margin-bottom: 8px;
   }
   .pillar-card h3 {
     font-family: "Syncopate", sans-serif;
     font-weight: 700;
     text-transform: uppercase;
     font-size: 22px;
     color: var(--market-blue);
     margin-bottom: 12px;
   }
   .pillar-break {
     display: none;
   }
   @media (min-width: 768px) {
     .pillar-break {
       display: inline;
     }
   }
   .pillar-card p {
     font-size: 14px;
     color: var(--text-muted);
     line-height: 1.8;
   }

   /* ===== 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 Serif Display", 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: rgba(255, 255, 255, 0.6);
     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-contact-label {
     display: block;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.6);
     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 {
       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);
     }

     /* 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;
     }
     .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 {
       padding: 80px 24px 36px;
     }
     .stories-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;
     }
     .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-lead { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 56px; }
.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; }
.team-card.is-compact { padding: 26px 24px; }
.team-card.is-compact .team-avatar { width: 64px; height: 64px; font-size: 18px; margin-bottom: 18px; }
.team-card.is-compact .team-name { font-size: 17px; }
@media (max-width: 1024px) {
  .who-inner { grid-template-columns: 1fr; gap: 56px; }
  .who-photo, .who-rating { display: none; }
  .team-grid-lead, .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-lead, .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; }
@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 Serif Display", 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) { grid-column: span 2; aspect-ratio: 4 / 3; }
.g-item:nth-child(4) { grid-column: span 2; aspect-ratio: 4 / 3; }
.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; }
}