/* ============================================================
   FERENCE MEDIA — Brand System (shared)
   Direction A · Refined Heritage
   Single source of truth for color, type, and the logo lockup.
   Loaded by every marketing page BEFORE its inline <style>.
   ============================================================ */
:root {
  /* ---- Brand palette ---- */
  --blue:    #0D4C8B;   /* Ference Blue — primary */
  --navy:    #0A2A47;   /* Ink Navy — dark surfaces / reversed bg */
  --sky:     #2E7FBE;   /* Sky — tint, links, secondary */
  --coral:   #E0563C;   /* Signal Coral — "Media", primary accent */
  --coral-l: #FF8A6E;   /* Coral Light — accent on dark bg */
  --amber:   #E8A13C;
  --teal:    #1F9E8A;

  /* ---- Neutrals ---- */
  --charcoal:#1F2A33;
  --slate:   #5A6B78;
  --mist:    #9AA7B0;
  --cloud:   #E2E8ED;
  --paper:   #F6F8FA;
  --white:   #FFFFFF;

  /* ---- Legacy aliases used throughout the marketing pages ----
     (these names appear in each page's CSS as var(--primary-color) etc.;
      defining them here is what re-skins the whole site to brand.) */
  --primary-color: #0D4C8B;   /* was #55a098 (teal) */
  --primary-dark:  #0A3A6B;   /* darker Ference Blue for hovers */
  --primary-light: #2E7FBE;   /* Sky */
  --text-dark:     #0A2A47;   /* Ink Navy */
  --text-gray:     #4A5568;
  --bg-light:      #F6F8FA;
  --bg-white:      #FFFFFF;
  --shadow-sm: 0 2px 8px rgba(10, 42, 71, 0.08);
  --shadow-md: 0 4px 16px rgba(10, 42, 71, 0.12);
  --shadow-lg: 0 8px 24px rgba(10, 42, 71, 0.16);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* signature multi-color bar */
  --bar-grad: linear-gradient(90deg, var(--coral) 0%, var(--amber) 30%, var(--teal) 64%, var(--blue) 100%);
  --bar-grad-light: linear-gradient(90deg, var(--coral-l) 0%, var(--amber) 32%, var(--teal) 66%, var(--sky) 100%);
}

/* ---------- Typography ----------
   Headings -> Figtree, body -> Source Sans 3.
   (Each page also sets body font-family inline; that is updated to
    'Source Sans 3' so the inline rule stays consistent with this.) */
h1, h2, h3, h4, h5, h6,
.hero-title, .sec-title {
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: -0.015em;
}

/* ============================================================
   LOGO LOCKUP  (HTML/CSS wordmark — renders in real Figtree,
   recolors with the palette, scales crisply, no font-in-SVG issue)
   ============================================================ */
.fm-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-decoration: none;
  line-height: 1;
}
.fm-wm {
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 30px;
  line-height: 0.95;
  letter-spacing: -0.022em;
  white-space: nowrap;
}
.fm-wm .f { font-weight: 800; color: var(--blue); }
.fm-wm .m { font-weight: 400; color: var(--coral); }
.fm-bar {
  align-self: stretch;
  height: 3px;
  border-radius: 3px;
  background: var(--bar-grad);
}

/* tagline — advertising | analytics | strategy | growth */
.fm-tag {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  color: var(--charcoal);
  white-space: nowrap;
}
.fm-tag .sep { color: var(--mist); margin: 0 9px; font-weight: 400; }

/* reversed variant — for dark (navy) backgrounds, e.g. the footer */
.fm-lockup--rev .fm-wm .f { color: var(--white); }
.fm-lockup--rev .fm-wm .m { color: var(--coral-l); }
.fm-lockup--rev .fm-bar  { background: var(--bar-grad-light); }
.fm-tag--rev { color: rgba(255, 255, 255, 0.85); }
.fm-tag--rev .sep { color: rgba(255, 255, 255, 0.4); }

/* header sizing: keep the lockup compact in the nav */
.navbar .fm-wm { font-size: 28px; }

@media (max-width: 768px) {
  .navbar .fm-wm { font-size: 23px; }
}

/* ---------- Interior page hero (navy gradient band, matches homepage) ---------- */
.page-hero {
  position: relative;
  margin-top: 80px;
  overflow: hidden;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--navy) 0%, #0C3563 55%, var(--blue) 120%);
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -30%; right: -6%;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(46, 127, 190, 0.32) 0%, rgba(46, 127, 190, 0) 70%);
  pointer-events: none;
}
.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(64px, 11vh, 120px) 40px clamp(56px, 8vh, 96px);
}
.page-hero h1 {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 16px;
}
.page-hero p {
  font-family: 'Source Sans 3', sans-serif;
  font-size: clamp(17px, 2vw, 21px);
  color: rgba(255, 255, 255, 0.82);
  max-width: 60ch;
  margin: 0 auto;
  line-height: 1.6;
}
.page-hero .page-hero-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--bar-grad);
  z-index: 1;
}