/* ============================================================
   Brooke Lane Group — site styles
   ============================================================ */

/* ------------------------------------------------------------
   TYPE SYSTEM
   ------------------------------------------------------------
   One title size for every title-tier element (hero, page, section,
   subsection titles). Fluid clamp() values interpolate between
   phone (≤560 px) and desktop (≥1025 px).

   Element                    Phone    Desktop  Font     Weight  LH
   ---------------------------------------------------------------------
   Title (.heading,
     .hero__line, .page-header h1, .legal h2)
                              22 px    28 px    Caslon   400     1.15
   Card heading (role/value
     card h3, audience label) 17 px    20 px    Caslon   400     1.15
   Eyebrow / kicker           12 px    13 px    Mulish   700     1.0
   Body paragraph (incl .lead) 16 px   18 px    Mulish   400     1.62
   Body small (card text)     14 px    16 px    Mulish   400     1.50
   Caption / fine print       12 px    13 px    Mulish   400     1.40
   Button label               15 px    16 px    Mulish   600     1.0
   Footer label (h4)          12 px    13 px    Mulish   700     1.0
   Footer body / address      14 px    15 px    Mulish   400     1.55
   ------------------------------------------------------------ */

/* ---------- Design tokens ---------- */
:root {
  --navy-dark: #181D31;   /* hero / footer / nav background */
  --navy:      #123458;   /* serif headings */
  --teal:      #006A67;   /* primary accent */
  --teal-cta:  #2E6E6B;   /* call-to-action panel */
  --ink:       #091A2E;   /* darkest text — titles */
  --body:      #525C6C;   /* body copy */
  --dek:       #3F4A5A;   /* subtitle / dek */
  --muted:     #7A8290;   /* caption / fine print */
  --line:      #E4E4E8;   /* hairline borders */
  --off-white: #FAFAFA;   /* alternating section background */
  --white:     #FFFFFF;

  --serif: "Libre Caslon Text", "Adobe Caslon Pro", Caslon, Georgia, serif;
  --sans:  "Mulish", "Helvetica Neue", Arial, sans-serif;

  /* Type scale — phone → desktop via fluid clamp().
     Title sizes match the WSJ mobile headline scale (~40px on
     iPhone, growing to ~72px on desktop). Each clamp interpolates
     from the phone size at 360px viewport up to the desktop size
     at 1280px viewport. */
  /* One title token used for hero, all headings, and the subtitle.
     Card titles stay smaller for their card-tier role. */
  --fs-title:         clamp(1.375rem, 1.058rem + 1.406vw, 1.75rem); /* 22 → 28 */
  --fs-card-h3:       clamp(1.0625rem, 0.918rem + 0.642vw, 1.25rem);/* 17 → 20 */
  --fs-body:          clamp(1rem,     0.871rem + 0.556vw, 1.125rem);/* 16 → 18 */
  --fs-body-sm:       clamp(0.875rem, 0.745rem + 0.556vw, 1rem);    /* 14 → 16 */
  --fs-eyebrow:       clamp(0.75rem,  0.717rem + 0.139vw, 0.8125rem);/* 12 → 13 */
  --fs-caption:       clamp(0.75rem,  0.717rem + 0.139vw, 0.8125rem);/* 12 → 13 */
  --fs-btn:           clamp(0.8125rem, 0.755rem + 0.278vw, 0.875rem); /* 13 → 14 */
  --fs-footer-label:  clamp(0.75rem,  0.717rem + 0.139vw, 0.8125rem);/* 12 → 13 */
  --fs-footer-body:   clamp(0.875rem, 0.846rem + 0.139vw, 0.9375rem);/* 14 → 15 */
  --fs-nav:           0.6875rem;  /* 11 — nav links (small caps, tracked) */

  /* Line heights — tighter on titles to match WSJ density */
  --lh-display: 1.05;   /* hero + page xl */
  --lh-heading: 1.08;   /* section title lg */
  --lh-snug:    1.15;   /* heading-md / card h3 */
  --lh-lead:    1.55;   /* dek */
  --lh-body:    1.62;   /* body paragraphs */
  --lh-tight:   1.40;   /* captions */

  --ls-label: 0.14em;

  --container: 1200px;
  --nav-h: 76px;
  --radius: 6px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  font-family: var(--sans);
  color: var(--body);
  background: var(--white);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
p { font-size: var(--fs-body); }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section--tint { background: var(--off-white); }

/* ---------- Shared type roles ---------- */
.eyebrow {
  font-family: var(--sans);
  font-weight: 800;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 22px;
}
.heading {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.005em;
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
}
.text-teal { color: var(--teal); }

.lead {
  font-size: var(--fs-body);
  color: var(--body);
  line-height: var(--lh-body);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-btn);  /* 13 → 14 */
  letter-spacing: 0.04em;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn--teal      { background: var(--teal); color: var(--white); }
.btn--teal:hover{ background: #00524F; transform: translateY(-2px); }
.btn--light     { background: var(--white); color: var(--teal); }
.btn--light:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.btn--outline   { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: var(--white); }

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  background: var(--navy-dark);
  display: flex; align-items: center;
}
.nav__inner {
  width: 100%; max-width: var(--container);
  margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { width: 38px; height: 38px; }
.brand__name {
  font-family: var(--sans);
  font-weight: 800;
  color: var(--white);
  font-size: 1.1875rem;      /* 19 */
  line-height: 1.02;
  letter-spacing: 0.005em;
}
.nav__menu { display: flex; align-items: center; gap: 30px; }
.nav__link {
  font-size: var(--fs-nav);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  transition: color .15s ease;
}
.nav__link:hover { color: var(--white); }
.nav__cta { margin-left: 6px; }
.nav__toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 42px; height: 42px; padding: 9px;
  opacity: 0.72;
  transition: opacity .15s ease;
}
.nav__toggle:hover { opacity: 1; }
.nav__toggle span {
  display: block; height: 2px; background: var(--white);
  margin: 5px 0; border-radius: 2px; transition: .25s ease;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 40px) 24px 80px;
  background:
    linear-gradient(rgba(24,29,49,.86), rgba(24,29,49,.90)),
    url("../img/hero-bridge.jpg") center 38% / cover no-repeat;
}
.hero__inner { max-width: 960px; }

