/* Shared across every page: design tokens, nav, footer, buttons, base reset.
   Used from page one on every page (not something a second page grows into),
   so it lives here instead of being duplicated 17 times. */

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  background: #ffffff;
  color: #03172F;
  overflow-x: hidden;
}
a { color: #0063a3; text-decoration: none; }
a:hover { color: #445c90; }
img { max-width: 100%; }

/* Content lives in a 1200px column (.page, below). A section that should
   photo-bleed to the true viewport edge -- not stop at that 1200px line --
   gets this class on the <section> itself; its own padding then moves onto
   an inner wrapper (max-width: 1200px; margin: 0 auto) so the text realigns
   with the rest of the page while the background image/gradient goes edge
   to edge. left:50%+translateX(-50%) breaks out correctly regardless of
   whether the viewport is above or below 1200px. */
.full-bleed {
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
}

.placeholder {
  background: repeating-linear-gradient(45deg, #e2e8f0, #e2e8f0 10px, #edf2f7 10px, #edf2f7 20px);
  border: 1px dashed #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ghl-embed-placeholder {
  background: #fff7e6;
  border: 1.5px dashed #d4a017;
  border-radius: 6px;
  padding: 24px;
  text-align: center;
  color: #7a5200;
  font-size: 13px;
  font-weight: 600;
}

.page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* Header / Nav (Nav A: compact utility) */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}
/* The header is a child of .page, so it is only ever 1200px wide. Its white
   background used to stop at that column, which is invisible at the top of the
   page (the body behind it is white too) but not once the sticky bar scrolls
   over a .full-bleed section: that section's colour shows in the gutters either
   side and the nav reads as a white island floating on the hero.

   So the white band and the hairline under it are painted by this pseudo-element
   instead, breaking out to the full viewport the same way .full-bleed does,
   while the logo and the links stay on the 1200px column and keep lining up with
   the copy below them. Moving the <header> out of .page would align the band the
   same way but drop its contents to a 48px viewport inset, off that line. */
header.site-header::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: #ffffff;
  border-bottom: 1px solid #eef1f5;
  z-index: -1;
}
header.site-header .logo img { height: 30px; width: auto; display: block; }
nav.site-nav { display: flex; align-items: center; gap: 30px; }
.nav-item { position: relative; padding: 8px 0; }
.nav-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #03172F;
  cursor: pointer;
}
.nav-link {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #03172F;
}
/* Current page. .nav-trigger as well as .nav-link, because the three section
   parents that most need the marker (Programs, Resources, Events) are dropdown
   triggers, not plain links -- only Home and About had it before. Set on the
   section's own page and on its children, so /program/captains-circle still
   shows Programs as where you are. */
