/* =================================================================
   MEDIAONE — STYLESHEET
   Performance Marketing Network
   -----------------------------------------------------------------
   Contents
   1.  Design tokens
   2.  Reset & base
   3.  Typography
   4.  Layout utilities (container, section, grid)
   5.  Buttons & badges
   6.  Header & navigation (responsive)
   7.  Hero & page banner
   8.  Ticker (live network marquee)
   9.  Two-path cards (Publisher / Advertiser)
   10. Stats band
   11. Cards (service / feature / testimonial / team)
   12. Steps / process
   13. Logo strip marquee
   14. CTA banners
   15. Dashboard mock (advertiser reporting preview)
   16. Chips & model rows
   17. FAQ accordion
   18. Forms
   19. Contact page
   20. Legal / policy pages
   21. Footer
   22. Back-to-top
   23. Reveal animation & misc utilities
   24. Responsive breakpoint reference

   Breakpoints reference:
     xs  0–479    small phones
     sm  480–767  large phones
     md  768–991  tablets
     lg  992–1199 laptops
     xl  1200–1439 desktops
     xxl 1440+     large desktops
   Approach: mobile-first (base styles = mobile, min-width layers up)
   ================================================================= */


/* -----------------------------------------------------------------
   1. DESIGN TOKENS
   ----------------------------------------------------------------- */
:root{
  /* Color — ink (dark surfaces) */
  --c-ink:        #0B1220;
  --c-ink-2:      #141D33;
  --c-ink-3:      #232E4D;

  /* Color — light surfaces */
  --c-paper:      #F6F7FA;
  --c-paper-2:    #ECEEF3;
  --c-white:      #FFFFFF;

  /* Color — text */
  --c-text:              #10151F;
  --c-text-soft:         #4B5567;
  --c-text-faint:        #848DA0;
  --c-text-inverse:      #EEF1F7;
  --c-text-inverse-soft: #A7B0C4;

  --c-border:     #E1E5ED;

  /* Color — brand accents (two-sided network: gold = publisher, teal = advertiser) */
  --c-gold:       #E8A83C;
  --c-gold-deep:  #9A5B0F;
  --c-gold-tint:  #FBEEDA;

  --c-teal:       #14AE87;
  --c-teal-deep:  #0B7A5E;
  --c-teal-tint:  #DFF4ED;

  --c-danger:       #D8464C;
  --c-danger-deep:  #8F2A2E;
  --c-danger-tint:  #FBEAEB;

  /* Type */
  --f-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --f-body:    'Inter', 'Segoe UI', sans-serif;
  --f-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* Radius */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-sm:   0 1px 2px rgba(11,18,32,.06), 0 1px 1px rgba(11,18,32,.05);
  --shadow-md:   0 10px 26px -10px rgba(11,18,32,.18);
  --shadow-lg:   0 26px 52px -18px rgba(11,18,32,.26);
  --shadow-gold: 0 14px 26px -10px rgba(232,168,60,.45);
  --shadow-teal: 0 14px 26px -10px rgba(20,174,135,.4);

  /* Layout */
  --container-w:  1220px;
  --header-h:     80px;

  /* Motion */
  --ease:   cubic-bezier(.4,0,.2,1);
  --dur-sm: .18s;
  --dur-md: .32s;
}

/* -----------------------------------------------------------------
   2. RESET & BASE
   ----------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:96px; }
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--c-text);
  background:var(--c-white);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
figure{ margin:0; }
hr{ border:none; border-top:1px solid var(--c-border); }
body.nav-open{ overflow:hidden; }

::selection{ background:var(--c-gold); color:#241705; }

/* -----------------------------------------------------------------
   3. TYPOGRAPHY
   ----------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--c-text);
}
.h1, h1{ font-size:clamp(2.25rem, 1.55rem + 3vw, 3.75rem); }
.h2, h2{ font-size:clamp(1.85rem, 1.5rem + 1.6vw, 2.75rem); }
.h3, h3{ font-size:clamp(1.375rem, 1.2rem + .7vw, 1.75rem); }
.h4, h4{ font-size:1.2rem; }
.h5, h5{ font-size:1.05rem; }

/* -----------------------------------------------------------------
   PAGE LOADER — liquid glass
   ----------------------------------------------------------------- */
.page-loader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:#070b14;
  overflow:hidden;
  transition:opacity .6s cubic-bezier(.22,1,.36,1), visibility .6s cubic-bezier(.22,1,.36,1);
}
.page-loader.is-done{
  opacity:0; visibility:hidden; pointer-events:none;
}

/* Soft animated color orbs (the “liquid” layer) */
.page-loader-bg{
  position:absolute; inset:0;
  filter:blur(60px); /* heavy blur = liquid glass */
  opacity:.9;
  pointer-events:none;
}
.page-loader-blob{
  position:absolute;
  border-radius:50%;
  will-change:transform;
}
.page-loader-blob--1{
  width:min(55vw, 420px); height:min(55vw, 420px);
  top:-8%; left:-6%;
  background:radial-gradient(circle at 30% 30%, rgba(232,168,60,.55), rgba(232,168,60,.08) 70%);
  animation:blob-drift-1 9s ease-in-out infinite alternate;
}
.page-loader-blob--2{
  width:min(50vw, 380px); height:min(50vw, 380px);
  bottom:-10%; right:-8%;
  background:radial-gradient(circle at 70% 60%, rgba(20,174,135,.5), rgba(20,174,135,.06) 70%);
  animation:blob-drift-2 11s ease-in-out infinite alternate;
}
.page-loader-blob--3{
  width:min(40vw, 280px); height:min(40vw, 280px);
  top:40%; left:50%;
  transform:translate(-50%, -50%);
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.14), transparent 70%);
  animation:blob-drift-3 8s ease-in-out infinite alternate;
}
@keyframes blob-drift-1{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(8%, 12%) scale(1.12); }
}
@keyframes blob-drift-2{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(-10%, -8%) scale(1.08); }
}
@keyframes blob-drift-3{
  0%{ transform:translate(-50%, -50%) scale(1); opacity:.7; }
  100%{ transform:translate(-42%, -58%) scale(1.2); opacity:1; }
}

/* Frosted glass card holding the mark */
.page-loader-inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center;
  padding:40px 48px 36px;
  border-radius:24px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 8px 32px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
}