/* Scroll indicator — "Scroll" label above a thin vertical line that
   pulses (scaleY + opacity), matching the Angel Custom Homes pattern. */
.hero__scroll {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  transition: color .2s ease;
}
.hero__scroll:hover { color: var(--white); }
.hero__scroll-line {
  display: block;
  width: 1px;
  height: 48px;
  background: linear-gradient(currentColor, transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(0.4); transform-origin: center top; opacity: 0.4; }
  50%      { transform: scaleY(1);   transform-origin: center top; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line { animation: none; }
}
.hero__line {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--white);
  font-size: var(--fs-title);
  line-height: var(--lh-display);
  min-height: 1.3em;
  /* Force a clean GPU layer so iOS Safari fully repaints the
     typewriter between character changes (avoids sub-pixel
     ghost dots from incomplete composite refreshes). */
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}
#typed { display: inline-block; }
.caret { font-weight: 300; }
.caret.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero__sub {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;          /* upright — no cursive */
  color: rgba(255,255,255,.80);
  font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem); /* 18 → 24 */
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin-top: 16px;
}

/* ============================================================
   Intro
   ============================================================ */
.intro { text-align: center; }
.intro__inner { max-width: 880px; margin: 0 auto; }
.intro__statement {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
}

/* ============================================================
   Momentum (image + overlapping card)
   ============================================================ */
