@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');

:root {
  --navy: #0a1f35;
  --navy-light: #163d66;
  --navy-mid: #0d2d4e;
  --gold: #e8c96a;
  --gold-dark: #c8a84b;
  --ink: #ffffff;
  --muted: #a8c8e0;
  --border: rgba(255, 255, 255, 0.14);

  /* Light-surface palette for alternating sections */
  --paper: #faf7f0;
  --paper-border: rgba(10, 31, 53, 0.08);
  --ink-dark: #0a1f35;
  --ink-muted: #4a5b6d;
  --surface-blue: #eef4f9;

  --max-width: 1240px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Manrope', 'Inter', sans-serif;
  background: var(--navy);
  color: var(--ink);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: 'Fraunces', 'Manrope', serif; letter-spacing: -0.01em; }

img { max-width: 100%; display: block; }
svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============ Section surface variants ============ */
.on-dark { background: var(--navy); color: var(--ink); }
.on-paper { background: var(--paper); color: var(--ink-dark); }
.on-blue { background: var(--surface-blue); color: var(--ink-dark); }
.on-paper .eyebrow, .on-blue .eyebrow { color: var(--gold-dark); }
.on-paper .section-head p, .on-blue .section-head p { color: var(--ink-muted); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: opacity .2s, transform .2s, box-shadow .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(135deg, var(--gold-dark), var(--gold)); color: var(--navy); box-shadow: 0 8px 24px rgba(232, 201, 106, .25); }
.btn-primary:hover { box-shadow: 0 12px 28px rgba(232, 201, 106, .35); }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid rgba(255,255,255,.4); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.on-paper .btn-outline, .on-blue .btn-outline { color: var(--ink-dark); border-color: rgba(10,31,53,.25); }
.on-paper .btn-outline:hover, .on-blue .btn-outline:hover { border-color: var(--gold-dark); color: var(--gold-dark); }
.btn-block { width: 100%; }
.btn-sm { padding: 11px 20px; font-size: 14px; }

/* ============ Header / Nav (single system, desktop + mobile) ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(10, 31, 53, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 28px;
  min-height: 80px;
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; white-space: nowrap; }
.brand img { height: 42px; width: auto; flex-shrink: 0; }
.brand-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 18px; letter-spacing: 0; line-height: 1.15; white-space: nowrap; }
.brand-name small { display: block; font-family: 'Manrope', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); margin-top: 2px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  flex: 1;
  justify-content: center;
  white-space: nowrap;
}
.nav-links li { display: flex; }
.nav-links a {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  padding: 8px 1px;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); border-color: var(--gold); }

.nav-cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav-portal-link {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--navy);
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  padding: 12px 20px;
  border-radius: 50px;
  box-shadow: 0 6px 18px rgba(232, 201, 106, .25);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-portal-link:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(232, 201, 106, .35); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  flex-shrink: 0;
}
.nav-toggle span { width: 26px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile menu: hidden by default at ALL widths, only shown via .open on small screens */
.mobile-menu {
  display: none;
}
.mobile-menu.open {
  display: flex;
}

/* ============ Integrated editorial hero (photo bleeds into the navy panel) ============ */
.hero-v2 {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  min-height: 680px;
  display: flex;
  align-items: center;
  padding: 100px 0 96px;
}
.hero-v2-media {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 56%;
}
.hero-v2-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-v2-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    var(--navy) 0%, var(--navy) 12%,
    rgba(10,31,53,.94) 26%, rgba(10,31,53,.62) 44%,
    rgba(10,31,53,.2) 66%, transparent 85%);
}
.hero-v2-scrim::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 45% at 92% 12%, rgba(232,201,106,.20), transparent 62%);
}
/* .hero-v2 is display:flex, which makes its .container child a flex item.
   Flex items default to content-based (shrink-to-fit) sizing rather than
   filling the row, so without an explicit width, .container's own
   max-width/margin:auto centering collapsed around just its content's
   rendered size instead of the intended 1240px grid column -- centering a
   small box in the middle of the section instead of anchoring it left.
   width: 100% restores it to the same full-row sizing every other
   .container on the site gets from normal (non-flex) block layout. */