.page-loader-mark{
  position:relative;
  width:72px; height:72px;
  display:flex; align-items:center; justify-content:center;
}
.page-loader-m{
  font-family:var(--f-display, 'Space Grotesk', system-ui, sans-serif);
  font-size:1.85rem; font-weight:700; letter-spacing:-.02em;
  color:#fff;
  position:relative; z-index:1;
  text-shadow:0 0 24px rgba(232,168,60,.35);
}
.page-loader-ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.12);
  border-top-color:var(--c-gold, #e8a83c);
  border-right-color:var(--c-teal, #14ae87);
  animation:loader-spin 1s linear infinite;
}
@keyframes loader-spin{
  to{ transform:rotate(360deg); }
}

.page-loader-word{
  font-family:var(--f-display, 'Space Grotesk', system-ui, sans-serif);
  font-size:1.05rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
  margin:0;
}

.page-loader-bar{
  width:120px; height:3px;
  background:rgba(255,255,255,.12);
  border-radius:999px;
  overflow:hidden;
}
.page-loader-bar-fill{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--c-gold, #e8a83c), var(--c-teal, #14ae87));
  border-radius:inherit;
  animation:loader-bar 1.4s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes loader-bar{
  0%{ width:0; }
  60%{ width:72%; }
  100%{ width:100%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .page-loader-blob{ animation:none !important; }
  .page-loader-ring{ animation:none; border-color:var(--c-gold, #e8a83c); }
  .page-loader-bar-fill{ animation:none; width:100%; }
}
/* End of page loader */

p{ margin:0; }
.lead{ font-size:1.1rem; color:var(--c-text-soft); line-height:1.65; }

.text-mono{ font-family:var(--f-mono); }
.text-soft{ color:var(--c-text-soft); }
.text-faint{ color:var(--c-text-faint); }
.text-inverse{ color:var(--c-text-inverse); }
.text-gold{ color:var(--c-gold-deep); }
.text-teal{ color:var(--c-teal-deep); }
.text-center{ text-align:center; }
.text-balance{ text-wrap:balance; }

/* -----------------------------------------------------------------
   4. LAYOUT UTILITIES
   ----------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container-w);
  margin-inline:auto;
  padding-inline:20px;
}
@media (min-width:768px){ .container{ padding-inline:32px; } }
@media (min-width:1200px){ .container{ padding-inline:40px; } }

.container-narrow{ max-width:820px; margin-inline:auto; padding-inline:20px; }
@media (min-width:768px){ .container-narrow{ padding-inline:0; } }

.section{ padding-block:clamp(52px, 7vw, 104px); position:relative; }
.section-tight{ padding-block:clamp(36px, 4.5vw, 64px); }
.section.bg-paper{ background:var(--c-paper); }
.section.bg-ink{ background:var(--c-ink); color:var(--c-text-inverse); }
.section.no-pt{ padding-top:0; }
.section.no-pb{ padding-bottom:0; }
.section + .section{ border-top:1px solid var(--c-border); }
.section.bg-ink + .section.bg-ink,
.section.bg-ink + .section,
.section + .section.bg-ink{ border-top:none; }

.section-head{ max-width:660px; margin-bottom:44px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head p{ margin-top:14px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-gold-deep); margin-bottom:14px;
}
.eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--c-gold); flex:none; }
.eyebrow.teal{ color:var(--c-teal-deep); }
.eyebrow.teal::before{ background:var(--c-teal); }
.eyebrow.inverse{ color:var(--c-gold); }
.eyebrow.inverse.teal{ color:var(--c-teal); }

.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
.grid-4{ grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){
  .grid-2{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:768px){
  .grid-4{ grid-template-columns:repeat(4,1fr); }
}
@media (min-width:992px){
  .grid-3{ grid-template-columns:repeat(3,1fr); }
}

.divider{ height:1px; background:var(--c-border); border:none; margin-block:0; }

/* -----------------------------------------------------------------
   5. BUTTONS & BADGES
   ----------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 28px; border-radius:var(--r-pill);
  font-family:var(--f-body); font-weight:600; font-size:.95rem;
  border:1.5px solid transparent; white-space:nowrap; cursor:pointer;
  transition:transform var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease),
             background var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease),
             border-color var(--dur-sm) var(--ease);
}
.btn .icon{ width:18px; height:18px; }
.btn:active{ transform:translateY(0) !important; }

.btn-primary{ background:var(--c-gold); color:#241705; box-shadow:var(--shadow-gold); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 30px -10px rgba(232,168,60,.55); }

.btn-teal{ background:var(--c-teal); color:#052A21; box-shadow:var(--shadow-teal); }
.btn-teal:hover{ transform:translateY(-2px); box-shadow:0 18px 30px -10px rgba(20,174,135,.5); }

.btn-outline-dark{ border-color:var(--c-text); color:var(--c-text); }
.btn-outline-dark:hover{ background:var(--c-text); color:var(--c-white); }

.btn-outline-light{ border-color:rgba(238,241,247,.4); color:var(--c-text-inverse); }
.btn-outline-light:hover{ background:rgba(238,241,247,.12); border-color:rgba(238,241,247,.7); }

.btn-ghost{ background:transparent; border-color:var(--c-border); color:var(--c-text-soft); }
.btn-ghost:hover{ background:var(--c-paper-2); color:var(--c-text); border-color:var(--c-text-faint); }

.btn-sm{ padding:11px 20px; font-size:.85rem; }
.btn-lg{ padding:17px 34px; font-size:1.02rem; }
.btn-block{ width:100%; }

.btn-group{ display:flex; flex-wrap:wrap; gap:14px; }

.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:var(--r-pill);
  font-size:.78rem; font-weight:600;
}
.badge-gold{ background:var(--c-gold-tint); color:var(--c-gold-deep); }
.badge-teal{ background:var(--c-teal-tint); color:var(--c-teal-deep); }

/* -----------------------------------------------------------------
   6. HEADER & NAVIGATION
   ----------------------------------------------------------------- */
.skip-link{
  position:absolute; left:12px; top:-60px; background:var(--c-ink); color:#fff;
  padding:12px 18px; border-radius:var(--r-sm); z-index:200; font-weight:600; font-size:.9rem;
  transition:top var(--dur-sm) var(--ease);
}
.skip-link:focus{ top:12px; }

.site-header{
  position:sticky; top:0; z-index:80; width:100%;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease);
}
/* The frosted-glass background lives on a ::before layer, NOT on .site-header itself.
   Reason: backdrop-filter (like transform/filter) makes an element the "containing
   block" for any position:fixed descendant. .main-nav (the off-canvas menu) is
   position:fixed and nested inside .site-header — if .site-header carried the
   backdrop-filter directly, .main-nav would anchor to the header's box instead of
   the viewport, which is what caused it to drift/scroll with the page on affected
   browsers. Keeping backdrop-filter on this sibling pseudo-element instead gives the
   same visual result without ever making .site-header a containing block. */
.site-header::before{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  transition:background var(--dur-md) var(--ease);
}
.site-header.is-scrolled{
  border-bottom-color:var(--c-border);
  box-shadow:var(--shadow-sm);
}
.site-header.is-scrolled::before{
  background:rgba(255,255,255,.97);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height:var(--header-h); gap:16px;
}

.logo{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:600; font-size:1.2rem; color:var(--c-text); flex:none; z-index:120; position:relative;}
.logo-word em{ font-style:normal; color:var(--c-gold-deep); }
.logo-mark{ flex:none; }
.logo-mark .lm-a{ fill:var(--c-gold); }
.logo-mark .lm-b{ fill:var(--c-teal); mix-blend-mode:multiply; }
.logo--footer{ color:var(--c-white); }
.logo--footer .logo-word em{ color:var(--c-gold); }

/* --- mobile nav toggle (hamburger) --- */
.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--r-sm);
  position:relative; z-index:120; color:var(--c-text); flex:none;
}
.nav-toggle:hover{ background:var(--c-paper-2); }
.nav-toggle-icon{ position:absolute; width:22px; height:22px; transition:opacity var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease); }
.nav-toggle-icon--close{ opacity:0; transform:rotate(-90deg) scale(.7); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon--open{ opacity:0; transform:rotate(90deg) scale(.7); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon--close{ opacity:1; transform:rotate(0) scale(1); }

/* --- main nav: mobile = off-canvas panel (default/base styles) --- */
.main-nav{
  position:fixed; top:0; right:0;
  height:100vh; height:100dvh;
  width:min(360px, 86vw);
  background:var(--c-white);
  padding:calc(var(--header-h) + 12px) 28px 32px;
  display:flex; flex-direction:column; gap:28px;
  transform:translateX(100%);
  transition:transform var(--dur-md) var(--ease);
  z-index:110; overflow-y:auto;
  box-shadow:-20px 0 48px rgba(11,18,32,.2);
}
.main-nav.is-open{ transform:translateX(0); }

.nav-list{ display:flex; flex-direction:column; gap:2px; }
.nav-item{ border-bottom:1px solid var(--c-border); }
.nav-link{
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 4px; font-family:var(--f-display); font-weight:500; font-size:1.1rem;
  color:var(--c-text); position:relative;
}
.nav-link.active{ color:var(--c-gold-deep); }
.nav-cta{ display:flex; flex-direction:column; gap:12px; margin-top:auto; padding-top:8px; }
.nav-cta .btn{ width:100%; }

.nav-scrim{
  position:fixed; inset:0; background:rgba(11,18,32,.5); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; z-index:70; /* must stay BELOW .site-header's z-index:80 — see note below */
  transition:opacity var(--dur-md) var(--ease), visibility var(--dur-md) var(--ease);
}
/* NOTE: .main-nav (z-index:110) is nested INSIDE .site-header (z-index:80), so it is
   confined to .site-header's stacking context — its own z-index can never out-rank an
   element like .nav-scrim that sits outside that context. .nav-scrim must therefore stay
   numerically below .site-header's z-index (80), not above it, or it will silently cover
   the open menu and swallow clicks even though the menu is visibly on top. */
.nav-scrim.is-active{ opacity:1; visibility:visible; }

/* --- laptop / desktop: horizontal nav (lg and up) --- */
@media (min-width:992px){
  .nav-toggle{ display:none; }
  .nav-scrim{ display:none; }

  .main-nav{
    position:static; height:auto; width:auto; background:transparent; padding:0;
    flex-direction:row; align-items:center; gap:6px; transform:none; box-shadow:none; overflow:visible;
  }
  .nav-list{ flex-direction:row; align-items:center; gap:2px; margin-right:10px; }
  .nav-item{ border-bottom:none; }
  .nav-link{
    padding:9px 15px; font-family:var(--f-body); font-weight:500; font-size:.92rem;
    border-radius:var(--r-pill); transition:background var(--dur-sm), color var(--dur-sm);
  }
  .nav-link:hover{ background:var(--c-paper-2); }
  .nav-link.active{ background:var(--c-gold-tint); color:var(--c-gold-deep); }
  .nav-cta{ flex-direction:row; margin-top:0; padding-top:0; gap:10px; }
  .nav-cta .btn{ width:auto; }
}
@media (min-width:1200px){
  .nav-list{ gap:4px; margin-right:18px; }
  .nav-link{ padding:10px 18px; font-size:.95rem; }
}

/* -----------------------------------------------------------------
   7. HERO & PAGE BANNER
   ----------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 520px at 85% -12%, rgba(232,168,60,.18), transparent 60%),
    radial-gradient(900px 480px at 105% 45%, rgba(20,174,135,.16), transparent 60%),
    var(--c-ink);
  color:var(--c-text-inverse);
  padding-top:clamp(52px, 9vw, 96px);
  padding-bottom:clamp(48px, 7vw, 84px);
}
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg, black, transparent 78%);
          mask-image:linear-gradient(180deg, black, transparent 78%);
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr; gap:44px; align-items:center;
}
@media (min-width:960px){
  .hero-grid{ grid-template-columns:1.15fr 1fr; gap:40px; }
}
.hero-inner{ max-width:640px; }
.hero .eyebrow{ color:var(--c-gold); }
.hero h1{ margin-bottom:22px; color: #F6F7FA; }
.hero h1 .accent{ color:var(--c-gold); }
.hero h1 .accent-teal{ color:var(--c-teal); }
.hero-sub{ font-size:1.125rem; color:var(--c-text-inverse-soft); max-width:600px; margin-bottom:36px; line-height:1.65; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-note{ margin-top:28px; display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--c-text-inverse-soft); }
.hero-note .icon{ width:16px; height:16px; color:var(--c-teal); flex:none; }

/* --- hero right column: live network proof card --- */
.hero-visual{ display:flex; justify-content:center; }
@media (min-width:960px){ .hero-visual{ justify-content:flex-end; } }

.hero-proof-card{
  width:100%; max-width:400px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);
  padding:28px 26px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:var(--shadow-lg);
}
.hero-proof-head{
  display:flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--c-text-inverse-soft); margin-bottom:22px;
}
.live-dot{
  width:8px; height:8px; border-radius:50%; background:var(--c-teal); flex:none;
  box-shadow:0 0 0 3px rgba(20,174,135,.22);
  animation:live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.55; transform:scale(1.2); }
}