.momentum__layout { position: relative; }
.momentum__image {
  width: 82%;
  margin-left: auto;
  border-radius: var(--radius);
  overflow: hidden;
}
.momentum__image img { width: 100%; height: 540px; object-fit: cover; }
.momentum__card {
  position: absolute;
  top: 50%; left: 0;
  transform: translateY(-50%);
  width: 440px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px rgba(18,52,88,.14);
  padding: 48px 44px;
}
.momentum__body p { margin-top: 18px; }
.momentum__dek { margin-top: 16px; }

/* ============================================================
   Our Role (cards grid)
   ============================================================ */
.role__head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.role__head .lead { margin-top: 22px; }
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
.role-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 36px;
  background: var(--white);
  transition: transform .2s ease, box-shadow .2s ease;
}
.role-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(18,52,88,.09); }
.role-card__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 16px;
}
.role-card__top h3 {
  font-family: var(--serif); font-weight: 400; color: var(--ink);
  font-size: var(--fs-card-h3); line-height: var(--lh-snug);
}
.role-card__icon { flex: none; color: #C7CAD0; }
.role-card p { font-size: var(--fs-body-sm); }

/* ============================================================
   Who We Are For
   ============================================================ */
.audience__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  row-gap: 0;
  align-items: start;
}
.audience-list { margin-top: 0; }
.audience__intro { margin: 20px 0 0; }
.audience-list li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 4px 16px;
  padding: 18px 0;
  align-items: baseline;
}
.audience-list li:first-child { padding-top: 36px; }
.audience-list__num {
  grid-column: 1;
  grid-row: 1;
  align-self: baseline;
  color: var(--teal);
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.02em;
}
.audience-list__label {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-card-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
  letter-spacing: 0.005em;
}
.audience-list__desc {
  grid-column: 2;
  grid-row: 2;
  color: var(--body);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}

/* ============================================================
   Values
   ============================================================ */
.values__head { max-width: 760px; margin-bottom: 52px; }
.underline-teal {
  border-bottom: 3px solid var(--teal);
  padding-bottom: 2px;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.value-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  min-height: 340px;
  display: flex; flex-direction: column;
  background: var(--white);
}
.value-card__num { color: var(--teal); font-family: var(--sans); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: 0.02em; }
/* Fixed gap (not auto) so every body starts at the same height; the h3
   min-height reserves two lines so all titles and the description lines
   below them align across every card. */
.value-card__body { margin-top: clamp(56px, 9vw, 120px); }
.value-card__body h3 {
  font-family: var(--serif); font-weight: 400; color: var(--ink);
  font-size: var(--fs-card-h3); line-height: var(--lh-snug);
  min-height: 2.5em; margin-bottom: 10px;
}
.value-card__body p { font-size: var(--fs-body-sm); }
.value-photo {
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 340px;
}
.value-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   CTA section — full-bleed teal closing that flows into the
   navy footer. Single confident centered column with a
   "letterhead" structure (small photo + name + bio at top),
   then the headline, body, two equally-weighted buttons,
   and a trust micro-line at the bottom. Reads as a personal
   letter rather than a multi-column landing-page card —
   identical structure on desktop and phone (no awkward
   reflow), just scaled.
   ============================================================ */
.cta-section {
  background: linear-gradient(160deg, #2E6E6B 0%, #235855 100%);
  padding: clamp(56px, 6.5vw, 96px) 0 clamp(56px, 6.5vw, 96px);
  color: var(--white);
  position: relative;
}
.cta-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}
.cta-section__container {
  max-width: 580px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: left;          /* article-style: everything left-aligned */
}

/* Headline */
.cta-section__title {
  color: var(--white);
  margin: 0 0 18px;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* Body */
.cta-section__body {
  color: rgba(255,255,255,.88);
  line-height: var(--lh-body);
  margin: 0 0 clamp(28px, 3.5vw, 40px);
  text-wrap: pretty;
}

/* NYT-style byline — horizontal block with photo on the left
   and name + role stacked to the right. Reads as a quiet
   editorial attribution rather than a centered "founder" tile. */
.cta-section__byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(28px, 3.5vw, 40px);
}
.cta-section__avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 8px 18px rgba(0,0,0,.20),
    0 2px 5px rgba(0,0,0,.14);
}
.cta-section__byline-text { line-height: 1.3; }
.cta-section__byline-name {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--white);
  margin: 0;
  letter-spacing: 0;
}
.cta-section__byline-role {
  font-family: var(--sans);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  color: rgba(255,255,255,.65);
  margin: 2px 0 0;
  letter-spacing: 0.01em;
}