.hero-v2 .container { position: relative; z-index: 2; width: 100%; }
.hero-v2-content {
  max-width: 580px;
  text-align: left;
  margin-right: auto;
}
.hero-v2-content .hero-badge,
.hero-v2-content .hero-actions,
.hero-v2-content .hero-stats {
  justify-content: flex-start;
  text-align: left;
}
.hero-v2-content h1 {
  font-size: clamp(40px, 5.2vw, 62px);
  font-weight: 600;
  line-height: 1.12;
  margin-bottom: 24px;
}
.hero-v2-content h1 em { font-style: normal; color: var(--gold); }
.hero-v2-content p.lead {
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.65;
  color: var(--muted);
  max-width: 520px;
  margin-bottom: 36px;
}
@media (max-width: 900px) {
  .hero-v2 { display: block; min-height: auto; padding: 0 0 64px; }
  .hero-v2-media { position: relative; inset: auto; width: 100%; height: 46vh; min-height: 300px; }
  .hero-v2-scrim { background: linear-gradient(180deg, rgba(10,31,53,.1) 0%, rgba(10,31,53,.6) 65%, var(--navy) 100%); }
  .hero-v2-scrim::after { display: none; }
  .hero-v2 .container { position: relative; z-index: 2; margin-top: -64px; }
  .hero-v2-content { max-width: 100%; padding-top: 8px; }
}

/* ============ Organic section-transition wave ============ */
/* Always absolutely positioned against its (relatively-positioned) parent
   section, flush with the section's true bottom edge. This is the fix for
   the "unexplained navy band" bug: when this was an in-flow block element,
   it rendered ABOVE the section's own bottom padding rather than replacing
   it, leaving a solid strip of the section's background color between the
   finished wave curve and the next section. Every section that uses
   waveDivider() must have position: relative and bottom padding >= the
   wave's own height, so the curve has room to sit without colliding with
   the section's text content. */
.wave-divider {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  z-index: 3;
  line-height: 0;
  pointer-events: none;
}
.wave-divider svg { display: block; width: 100%; height: 84px; }
@media (max-width: 760px) { .wave-divider svg { height: 48px; } }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232, 201, 106, 0.14);
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 50px;
  margin-bottom: 28px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}
.hero-stats {
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
}
.hero-stat strong { display: block; font-family: 'Fraunces', serif; font-size: clamp(30px, 3.4vw, 38px); font-weight: 600; color: var(--gold); line-height: 1.15; margin-bottom: 4px; }
.hero-stat span { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }

/* ============ Editorial image band (full-bleed, navy gradient overlay) ============ */
.editorial-band {
  position: relative;
  height: 360px;
  overflow: hidden;
}
.editorial-band img { width: 100%; height: 100%; object-fit: cover; }
.editorial-band-overlay {
  position: absolute; inset: 0;
  /* Horizontal fade for quote legibility, plus a soft bottom-edge darken so
     the band hands off into the photo panel below (.editorial-panel) as one
     continuous darkening move rather than a hard cut between two
     differently-exposed photos. */
  background:
    linear-gradient(180deg, transparent 0%, transparent 78%, rgba(6,19,32,.55) 100%),
    linear-gradient(90deg, rgba(10,31,53,.92) 0%, rgba(10,31,53,.72) 38%, rgba(10,31,53,.28) 75%, rgba(10,31,53,.1) 100%);
  display: flex; align-items: center;
  padding: 0 clamp(28px, 7vw, 100px);
}
.editorial-quote {
  position: relative;
  max-width: 600px;
}
.editorial-quote::before {
  content: "\201C";
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 48px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 8px;
}
.editorial-quote p {
  color: #fff;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(21px, 2.4vw, 29px);
  line-height: 1.5;
}
.editorial-quote p::after {
  content: "\201D";
  display: inline-block;
  color: var(--gold);
  font-family: 'Fraunces', serif;
  margin-left: 6px;
  transform: translateY(4px);
}
@media (max-width: 760px) {
  .editorial-band { height: 300px; }
  .editorial-band-overlay { padding: 0 28px 32px; background: linear-gradient(180deg, rgba(10,31,53,.35) 0%, rgba(10,31,53,.92) 78%); align-items: flex-end; }
}