.hero-proof-row{ display:flex; gap:15px; align-items:flex-start; }
.hero-proof-icon{
  width:42px; height:42px; border-radius:var(--r-md); flex:none;
  display:flex; align-items:center; justify-content:center;
}
.hero-proof-icon.gold{ background:rgba(232,168,60,.16); color:var(--c-gold); }
.hero-proof-icon.teal{ background:rgba(20,174,135,.16); color:var(--c-teal); }
.hero-proof-icon .icon{ width:20px; height:20px; }

.hero-proof-label{ font-size:.78rem; color:var(--c-text-inverse-soft); margin-bottom:3px; }
.hero-proof-value{ font-family:var(--f-display); font-size:1.4rem; font-weight:600; color:var(--c-white); line-height:1.2; }
.hero-proof-value .unit{ font-size:.78rem; color:var(--c-text-inverse-soft); font-weight:500; }
.hero-proof-sub{ font-size:.78rem; color:var(--c-text-inverse-soft); margin-top:3px; }

.hero-proof-divider{ height:1px; background:rgba(255,255,255,.1); margin:20px 0; }

.hero-proof-mini-stats{ display:flex; justify-content:space-between; gap:8px; text-align:center; }
.hero-proof-mini-stats div{ flex:1; }
.hero-proof-mini-stats strong{ display:block; font-family:var(--f-display); font-size:1.05rem; font-weight:600; color:var(--c-white); }
.hero-proof-mini-stats span{ display:block; font-size:.66rem; color:var(--c-text-inverse-soft); margin-top:3px; line-height:1.3; }