.nav-link.active,
.nav-trigger.active { color: #0063a3; font-weight: 700; }
.nav-caret { transition: transform 0.15s ease; }
.nav-item:hover .nav-caret { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 10px 26px rgba(3,23,47,0.12);
  padding: 8px;
  min-width: 210px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.15s ease;
  z-index: 20;
}
.nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a { display: block; padding: 8px 10px; border-radius: 4px; font-size: 13px; font-weight: 600; color: #03172F; text-transform: none; letter-spacing: 0; }
.nav-dropdown a:hover { background: #f4f7fb; color: #0063a3; }
.nav-dropdown a.compare-link { border-top: 1px solid #eef1f5; margin-top: 6px; padding-top: 10px; color: #0063a3; }
.login-link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

/* Minimal header variant (conversion pages: ebook LP) */
header.site-header.minimal { justify-content: center; padding: 24px 48px; }

/* Buttons */
.btn-primary {
  display: inline-block;
  background: #F3C125;
  color: #03172F;
  font-weight: 700;
  font-size: 15px;
  padding: 15px 30px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.btn-primary:hover { color: #03172F; opacity: 0.92; }

/* Secondary CTA: same footprint as .btn-primary (padding/border together
   equal its 15px/30px so buttons line up when they sit side by side), but
   outlined instead of filled -- for a lower-emphasis action next to or
   below a primary one (e.g. "View More Testimonials"). */
.btn-secondary {
  display: inline-block;
  background: transparent;
  color: #0063a3;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 28px;
  border-radius: 4px;
  border: 2px solid #0063a3;
  cursor: pointer;
}
.btn-secondary:hover { background: #0063a3; color: #ffffff; }

/* Check bullets */
.check-list { display: flex; flex-direction: column; gap: 14px; }
.check-row { display: flex; gap: 12px; align-items: flex-start; }
/* Without this, a row whose text wraps to 2-3 lines squishes the fixed
   18x18 checkmark icon down with it (flex items shrink by default) --
   found on Cruisers' Concierge once a bullet got long enough to wrap. */
.check-row svg { flex-shrink: 0; }
/* Matches the #475569 body-copy color used for the "Who Is It For" paragraph
   right beside this list and the program-intro paragraph above it -- was
   #334155 (noticeably darker than both), which read as a mismatch between
   two side-by-side, equally-important blocks of body copy. */
/* line-height was unset (falling back to the browser default, ~1.2) while
   every paragraph of body copy on the site explicitly sets 1.65 -- a bullet
   that wraps to 2 lines read visibly tighter than the paragraph text right
   next to it. Matched to that same 1.65 convention. */
.check-row span { font-size: 16px; line-height: 1.65; color: #475569; }

/* Footer -- background goes full-bleed like every other section (the same
   left:50%/translateX(-50%) trick as .full-bleed, applied directly here
   since the footer is shared markup rather than a per-page inline style);
   .footer-cols and .footer-bottom each re-establish the 1200px column. */
footer.site-footer {
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #f4f7fb;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 56px 48px 0;
}
.footer-cols .footer-logo img { height: 38px; width: auto; display: block; margin-bottom: 14px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #0063a3;
  margin-bottom: 4px;
}
.footer-col a { font-size: 12px; color: #475569; }
/* .footer-bottom spans the full viewport edge to edge (the divider line
   included); .footer-bottom-inner re-establishes the 1200px content column
   inside it, same pattern as .footer-cols above. */
.footer-bottom {
  border-top: 1px solid #dbe3ec;
}
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 48px 28px;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-copyright { font-size: 11px; color: #94a3b8; }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a { font-size: 11px; color: #64748b; }
.footer-social { display: flex; gap: 14px; }

/* Chat widget */
/* ============================================================
   MOBILE FIRST. Base rules below are the mobile experience;
   the min-width query near the bottom layers on the desktop nav,
   wider gutters and side-by-side layouts. Everything else on the
   site is authored as desktop-first inline styles (page-specific,
   per this repo's own convention), so the max-width block further
   down retrofits mobile behavior onto those with attribute
   selectors matched against the exact inline style text -- safe
   here because every matched string is unique to its purpose
   (verified against the whole site before adding each one).
   ============================================================ */

/* Hamburger toggle: hidden checkbox + label, shown only on mobile */
.nav-toggle-label {
  /* a <button> now: strip the browser's own button look */
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.nav-toggle-label span { width: 100%; height: 2px; background: #03172F; display: block; }

/* Mobile nav: closed by default, opens as a full-width panel under the header */
nav.site-nav {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  padding: 12px 20px 20px;
  border-top: 1px solid #eef1f5;
  box-shadow: 0 12px 24px rgba(3,23,47,0.12);
  z-index: 30;
  /* The header is sticky, so the open panel cannot be scrolled away on a short phone.
     Cap it at the screen below the header and let it scroll inside itself. The first
     line is for browsers that do not know dvh. */
  max-height: calc(100vh - 70px);
  max-height: calc(100dvh - 70px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
header.site-header.nav-open nav.site-nav { display: flex; }
nav.site-nav .nav-item { width: 100%; padding: 6px 0; }
/* Plain links (Home, Events, About, FAQ) had no padding of their own, unlike the
   dropdown-trigger items (Programs, Resources) above -- same 4px container gap
   either way, but only the dropdown items added their own 6px top/bottom on top
   of it, so the gap alternated between ~10px and ~16px depending on which kind of
   item sat on either side. Matching the padding makes every row's spacing equal. */
nav.site-nav .nav-link { width: 100%; padding: 6px 0; }
/* On mobile the dropdown is always expanded under its trigger, not hover-gated */
nav.site-nav .nav-dropdown {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: none;
  padding: 4px 0 4px 14px;
  min-width: 0;
}
nav.site-nav .compare-link { border-top: none; margin-top: 2px; padding-top: 2px; }

/* Log In now lives inside the mobile nav panel (last item in the hamburger
   menu) instead of sitting in the header bar -- that also leaves the
   hamburger as the only other visible flex child in the header row, so
   `justify-content: space-between` pushes it to the right on its own. */
nav.site-nav .login-link {
  width: 100%;
  margin-left: 0;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid #eef1f5;
}

/* Fluid hero/H1 sizing, largest first.
   The 52px home-hero H1 was cut down more than any other size here (-22px,
   the rest are all -6 to -12), which shrank it well below the hierarchy its
   18px hero paragraph needs under it -- on a phone the two read as close to
   the same size. Brought the mobile floor up so the home headline still
   reads as the dominant element it is on desktop. */
h1[style*="font-size: 52px"] { font-size: 36px !important; }
h1[style*="font-size: 38px"] { font-size: 28px !important; }
h1[style*="font-size: 36px"] { font-size: 25px !important; }
h1[style*="font-size: 34px"] { font-size: 24px !important; }
h1[style*="font-size: 32px"] { font-size: 23px !important; }
h1[style*="font-size: 30px"] { font-size: 22px !important; }
h1[style*="font-size: 28px"] { font-size: 21px !important; }
h1[style*="font-size: 26px"] { font-size: 20px !important; }

/* Program-page hero subhead (the 5 program pages, exact string -- verified
   unique to this one role sitewide): 16px on mobile instead of 17px, restored
   at the desktop breakpoint. */
p[style="font-size: 17px; line-height: 1.6; color: #c2d1e9; margin: 0 0 28px;"] {
  font-size: 16px !important;
}

/* Body-copy paragraphs sitewide: 16px reads a bit large on mobile next to
   headings, so drop to 14px below the desktop breakpoint (restored there).
   Matched by attribute prefix, not tag alone, so it only catches a <p> whose
   style opens with this literal value -- verified this leaves out the "1/2/3"
   step-number circles and the qual-q survey question text, which also happen
   to use font-size: 16px but aren't body paragraphs. */
p[style^="font-size: 16px"]:not(.qual-q) {
  font-size: 14px !important;
}

/* .check-row span is body copy too (the "What You Get" bullets, sitting
   right beside "Who Is It For"'s paragraph), but it's a class-based <span>
   rather than an inline-styled <p>, so the rule above never reached it --
   left it alone at 16px while its neighbor paragraph shrank to 14px on
   mobile. Same shrink, same restore, so the two columns keep matching. */
.check-row span {
  font-size: 14px !important;
}

/* Any inline grid (program cards, footer-style multi-column blocks) stacks to
   one column on mobile. Every grid-template-columns value on the site was
   checked before writing this -- only these three exist. */
[style*="grid-template-columns: repeat(2"],
[style*="grid-template-columns: repeat(3"],
[style*="grid-template-columns: repeat(4"],
[style*="grid-template-columns: repeat(5"] {
  grid-template-columns: 1fr !important;
}
.footer-cols { grid-template-columns: 1fr !important; gap: 24px !important; }

/* Events page cards (image + details side by side): the row didn't wrap on
   its own, so under ~900px the details panel got squeezed to nothing and
   overflowed off-screen -- only the image showed, with the title, date, and
   CTA invisible. Stack on mobile; restored to a row at the 900px breakpoint. */
[style*="align-items: stretch; min-height: 260px"] { flex-direction: column !important; }

/* Trust bar (icon + stat triples -- home page and about page): the inline
   flex-wrap version centered fine on desktop, but on mobile each item is
   wider than the viewport, so wrapping broke the centering and left items
   looking randomly offset. A real component instead of relying on the
   generic inline-style matching above: stack and center on mobile, restore
   the wrapping row at the desktop breakpoint. */
.trust-bar { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 1200px; margin: 0 auto; padding: 28px 20px; }
/* Mobile: number/label split with real size contrast (was one flat 18px line)
   plus a divider between rows, so three stacked stats read as a proper stat
   block instead of a plain list (Carmen, 2026-09-24 -- "flat and boring" on
   mobile). Desktop keeps its existing inline row treatment below. */
.trust-bar-item { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 320px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.28); }
.trust-bar-item:last-child { border-bottom: none; padding-bottom: 0; }
.trust-bar-text { display: flex; flex-direction: column; gap: 2px; }
.trust-bar-number { font-weight: 900; font-size: 22px; line-height: 1.15; color: #ffffff; }
.trust-bar-label { font-weight: 600; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; color: #c2d1e9; }

/* Program cards (home page "Our Programs"): once the grid above stacks them to
   one column, each card is full viewport width, and the original vertical
   layout (small icon, then everything stacked below it) reads as an
   oversized, sparse card. Lay the icon and text side by side on mobile
   instead; restore the original vertical/stacked card at the desktop
   breakpoint. */
.program-card { flex-direction: row !important; align-items: flex-start !important; gap: 14px !important; padding: 16px !important; }
.program-card-icon { width: 56px !important; height: 56px !important; border-radius: 50% !important; flex-shrink: 0; }
.program-card-body { gap: 6px !important; }

/* Free-resources teaser cards (home page "Resources to Get You Started" and
   compass-call.html's matching panel -- verified unique gradient background,
   used nowhere else): each card's image is width:100%; aspect-ratio:1/1, so
   once the grid above stacks to one column that image becomes the full
   viewport wide and just as tall -- four cards stacked turned this into most
   of a phone screen's worth of scrolling for one section.
   The card's 4 children (image, title, description, link) are flat siblings,
   not an icon plus one text wrapper like .program-card above, so a plain row
   would lay all 4 out side by side instead of "thumbnail beside a stacked
   text block." Grid instead: the thumbnail is explicitly placed in column 1
   spanning all 3 rows, so auto-placement fills the title/description/link
   into column 2, one per row. Restored to the original stacked full-width
   square image at the desktop breakpoint. */
.resource-tile {
  display: grid !important;
  grid-template-columns: 64px 1fr !important;
  gap: 4px 14px !important;
}
.resource-tile > img,
.resource-tile > div[style*="aspect-ratio: 1 / 1"] {
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  width: 64px !important;
  height: 64px !important;
  align-self: start;
}

/* Resource tiles (home "Resources to Get You Started", /compass-call).

   The fill used to be a #4a6296 -> #32456d gradient sitting on a #2f4270 band:
   two mid-slate blues a few steps apart, so the cards dissolved into the
   background. Both are off-palette. Now that the band is Deep blue -> Ocean,
   the card is dark navy at 30% -- the guide allows navy for accents and card
   fills, just not as a large section background -- which reads as a distinctly
   darker panel against Ocean and keeps white body copy legible on top.

   This was an [style*="..."] substring selector matching the inline gradient.
   It is a class now, so restyling a tile cannot silently drop its layout. */
.resource-tile {
  background: rgba(3, 23, 47, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Home "Our Programs": 5 cards is one too many for a single row at 1200px --
   each card drops below 210px wide and the longer descriptions (Cruisers'
   Concierge, Remote From a Boat) run 5 lines against 2-line neighbors. Split
   into a 3-up row plus a centered 2-up row instead, both at the same card
   width. Mobile stays a single column like every other grid on the site. */
.programs-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.programs-grid--secondary { margin-top: 20px; }

/* A grid item spanning multiple columns (testimonials.html's Google Review
   card) forces the grid to keep that many column tracks even after the
   template above collapses to 1fr, since the span request still needs
   satisfying -- so it has to be dropped to a single column too. */
[style*="grid-column: span"] {
  grid-column: auto !important;
}

/* Side-by-side sections (hero + photo, two-column body copy) stack on mobile.
   Each selector below is the exact, verified-unique inline style prefix for
   one real section, not a guess. */
[style*="padding: 56px 48px 64px; display: flex; align-items: flex-start; gap: 56px;"],
[style*="padding: 48px 48px 88px; display: flex; gap: 56px;"],
[style*="padding: 64px 48px; display: flex; align-items: flex-start; gap: 64px;"] {
  flex-direction: column !important;
}

/* Every section on the site uses 48px for its left/right padding (verified: no
   other inline property on the site happens to use the literal value 48px), so
   this one rule safely shrinks every section's side gutters on mobile without
   touching each page by hand. */
[style*="padding: "][style*="48px"] {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Flex-split hero sections (the ones stacked above) also give each column a
   fixed min-width (300-420px, verified: these 5 values are used nowhere else
   inline sitewide) so the desktop layout doesn't collapse. Once stacked to a
   single column on mobile, that min-width is wider than the viewport and
   forces the whole page to scroll horizontally -- so drop it below 900px and
   restore it in the desktop query. */
[style*="min-width: 300px"],
[style*="min-width: 320px"],
[style*="min-width: 340px"],
[style*="min-width: 380px"],
[style*="min-width: 420px"] {
  min-width: 0 !important;
}

/* Percentage-based max-widths (program-page hero text columns at 68%, the
   compare-page intro paragraph at 75%) are sized to sit alongside a photo or
   read as a comfortable line length inside a 1200px desktop container.
   Nothing undid them below 900px, so on mobile these were the "stray"
   narrow single-column blocks -- a 68%-wide headline floating in the middle
   of a 375px screen instead of using the full width. Drop them below 900px
   and restore in the desktop query, same pattern as the min-widths above. */
[style*="max-width: 68%; min-width: 320px;"],
[style*="max-width: 75%"] {
  max-width: none !important;
}

/* Program page "How It Works" 3-step row (Get Set to Sail / Captain's Circle /
   Cruisers' Concierge): stacks to a column on mobile, connector lines hidden
   since there's nothing to connect vertically. Restored to a row at the
   desktop breakpoint below. */
.program-steps { flex-direction: column !important; align-items: stretch !important; gap: 24px; }
.program-steps .step-line { display: none !important; }

/* THE BLUEWATER SUMMIT (home page). Mobile-first: one column, video on top.
   The desktop two-column split lives in the 900px query below.

   Previously this grid was targeted by an [style*=...] substring selector
   matching its inline style. That worked, but it meant the desktop layout
   silently reverted the moment anyone reordered a declaration in that inline
   style -- so it is a real class now. */
.summit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 24px;
  position: relative;
}

/* 16/9 rather than a fixed height: the clip is shot horizontal, and the old
   height: 340px only matched the column width at one viewport size. Everywhere
   else Vimeo letterboxed it with black bars. */
.summit-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(3, 23, 47, 0.38);
  outline: 1px solid rgba(255, 255, 255, 0.14);
  outline-offset: -1px;
}
.summit-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; }

/* Soft-edged washes over the Summit gradient. Three overlapping radials in
   ratified palette colours (Mid blue #6598C8, Pale blue #c2d1e9, Deep blue
   #445c90) so the band has depth instead of reading as one flat fill.

   Washes rather than a drawn wave on purpose: the design system's visual
   standard calls for "soft-edged washes for backgrounds, dividers, and accent
   textures -- evokes water without being a literal wave graphic."

   pointer-events: none on all three, so none of them can swallow a click on
   the video or the CTA. */
.summit-wash {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(8px);
}
.summit-wash--mid {
  top: -28%;
  left: -12%;
  width: 62%;
  height: 130%;
  background: radial-gradient(closest-side, rgba(101, 152, 200, 0.55), rgba(101, 152, 200, 0));
}
.summit-wash--pale {
  top: -46%;
  right: -10%;
  width: 52%;
  height: 120%;
  background: radial-gradient(closest-side, rgba(194, 209, 233, 0.30), rgba(194, 209, 233, 0));
}
.summit-wash--deep {
  bottom: -60%;
  left: 24%;
  width: 66%;
  height: 120%;
  background: radial-gradient(closest-side, rgba(68, 92, 144, 0.75), rgba(68, 92, 144, 0));
}

.summit-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.summit-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13px;
  font-weight: 600;
  color: #e8eff9;
  white-space: nowrap;
}

/* A fixed 3-up grid rather than a wrapping flex row: at 375px the flex version
   broke 2 + 1, which left the third stat stranded on its own line. */
.summit-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 22px; }
.summit-stat { display: flex; flex-direction: column; gap: 2px; }
.summit-stat-num { font-size: 26px; font-weight: 900; line-height: 1; color: #F3C125; }
.summit-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c2d1e9;
}

/* ============================================================
   PARENT-PAGE HEROES (/resources, /blog, /events)

   These were a centred headline on a flat band, identical on all three,
   which is what made them read as filler. .split-hero replaces that: copy
   one side, a real image the other (/resources, /blog). /events uses the
   same class as a single centred column, with no media beside it.

   Mobile-first: it stacks to one column here, and the 900px query below
   lays the two sides out side by side. Classes rather than inline styles,
   so a later copy edit cannot silently drop the layout.
   ============================================================ */
/* NO LONGER USED IN ANY PAGE as of 2026-09-25 -- hero C replaced this on all
   eight parent pages. Kept, not deleted, while the hero C imagery is still a
   placeholder: if the collage direction is abandoned this is what the pages
   revert to. Delete it once hero C is final with the real per-page collages. */
.split-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
  padding: 56px 24px 64px;
  position: relative;
}
.split-hero-copy { text-align: left; }
.split-hero-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F3C125;
  margin-bottom: 16px;
}
.split-hero h1 {
  font-size: 32px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.12;
  margin: 0 0 14px;
  color: #ffffff;
  text-wrap: balance;
}
.split-hero-lede {
  font-size: 16px;
  line-height: 1.6;
  color: #c2d1e9;
  max-width: 52ch;
  margin: 0 0 26px;
}
/* The image sits in a frame with its own shadow so it reads as an object on
   the band rather than a rectangle cut out of it. */
.split-hero-media {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(3, 23, 47, 0.38);
  outline: 1px solid rgba(255, 255, 255, 0.16);
  outline-offset: -1px;
  display: block;
}
.split-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; border: none; border-radius: 0; }
.split-hero-media--tall { aspect-ratio: 4 / 5; max-width: 340px; }
.split-hero-media--wide { aspect-ratio: 1 / 1; }

/* Press strip under the home trust bar. */
.proof-strip { background: #ffffff; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 44px 20px 48px; }
.proof-label { margin: 6px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #0063a3; }
.proof-marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.proof-track { display: flex; width: max-content; animation: proof-scroll 40s linear infinite; }
.proof-track:hover { animation-play-state: paused; }
.proof-logos { display: flex; align-items: center; flex-shrink: 0; gap: 56px; padding-right: 56px; }
@keyframes proof-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .proof-marquee { -webkit-mask-image: none; mask-image: none; }
  .proof-track { animation: none; width: auto; justify-content: center; }
  .proof-logos { flex-wrap: wrap; justify-content: center; gap: 18px 32px; padding-right: 0; max-width: 1100px; }
  .proof-logos[aria-hidden="true"] { display: none; }
}
.proof-logos img { height: 30px; width: auto; max-width: 140px; object-fit: contain; }
@media (min-width: 900px) { .proof-logos img { height: 36px; } }

/* Trust bar on tablet and small laptop (600-1199px): one squished line rather than a stacked column;
   phones (<600px) keep the stacked tiles above, wide desktop (1200px+) the roomier row below. */
@media (min-width: 600px) and (max-width: 1199px) {
  .trust-bar { flex-direction: row; justify-content: center; flex-wrap: nowrap; gap: 20px; padding: 24px 20px; }
  .trust-bar-item { width: auto; max-width: none; border-bottom: none; padding-bottom: 0; gap: 8px; }
  .trust-bar-item svg { width: 20px; height: 20px; flex-shrink: 0; }
  .trust-bar-text { flex-direction: column; gap: 0; }
  .trust-bar-number { font-size: 16px; font-weight: 800; line-height: 1.15; color: #ffffff; }
  .trust-bar-label { font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; color: #c2d1e9; }
}

/* Desktop: the original flat single-line look; only phones get the stacked stat tiles. */
@media (min-width: 1200px) {
  .trust-bar { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 56px; padding: 30px 48px; }
  /* Desktop keeps the original flat single-line look -- only mobile gets the
     stacked number/label stat-tile treatment above. */
  .trust-bar-item { width: auto; max-width: none; border-bottom: none; padding-bottom: 0; }
  .trust-bar-text { flex-direction: row; gap: 4px; }
  .trust-bar-number, .trust-bar-label { font-size: 18px; font-weight: 700; line-height: normal; letter-spacing: normal; text-transform: none; color: #ffffff; }
}

@media (min-width: 900px) {
  .split-hero { grid-template-columns: 1.05fr 0.95fr; gap: 56px; padding: 76px 48px 88px; }
  .split-hero h1 { font-size: 38px; }
  .split-hero-media--tall { justify-self: end; }
  .program-steps { flex-direction: row !important; align-items: flex-start !important; gap: 0 !important; }
  .program-steps .step-line { display: block !important; }
  [style*="min-width: 300px"] { min-width: 300px !important; }
  [style*="min-width: 320px"] { min-width: 320px !important; }
  [style*="min-width: 340px"] { min-width: 340px !important; }
  [style*="min-width: 380px"] { min-width: 380px !important; }
  [style*="min-width: 420px"] { min-width: 420px !important; }
  [style*="max-width: 68%; min-width: 320px;"] { max-width: 68% !important; }
  [style*="max-width: 75%"] { max-width: 75% !important; }
  [style*="grid-column: span"] { grid-column: span 3 !important; }
  [style*="grid-template-columns: repeat(2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: repeat(5"] { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .summit-grid { grid-template-columns: 1.15fr 1fr; gap: 48px; padding: 76px 48px; }
  .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  [style*="align-items: stretch; min-height: 260px"] { flex-direction: row !important; }
  /* The blog card's own breakpoint lives with the rest of its rules further
     down, in a max-width query -- this block sits above them in the file, so
     anything put here loses to them on source order at every width. */
  .program-card { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; padding: 24px 18px !important; }
  .program-card-icon { width: 64px !important; height: 64px !important; }
  .program-card-body { gap: 10px !important; }
  .resource-tile {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .resource-tile > img,
  .resource-tile > div[style*="aspect-ratio: 1 / 1"] {
    width: 100% !important;
    height: auto !important;
    align-self: auto;
  }
  .programs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  /* .programs-grid--secondary also carries the base .programs-grid class, so
     without this it inherits the 3-column template above -- dividing a
     container sized for 2 cards into 3 tracks, which made both cards
     visibly narrower than the row above. Override to 2 columns so the per-
     card width matches exactly. */
  .programs-grid--secondary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: calc((200% - 20px) / 3); margin: 20px auto 0 !important; }
  /* Restore to a row at desktop -- these were stacking at every width, since
     nothing undid the mobile-first "stack on mobile" rule above 900px.
     Found while rebuilding the ebook page; also fixes contact.html's
     "Other ways to reach us" panel, which had the same gap. */
  [style*="padding: 56px 48px 64px; display: flex; align-items: flex-start; gap: 56px;"],
  [style*="padding: 48px 48px 88px; display: flex; gap: 56px;"],
  [style*="padding: 64px 48px; display: flex; align-items: flex-start; gap: 64px;"] {
    flex-direction: row !important;
  }

  header.site-header { padding: 16px 48px; }
  header.site-header .logo img { height: 36px; }
  .nav-toggle-label { display: none; }
  /* "Home" is redundant on desktop (the logo already links home); keep it in the
     mobile hamburger panel but hide it in the desktop nav row. Targets only the
     Home link, never the logo (which is .logo, not .nav-link). */
  nav.site-nav .nav-link[href="/"] { display: none; }
  /* Restore the real 48px side gutters on desktop. The mobile-first rule above
     (padding-left/right -> 20px on every inline-padded section) has no desktop
     counterpart, which left every full-bleed section's content at a 20px inset
     while the header sits at 48px -- so the logo read as misaligned with the
     copy below it. Put both back on the same 48px line at the desktop breakpoint. */
  [style*="padding: "][style*="48px"] {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  /* flex: 1 lets the nav fill the space beside the logo; centering the row
     (instead of space-between) keeps the links grouped together in the middle
     rather than stretched from the logo across to the right edge. */
  nav.site-nav {
    display: flex !important;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 22px;
    position: static;
    padding: 0;
    border: none;
    box-shadow: none;
  }
  nav.site-nav .nav-item { width: auto; padding: 8px 0; }
  /* The mobile-first rule above (nav.site-nav .nav-link { width: 100% }) has no
     desktop counterpart, unlike .nav-item's reset right above -- so a bare
     .nav-link with no .nav-item wrapper (Events, About, FAQ) kept width: 100%
     at desktop. Flex-basis then reads that as "100% of the row," and shrinking
     five such items down to fit spread them unevenly across the whole bar
     instead of sitting compactly together. */
  nav.site-nav .nav-link { width: auto; padding: 8px 0; }
  nav.site-nav .nav-dropdown {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    box-shadow: 0 10px 26px rgba(3,23,47,0.12);
    border: 1px solid #e2e8f0;
    padding: 8px;
    min-width: 210px;
  }
  .nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
  nav.site-nav .compare-link { border-top: 1px solid #eef1f5; margin-top: 6px; padding-top: 10px; }
  nav.site-nav .login-link {
    /* Taken out of the nav's own flex row entirely (rather than just
       margin-left: auto) -- otherwise it shares that row with the other
       links, and centering the row also drags the links themselves off
       toward the left instead of the true center of the header. */
    position: absolute;
    right: 48px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    margin-left: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  /* H1s, another +10px on top of whatever size each page already sets
     (round 3 of feedback). Same exact-value-match technique as the mobile
     fluid rules above, just bumping up instead of down. */
  h1[style*="font-size: 52px"] { font-size: 48px !important; }
  h1[style*="font-size: 44px"] { font-size: 54px !important; }
  h1[style*="font-size: 38px"] { font-size: 48px !important; }
  h1[style*="font-size: 36px"] { font-size: 46px !important; }
  h1[style*="font-size: 34px"] { font-size: 44px !important; }
  h1[style*="font-size: 32px"] { font-size: 42px !important; }
  h1[style*="font-size: 30px"] { font-size: 40px !important; }
  h1[style*="font-size: 28px"] { font-size: 38px !important; }
  h1[style*="font-size: 26px"] { font-size: 36px !important; }

  /* Restore the program-page hero subhead and general body-copy paragraphs
     to their desktop sizes -- see the mobile-shrink rules above for why
     these are singled out. */
  p[style="font-size: 17px; line-height: 1.6; color: #c2d1e9; margin: 0 0 28px;"] {
    font-size: 17px !important;
  }
  p[style^="font-size: 16px"]:not(.qual-q) {
    font-size: 16px !important;
  }
  .check-row span {
    font-size: 16px !important;
  }
}

/* Native qualifier/survey steps (2026-09-21): one question shown at a time, native
   buttons instead of a GHL survey embed. Reused for both the pre-calendar qualifier
   (no contact fields -- see the forms-ghl-api-scope doc, AI OS repo) and the
   post-booking survey. Answering advances via JS toggling [hidden]; no framework. */
.qual-card[hidden] { display: none; }
.qual-card { max-width: 640px; margin: 0 auto; }
.qual-q { font-size: 18px; font-weight: 800; color: #03172F; text-align: center; margin: 0 0 22px; }
.qual-options { display: flex; flex-direction: column; gap: 10px; }
.qual-opt {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #03172F;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  padding: 14px 18px;
  text-align: left;
  cursor: pointer;
}
.qual-opt:hover { border-color: #0063a3; background: #f4f7fb; }
.qual-opt.qual-opt--selected { border-color: #0063a3; background: #e8f1f9; }

/* Free-text answer (the Nautical Nomad survey's "magic wand" question, the one
   question in either set that is not multiple choice). Matches .qual-opt's
   resting state so the card does not change character on the last step. */
.qual-text {
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: #03172F;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  padding: 14px 18px;
  width: 100%;
  resize: vertical;
  box-sizing: border-box;
}
.qual-text:focus { outline: none; border-color: #0063a3; }
.qual-text::placeholder { color: #94a3b8; }
.qual-progress { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; margin: 0 0 14px; }
.qual-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 0; }
.qual-nav-back {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  background: none;
  border: none;
  padding: 8px 4px;
  cursor: pointer;
}
.qual-nav-back:hover { color: #0063a3; }
.qual-nav-next {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background: #0063a3;
  border: none;
  border-radius: 6px;
  padding: 12px 26px;
  margin-left: auto;
  cursor: pointer;
}
.qual-nav-next:hover { opacity: 0.92; }
.qual-nav-next:disabled { background: #cbd5e1; cursor: not-allowed; }

/* Email capture pill (2026-09-24, per Carmen's reference: MotherDuck's hero) --
   input + round submit button as one unit, for use on a dark hero background. */
/* 15% smaller than the original 380/8/15/38 sizing (Carmen, 2026-09-28). */
.email-capture-row { display: flex; align-items: center; background: #ffffff; border-radius: 999px; padding: 5px 5px 5px 17px; max-width: 323px; margin: 0 auto; box-shadow: 0 12px 28px rgba(3,23,47,0.25); }
.email-capture-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 13px; padding: 7px 0; color: #03172F; }
.email-capture-input::placeholder { color: #94a3b8; }
.email-capture-btn { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: #F3C125; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.email-capture-btn:hover { opacity: 0.9; }
.email-capture-caption { font-size: 13px; color: #c2d1e9; margin: 14px 0 0; }

/* ============================================================
   HERO C -- the parent-page hero (Carmen, 2026-09-25)

   Copy on navy one side, imagery bleeding to the screen edge the other.
   Replaces two things: the flat centred band (/program, /about, /faq,
   /events, /testimonials) and the framed image card that sat on it
   (/blog, /resources). The frame with its drop shadow is what read as
   stuck on rather than designed in.

   Navy, not the old #445c90 -> #0063a3 ocean gradient. The five program
   detail heroes already scrim their photo with #03172F, so after this the
   whole site is one blue instead of two.

   Mobile-first: copy first so the headline is still the top of the page,
   then the image as a full-width band under it. Stacked at full height a
   square image is 333px on a phone, which is most of the screen for a
   decorative element.

   Goes on the section together with .full-bleed:
     <section class="full-bleed hero-c">
   ============================================================ */
.hero-c {
  display: grid;
  grid-template-columns: 1fr;
  background: linear-gradient(135deg, #03172F 0%, #0b2f52 100%);
}
.hero-c-copy {
  padding: 40px 20px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-c-eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F3C125;
  margin: 0 0 14px;
}
.hero-c h1 {
  font-size: 26px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.12;
  margin: 0 0 14px;
  color: #ffffff;
  text-wrap: balance;
}
.hero-c-lede { font-size: 15px; line-height: 1.6; color: #c2d1e9; max-width: 52ch; margin: 0 0 22px; }
/* No CTA under it: the lede carries the bottom spacing, otherwise the block
   floats above a button's worth of empty air. */
.hero-c-copy > .hero-c-lede:last-child { margin-bottom: 0; }
.hero-c-lede a { color: #ffffff; text-decoration: underline; }
/* .email-capture-row carries margin: 0 auto from when it sat in a centred hero.
   In hero C it is the CTA, and every other page's CTA hangs off the left edge of
   the copy, so it lines up with the headline instead of floating mid-column. */
.hero-c .email-capture-row { margin-left: 0; margin-right: 0; }
/* flex-start, or the button stretches the width of the column */
.hero-c-cta { align-self: flex-start; cursor: pointer; }
/* position: relative, because the collage inside is absolutely positioned */
.hero-c-media { position: relative; height: 190px; overflow: hidden; }
/* The collage is nine photos in a grid, not one flattened image. That is what
   lets the mix differ per page and one photo be swapped without re-exporting
   anything, and it stays sharp at any size instead of a single JPG being
   upscaled across half a hero. No tint: the photos go in at full colour, and
   if one is ever wanted it belongs here as a rule, not burned into the files. */
.hero-c-collage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6px;
  /* The gutters are white, not navy -- that is what made the old flattened
     collage read as a mosaic of photographs rather than a block of them. */
  background: #ffffff;
  /* ABSOLUTE, and this is the whole trick. The collage has to be exactly as
     tall as the copy column beside it, and it must not be what decides that
     height. In flow it always ends up deciding: height: 100% against an auto
     parent resolves to auto, the photos size themselves, and the hero ran to
     1624px on /program. aspect-ratio instead of height fixed that but made the
     block a shape of its own, which then did not match the copy -- short of it
     at 960px, leaving navy under the photos.

     Out of flow it contributes nothing to the row, so the row is sized by the
     copy alone and .hero-c-media stretches to it. inset: 0 then fills exactly
     that, at any width, on every page. */
  position: absolute;
  inset: 0;
}
.hero-c-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  border-radius: 0;
  /* Without these the images' automatic minimum size wins over the container's
     aspect-ratio and the grid grows to the full intrinsic height of the photos
     -- 1193px instead of 456 on /program. minmax(0, 1fr) on the tracks is the
     other half of the same fix. */
  min-width: 0;
  min-height: 0;
}
/* Below 900px: four tiles, not nine, but still mixed sizes -- one big 2x2, two
   singles stacked beside it and a wide 2x1 under them. Nine tiles in a 190px
   band is gravel; four at this scale still reads as photographs. */
@media (max-width: 899px) {
  .hero-c-collage {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .hero-c-collage img:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
  .hero-c-collage img:nth-child(2) { grid-column: 3;     grid-row: 1; }
  .hero-c-collage img:nth-child(3) { grid-column: 4;     grid-row: 1; }
  .hero-c-collage img:nth-child(4) { grid-column: 3 / 5; grid-row: 2; }
  .hero-c-collage img:nth-child(n + 5) { display: none; }
}

@media (min-width: 900px) {
  /* min-height evens the eight .hero-c pages with each other (Carmen,
     2026-09-25); they ran 339 to 470 purely on copy length. Scoped to this
     breakpoint on purpose: below 900px the collage stacks under the copy,
     and a floor set for the side-by-side layout would only add dead space
     on a phone. */
  .hero-c { grid-template-columns: 1.05fr 0.95fr; min-height: 470px; }
  /* LEFT: the copy starts on the same vertical line as the logo above it and the
     page content below it, not 48px from the viewport edge. The section is
     full-bleed (100vw) while everything else sits in the 1200px column, so
     without this the hero copy hangs left of every other element on the page.
     max() keeps the plain 48px gutter once the viewport is narrower than that
     column.

     RIGHT: 48px, and it has to be said. It was 0, which is invisible at 1280
     where the column is wide enough that the text wraps well short of the edge,
     but at 900-1000 the column is only ~460px and the headline ran flush into
     the collage with no gap at all (Carmen, 2026-09-25, on a tablet). */
  .hero-c-copy {
    padding: 76px 48px 76px max(48px, calc((100vw - 1200px) / 2 + 48px));
  }
  /* 36px until there is room for 42: at the bottom of this breakpoint the copy
     column is ~360px of usable width, and 42px uppercase in that space is four
     ragged lines. */
  .hero-c h1 { font-size: 36px; }
  .hero-c-lede { font-size: 16px; margin-bottom: 26px; }
  .hero-c-media { height: auto; min-height: 0; overflow: hidden; }
  /* MOSAIC. Four columns by four rows, nine tiles with mixed spans, every one
     of the sixteen cells filled -- two big 2x2 blocks, a tall 1x2, three wide
     2x1 bands and three singles. Explicit placement rather than auto-flow:
     dense packing reorders tiles as the photo list changes, and the point of
     this is that it looks composed. */
  .hero-c-collage {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .hero-c-collage img:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
  .hero-c-collage img:nth-child(2) { grid-column: 3;     grid-row: 1; }
  .hero-c-collage img:nth-child(3) { grid-column: 4;     grid-row: 1; }
  .hero-c-collage img:nth-child(4) { grid-column: 3 / 5; grid-row: 2; }
  .hero-c-collage img:nth-child(5) { grid-column: 1;     grid-row: 3 / 5; }
  .hero-c-collage img:nth-child(6) { grid-column: 2;     grid-row: 3; }
  .hero-c-collage img:nth-child(7) { grid-column: 2;     grid-row: 4; }
  .hero-c-collage img:nth-child(8) { grid-column: 3 / 5; grid-row: 3; }
  .hero-c-collage img:nth-child(9) { grid-column: 3 / 5; grid-row: 4; }
}

@media (min-width: 1200px) {
  .hero-c h1 { font-size: 42px; }
}

/* Blog card redesign draft (2026-09-24, per Carmen) -- image-led card instead
   of a bare bordered text box.

   NOT mobile-first, unlike the nav and the heroes: this component is defined
   below the file's only min-width query, so a rule in that query loses to
   these on source order whatever the viewport. The base is the desktop shape
   and the max-width query at the end of the block does the phone. */
.blog-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.blog-card:hover { box-shadow: 0 12px 28px rgba(3,23,47,0.1); transform: translateY(-2px); }
/* Square, because the blog art is 800x800 with the post's headline set into
   the image. A fixed 180px-tall box cropped that headline to whichever band
   happened to fall in the middle -- at 780px wide the stacked "Read Next"
   card showed 28% of the image and cut the first and last lines of the words
   off. aspect-ratio matches the box to the source, so nothing is cut. Same
   pattern the resource tiles and .split-hero-media--wide already use for the
   same artwork. A non-square image stays safe: object-fit still covers. */
.blog-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  align-self: flex-start;
  flex-shrink: 0;
  min-width: 0;
}
/* min-width: 0 on the text column so a long unbroken title cannot push a
   thumbnail out of a row */
.blog-card-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.blog-card-title { font-size: 17px; font-weight: 700; color: #03172F; line-height: 1.4; }
.blog-card-excerpt { font-size: 14px; line-height: 1.6; color: #64748b; flex: 1; }
.blog-card-link { font-size: 13px; font-weight: 700; color: #0063a3; margin-top: 4px; }

/* "Read Next" variant: a row with the image as a square thumbnail at every
   width, because it is a footnote at the end of a post rather than the thing
   the page is for. align-self stays flex-start, never stretch: stretch gives
   the image a definite height taken from the text column, which overrides
   aspect-ratio and crops the square from the sides as soon as the title wraps
   to a third line. */
.blog-card--row { max-width: 640px; flex-direction: row; }
.blog-card--row .blog-card-img { width: 200px; }

/* Phone and small tablet: the index tiles take the "Read Next" row shape too.
   Stacked, the square image is 333px tall at 375 and 638 at 780 -- three
   quarters of the screen spent on one card of a two-card list (Carmen,
   2026-09-25). .blog-card--row is repeated here because .blog-card--row
   .blog-card-img above outranks a bare .blog-card-img on specificity, media
   query or not.

   The image runs the full height of the card rather than sitting in the top
   corner with white under it -- but it is the copy that was cut to fit the
   square, not the square stretched to fit the copy. Stretching it is the
   obvious move and it does not work: align-self: stretch plus aspect-ratio
   sizes the width from the card's height, the card's height comes from the
   text, and the text's height comes from the width left over, so the square
   ran away to 333px and squeezed the text column to nothing.

   So the thumbnail is a fixed 150px and the clamps keep the copy inside that:
   three lines of title, one of excerpt. The clamp is display-only, so the whole
   excerpt is still in the page for search and for screen readers.

   LINE-HEIGHT IS LOAD-BEARING HERE, it is not a taste setting. -webkit-line-clamp
   clips at the box edge, and at the desktop 1.4/1.6 the last visible line lost the
   tails of its descenders -- "Master Before You..." came out with the y sliced off
   (Carmen, 2026-09-25). Montserrat's glyphs reach below the line box those values
   produce. 1.6 and 1.75 give them room. Anything tighter starts cutting letters
   again, so check a clamped line ending in y, g or p before lowering them. The
   150px thumbnail and the 12px padding are sized to what the copy then occupies,
   so the image still runs the height of the card. */
@media (max-width: 899px) {
  .blog-card { flex-direction: row; }
  .blog-card-img,
  .blog-card--row .blog-card-img { width: 150px; }
  .blog-card-body { padding: 12px 16px; gap: 6px; }
  .blog-card-title { font-size: 15px; line-height: 1.6; -webkit-line-clamp: 3; }
  .blog-card-excerpt { line-height: 1.75; -webkit-line-clamp: 1; }
  .blog-card-title,
  .blog-card-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Native form fields (contact page, ebook page): plain inputs, same visual
   language as .qual-opt above (border, radius, focus color) rather than a
   second design system.

   Wrapped in .native-form-card so it carries the same white/bordered card
   treatment as everything else adjacent to it (e.g. contact.html's "Other Ways
   to Reach Us" box) -- bare fields floating next to a real card read as
   unfinished by comparison, even once the field-width bug below is fixed. */
.native-form-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 28px;
}
.native-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.native-field label { font-size: 13px; font-weight: 700; color: #03172F; }
/* A tick-box with its wording beside it, e.g. SMS consent under a phone field. */
.consent-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.5; color: #64748b; margin: 0 0 16px; cursor: pointer; }
.consent-check input { margin-top: 2px; flex-shrink: 0; }
/* Phone box with its country-code drop-down (validate.js, mountPhoneCountry). */
.phone-row { display: flex; gap: 8px; }
.phone-row select.phone-country { width: auto; flex: 0 0 auto; padding-left: 10px; padding-right: 6px; }
.phone-row input { flex: 1 1 auto; min-width: 0; }
.native-field input,
.native-field select,
.native-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: #03172F;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  padding: 11px 14px;
  transition: border-color 0.15s ease;
}
.native-field input:focus,
.native-field select:focus,
.native-field textarea:focus { outline: none; border-color: #0063a3; }
.native-field textarea { resize: vertical; min-height: 100px; }
.native-radio-row { display: flex; gap: 10px; flex-wrap: wrap; }
.native-radio-row label {
  font-size: 13px;
  font-weight: 600;
  color: #03172F;
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  padding: 9px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.native-radio-row input[type="radio"] { accent-color: #0063a3; }
.native-radio-row input[type="radio"]:checked + span { color: #0063a3; }
/* Single opt-in checkbox (e.g. resources newsletter step 2's "I'd like help").
   Same visual language as .native-radio-row, but one box, not a button group. */
.native-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #03172F;
  cursor: pointer;
  margin-bottom: 16px;
}
.native-checkbox-row input[type="checkbox"] { accent-color: #0063a3; margin-top: 2px; flex-shrink: 0; }
.native-form-error { font-size: 13px; color: #b91c1c; margin-top: 8px; display: none; }
.native-form-error.is-visible { display: block; }
.native-form-status { font-size: 13px; color: #64748b; margin-top: 8px; }
.native-form-card .btn-primary { width: 100%; text-align: center; border: none; cursor: pointer; }

/* Book a Call modal (program pages): pure CSS, same checkbox-hack pattern as the
   nav hamburger -- no JS needed. The form itself is still the GHL iframe embed
   for now; only the presentation (button + popup instead of always-inline) changed. */
.modal-toggle-input { display: none; }
/* Closed is visibility: hidden, not display: none (Carmen, 2026-10-09). The calendar in
   a hero modal now loads with the page (qualifier.js), and the GHL widget will not
   fetch its open times while it has no size, so under display: none every opening
   still began with a few seconds of loading. Hidden this way it is laid out, fully
   loaded, and still unclickable and invisible to keyboards and screen readers. */
.modal-overlay {
  display: flex;
  visibility: hidden;
  position: fixed;
  inset: 0;
  background: rgba(3, 23, 47, 0.55);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-toggle-input:checked ~ .modal-overlay { visibility: visible; }
.modal-content {
  background: #ffffff;
  border-radius: 8px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  /* Was 8px all around -- fine for the calendar iframe (which fills the box
     on its own) but the native qualifier survey has no card padding of its
     own (.qual-card only sets max-width/margin), so its question text and
     options sat flush against the modal's edges and rounded corners -- read
     as the box "cutting off" the survey. Extra top clearance keeps the
     close button (top: 4px) from overlapping the progress/question text. */
  padding: 36px 24px 24px;
}
/* Calendar booking modals (program-page hero CTAs) need more width than the
   480px contact-form modal -- a GHL date/time-slot picker cramps badly below
   ~600px. Additive modifier, existing enquiry-form modals are untouched. */
.modal-content.modal-content--wide { max-width: 720px; }
.modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 28px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  z-index: 1;
}
.modal-close:hover { color: #64748b; }

/* Booking calendar embeds are sized by calendar.js to match the widget's current step.
   This is only the placeholder until the first size arrives, so the page does not jump:
   the measured height of the date picker (732px desktop, 527px at phone width). */
iframe[data-calendar-src]:not([data-sized]) { min-height: 735px; }
@media (max-width: 600px) {
  iframe[data-calendar-src]:not([data-sized]) { min-height: 530px; }
}

/* Loading spinner over a booking calendar until the widget has drawn (calendar.js). */
.calendar-frame-box { position: relative; }
.calendar-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding-top: 160px;
  background: #ffffff;
  font-size: 14px;
  color: #64748b;
}
.calendar-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #dbe5f0;
  border-top-color: #0063a3;
  border-radius: 50%;
  animation: calendar-spin 0.8s linear infinite;
}
@keyframes calendar-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .calendar-spinner { animation-duration: 2.4s; }
}

/* Ebook sign-up (every page under /resources/ebook/, behaviour in ebook-form.js).
   One solid box holds the form, the budget question and the confirmation, so the
   whole sign-up reads as a single visible thing on a white page. */
.ebook-box { background: #eaf3fb; border-color: #b9d3ea; }
.ebook-box .native-field input { background: #ffffff; }
.ebook-heading { font-size: 17px; font-weight: 700; line-height: 1.35; color: #03172F; text-align: center; margin: 0 0 8px; }
.ebook-question { font-size: 15px; font-weight: 500; line-height: 1.5; color: #475569; text-align: center; margin: 0 0 18px; }
.ebook-confirmation { text-align: center; }
.ebook-confirmation p { font-size: 16px; line-height: 1.55; color: #03172F; margin: 0 0 10px; }
.ebook-confirmation p:last-child { margin-bottom: 0; }
.ebook-confirmation a { font-weight: 700; color: #0063a3; text-decoration: underline; }

/* Home hero: the left-hand navy fade is a little lighter on phones, where it
   covers most of the photo. Inline gradient on the element, hence !important. */
@media (max-width: 767px) {
  .hero-fade { background: linear-gradient(90deg, rgba(3,23,47,0.88) 0%, rgba(3,23,47,0.72) 42%, rgba(3,23,47,0.22) 75%, rgba(3,23,47,0.05) 100%) !important; }
}

.footer-social a { color: #94a3b8; display: inline-flex; align-items: center; }
.footer-social a:hover, .footer-social a:focus-visible { color: #ffffff; }

/* Vimeo frames. The player takes several seconds to paint on a phone, and the page
   looked blank until it did. The frame holds its 16:9 space on a navy ground with a
   spinner behind the iframe; the spinner is only visible until the player paints over it. */
.video-frame, .summit-video-frame { background: #0b2f52; }
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; }
.video-frame::before, .summit-video-frame::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: calendar-spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .video-frame::before, .summit-video-frame::before { animation-duration: 2.4s; }
}