/* ============ Sections ============ */
section { padding: 96px 0; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 60px; }
.eyebrow {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.section-head h2 { font-size: clamp(28px, 3.5vw, 42px); font-weight: 600; margin-bottom: 18px; line-height: 1.2; }
.section-head p { color: var(--muted); font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.65; }

/* ============ Benefit cards ============ */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }

.card {
  background: linear-gradient(160deg, var(--navy-mid), var(--navy-light));
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 38px 32px;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(0,0,0,.28); border-color: rgba(232,201,106,.4); }
.card .icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(232, 201, 106, 0.14);
  border: 1.5px solid rgba(232, 201, 106, 0.3);
  font-size: 24px;
  margin-bottom: 24px;
}
.card h3 { font-size: 20px; font-weight: 600; margin-bottom: 12px; line-height: 1.3; }
.card p { color: var(--muted); font-size: 15.5px; line-height: 1.6; }

.on-paper .card, .on-blue .card {
  background: #ffffff;
  border: 1.5px solid var(--paper-border);
  box-shadow: 0 6px 20px rgba(10,31,53,.06);
}
.on-paper .card:hover, .on-blue .card:hover { box-shadow: 0 24px 44px rgba(10,31,53,.12); border-color: rgba(200,168,75,.45); }
.on-paper .card p, .on-blue .card p { color: var(--ink-muted); }
.on-paper .card .icon, .on-blue .card .icon { background: rgba(200, 168, 75, 0.14); border-color: rgba(200,168,75,.35); }

/* ============ Editorial photo panel (Concierge-style: full-bleed photo
   blending into an integrated navy content panel, no side-by-side card) ============ */
.editorial-panel {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy);
  padding: 72px 0;
}
.editorial-panel-media { position: absolute; top: 0; bottom: 0; left: 0; width: 62%; }
.editorial-panel-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ambient left-to-right fade so the photo blends into the navy field at the
   section level (not relied on for text contrast -- see the vignette on
   .editorial-panel-content below, which is sized in pixels relative to the
   text block itself, so it stays legible at any viewport width instead of
   depending on percentage math lining up with a fixed-max-width container). */
.editorial-panel-scrim {
  position: absolute; inset: 0;
  /* Layered radial + linear + vertical gradients: the radial gives the text
     a soft, rounded pool of contrast to sit on, the horizontal linear
     carries that into a continuous navy field at the section edge, and the
     vertical linear tames blown-out sky/highlights across the full width of
     the photo (source images like the concierge sunset shot run very bright
     right at the top edge, which otherwise reads as a hard seam against the
     dark section above) and grounds the bottom edge into the same navy
     field -- together they read as one smooth photo-to-navy fade instead of
     a hard-edged panel with a raw, overexposed strip along the top. Stops
     are spread across many small steps (rather than a few steep ones) so
     there's no single point where the eye reads a hard line between "navy"
     and "photo". */
  background:
    linear-gradient(180deg,
      rgba(6,19,32,.62) 0%, rgba(6,19,32,.28) 10%,
      rgba(6,19,32,.06) 20%, transparent 32%,
      transparent 74%, rgba(6,19,32,.18) 88%, rgba(6,19,32,.4) 100%),
    radial-gradient(ellipse 62% 88% at 73% 50%,
      rgba(6,19,32,.92) 0%, rgba(6,19,32,.74) 38%,
      rgba(6,19,32,.36) 66%, rgba(6,19,32,0) 92%),
    linear-gradient(90deg,
      transparent 0%, rgba(10,31,53,.06) 15%,
      rgba(10,31,53,.22) 28%, rgba(10,31,53,.42) 40%,
      rgba(10,31,53,.62) 52%, rgba(10,31,53,.8) 64%,
      rgba(10,31,53,.93) 76%, var(--navy) 88%, var(--navy) 100%);
}
/* Same flex-shrink-to-fit issue as .hero-v2 .container: .editorial-panel
   is display:flex, so without an explicit width its .container child
   collapses to its content's size instead of filling the row, and
   margin:0 auto then centers that shrunk box instead of anchoring content
   to the site's actual left grid edge. */