.page-banner{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 420px at 90% -20%, rgba(232,168,60,.16), transparent 60%),
    radial-gradient(760px 400px at 100% 60%, rgba(20,174,135,.14), transparent 60%),
    var(--c-ink);
  color:var(--c-text-inverse);
  padding-top:calc(var(--header-h) + 0px);
  padding-bottom:52px;
}
.page-banner.compact{ padding-bottom:40px; }
.breadcrumb{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-family:var(--f-mono); font-size:.8rem; color:var(--c-text-inverse-soft); margin-bottom:18px;
}
.breadcrumb a:hover{ color:var(--c-white); }
.breadcrumb .sep{ opacity:.5; }
.page-banner h1{ max-width:780px; font-size:clamp(2rem, 1.55rem + 2.1vw, 3.1rem); color: #F6F7FA;}
.page-banner .lead{ margin-top:16px; color:var(--c-text-inverse-soft); max-width:620px; }
.page-banner .badge-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }

/* -----------------------------------------------------------------
   8. TICKER — live network marquee (signature element)
   ----------------------------------------------------------------- */
.ticker{
  background:var(--c-ink-2); border-block:1px solid var(--c-ink-3);
  overflow:hidden; position:relative;
}
.ticker::before,.ticker::after{
  content:''; position:absolute; top:0; bottom:0; width:64px; z-index:2; pointer-events:none;
}
.ticker::before{ left:0; background:linear-gradient(90deg, var(--c-ink-2), transparent); }
.ticker::after{ right:0; background:linear-gradient(270deg, var(--c-ink-2), transparent); }

.ticker-track{ display:flex; width:max-content; animation:ticker-scroll 42s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }

.ticker-item{
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.01em;
  padding:16px 30px; white-space:nowrap; border-right:1px solid var(--c-ink-3);
  color:var(--c-text-inverse-soft);
}
.ticker-dot{ width:6px; height:6px; border-radius:50%; flex:none; }
.ticker-dot.gold{ background:var(--c-gold); box-shadow:0 0 0 3px rgba(232,168,60,.18); }
.ticker-dot.teal{ background:var(--c-teal); box-shadow:0 0 0 3px rgba(20,174,135,.18); }
.ticker-label{ color:var(--c-text-inverse); font-weight:600; }

@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* -----------------------------------------------------------------
   9. TWO-PATH CARDS (Publisher / Advertiser)
   ----------------------------------------------------------------- */
.path-grid{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:768px){ .path-grid{ grid-template-columns:1fr 1fr; gap:28px; } }

.path-card{
  border-radius:var(--r-lg); padding:clamp(28px,3vw,44px) clamp(24px,3vw,36px);
  border:1.5px solid var(--c-border); border-top:4px solid var(--c-border);
  background:var(--c-white);
  transition:transform var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease);
}
.path-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.path-card--gold{ border-top-color:var(--c-gold); }
.path-card--teal{ border-top-color:var(--c-teal); }

.path-icon{ width:56px; height:56px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; margin-bottom:24px; }
.path-card--gold .path-icon{ background:var(--c-gold-tint); color:var(--c-gold-deep); }
.path-card--teal .path-icon{ background:var(--c-teal-tint); color:var(--c-teal-deep); }
.path-icon .icon{ width:27px; height:27px; }

.path-card h3{ margin-bottom:12px; }
.path-card > p{ color:var(--c-text-soft); }

.path-list{ margin:22px 0 30px; display:flex; flex-direction:column; gap:12px; }
.path-list li{ display:flex; gap:10px; align-items:flex-start; color:var(--c-text-soft); font-size:.95rem; line-height:1.5; }
.path-list .icon{ width:18px; height:18px; flex:none; margin-top:2px; }
.path-card--gold .path-list .icon{ color:var(--c-gold-deep); }
.path-card--teal .path-list .icon{ color:var(--c-teal-deep); }

.path-link{ display:inline-flex; align-items:center; gap:8px; font-weight:600; }
.path-card--gold .path-link{ color:var(--c-gold-deep); }
.path-card--teal .path-link{ color:var(--c-teal-deep); }
.path-link .icon{ width:17px; height:17px; transition:transform var(--dur-sm) var(--ease); }
.path-link:hover .icon{ transform:translateX(3px); }

/* -----------------------------------------------------------------
   10. STATS BAND
   ----------------------------------------------------------------- */
.stats-band{ background:var(--c-ink); color:var(--c-text-inverse); }
.stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px 20px; }
@media (min-width:768px){ .stats-grid{ grid-template-columns:repeat(4,1fr); } }

.stat{ text-align:center; padding-top:22px; border-top:1px solid var(--c-ink-3); }
@media (min-width:768px){
  .stat{ padding-top:0; padding-left:24px; border-top:none; border-left:1px solid var(--c-ink-3); text-align:left; }
  .stat:first-child{ border-left:none; padding-left:0; }
}
.stat-num{
  font-family:var(--f-display); font-weight:600; color:var(--c-white);
  font-size:clamp(2rem, 1.6rem + 1.6vw, 2.9rem);
  display:flex; align-items:baseline; gap:2px; justify-content:center;
}
@media (min-width:768px){ .stat-num{ justify-content:flex-start; } }
.stat-num .suffix{ color:var(--c-gold); }
.stat-label{ margin-top:8px; color:var(--c-text-inverse-soft); font-size:.9rem; }

/* -----------------------------------------------------------------
   11. CARDS
   ----------------------------------------------------------------- */
.card-grid{ display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width:640px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px){ .card-grid{ grid-template-columns:repeat(3,1fr); } }