/* Single primary action — Email pill + "or tap to call" line
   stacked vertically inside an inline-flex column so the
   wrapper sizes to the button's width and the alt line is
   automatically centered under the button. */
.cta-section__actions {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}
.cta-section__btn {
  min-width: 144px;
  padding: 9px 36px;
  font-size: var(--fs-btn);
  box-shadow: 0 12px 26px rgba(0,0,0,.16);
}
.cta-section__btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,.22); }
.cta-section__btn--email {
  background: var(--white);
  color: var(--teal-cta);
}
.cta-section__btn--email:hover { background: var(--white); color: #1c4744; }

/* "or tap to call" supporting link — number is never visible in
   the DOM (just lives inside the tel: href), defeating phone-
   scraping bots while keeping tap-to-dial working for humans. */
.cta-section__alt {
  font-size: var(--fs-body-sm);
  color: rgba(255,255,255,.65);
  margin: 12px 0 0;
  text-align: center;
}
.cta-section__phone-link {
  color: var(--white);
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.35);
  padding-bottom: 1px;
  transition: border-color .15s ease;
}
.cta-section__phone-link:hover { border-color: var(--white); }

/* Trust micro-line */
.cta-section__trust {
  font-size: var(--fs-caption);
  font-weight: 400;
  letter-spacing: .02em;
  color: rgba(255,255,255,.66);
  margin: 0;
}

@media (max-width: 480px) {
  .cta-section__avatar { width: 48px; height: 48px; }
  .cta-section__btn {
    flex: none;
    min-width: 0;
    padding: 5px 32px;        /* slimmer pill */
    font-size: 0.9375rem;
    box-shadow: 0 8px 18px rgba(0,0,0,.14);
  }
}

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--navy-dark); color: rgba(255,255,255,.72); }
.footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 72px 0 56px;
}
.footer .brand__name { font-size: 1.375rem; }   /* 22 */
.footer__col h4 {
  font-size: var(--fs-footer-label); font-weight: 700; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: rgba(255,255,255,.55);
  margin-bottom: 16px;
}
.footer__col p, .footer__col a {
  font-size: var(--fs-footer-body);
  color: rgba(255,255,255,.82);
  line-height: var(--lh-lead);
}
.footer__col a:hover { color: var(--white); }
.footer__social { width: 30px; }
.footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--fs-eyebrow);
}
.footer__links { display: flex; gap: 26px; }
.footer__links a:hover { color: var(--white); }

/* ============================================================
   Page header (sub pages)
   ============================================================ */
.page-header {
  background: var(--navy-dark);
  color: var(--white);
  padding: calc(var(--nav-h) + 70px) 0 70px;
  text-align: center;
}
.page-header h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-title); line-height: var(--lh-display); color: var(--white);
}
.page-header p { color: rgba(255,255,255,.8); font-size: var(--fs-title); margin-top: 14px; }

/* ============================================================
   404 page
   ============================================================ */
.not-found {
  padding: calc(var(--nav-h) + 80px) 0 100px;
  text-align: center;
}
.not-found .container { max-width: 620px; }
.not-found .lead { margin: 18px 0 32px; }
.not-found__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================================
   Contact
   ============================================================ */