.editorial-panel .container { position: relative; z-index: 2; width: 100%; }
.editorial-panel-content { max-width: 540px; margin-left: auto; position: relative; padding: 44px 8px; }
.editorial-panel-content .eyebrow { color: var(--gold); }
.editorial-panel-content h2 { font-size: clamp(28px, 3.2vw, 38px); font-weight: 600; margin-bottom: 20px; color: #fff; line-height: 1.25; }
.editorial-panel-content p { color: #dce8f2; font-size: 16.5px; line-height: 1.65; margin-bottom: 8px; max-width: 46ch; }
.editorial-panel-content .btn { margin-top: 28px; }

.editorial-panel-right .editorial-panel-media { left: auto; right: 0; }
.editorial-panel-right .editorial-panel-scrim {
  background:
    linear-gradient(180deg,
      rgba(6,19,32,.62) 0%, rgba(6,19,32,.28) 10%,
      rgba(6,19,32,.06) 20%, transparent 32%,
      transparent 74%, rgba(6,19,32,.18) 88%, rgba(6,19,32,.4) 100%),
    radial-gradient(ellipse 62% 88% at 27% 50%,
      rgba(6,19,32,.92) 0%, rgba(6,19,32,.74) 38%,
      rgba(6,19,32,.36) 66%, rgba(6,19,32,0) 92%),
    linear-gradient(270deg,
      transparent 0%, rgba(10,31,53,.06) 15%,
      rgba(10,31,53,.22) 28%, rgba(10,31,53,.42) 40%,
      rgba(10,31,53,.62) 52%, rgba(10,31,53,.8) 64%,
      rgba(10,31,53,.93) 76%, var(--navy) 88%, var(--navy) 100%);
}
.editorial-panel-right .editorial-panel-content { margin-left: 0; margin-right: auto; }

.check-list { list-style: none; margin: 26px 0; display: flex; flex-direction: column; gap: 16px; }
.check-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 15.5px; color: #dce8f2; line-height: 1.5; }
.check-list li .check {
  color: var(--navy);
  font-weight: 800;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 12px;
}

@media (max-width: 900px) {
  .editorial-panel { display: block; min-height: auto; padding: 0 0 64px; }
  .editorial-panel-media { position: relative; inset: auto; left: auto; right: auto; width: 100%; height: 42vh; min-height: 260px; }
  .editorial-panel-scrim, .editorial-panel-right .editorial-panel-scrim {
    /* Same top-edge problem as desktop (bright sky reading as a hard seam
       against the section above), plus the stacked mobile layout needs the
       full-strength fade to start immediately since there's no side text
       panel to blend into -- darken from the very top instead of starting
       transparent. */
    background: linear-gradient(180deg, rgba(6,19,32,.5) 0%, rgba(10,31,53,.2) 22%, rgba(10,31,53,.35) 45%, rgba(10,31,53,.78) 75%, var(--navy) 100%) !important;
  }
  .editorial-panel .container { margin-top: -64px; }
  .editorial-panel-content, .editorial-panel-right .editorial-panel-content { max-width: 100%; margin: 0; padding: 0 4px; }
}

/* ============ Guarantee band ============ */
.guarantee {
  position: relative;
  background: linear-gradient(135deg, var(--navy-mid), var(--navy));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
  overflow: hidden;
}
.guarantee::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 80% at 50% 0%, rgba(232,201,106,.14), transparent 70%);
}
.guarantee .container { position: relative; }
.guarantee .badge-circle {
  width: 108px; height: 108px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 24px; font-weight: 600; color: var(--gold);
  margin: 0 auto 28px;
  background: rgba(232,201,106,.08);
}
.guarantee h2 { font-size: clamp(28px, 3.5vw, 40px); font-weight: 600; margin-bottom: 18px; }
.guarantee p { color: var(--muted); max-width: 640px; margin: 0 auto 32px; font-size: 17px; }