.service-card{
  background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--r-lg);
  padding:32px 28px; height:100%;
  transition:box-shadow var(--dur-md) var(--ease), transform var(--dur-md) var(--ease), border-color var(--dur-md) var(--ease);
}
.service-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:transparent; }
.service-icon{ width:52px; height:52px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; background:var(--c-paper-2); color:var(--c-ink); margin-bottom:20px; }
.service-icon .icon{ width:25px; height:25px; }
.service-card h3{ font-size:1.15rem; margin-bottom:10px; }
.service-card p{ color:var(--c-text-soft); font-size:.94rem; line-height:1.6; }
.service-card .tag{ display:inline-block; margin-top:16px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--c-text-faint); }

.feature-list{ display:grid; grid-template-columns:1fr; gap:30px; }
@media (min-width:640px){ .feature-list{ grid-template-columns:1fr 1fr; } }
.feature-item{ display:flex; gap:18px; }
.feature-item-icon{ width:48px; height:48px; border-radius:var(--r-md); background:var(--c-paper-2); display:flex; align-items:center; justify-content:center; flex:none; color:var(--c-ink); }
.feature-item-icon .icon{ width:23px; height:23px; }
.feature-item h4{ font-size:1.05rem; margin-bottom:6px; }
.feature-item p{ color:var(--c-text-soft); font-size:.9rem; line-height:1.6; }

.split-cards{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:768px){ .split-cards{ grid-template-columns:1fr 1fr; } }
.split-card{ padding:clamp(28px,3vw,40px) clamp(24px,3vw,36px); border-radius:var(--r-lg); }
.split-card.gold{ background:var(--c-gold-tint); }
.split-card.teal{ background:var(--c-teal-tint); }
.split-card .icon-badge{ width:46px;height:46px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin-bottom:20px;background:rgba(255,255,255,.6); }
.split-card.gold .icon-badge{ color:var(--c-gold-deep); }
.split-card.teal .icon-badge{ color:var(--c-teal-deep); }
.split-card h3{ margin-bottom:14px; }
.split-card p{ color:var(--c-text-soft); line-height:1.7; }

.team-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px 20px; }
@media (min-width:768px){ .team-grid{ grid-template-columns:repeat(4,1fr); } }
/* .team-card{ text-align:center; }
.team-avatar{
  width:80px; height:80px; border-radius:50%; margin:0 auto 18px;
  background:linear-gradient(135deg, var(--c-gold-tint), var(--c-teal-tint));
  display:flex; align-items:center; justify-content:center; color:var(--c-ink);
  border:1px solid var(--c-border);
}
.team-avatar .icon{ width:30px; height:30px; }
.team-card h4{ font-size:.98rem; margin-bottom:4px; }
.team-card p{ color:var(--c-text-faint); font-size:.83rem; line-height:1.5; } */

.team-card{ text-align:center; }
.team-avatar{
  width:80px; height:80px; border-radius:50%; margin:0 auto 18px;
  background:linear-gradient(135deg, var(--c-gold-tint), var(--c-teal-tint));
  display:flex; align-items:center; justify-content:center; color:var(--c-ink);
  border:1px solid var(--c-border);
  overflow:hidden; /* keeps a photo cropped to the circle if/when one is added */
}
.team-avatar .icon{ width:30px; height:30px; }
.team-avatar--photo{ background:var(--c-paper-2); } /* visible only while the photo loads */
.team-avatar--photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.team-card h4{ font-size:.98rem; margin-bottom:4px; }
.team-card p{ color:var(--c-text-faint); font-size:.83rem; line-height:1.5; }
.team-card p.team-role{ color:var(--c-text-soft); font-size:.8rem; font-weight:600; margin-bottom:6px; }

.testimonial-grid{ display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width:768px){ .testimonial-grid{ grid-template-columns:repeat(3,1fr); } }
.testimonial-card{ background:var(--c-paper); border-radius:var(--r-lg); padding:30px 26px; display:flex; flex-direction:column; gap:18px; height:100%; }
.testimonial-stars{ display:flex; gap:3px; color:var(--c-gold); }
.testimonial-stars .icon{ width:15px; height:15px; }
.testimonial-quote{ font-size:.98rem; line-height:1.65; color:var(--c-text); }
.testimonial-author{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:4px; }
.testimonial-avatar{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:600; color:var(--c-white); font-size:.85rem; flex:none; }
.testimonial-name{ font-weight:600; font-size:.88rem; }
.testimonial-role{ color:var(--c-text-faint); font-size:.78rem; }

/* -----------------------------------------------------------------
   12. STEPS / PROCESS
   ----------------------------------------------------------------- */
.steps{ display:grid; grid-template-columns:1fr; gap:32px; position:relative; }
@media (min-width:768px){
  .steps{ grid-template-columns:repeat(3,1fr); gap:28px; }
  .steps::before{
    content:''; position:absolute; top:22px; left:calc(100%/6); right:calc(100%/6); height:1.5px; z-index:0;
    background-image:linear-gradient(90deg, var(--c-border) 0 8px, transparent 8px 15px);
    background-size:15px 1.5px; background-repeat:repeat-x;
  }
}
.step{ position:relative; z-index:1; }
.step-num{
  font-family:var(--f-display); font-weight:600; font-size:1rem;
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; background:var(--c-gold-tint); color:var(--c-gold-deep); border:1.5px solid var(--c-gold);
}
.steps--teal .step-num{ background:var(--c-teal-tint); color:var(--c-teal-deep); border-color:var(--c-teal); }
.step h3{ font-size:1.1rem; margin-bottom:8px; }
.step p{ color:var(--c-text-soft); font-size:.92rem; line-height:1.6; }
.step-track{ display:grid; grid-template-columns:1fr; gap:32px; }
@media (min-width:768px){ .step-track{ grid-template-columns:repeat(3,1fr); } }
.step-cols{ display:grid; grid-template-columns:1fr; gap:44px; }
@media (min-width:900px){ .step-cols{ grid-template-columns:1fr 1fr; gap:56px; } }
.step-col-head{ display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.step-col-head .icon-badge{ width:40px; height:40px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; flex:none; }
.step-cols .path-card--gold-head{ background:var(--c-gold-tint); color:var(--c-gold-deep); }
.step-col-head.gold .icon-badge{ background:var(--c-gold-tint); color:var(--c-gold-deep); }
.step-col-head.teal .icon-badge{ background:var(--c-teal-tint); color:var(--c-teal-deep); }
.step-col-head h3{ font-size:1.25rem; }

/* -----------------------------------------------------------------
   13. LOGO CAROUSEL (trusted-by logo wall, with scroll controls)
   ----------------------------------------------------------------- */
.logo-carousel-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:24px;
}
.logo-carousel-label{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-text-faint); margin:0;
}
.logo-carousel-playpause{
  width:34px; height:34px; border-radius:50%; flex:none;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--c-border); background:var(--c-white); color:var(--c-text-soft);
  transition:background var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease);
}
.logo-carousel-playpause:hover{ background:var(--c-paper-2); color:var(--c-text); border-color:var(--c-text-faint); }
.logo-pp-icon{ position:absolute; width:14px; height:14px; transition:opacity var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease); }
.logo-pp-icon--play{ opacity:0; transform:scale(.7); }
.logo-carousel-playpause.is-paused .logo-pp-icon--pause{ opacity:0; transform:scale(.7); }
.logo-carousel-playpause.is-paused .logo-pp-icon--play{ opacity:1; transform:scale(1); }