.contact { padding-top: clamp(40px, 6vw, 72px); }
.contact .container { max-width: 620px; }
.contact__intro { text-align: left; margin-bottom: 36px; }
.contact__intro p { margin-top: 14px; }
.contact__direct {
  margin-top: 16px !important;
  font-size: var(--fs-body-sm);
  color: var(--muted);
}
.contact__direct a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact__direct a:hover { color: var(--ink); }
.contact__form { display: block; }
.contact__signoff {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-body-sm);
  color: var(--body);
  line-height: 1.55;
}
.contact__signoff-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.contact__signoff strong { color: var(--ink); font-weight: 700; }
.field { margin-bottom: 20px; }
.field label {
  display: block; font-size: var(--fs-eyebrow); font-weight: 700;
  color: var(--navy); margin-bottom: 7px; letter-spacing: 0.02em;
}
.field .req { color: var(--teal); }
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--fs-body-sm);
  color: var(--ink);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--white);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0,106,103,.12);
}
.field textarea { resize: vertical; min-height: 120px; }
.field--check {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  align-items: start;
}
.field--check[hidden] { display: none; }
.field--check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--teal); }
.field--check label {
  font-weight: 400; font-size: var(--fs-eyebrow); letter-spacing: 0;
  text-transform: none; color: var(--muted); line-height: 1.55;
}
.field--check a { color: var(--teal); text-decoration: underline; }
.contact__form .btn { width: 100%; margin-top: 6px; padding: 13px; }
.form-msg {
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  padding: 13px 16px;
  border-radius: 5px;
  margin-bottom: 4px;
}
.form-msg--success { background: #E7F1F0; color: #00524F; border: 1px solid #BFD9D7; }
.form-msg--error   { background: #FBECEC; color: #9A3530; border: 1px solid #EAC7C5; }
.form-msg a { color: inherit; text-decoration: underline; font-weight: 700; }

/* ============================================================
   Legal pages
   ============================================================ */
.legal { max-width: 820px; margin: 0 auto; }
.legal .updated {
  font-size: var(--fs-body-sm); color: var(--muted);
  margin-bottom: 40px; padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.legal h2 {
  font-family: var(--serif); font-weight: 400; color: var(--ink);
  font-size: var(--fs-title); line-height: var(--lh-snug); margin: 40px 0 12px;
}
.legal h3 {
  font-family: var(--sans); font-weight: 800; color: var(--navy);
  font-size: var(--fs-body); letter-spacing: 0.01em; margin: 26px 0 8px;
}
.legal p { margin-bottom: 14px; }
.legal ul { list-style: disc; padding-left: 22px; margin-bottom: 16px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--teal); text-decoration: underline; }

/* ============================================================
   Page Loader — short brand flash. Green full-screen with the
   BL monogram, then the whole panel slides up to reveal the
   page. ~1.1s total.
   ============================================================ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .6s cubic-bezier(.7,0,.3,1);
  will-change: transform;
}
.loader.is-lift { transform: translateY(-100%); }
body.is-loading { overflow: hidden; }

.loader__mark {
  width: clamp(7rem, 22vw, 16rem);
  height: auto;
  opacity: 0;
  transition: opacity .28s ease;
}
.loader.is-show .loader__mark { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .loader, .loader__mark { transition: none; }
}

/* ============================================================
   Reveal-on-scroll animation
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .caret.blink { animation: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .audience__grid { gap: 40px; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 860px) {
  .nav__menu {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    background: var(--navy-dark);
    flex-direction: column; align-items: flex-start;
    gap: 0; padding: 8px 32px 26px;
    border-top: 1px solid rgba(255,255,255,.1);
    transform: translateY(-130%);
    transition: transform .3s ease;
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  .nav__menu.open { transform: translateY(0); }
  .nav__link { width: 100%; padding: 14px 0; }
  /* "Get In Touch" — strip the button styling inside the open
     mobile menu so it reads as just another nav link. */
  .nav__menu .nav__cta {
    background: transparent;
    color: rgba(255,255,255,.86);
    border: none;
    border-radius: 0;
    padding: 14px 0;
    margin: 0;
    width: 100%;
    text-align: left;
    font-family: var(--sans);
    font-size: var(--fs-nav);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .nav__menu .nav__cta:hover {
    background: transparent;
    color: var(--white);
    transform: none;
  }
  .nav__toggle { display: block; }

  .momentum__image { width: 100%; }
  .momentum__image img { height: 340px; }
  .momentum__card {
    position: static; transform: none; width: auto;
    margin: -60px 16px 0; padding: 36px 30px;
  }
  .audience__grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 0;
  }
  .footer__bottom { justify-content: flex-start; }
}

/* Phone layout — match Wix mobile: 2-col card grids, interleaved
   value photos in a zig-zag, smaller headings, tighter padding. */
@media (max-width: 560px) {
  :root {
    --section-y: 40px;
  }
  .container { padding: 0 20px; }
  .nav__inner { padding: 0 20px; }
  .footer__top { grid-template-columns: 1fr; gap: 30px; }

  /* The site-wide clamp() type scale already produces the phone
     sizes (16px body, 12px eyebrow, 18px dek, etc.) at this
     viewport, so no font-size overrides are needed here. */

  /* Section padding (override the big clamp from .section) */
  .section { padding: var(--section-y) 0; }

  /* Nav — smaller brand mark on phones to match Wix */
  .brand__mark { width: 30px; height: 30px; }
  .brand__name { font-size: 1.05rem; line-height: 1.05; }

  /* Hero — full viewport on phones */
  .hero { padding: calc(var(--nav-h) + 24px) 20px 96px; }
  .hero__sub { margin-top: 12px; }
  .hero__scroll { bottom: 1.6rem; gap: 0.55rem; }
  .hero__scroll-line { height: 38px; }

  /* Role cards: keep 2-col on phones (Wix does this) — icon on top,
     heading below, body below. */
  .cards-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .role-card { padding: 20px 16px; }
  .role-card__top {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
  }
  .role-card__icon { width: 28px; height: 28px; }

  /* Audience — 01/02/03/04 numbers visible on the left, label and
     short one-line description stacked to the right. */
  .audience-list li {
    grid-template-columns: 36px 1fr;
    gap: 2px 12px;
    padding: 16px 0;
  }

  /* Values: 2-col with photos interleaved in Wix's mobile zig-zag.
     HTML order is 01, ph1, 02, 03, ph2, 04, 05, ph3 — reorder
     via flex/grid 'order' so phones display:
       01 02
       ph 03
       04 ph
       ph 05    */
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .values-grid > *:nth-child(1) { order: 1; }   /* 01 */
  .values-grid > *:nth-child(3) { order: 2; }   /* 02 */
  .values-grid > *:nth-child(2) { order: 3; }   /* ph1 */
  .values-grid > *:nth-child(4) { order: 4; }   /* 03 */
  .values-grid > *:nth-child(6) { order: 5; }   /* 04 */
  .values-grid > *:nth-child(5) { order: 6; }   /* ph2 */
  .values-grid > *:nth-child(8) { order: 7; }   /* ph3 */
  .values-grid > *:nth-child(7) { order: 8; }   /* 05 */

  /* Photos and cards stretch to match in each row so they appear as
     equal-sized tiles in the 2-col grid. */
  .values-grid { align-items: stretch; }
  .value-card, .value-photo { min-height: 0; height: 100%; }
  .value-card { padding: 18px 14px; }
  .value-card h3 { margin-bottom: 6px; }
  .value-photo { aspect-ratio: auto; }
  .value-photo img { width: 100%; height: 100%; object-fit: cover; }

  /* Momentum: editorial order on phones — eyebrow + heading, image,
     body. Dissolve the desktop card wrapper so its children become
     siblings of the image, then order them. */
  .momentum__layout { display: flex; flex-direction: column; }
  .momentum__card {
    display: contents;
  }
  .momentum__head { order: 1; }
  .momentum__image { order: 2; margin-top: 14px; }
  .momentum__image img { height: 220px; }
  .momentum__body { order: 3; margin-top: 14px; }
  .momentum__body p { margin-top: 0; }
}