/* ============ Testimonials ============ */
.testimonial-card {
  background: #ffffff;
  border: 1.5px solid var(--paper-border);
  border-radius: 22px;
  padding: 34px;
  box-shadow: 0 4px 18px rgba(10,31,53,.05);
}
.testimonial-card .stars { color: var(--gold-dark); margin-bottom: 18px; letter-spacing: 3px; font-size: 15px; }
.testimonial-card p.quote { font-size: 16.5px; color: var(--ink-dark); margin-bottom: 24px; font-family: 'Fraunces', serif; font-weight: 500; line-height: 1.55; }
.testimonial-author { display: flex; align-items: center; gap: 14px; }
.avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--navy); font-size: 15px; flex-shrink: 0;
}
.testimonial-author strong { display: block; font-size: 14.5px; color: var(--ink-dark); }
.testimonial-author span { font-size: 12.5px; color: var(--ink-muted); }
.testimonial-note {
  text-align: center;
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 40px;
}

/* ============ Who we serve ============ */
.audience-pill {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #ffffff;
  border: 1.5px solid var(--paper-border);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 4px 18px rgba(10,31,53,.05);
}
.audience-pill .icon {
  font-size: 22px;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(200,168,75,.14);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.audience-pill h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 6px; color: var(--ink-dark); }
.audience-pill p { font-size: 13.5px; color: var(--ink-muted); }

/* ============ Final CTA ============ */
.final-cta {
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(232,201,106,.14), transparent 65%), var(--navy);
}
.final-cta h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 600; margin-bottom: 18px; }
.final-cta p { color: var(--muted); max-width: 580px; margin: 0 auto 36px; font-size: 17px; }
.final-cta .hero-actions { justify-content: center; margin-bottom: 0; }

/* ============ Generic page hero (secondary pages) ============ */
.page-hero {
  position: relative;
  padding: 76px 0 108px;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-mid) 100%);
  text-align: center;
}
.page-hero .eyebrow { justify-content: center; }
.page-hero h1 { font-size: clamp(32px, 4vw, 46px); font-weight: 600; margin-bottom: 18px; }
.page-hero p { color: var(--muted); max-width: 620px; margin: 0 auto; font-size: 18px; }
.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.breadcrumb a:hover { color: var(--gold); }
@media (max-width: 760px) { .page-hero { padding: 56px 0 72px; } }

/* The wave curve already reads as the "start" of the next section visually,
   so the standard 96px section top-padding on top of it would double up as
   dead space. Trim it specifically for whatever follows a hero-with-wave --
   every other section-to-section boundary keeps the full 96px rhythm. */
.page-hero + section, .hero-v2 + section { padding-top: 68px; }
@media (max-width: 760px) { .page-hero + section, .hero-v2 + section { padding-top: 48px; } }

.page-hero-photo {
  position: relative;
  padding: 0;
  height: 460px;
  overflow: hidden;
  background: var(--navy);
}
.page-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero-photo .page-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,31,53,.55) 0%, rgba(10,31,53,.35) 45%, rgba(10,31,53,.92) 100%);
}
.page-hero-photo .page-hero-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 96px; }
.page-hero-photo .breadcrumb, .page-hero-photo .hero-badge { align-self: center; }
@media (max-width: 760px) {
  .page-hero-photo { height: 360px; }
  .page-hero-photo .page-hero-content { padding-bottom: 60px; }
}