.logo-carousel{ display:flex; align-items:center; gap:8px; }

.logo-carousel-btn{
  flex:none; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--c-border); background:var(--c-white); color:var(--c-text);
  box-shadow:var(--shadow-sm);
  transition:background var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease);
}
.logo-carousel-btn:hover{ background:var(--c-paper-2); border-color:var(--c-text-faint); transform:translateY(-1px); }
.logo-carousel-btn:active{ transform:translateY(0); }
.logo-carousel-btn:disabled{ opacity:.35; cursor:default; transform:none; }
.logo-carousel-btn .icon{ width:20px; height:20px; }

.logo-carousel-viewport{
  flex:1; min-width:0;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
          mask-image:linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
}
.logo-carousel-viewport::-webkit-scrollbar{ display:none; height:0; }

.logo-carousel-track{ display:flex; align-items:center; width:max-content; }

.logo-item{
  flex:none; height:44px;
  display:flex; align-items:center; justify-content:center;
  padding:0 34px;
  background:transparent;
}
.logo-item img{
  height:100%; width:auto; max-width:100%;
  display:block; background:transparent;
  filter:grayscale(1); opacity:.5;
  transition:filter var(--dur-md) var(--ease), opacity var(--dur-md) var(--ease);
}
.logo-item:hover img,
.logo-item:focus-within img{ filter:grayscale(0); opacity:1; }

@media (max-width:575px){
  .logo-carousel-btn{ width:36px; height:36px; }
  .logo-carousel-btn .icon{ width:17px; height:17px; }
  .logo-item{ height:36px; padding:0 22px; }
}

/* -----------------------------------------------------------------
   14. CTA BANNERS
   ----------------------------------------------------------------- */
.cta-split{ display:grid; grid-template-columns:1fr; border-radius:var(--r-lg); overflow:hidden; }
@media (min-width:768px){ .cta-split{ grid-template-columns:1fr 1fr; } }
.cta-half{ padding:clamp(32px,4vw,52px) clamp(28px,4vw,44px); display:flex; flex-direction:column; justify-content:center; gap:18px; }
.cta-half--gold{ background:linear-gradient(135deg,#F2BC63,var(--c-gold)); color:#2B1B04; }
.cta-half--teal{ background:linear-gradient(135deg,#1FCA9E,var(--c-teal-deep)); color:#04231C; }
.cta-half h3{ font-size:clamp(1.4rem,1.1rem + 1vw,1.85rem); color:inherit; }
.cta-half p{ opacity:.88; font-size:.95rem; }
.cta-half .btn{ align-self:flex-start; }

.cta-banner{
  border-radius:var(--r-lg); padding:clamp(40px,5vw,64px) clamp(28px,5vw,56px);
  background:var(--c-ink); color:var(--c-text-inverse); text-align:center; position:relative; overflow:hidden;
}
.cta-banner::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(700px 320px at 50% 0%, rgba(232,168,60,.18), transparent 65%);
}
.cta-banner-inner{ position:relative; z-index:1; max-width:620px; margin-inline:auto; }
.cta-banner h2{ margin-bottom:14px; color: #F6F7FA;}
.cta-banner p{ color:var(--c-text-inverse-soft); margin-bottom:30px; }

/* -----------------------------------------------------------------
   15. DASHBOARD MOCK
   ----------------------------------------------------------------- */
.dashboard-mock{ background:var(--c-ink); border-radius:var(--r-lg); padding:clamp(20px,3vw,30px); color:var(--c-text-inverse); }
.dashboard-mock-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.dashboard-mock-head h4{ font-size:.95rem; color:var(--c-text-inverse-soft); font-weight:500; font-family:var(--f-mono); }
.dashboard-dots{ display:flex; gap:6px; }
.dashboard-dots span{ width:9px; height:9px; border-radius:50%; background:var(--c-ink-3); }
.dashboard-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (min-width:600px){ .dashboard-grid{ grid-template-columns:repeat(4,1fr); } }
.dashboard-metric{ background:var(--c-ink-2); border:1px solid var(--c-ink-3); border-radius:var(--r-md); padding:18px; }
.dashboard-metric-label{ font-family:var(--f-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--c-text-inverse-soft); margin-bottom:10px; }
.dashboard-metric-value{ font-family:var(--f-display); font-size:1.55rem; font-weight:600; }
.dashboard-metric-bar{ height:6px; border-radius:3px; background:var(--c-ink-3); margin-top:13px; overflow:hidden; }
.dashboard-metric-bar span{ display:block; height:100%; border-radius:3px; }

/* -----------------------------------------------------------------
   16. CHIPS & MODEL ROWS
   ----------------------------------------------------------------- */
.chip-row{ display:flex; flex-wrap:wrap; gap:12px; }
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--r-pill);
  background:var(--c-paper-2); border:1px solid var(--c-border); font-size:.87rem; font-weight:500;
}
.chip .icon{ width:16px; height:16px; }
.chip-row.on-dark .chip{ background:var(--c-ink-2); border-color:var(--c-ink-3); color:var(--c-text-inverse-soft); }

.model-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (min-width:640px){ .model-row{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:992px){ .model-row{ grid-template-columns:repeat(5,1fr); } }
.model-chip{ background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--r-md); padding:20px 14px; text-align:center; }
.model-chip .abbr{ font-family:var(--f-mono); font-weight:600; font-size:1.05rem; color:var(--c-teal-deep); display:block; margin-bottom:6px; }
.model-chip .full{ font-size:.76rem; color:var(--c-text-faint); }

/* -----------------------------------------------------------------
   17. FAQ ACCORDION
   ----------------------------------------------------------------- */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{ border:1px solid var(--c-border); border-radius:var(--r-md); overflow:hidden; background:var(--c-white); }
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:19px 22px; text-align:left; font-family:var(--f-display); font-weight:500; font-size:1rem;
}
.faq-question .icon{ width:19px; height:19px; flex:none; transition:transform var(--dur-md) var(--ease); color:var(--c-text-faint); }
.faq-item.is-open .faq-question .icon{ transform:rotate(180deg); color:var(--c-teal); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height var(--dur-md) var(--ease); }
.faq-answer-inner{ padding:0 22px 21px; color:var(--c-text-soft); font-size:.93rem; line-height:1.65; }

/* -----------------------------------------------------------------
   18. FORMS
   ----------------------------------------------------------------- */
.form-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
.form-grid.cols-2{ grid-template-columns:1fr; }
@media (min-width:560px){ .form-grid.cols-2{ grid-template-columns:1fr 1fr; } }

.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field label{ font-size:.85rem; font-weight:600; color:var(--c-text); }
.form-field .req{ color:var(--c-gold-deep); }
.form-field input,
.form-field textarea,
.form-field select{
  padding:13px 16px; border-radius:var(--r-sm); border:1.5px solid var(--c-border);
  background:var(--c-white); font-size:.95rem; color:var(--c-text); width:100%;
  transition:border-color var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease);
}
.form-field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23848DA0' stroke-width='2'%3E%3Cpath d='M5.5 8.5L12 15l6.5-6.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:40px; }
.form-field textarea{ resize:vertical; min-height:130px; }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{ outline:none; border-color:var(--c-teal); box-shadow:0 0 0 4px rgba(20,174,135,.14); }
.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error select{ border-color:var(--c-danger); }
.form-field.has-error input:focus,
.form-field.has-error textarea:focus,
.form-field.has-error select:focus{ box-shadow:0 0 0 4px rgba(216,70,76,.14); }
.field-error{ font-size:.8rem; color:var(--c-danger-deep); display:none; }
.form-field.has-error .field-error{ display:block; }

