/* =====================================================================
   The Bridge — brand layer  ·  sits ON TOP of the aytm design system
   ---------------------------------------------------------------------
   Load AFTER the aytm bundle stylesheets. Everything here is additive:
   the aytm system already supplies the type scale, semantic color tokens,
   the dark theme, Roundserrat (--font-wordmark) and --font-numeric.
   This file adds ONLY what is specific to The Bridge product sub-brand.
   ===================================================================== */

:root{
  /* Bridge fork: Merriweather (display serif) is replaced by Sora across all
     Bridge materials. Only --font-display is remapped; Merriweather Sans
     (--font-sans) and every other aytm asset are left untouched. */
  --font-display: "Sora", "Montserrat", system-ui, sans-serif;

  /* --- The Bridge signature gradient -----------------------------------
     A warmer coral -> pink -> violet sibling of the aytm magenta->navy
     gradient. It is the fill of the Bridge wordmark lockups and the one
     genuinely Bridge-specific brand token. Everything else is aytm. */
  --bridge-grad:      linear-gradient(120deg,#F87A61 0%,#EE5183 25%,#EB4191 45%,#A85EBD 100%);
  --bridge-grad-135:  linear-gradient(135deg,#A85EBD 0%,#EB4191 55%,#F87A61 100%);
  --bridge-coral:     #F87A61;
  --bridge-pink:      #EB4191;
  --bridge-violet:    #A85EBD;
  /* alias kept so material lifted from the original one-pagers still resolves */
  --grad-logo:        var(--bridge-grad);
}

/* --- Lockup image helper -----------------------------------------------
   Bridge lockups are full-color SVGs. On dark photo covers, knock the
   gradient version to white with a filter; on light/tinted surfaces use
   the file as-is, or the -white / -reversed variants. Brand rule: the
   logo is ALWAYS full opacity, never faded. */
.bridge-logo{ display:block; width:auto; opacity:1; }
.bridge-logo--on-photo{ filter:brightness(0) invert(1) drop-shadow(0 2px 14px rgba(10,20,35,.4)); }

/* --- Bridge CTA ---------------------------------------------------------
   The Bridge call-to-action uses the warm logo gradient (NOT the aytm
   stat-pill gradient). Hover LIGHTENS — never darkens (brand motion rule). */
.bridge-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-ui); font-weight:700; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; color:#fff;
  background:var(--bridge-grad); padding:13px 24px; border-radius:999px;
  text-decoration:none; border:none; cursor:pointer;
  transition:filter .2s var(--ease-out, ease);
}
.bridge-cta:hover{ filter:brightness(1.05); }
.bridge-cta svg{ width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* --- Gradient wordmark-style text -------------------------------------- */
.bridge-grad-text{
  background:var(--bridge-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* --- Theme toggle (mandatory on every Bridge deliverable) --------------
   Styled entirely against aytm semantic tokens so it themes itself. */
.bridge-theme-toggle{
  position:fixed; top:18px; right:18px; z-index:9999;
  width:44px; height:44px; border-radius:999px;
  border:1px solid var(--aytm-border, var(--aytm-rule, #E5E4EE));
  background:var(--aytm-bg-raised, #fff); color:var(--aytm-text-body, #555);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--shadow-2, 0 4px 14px rgba(20,18,58,.12));
}
.bridge-theme-toggle svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bridge-theme-toggle .sun{ display:none; }
[data-theme=dark] .bridge-theme-toggle .moon{ display:none; }
[data-theme=dark] .bridge-theme-toggle .sun{ display:block; }
@media print{ .bridge-theme-toggle{ display:none !important; } }

/* Frosted content-page backgrounds: cool near-white base + a soft multi-bloom
   pastel constellation (lavender TL, sky TR, aqua BL, pink BR), lead family
   boosted per page. Clean center for white cards/text. */
.bridge-frost{background:radial-gradient(58% 58% at 6% 4%, rgba(150,96,205,0.2), rgba(150,96,205,0) 70%), radial-gradient(58% 58% at 94% 4%, rgba(60,150,214,0.11), rgba(60,150,214,0) 70%), radial-gradient(58% 58% at 96% 96%, rgba(242,116,166,0.1), rgba(242,116,166,0) 70%), radial-gradient(58% 58% at 4% 96%, rgba(96,202,206,0.09), rgba(96,202,206,0) 70%), #F8FAFC}
.bridge-frost--p2{background:radial-gradient(58% 58% at 94% 4%, rgba(60,150,214,0.2), rgba(60,150,214,0) 70%), radial-gradient(58% 58% at 4% 96%, rgba(96,202,206,0.12), rgba(96,202,206,0) 70%), radial-gradient(58% 58% at 6% 4%, rgba(150,96,205,0.09), rgba(150,96,205,0) 70%), radial-gradient(58% 58% at 96% 96%, rgba(242,116,166,0.08), rgba(242,116,166,0) 70%), #F8FAFC}
.bridge-frost--p3{background:radial-gradient(58% 58% at 96% 96%, rgba(242,116,166,0.19), rgba(242,116,166,0) 70%), radial-gradient(58% 58% at 94% 4%, rgba(242,116,166,0.11), rgba(242,116,166,0) 70%), radial-gradient(58% 58% at 6% 4%, rgba(150,96,205,0.1), rgba(150,96,205,0) 70%), radial-gradient(58% 58% at 4% 96%, rgba(96,202,206,0.08), rgba(96,202,206,0) 70%), #F8FAFC}
.bridge-frost--p4{background:radial-gradient(58% 58% at 94% 4%, rgba(60,150,214,0.19), rgba(60,150,214,0) 70%), radial-gradient(58% 58% at 6% 4%, rgba(150,96,205,0.11), rgba(150,96,205,0) 70%), radial-gradient(58% 58% at 4% 96%, rgba(96,202,206,0.11), rgba(96,202,206,0) 70%), radial-gradient(44% 56% at 100% 55%, rgba(242,116,166,0.09), rgba(242,116,166,0) 70%), #F8FAFC}
.bridge-frost--p5{background:radial-gradient(58% 58% at 4% 96%, rgba(96,202,206,0.2), rgba(96,202,206,0) 70%), radial-gradient(58% 58% at 6% 4%, rgba(150,96,205,0.11), rgba(150,96,205,0) 70%), radial-gradient(58% 58% at 94% 4%, rgba(60,150,214,0.1), rgba(60,150,214,0) 70%), radial-gradient(58% 58% at 96% 96%, rgba(242,116,166,0.09), rgba(242,116,166,0) 70%), #F8FAFC}

/* Dark mode: deep-navy base, same constellation. */
[data-theme="dark"] .bridge-frost{background:radial-gradient(58% 58% at 6% 4%, rgba(176,126,230,0.22), rgba(176,126,230,0) 70%), radial-gradient(58% 58% at 94% 4%, rgba(78,172,226,0.12), rgba(78,172,226,0) 70%), radial-gradient(58% 58% at 96% 96%, rgba(248,134,180,0.11), rgba(248,134,180,0) 70%), radial-gradient(58% 58% at 4% 96%, rgba(122,218,218,0.1), rgba(122,218,218,0) 70%), #0c1122}
[data-theme="dark"] .bridge-frost--p2{background:radial-gradient(58% 58% at 94% 4%, rgba(78,172,226,0.22), rgba(78,172,226,0) 70%), radial-gradient(58% 58% at 4% 96%, rgba(122,218,218,0.13), rgba(122,218,218,0) 70%), radial-gradient(58% 58% at 6% 4%, rgba(176,126,230,0.1), rgba(176,126,230,0) 70%), radial-gradient(58% 58% at 96% 96%, rgba(248,134,180,0.09), rgba(248,134,180,0) 70%), #0b1120}
[data-theme="dark"] .bridge-frost--p3{background:radial-gradient(58% 58% at 96% 96%, rgba(248,134,180,0.21), rgba(248,134,180,0) 70%), radial-gradient(58% 58% at 94% 4%, rgba(248,134,180,0.12), rgba(248,134,180,0) 70%), radial-gradient(58% 58% at 6% 4%, rgba(176,126,230,0.11), rgba(176,126,230,0) 70%), radial-gradient(58% 58% at 4% 96%, rgba(122,218,218,0.09), rgba(122,218,218,0) 70%), #120e1e}
[data-theme="dark"] .bridge-frost--p4{background:radial-gradient(58% 58% at 94% 4%, rgba(78,172,226,0.21), rgba(78,172,226,0) 70%), radial-gradient(58% 58% at 6% 4%, rgba(176,126,230,0.11), rgba(176,126,230,0) 70%), radial-gradient(58% 58% at 4% 96%, rgba(122,218,218,0.12), rgba(122,218,218,0) 70%), radial-gradient(44% 56% at 100% 55%, rgba(248,134,180,0.1), rgba(248,134,180,0) 70%), #0a1120}
[data-theme="dark"] .bridge-frost--p5{background:radial-gradient(58% 58% at 4% 96%, rgba(122,218,218,0.22), rgba(122,218,218,0) 70%), radial-gradient(58% 58% at 6% 4%, rgba(176,126,230,0.11), rgba(176,126,230,0) 70%), radial-gradient(58% 58% at 94% 4%, rgba(78,172,226,0.11), rgba(78,172,226,0) 70%), radial-gradient(58% 58% at 96% 96%, rgba(248,134,180,0.1), rgba(248,134,180,0) 70%), #0a141c}