/* ============ Prose / content pages ============ */
.prose { max-width: 780px; margin: 0 auto; }
.prose h2 { font-size: 26px; font-weight: 600; margin: 40px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 19px; font-weight: 700; margin: 28px 0 12px; }
.prose p { margin-bottom: 16px; color: var(--ink-muted); font-size: 16px; }
.prose ul, .prose ol { margin: 0 0 16px 22px; color: var(--ink-muted); }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink-dark); }
.notice-box {
  background: var(--surface-blue);
  border: 1.5px solid var(--paper-border);
  border-radius: 16px;
  padding: 22px 24px;
  margin: 28px 0;
  font-size: 14.5px;
  color: var(--ink-muted);
}
.notice-box strong { color: var(--ink-dark); }

/* ============ FAQ accordion ============ */
.faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: #fff;
  border: 1.5px solid var(--paper-border);
  border-radius: 16px;
  overflow: hidden;
}
.faq-item summary {
  padding: 20px 24px;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-dark);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 22px; color: var(--gold-dark); flex-shrink: 0; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item .faq-answer { padding: 0 24px 22px; color: var(--ink-muted); font-size: 15px; }

/* ============ Forms ============ */
.form-split {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 40px;
  align-items: stretch;
  max-width: 980px;
  margin: 0 auto;
}
.form-split-reverse { grid-template-columns: 1fr 420px; }
.form-split-reverse .form-split-photo { order: 2; }
.form-split-photo {
  border-radius: 24px;
  overflow: hidden;
  min-height: 320px;
  box-shadow: 0 8px 30px rgba(10,31,53,.08);
}
.form-split-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 980px) {
  .form-split, .form-split-reverse { grid-template-columns: 1fr; }
  .form-split-reverse .form-split-photo { order: 0; }
  .form-split-photo { min-height: 220px; }
}

/* ============ Full-bleed background-photo form section (Membership
   Application, Travel Request): the photo fills the whole section as a
   background layer, a navy scrim fades it toward the form side, and a
   translucent glass panel carries the form on top -- no separate image
   card, no opaque white card floating beside it. ============ */
.form-bg-section {
  position: relative;
  overflow: hidden;
  min-height: 680px;
  display: flex;
  align-items: center;
  padding: 72px 0;
}
.form-bg-media { position: absolute; inset: 0; }
.form-bg-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The tint must be concentrated on the SIDE THE FORM SITS ON (helping the
   glass panel read against the photo) and stay light on the opposite side
   (so the photo itself stays genuinely visible, not "almost solid navy").
   Default panel sits right, so 90deg (left-to-right) keeps the left edge
   nearly transparent and only builds up toward the right. The vertical
   layer's top stop is tuned to continue the navy-mid tone the page-hero's
   wave divider ends on, so the hero -> wave -> photo handoff reads as one
   continuous surface instead of a seam. */
.form-bg-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      transparent 0%, rgba(10,31,53,.05) 20%,
      rgba(10,31,53,.18) 40%, rgba(10,31,53,.36) 58%,
      rgba(10,31,53,.54) 76%, rgba(10,31,53,.62) 100%),
    linear-gradient(180deg,
      rgba(13,45,78,.55) 0%, rgba(13,45,78,.12) 16%,
      rgba(10,31,53,.08) 78%, rgba(10,31,53,.42) 100%);
}
.form-bg-section.form-bg-left .form-bg-scrim {
  background:
    linear-gradient(270deg,
      transparent 0%, rgba(10,31,53,.05) 20%,
      rgba(10,31,53,.18) 40%, rgba(10,31,53,.36) 58%,
      rgba(10,31,53,.54) 76%, rgba(10,31,53,.62) 100%),
    linear-gradient(180deg,
      rgba(13,45,78,.55) 0%, rgba(13,45,78,.12) 16%,
      rgba(10,31,53,.08) 78%, rgba(10,31,53,.42) 100%);
}
.form-bg-section .container {
  position: relative;
  z-index: 2;
  display: flex;
}
.form-bg-section .form-glass { margin-left: auto; }
.form-bg-section.form-bg-left .form-glass { margin-left: 0; margin-right: auto; }