.form-check{ display:flex; align-items:flex-start; gap:10px; font-size:.86rem; color:var(--c-text-soft); line-height:1.5; }
.form-check input{ margin-top:3px; width:16px; height:16px; accent-color:var(--c-teal); flex:none; }
.form-check a{ color:var(--c-teal-deep); font-weight:600; }

.form-status{
  padding:15px 18px; border-radius:var(--r-sm); font-size:.9rem;
  display:none; align-items:flex-start; gap:10px; margin-top:20px; line-height:1.5;
}
.form-status.show{ display:flex; }
.form-status .icon{ width:19px; height:19px; flex:none; margin-top:1px; }
.form-status.success{ background:var(--c-teal-tint); color:var(--c-teal-deep); }
.form-status.error{ background:var(--c-danger-tint); color:var(--c-danger-deep); }

.hp-field{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; opacity:0; overflow:hidden; }

/* -----------------------------------------------------------------
   19. CONTACT PAGE
   ----------------------------------------------------------------- */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:36px; }
@media (min-width:992px){ .contact-grid{ grid-template-columns:.85fr 1.15fr; gap:52px; } }

.contact-info-card{ background:var(--c-paper); border-radius:var(--r-lg); padding:clamp(28px,3vw,38px); }
.contact-info-list{ display:flex; flex-direction:column; gap:22px; margin:26px 0; }
.contact-info-item{ display:flex; gap:16px; align-items:flex-start; }
.contact-info-icon{ width:44px; height:44px; border-radius:var(--r-md); background:var(--c-white); border:1px solid var(--c-border); display:flex; align-items:center; justify-content:center; flex:none; color:var(--c-teal-deep); }
.contact-info-icon .icon{ width:20px; height:20px; }
.contact-info-item h4{ font-size:.93rem; margin-bottom:4px; }
.contact-info-item p, .contact-info-item a{ font-size:.88rem; color:var(--c-text-soft); line-height:1.55; }
.contact-info-item a:hover{ color:var(--c-teal-deep); }

.map-embed{ border-radius:var(--r-md); overflow:hidden; margin-top:8px; border:1px solid var(--c-border); background:var(--c-paper-2); }
.map-embed iframe{ width:100%; height:230px; border:0; display:block; filter:grayscale(.2) contrast(1.02); }

.contact-form-card{ background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--r-lg); padding:clamp(28px,3.5vw,42px); box-shadow:var(--shadow-sm); }

/* -----------------------------------------------------------------
   20. LEGAL / POLICY PAGES
   ----------------------------------------------------------------- */
.legal-content{ max-width:820px; }
.legal-content .updated{
  font-family:var(--f-mono); font-size:.78rem; color:var(--c-text-faint);
  display:inline-block; background:var(--c-paper-2); padding:7px 15px; border-radius:var(--r-pill); margin-bottom:28px;
}
.legal-toc{ background:var(--c-paper); border-radius:var(--r-lg); padding:26px 28px; margin-bottom:44px; }
.legal-toc h2{ margin-top:0 !important; font-size:1.02rem !important; text-transform:uppercase; letter-spacing:.04em; color:var(--c-text-soft); }
.legal-toc ol{ padding-left:20px; color:var(--c-text-soft); display:grid; gap:9px; grid-template-columns:1fr; list-style:decimal; margin-top:16px; }
@media (min-width:640px){ .legal-toc ol{ grid-template-columns:1fr 1fr; } }
.legal-toc a{ font-size:.92rem; }
.legal-toc a:hover{ color:var(--c-teal-deep); }

.legal-content h2{ font-size:1.4rem; margin:44px 0 14px; scroll-margin-top:100px; }
.legal-content h2:first-of-type{ margin-top:0; }
.legal-content h3{ font-size:1.08rem; margin:22px 0 10px; }
.legal-content p{ color:var(--c-text-soft); margin-bottom:14px; line-height:1.75; }
.legal-content ul,.legal-content ol{ margin:0 0 18px; padding-left:22px; color:var(--c-text-soft); }
.legal-content ul{ list-style:disc; }
.legal-content ol{ list-style:decimal; }
.legal-content li{ margin-bottom:9px; line-height:1.65; }
.legal-content strong{ color:var(--c-text); }
.legal-content a{ color:var(--c-teal-deep); font-weight:600; }
.legal-content a:hover{ text-decoration:underline; }

/* -----------------------------------------------------------------
   21. FOOTER
   ----------------------------------------------------------------- */
.site-footer{ background:var(--c-ink); color:var(--c-text-inverse-soft); }

.footer-newsletter{ border-bottom:1px solid var(--c-ink-3); }
.footer-newsletter-inner{ display:flex; flex-direction:column; gap:22px; padding-block:38px; }
@media (min-width:768px){ .footer-newsletter-inner{ flex-direction:row; align-items:center; justify-content:space-between; gap:40px; } }
.footer-newsletter-copy h3{ color:var(--c-white); font-size:1.25rem; margin-bottom:6px; }
.footer-newsletter-copy p{ font-size:.9rem; max-width:420px; }
.newsletter-form{ display:flex; gap:10px; flex-wrap:wrap; }
.newsletter-form input{
  padding:12px 18px; border-radius:var(--r-pill); border:1.5px solid var(--c-ink-3);
  background:var(--c-ink-2); color:var(--c-white); min-width:220px; flex:1;
}
.newsletter-form input::placeholder{ color:var(--c-text-inverse-soft); }
.newsletter-form input:focus{ outline:none; border-color:var(--c-gold); }