.form-glass {
  width: 100%;
  max-width: 640px;
  background: linear-gradient(165deg, rgba(10,31,53,.76), rgba(10,31,53,.62));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  padding: 44px;
  box-shadow: 0 30px 60px rgba(6,19,32,.35);
}
.form-glass .form-field label,
.form-glass .form-consent,
.form-glass .form-note { color: #eef4fa; }
.form-glass .form-note a { color: var(--gold); }
.form-glass .form-field input,
.form-glass .form-field select,
.form-glass .form-field textarea {
  background: rgba(250, 247, 240, .97);
  color: var(--ink-dark);
  border-color: rgba(10,31,53,.12);
}
.form-glass .form-field input::placeholder,
.form-glass .form-field textarea::placeholder { color: rgba(10,31,53,.55); }
.form-glass .form-field select { color: var(--ink-dark); }

@media (max-width: 980px) {
  .form-bg-section { min-height: auto; padding: 56px 0; }
  .form-bg-scrim,
  .form-bg-section.form-bg-left .form-bg-scrim {
    background:
      linear-gradient(180deg, rgba(13,45,78,.5) 0%, rgba(10,31,53,.4) 25%, rgba(10,31,53,.7) 65%, var(--navy) 100%);
  }
  .form-bg-section .container { display: block; }
  .form-glass { max-width: 100%; padding: 32px; }
}
@media (max-width: 480px) {
  .form-glass { background: rgba(10,31,53,.88); padding: 22px; }
}

.form-card {
  background: #fff;
  border: 1.5px solid var(--paper-border);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 8px 30px rgba(10,31,53,.06);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { margin-bottom: 20px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink-dark);
  margin-bottom: 8px;
}
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--paper-border);
  background: var(--surface-blue);
  color: var(--ink-dark);
  font-size: 15px;
  font-family: inherit;
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-field input::placeholder, .form-field textarea::placeholder { color: rgba(10,31,53,.35); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--gold-dark); }
.form-note {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 18px;
  text-align: center;
}
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-muted);
  margin-bottom: 22px;
  cursor: pointer;
}
.form-consent input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--gold-dark); }
.form-status {
  min-height: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  margin-top: 4px;
}
.form-status[data-state="success"] { color: #1a7a4c; }
.form-status[data-state="error"] { color: #b3261e; }
.form-field.invalid input, .form-field.invalid textarea, .form-field.invalid select { border-color: #b3261e; background: #fdf0ef; }
.form-field .field-error { display: none; color: #b3261e; font-size: 12.5px; font-weight: 600; margin-top: 6px; }
.form-field.invalid .field-error { display: block; }
.btn[disabled] { opacity: .65; cursor: not-allowed; transform: none; }

/* Contact info cards */
.contact-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 40px; }
.contact-card {
  background: #fff;
  border: 1.5px solid var(--paper-border);
  border-radius: 18px;
  padding: 26px;
  text-align: center;
}
.contact-card .icon { font-size: 24px; margin-bottom: 12px; }
.contact-card h3 { font-size: 15px; margin-bottom: 6px; color: var(--ink-dark); }
.contact-card a, .contact-card span { color: var(--ink-muted); font-size: 14.5px; }
.contact-card a:hover { color: var(--gold-dark); }

/* ============ Blog / Member Stories grid ============ */
.story-card {
  background: #fff;
  border: 1.5px solid var(--paper-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(10,31,53,.05);
}
.story-card { display: flex; flex-direction: column; height: 100%; }
.story-card .story-visual {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--navy-mid), var(--navy-light));
  overflow: hidden;
}
.story-card .story-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-card .photo-credit {
  display: block;
  font-size: 11px;
  font-style: italic;
  color: var(--ink-muted);
  opacity: .7;
  padding: 8px 26px 0;
  background: #fff;
}
.story-card .story-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.story-card .story-tag { font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 12px; display: block; }
.story-card h3 { font-size: 19px; font-weight: 600; margin-bottom: 12px; color: var(--ink-dark); line-height: 1.4; }
.story-card p { font-size: 15px; color: var(--ink-muted); line-height: 1.6; }

/* ============ Membership tiers (qualitative, no invented pricing) ============ */
.tier-card {
  background: #fff;
  border: 1.5px solid var(--paper-border);
  border-radius: 22px;
  padding: 34px;
  text-align: left;
}
.tier-card.featured { border: 2px solid var(--gold-dark); position: relative; }
.tier-card.featured::before {
  content: "Most Popular";
  position: absolute; top: -13px; left: 34px;
  background: var(--gold-dark); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  padding: 5px 14px; border-radius: 50px;
}
.tier-card h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; color: var(--ink-dark); }
.tier-card p.tier-desc { color: var(--ink-muted); font-size: 14.5px; margin-bottom: 20px; }
.tier-card ul { list-style: none; margin-bottom: 26px; }
.tier-card li { padding: 8px 0; font-size: 14.5px; color: var(--ink-muted); border-bottom: 1px solid var(--paper-border); }
.tier-card li:last-child { border-bottom: none; }

/* ============ Footer ============ */
.site-footer {
  background: #06131f;
  padding: 80px 0 0;
}
.footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 60px; border-bottom: 1px solid var(--border); }
.footer-brand .brand { margin-bottom: 20px; }
.footer-brand p { color: var(--muted); font-size: 15.5px; line-height: 1.6; max-width: 300px; margin-bottom: 24px; }
.footer-contact { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.footer-contact a { color: var(--muted); font-size: 15.5px; }
.footer-contact a:hover { color: var(--gold); }
.footer-col h4 { font-size: 13px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.footer-col a { color: var(--muted); font-size: 15.5px; }
.footer-col a:hover { color: var(--ink); }

.newsletter { display: flex; gap: 8px; margin-top: 6px; }
.newsletter input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--ink);
  font-size: 13.5px;
  font-family: inherit;
}
.newsletter input::placeholder { color: rgba(255,255,255,.35); }
.newsletter-note { font-size: 11.5px; color: rgba(255,255,255,.35); margin-top: 10px; }