.footer-main{ padding-block:60px; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:40px; }
@media (min-width:640px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:992px){ .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:32px; } }

.footer-col h4{ color:var(--c-white); font-size:.9rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom:18px; }
.footer-links{ display:flex; flex-direction:column; gap:12px; }
.footer-links a{ font-size:.92rem; }
.footer-links a:hover{ color:var(--c-white); }
.footer-blurb{ font-size:.9rem; line-height:1.65; margin:16px 0 22px; max-width:320px; }
.social-list{ display:flex; gap:10px; }
.social-list a{ width:38px; height:38px; border-radius:50%; background:var(--c-ink-2); display:flex; align-items:center; justify-content:center; border:1px solid var(--c-ink-3); transition:background var(--dur-sm), border-color var(--dur-sm), color var(--dur-sm); }
.social-list .icon{ width:16px; height:16px; }
.social-list a:hover{ background:var(--c-gold); color:var(--c-ink); border-color:var(--c-gold); }

.footer-contact{ display:flex; flex-direction:column; gap:15px; font-size:.9rem; }
.footer-contact li{ display:flex; gap:11px; align-items:flex-start; }
.footer-contact .icon{ width:17px; height:17px; flex:none; margin-top:2px; color:var(--c-gold); }
.footer-contact a:hover{ color:var(--c-white); }

.footer-bottom{ border-top:1px solid var(--c-ink-3); padding-block:22px; }
.footer-bottom-inner{ display:flex; flex-direction:column; gap:14px; font-size:.82rem; }
@media (min-width:640px){ .footer-bottom-inner{ flex-direction:row; justify-content:space-between; align-items:center; } }
.footer-legal{ display:flex; gap:24px; flex-wrap:wrap; }
.footer-legal a:hover{ color:var(--c-white); }

/* -----------------------------------------------------------------
   22. BACK TO TOP
   ----------------------------------------------------------------- */
.back-to-top{
  position:fixed; right:18px; bottom:18px; width:46px; height:46px; border-radius:50%;
  background:var(--c-ink); color:var(--c-white); display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity var(--dur-md) var(--ease), transform var(--dur-md) var(--ease), visibility var(--dur-md) var(--ease), background var(--dur-sm) var(--ease);
  z-index:60;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--c-gold-deep); }
.back-to-top .icon{ width:20px; height:20px; }
@media (min-width:768px){ .back-to-top{ right:28px; bottom:28px; } }

/* -----------------------------------------------------------------
   23. REVEAL ANIMATION & MISC UTILITIES
   ----------------------------------------------------------------- */
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

.stagger [data-reveal]:nth-child(1){ transition-delay:0s; }
.stagger [data-reveal]:nth-child(2){ transition-delay:.08s; }
.stagger [data-reveal]:nth-child(3){ transition-delay:.16s; }
.stagger [data-reveal]:nth-child(4){ transition-delay:.24s; }
.stagger [data-reveal]:nth-child(5){ transition-delay:.32s; }
.stagger [data-reveal]:nth-child(6){ transition-delay:.4s; }

.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-visible{ outline:2.5px solid var(--c-teal); outline-offset:2px; border-radius:4px; }

.icon{ width:20px; height:20px; }
.icon-sm{ width:16px; height:16px; }
.icon-lg{ width:32px; height:32px; }

.mt-0{ margin-top:0 !important; }
.mt-1{ margin-top:12px !important; }
.mt-2{ margin-top:24px !important; }
.mt-3{ margin-top:40px !important; }
.mb-0{ margin-bottom:0 !important; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* -----------------------------------------------------------------
   24. SMALL-SCREEN REFINEMENTS
   ----------------------------------------------------------------- */
@media (max-width:479px){
  .hero-actions .btn,
  .cta-banner-inner .btn-group .btn{ width:100%; }
  .btn-group{ flex-direction:column; }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .contact-info-card, .contact-form-card{ padding:26px 20px; }
}


/* -----------------------------------------------------------------
   LOGIN / COMING-SOON MODAL
   ----------------------------------------------------------------- */
.modal-scrim{
  position:fixed; inset:0; z-index:200;
  background:rgba(11,18,32,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-md) var(--ease), visibility var(--dur-md) var(--ease);
}
.modal-scrim.is-active{
  opacity:1; visibility:visible;
}

.modal{
  position:fixed; inset:0; z-index:210;
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px;
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-md) var(--ease), visibility var(--dur-md) var(--ease);
  pointer-events:none;
}
.modal.is-active{
  opacity:1; visibility:visible;
  pointer-events:auto;
}

.modal-panel{
  position:relative;
  width:100%; max-width:440px;
  background:var(--c-white);
  border-radius:var(--r-lg);
  border:1px solid var(--c-border);
  box-shadow:var(--shadow-lg);
  padding:36px 32px 28px;
  text-align:center;
  transform:translateY(12px) scale(.97);
  transition:transform var(--dur-md) var(--ease);
}
.modal.is-active .modal-panel{
  transform:translateY(0) scale(1);
}

.modal-close{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid transparent; background:transparent; color:var(--c-text-soft);
  transition:background var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease);
}
.modal-close:hover{ background:var(--c-paper-2); color:var(--c-text); border-color:var(--c-border); }
.modal-close .icon{ width:18px; height:18px; }

.modal-icon-wrap{
  width:56px; height:56px; border-radius:50%; margin:0 auto 18px;
  background:linear-gradient(135deg, var(--c-gold-tint), var(--c-teal-tint));
  display:flex; align-items:center; justify-content:center; color:var(--c-ink);
  border:1px solid var(--c-border);
}
.modal-icon-wrap .icon{ width:24px; height:24px; }

.modal-title{
  font-family:var(--f-display); font-size:1.35rem; font-weight:600;
  color:var(--c-ink); margin:0 0 10px; line-height:1.25;
}
.modal-desc{
  font-size:.92rem; color:var(--c-text-soft); line-height:1.55; margin:0 0 20px;
}

.modal-perks{
  list-style:none; padding:0; margin:0 0 24px; text-align:left;
}
.modal-perks li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:.88rem; color:var(--c-text); padding:6px 0;
}
.modal-perks .icon{
  width:18px; height:18px; flex:none; margin-top:1px; color:var(--c-teal);
}

.modal-actions{
  display:flex; flex-direction:column; gap:10px; margin-bottom:14px;
}
.modal-actions .btn{ width:100%; justify-content:center; }

.modal-note{
  font-size:.78rem; color:var(--c-text-faint); margin:0;
}

/* Lock page scroll while open */
body.modal-open{ overflow:hidden; }

@media (max-width:480px){
  .modal-panel{ padding:28px 20px 22px; }
  .modal-title{ font-size:1.2rem; }
}