.footer-bottom {
  padding: 28px 0 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13.5px;
  color: rgba(255,255,255,.45);
}
.footer-bottom-links { display: flex; gap: 22px; }
.footer-bottom-links a { color: rgba(255,255,255,.6); font-size: 13.5px; }
.footer-bottom-links a:hover { color: var(--gold); }

/* ============ Responsive ============ */
@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero p.lead { margin-left: auto; margin-right: auto; }
  .hero-visual { max-width: 460px; margin: 0 auto; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

/* Full desktop nav needs ~1370px of clear width to fit every label without
   wrapping (8 links + branded logo block + Member Travel Portal CTA).
   Below that we switch to the hamburger menu instead of letting labels wrap. */
@media (max-width: 1439px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav-bar { padding: 14px 20px; min-height: 72px; }
  .brand img { height: 40px; }
  .brand-name { font-size: 17px; }
  .nav-portal-link { font-size: 13px; padding: 11px 18px; }

  .mobile-menu {
    flex-direction: column;
    gap: 2px;
    padding: 14px 20px 24px;
    background: var(--navy);
    border-bottom: 1px solid var(--border);
  }
  .mobile-menu a {
    padding: 14px 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
  }
  .mobile-menu a:last-child { border-bottom: none; }
  .mobile-menu .mobile-portal-link {
    margin-top: 12px;
    text-align: center;
    color: var(--navy);
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    border-radius: 50px;
    border-bottom: none;
    font-weight: 800;
  }

  .container { padding: 0 20px; }
  section { padding: 64px 0; }
  .hero { padding: 56px 0 56px; }

  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .hero-stats { gap: 30px; }
}