/* ==========================================================================
   FLOCK-FLY — Shared Brand Stylesheet
   Global Real Estate Academy & Exchange
   ========================================================================== */

:root {
  --navy: #12233F;
  --navy-light: #1a2f52;
  --navy-lighter: #223a63;
  --navy-dark: #081527;
  --gold: #C9A227;
  --gold-light: #F6E3A8;
  --gold-deep: #a9840f;
  --cream: #F4F1E8;
  --cream-dark: #e6e0cd;
  --white: #FFFFFF;
  --red: #b23b2e;
  --text-dark: #12233F;
  --text-muted: #555F70;
  --text-light: #F4F1E8;
  /* Height of the sticky in-flow header. The hero subtracts it so the first
     screen is exactly header + hero with nothing of the next section showing. */
  --header-h: 81px;
  --shadow: 0 10px 30px rgba(18, 35, 63, 0.15);
  --shadow-lg: 0 24px 60px rgba(8, 21, 39, 0.35);
  --radius: 10px;
  --max-width: 1160px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Fraunces', 'Poppins', serif;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--navy);
  letter-spacing: -0.01em;
}

p { margin: 0 0 16px; }

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

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

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

.eyebrow {
  display: inline-block;
  letter-spacing: 3px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 22px;
  font-family: 'Inter', sans-serif;
}
.section-navy .eyebrow, .hero .eyebrow { color: var(--gold-light); }

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(.2,.7,.3,1), transform 0.8s cubic-bezier(.2,.7,.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1.visible { transition-delay: 0.1s; }
.reveal-delay-2.visible { transition-delay: 0.2s; }
.reveal-delay-3.visible { transition-delay: 0.3s; }
.reveal-delay-4.visible { transition-delay: 0.4s; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  position: relative;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  color: var(--navy-dark);
  box-shadow: 0 10px 26px rgba(201, 162, 39, 0.4);
}
.btn-gold:hover { box-shadow: 0 14px 32px rgba(201, 162, 39, 0.55); }

.btn-outline {
  background: transparent;
  border-color: rgba(255,255,255,0.5);
  color: var(--white);
  backdrop-filter: blur(4px);
}
.btn-outline:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }

.btn-outline-navy {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn-outline-navy:hover { background: var(--navy); color: var(--white); }

.btn-block { width: 100%; }

/* ---------- Nav ---------- */
.site-header {
  background: rgba(18, 35, 63, 0.85);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid rgba(201,162,39,0.25);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.site-header.scrolled {
  background: rgba(18, 35, 63, 0.97);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Guarantees breathing room between the wordmark and the CTA even when the
     bar is at its tightest; space-between alone allows them to touch. */
  gap: 16px;
  padding: 16px 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
}
.brand-mark { height: 40px; width: auto; flex-shrink: 0; }
.brand-name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--white);
  /* A wordmark that breaks mid-word stops reading as a logo. Once the bar is
     too tight to hold it on one line the text is dropped entirely and the
     badge carries the brand, rather than wrapping into the CTA. */
  white-space: nowrap;
}
@media (max-width: 620px) {
  .brand-name { display: none; }
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  color: var(--white);
  font-weight: 600;
  font-size: 14px;
  opacity: 0.85;
  position: relative;
  padding-bottom: 4px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width 0.25s ease;
}
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: 20px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--navy-dark) 0%, var(--navy) 55%, var(--navy-light) 100%);
  color: var(--text-light);
  /* svh, not vh: on mobile vh is the tallest viewport (toolbars retracted), so
     100vh overflows on load while the browser chrome is still showing. */
  min-height: calc(100svh - var(--header-h));
  /* Centres .hero-inner in whatever space is left over. .hero-atmos and
     .hero-scroll-cue are absolutely positioned, so they are unaffected. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* --cue-band reserves the strip along the bottom that the scroll cue lives
     in. The hero's bottom padding IS that band and the cue centres itself
     inside it, so centred content can never grow down into the cue however
     tall the copy gets or however the buttons wrap. One value governs both,
     which is what stops the two drifting apart. */
  --cue-band: 96px;
  padding: 72px 24px var(--cue-band);
  text-align: center;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=1800&q=70');
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  mix-blend-mode: luminosity;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(201,162,39,0.18) 0%, transparent 60%);
}
.hero .hero-inner { position: relative; z-index: 2; }
.hero .brand-mark-lg { width: 230px; height: auto; margin: 0 auto 28px; filter: drop-shadow(0 10px 24px rgba(0,0,0,0.4)); }
.hero h2.kicker {
  font-family: 'Inter', sans-serif;
  color: var(--gold-light);
  letter-spacing: 4px;
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.hero h1 {
  color: var(--white);
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.1;
  max-width: 860px;
  margin: 0 auto 14px;
  text-shadow: 0 4px 30px rgba(0,0,0,0.3);
}
.hero .sub-headline {
  color: var(--gold-light);
  font-weight: 600;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(18px, 2.6vw, 26px);
  max-width: 780px;
  margin: 0 auto 24px;
}
.hero .desc {
  max-width: 620px;
  margin: 0 auto 36px;
  color: rgba(244,239,226,0.88);
  font-size: 17px;
}
.hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
/* A phone viewport is ~100px shorter than the hero's natural stack, so the
   vertical rhythm is tightened to let it still land as one full screen.
   Spacing only — type sizes, colours and order are untouched. */
@media (max-width: 900px) {
  .hero { --cue-band: 76px; padding: 40px 24px var(--cue-band); }
  .hero .brand-mark-lg { width: 176px; margin-bottom: 18px; }
  .hero .desc { margin-bottom: 26px; }
}
/* A landscape phone has no room to spend on an ornament: the cue is dropped
   rather than allowed to crowd the buttons, and the band closes up with it. */
@media (max-height: 620px) {
  .hero { --cue-band: 32px; }
  .hero-scroll-cue { display: none; }
}
.hero-scroll-cue {
  position: absolute;
  /* Centred inside the reserved band rather than a hardcoded offset, so it
     tracks --cue-band at every breakpoint. (36px is the cue's own height.) */
  bottom: calc((var(--cue-band, 96px) - 36px) / 2); left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 36px;
  border: 2px solid rgba(244,239,226,0.5);
  border-radius: 20px;
  z-index: 2;
}
.hero-scroll-cue::before {
  content: '';
  position: absolute;
  top: 6px; left: 50%;
  width: 4px; height: 8px;
  background: var(--gold-light);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollcue 1.8s infinite;
}
@keyframes scrollcue {
  0% { opacity: 1; top: 6px; }
  70% { opacity: 0; top: 18px; }
  100% { opacity: 0; top: 18px; }
}

/* ---------- Urgency bar ---------- */
.urgency-bar {
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-deep));
  background-size: 200% 100%;
  animation: shimmer 6s linear infinite;
  color: var(--navy-dark);
  text-align: center;
  padding: 14px 20px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
}
.urgency-bar a { text-decoration: underline; }
@keyframes shimmer {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* ---------- Stats ---------- */
.stats-bar {
  background: var(--navy-dark);
  color: var(--gold-light);
  padding: 40px 24px;
  position: relative;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  text-align: center;
  max-width: var(--max-width);
  margin: 0 auto;
}
.stats-grid .stat-num {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 600;
  color: var(--white);
}
.stats-grid .stat-label {
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-top: 4px;
}

/* ---------- Sections ---------- */
.section { padding: 100px 24px; position: relative; }
.section-cream { background: var(--cream); }
.section-navy { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%); color: var(--text-light); }
.section-navy h2, .section-navy h3 { color: var(--white); }

.section-header { text-align: center; max-width: 700px; margin: 0 auto 56px; }
.section-header h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.15; }
.section-header p { color: var(--text-muted); font-size: 17px; }
.section-navy .section-header p { color: rgba(244,239,226,0.8); }

/* ---------- Grid / Cards ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.icon-card {
  background: var(--white);
  border-radius: 14px;
  padding: 28px 24px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(201,162,39,0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.icon-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold);
}
.icon-circle {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  font-size: 20px;
  color: var(--navy-dark);
  font-weight: 700;
}
.icon-card h4 { margin-bottom: 6px; font-size: 17px; }
.icon-card p { color: var(--text-muted); font-size: 14.5px; margin: 0; }

.feature-item { display: flex; gap: 16px; align-items: flex-start; }
.feature-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); margin-top: 8px; flex-shrink: 0;
}
.feature-item h4 { margin-bottom: 4px; font-size: 17px; }
.feature-item p { color: var(--text-muted); font-size: 15px; margin: 0; }

.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}

.step-card {
  background: var(--white);
  border-radius: 14px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.step-card .step-ghost {
  position: absolute;
  top: -10px; right: 6px;
  font-family: 'Fraunces', serif;
  font-size: 72px;
  font-weight: 600;
  color: var(--cream-dark);
  z-index: 0;
  line-height: 1;
}
.step-card > * { position: relative; z-index: 1; }
.step-num {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-weight: 700;
  font-family: 'Fraunces', serif;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}

/* ---------- Location banner ---------- */
.location-banner {
  position: relative;
  min-height: 260px;
  border-radius: 18px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--shadow-lg);
}
.location-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8,21,39,0.88) 0%, rgba(8,21,39,0.25) 55%, rgba(8,21,39,0.05) 100%);
}
.location-banner .location-banner-copy {
  position: relative; z-index: 1;
  padding: 32px 36px;
  color: var(--white);
}
.location-banner .location-tag {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold-light); font-weight: 700; margin-bottom: 6px;
}
.location-banner h2 { color: var(--white); margin-bottom: 4px; }
.location-banner p { color: rgba(244,239,226,0.85); margin: 0; font-size: 15px; }

/* ---------- Photo grid gallery ---------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 160px;
  gap: 14px;
  margin: 28px 0 36px;
}
.photo-grid a.photo-item, .photo-grid .photo-item {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  position: relative;
  box-shadow: var(--shadow);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.photo-item:hover { transform: scale(1.03); box-shadow: var(--shadow-lg); z-index: 2; }
.photo-item.wide { grid-column: span 2; }
.photo-item.tall { grid-row: span 2; }
.photo-item .photo-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  font-size: 12px; font-weight: 600; color: var(--white);
  background: linear-gradient(0deg, rgba(8,21,39,0.75), transparent);
}
@media (max-width: 800px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .photo-item.wide { grid-column: span 2; }
  .photo-item.tall { grid-row: span 1; }
}

/* ---------- Amenity chips ---------- */
.amenity-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 28px; }
.amenity-chip {
  background: var(--white);
  border: 1.5px solid var(--cream-dark);
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.amenity-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ---------- Split / photo sections ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.split-media {
  background-size: cover;
  background-position: center;
  min-height: 380px;
  position: relative;
}
.media-caption {
  position: absolute; left: 16px; bottom: 14px; z-index: 2;
  color: rgba(244,239,226,0.92); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.3px;
}
.split-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(8,21,39,0.55) 100%);
}
.split-copy {
  background: var(--navy);
  color: var(--text-light);
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split-copy h3 { color: var(--white); font-size: clamp(22px,3vw,28px); }
.split-copy p { color: rgba(244,239,226,0.82); }
.split.reverse { grid-template-columns: 1fr 1fr; }
.split.reverse .split-media { order: 2; }
.split.reverse .split-copy { order: 1; }
@media (max-width: 800px) {
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse .split-media, .split.reverse .split-copy { order: unset; }
}

/* ---------- Pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 980px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 800px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; }
}
.pricing-card {
  background: var(--white);
  border: 2px solid var(--cream-dark);
  border-radius: 18px;
  width: 100%;
  margin: 0 auto;
  padding: 44px 36px;
  text-align: center;
  box-shadow: var(--shadow);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pricing-card.featured {
  border-color: var(--gold);
  box-shadow: var(--shadow-lg);
}
.pricing-card.featured::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--navy-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 6px 16px;
  border-radius: 20px;
  white-space: nowrap;
}
.pricing-card .plan-name {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 10px;
}
.pricing-card .price {
  font-family: 'Fraunces', serif;
  font-size: 48px;
  font-weight: 600;
  color: var(--navy);
}
.pricing-card .price span {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
}
.pricing-list { text-align: left; margin: 24px 0; padding: 0; list-style: none; }
.pricing-list li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 0; font-size: 14.5px; border-bottom: 1px solid var(--cream-dark);
}
.pricing-list li:last-child { border-bottom: none; }
.pricing-list li.excluded { color: var(--text-muted); }
.check { color: var(--gold-deep); font-weight: 700; }
/* Shared icon rendering. Strokes only, sized by the element they sit in, and
   inheriting currentColor so a single sprite serves every context. */
.icon-circle svg,
.check .icon-check {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-circle svg { width: 22px; height: 22px; }
.check .icon-check { width: 15px; height: 15px; vertical-align: -2px; stroke-width: 2.5; }
.tool-points .tp-check .icon-check {
  fill: none; stroke: currentColor; stroke-width: 2.75;
  stroke-linecap: round; stroke-linejoin: round;
  width: 12px; height: 12px;
}
.cross { color: #b7b7b7; font-weight: 700; }

/* ---------- Results callout ---------- */
.result-banner {
  background: linear-gradient(135deg, var(--navy-lighter), var(--navy-dark));
  color: var(--white);
  border-radius: 18px;
  padding: 40px 40px;
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  font-family: 'Fraunces', serif;
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid rgba(201,162,39,0.3);
}
.result-banner .fine-print {
  font-size: 12px;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
  color: rgba(244,239,226,0.6);
  margin-top: 14px;
}

/* ---------- Testimonials ---------- */
.testimonial-card {
  background: var(--white);
  border-radius: 16px;
  padding: 30px 26px;
  box-shadow: var(--shadow);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.testimonial-card .quote-mark {
  font-family: 'Fraunces', serif;
  font-size: 54px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 4px;
}
.testimonial-card p.quote { font-size: 15px; color: var(--text-dark); }
.testimonial-person { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.avatar-initials {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-lighter));
  color: var(--gold-light);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: 'Fraunces', serif; font-size: 15px;
  flex-shrink: 0;
}
.testimonial-person .name { font-weight: 700; font-size: 14px; color: var(--navy); }
.testimonial-person .meta { font-size: 12.5px; color: var(--text-muted); }

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid var(--cream-dark);
  padding: 20px 0;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--navy);
  font-size: 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 22px;
  color: var(--gold);
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { margin-top: 12px; color: var(--text-muted); }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 900px;
  margin: 0 auto 40px;
}
.contact-box {
  background: var(--white);
  border-radius: 14px;
  padding: 26px 22px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-box:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.contact-box .label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--gold-deep); font-weight: 700; margin-bottom: 6px;
}

/* ---------- Forms ---------- */
.form-group { margin-bottom: 18px; text-align: left; }
.form-group label {
  display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--navy);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--cream-dark);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: var(--white);
  color: var(--text-dark);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,162,39,0.15);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.radio-group { display: flex; flex-direction: column; gap: 10px; }
.radio-option {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border: 1.5px solid var(--cream-dark); border-radius: 8px;
  cursor: pointer; font-size: 15px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.radio-option:has(input:checked) { border-color: var(--gold); background: #fdf9ef; }
.radio-option input { width: auto; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-dark);
  color: rgba(244,239,226,0.7);
  padding: 48px 24px 28px;
  font-size: 13px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 20px;
}
.footer-flags { display: flex; gap: 8px; font-size: 22px; }
.disclaimer { line-height: 1.7; max-width: 1000px; }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-40 { margin-top: 40px; }
.badge {
  display: inline-block;
  background: rgba(201,162,39,0.15);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 7px 16px;
  border-radius: 20px;
  margin-bottom: 18px;
}
.section-navy .badge, .hero .badge { color: var(--gold-light); }

/* ---------- Progress steps (apply page) ---------- */
.progress-track {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
}
.progress-dot {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--cream-dark);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  position: relative;
  transition: background 0.3s ease, color 0.3s ease;
}
.progress-dot.active { background: var(--gold); color: var(--navy); }
.progress-dot.done { background: var(--navy); color: var(--gold); }
.form-step { display: none; }
.form-step.active { display: block; animation: fadein 0.4s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4, .stats-grid, .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .section { padding: 70px 20px; }
}

/* ==========================================================================
   ═══ FLOCK-FLY MOTION SYSTEM ═══
   Layered on top of the base stylesheet. Everything here is presentational:
   if it all failed to load the site would still read and convert. Motion is
   used to direct attention down the funnel, never to decorate for its own
   sake, and the whole layer switches off under prefers-reduced-motion.
   ========================================================================== */

/* ---------- 1. Page chrome ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light));
  box-shadow: 0 0 14px rgba(201,162,39,0.6);
  z-index: 300; will-change: transform;
}

.grain {
  position: fixed; inset: 0; z-index: 250; pointer-events: none; opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 0.7s steps(3) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  33%  { transform: translate(-2%,1%); }
  66%  { transform: translate(1%,-2%); }
  100% { transform: translate(-1%,1%); }
}

/* ---------- 2. Header: condense, progress, magnetic brand ---------- */
.site-header { transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease; }
.site-header.condensed { box-shadow: 0 8px 34px rgba(8,21,39,0.16); }
.site-header.condensed .nav { padding-top: 10px; padding-bottom: 10px; }
.site-header .nav { transition: padding 0.4s cubic-bezier(.4,0,.2,1); }
.brand-mark { transition: transform 0.55s cubic-bezier(.34,1.56,.64,1), filter 0.4s ease; }
.brand:hover .brand-mark { transform: rotate(-7deg) scale(1.1); filter: drop-shadow(0 6px 16px rgba(201,162,39,0.5)); }

/* ---------- 3. Mobile navigation ----------
   The base stylesheet simply hid .nav-links under 900px, which left phones
   with no way to reach Pricing, Housing or the FAQ. */
.nav-toggle {
  display: none;
  width: 42px; height: 42px; padding: 0;
  background: transparent; border: 1px solid rgba(244,241,232,0.28);
  border-radius: 10px; cursor: pointer;
  align-items: center; justify-content: center;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.nav-toggle:hover { border-color: var(--gold); background: rgba(201,162,39,0.12); }
.nav-toggle span {
  display: block; position: relative; width: 18px; height: 2px;
  background: var(--cream); border-radius: 2px;
  transition: background 0.25s ease, transform 0.35s cubic-bezier(.4,0,.2,1);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 2px;
  background: var(--cream); border-radius: 2px;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1), top 0.3s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { top: 0; transform: rotate(45deg); }
.nav-toggle.is-open span::after  { top: 0; transform: rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0 0 0 auto; width: min(84vw, 340px);
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-dark) 100%);
  z-index: 260; padding: 92px 30px 40px;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(.4,0,.2,1);
  box-shadow: -20px 0 60px rgba(0,0,0,0.4);
  overflow-y: auto;
}
.mobile-nav.is-open { transform: none; }
.mobile-nav a {
  display: block; padding: 15px 0; color: var(--cream);
  text-decoration: none; font-size: 17px; font-weight: 600;
  border-bottom: 1px solid rgba(244,241,232,0.12);
  opacity: 0; transform: translateX(18px);
  transition: opacity 0.4s ease, transform 0.4s ease, color 0.25s ease;
}
.mobile-nav.is-open a { opacity: 1; transform: none; }
.mobile-nav.is-open a:nth-child(1) { transition-delay: 0.08s; }
.mobile-nav.is-open a:nth-child(2) { transition-delay: 0.13s; }
.mobile-nav.is-open a:nth-child(3) { transition-delay: 0.18s; }
.mobile-nav.is-open a:nth-child(4) { transition-delay: 0.23s; }
.mobile-nav.is-open a:nth-child(5) { transition-delay: 0.28s; }
.mobile-nav.is-open a:nth-child(6) { transition-delay: 0.33s; }
.mobile-nav a:hover { color: var(--gold-light); }
.mobile-nav .btn { margin-top: 26px; width: 100%; text-align: center; }
.nav-scrim {
  position: fixed; inset: 0; z-index: 255;
  background: rgba(8,21,39,0.6); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
.nav-scrim.is-open { opacity: 1; pointer-events: auto; }
body.nav-locked { overflow: hidden; }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-cta .btn { padding: 10px 18px; font-size: 13px; }
}
@media (min-width: 901px) {
  .mobile-nav, .nav-scrim { display: none; }
}

/* ---------- 4. Hero atmosphere ---------- */
.hero { isolation: isolate; }
.hero-atmos { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; }
.orb.o1 {
  width: 640px; height: 560px; top: -220px; right: -140px;
  background: radial-gradient(circle, rgba(201,162,39,0.40), transparent 70%);
  animation: orbDrift1 24s ease-in-out infinite;
}
.orb.o2 {
  width: 580px; height: 520px; bottom: -240px; left: -160px;
  background: radial-gradient(circle, rgba(64,116,196,0.34), transparent 70%);
  animation: orbDrift2 30s ease-in-out infinite;
}
.orb.o3 {
  width: 420px; height: 420px; top: 30%; left: 46%;
  background: radial-gradient(circle, rgba(246,227,168,0.20), transparent 72%);
  animation: orbDrift3 21s ease-in-out infinite;
}
@keyframes orbDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-80px,70px) scale(1.16); } }
@keyframes orbDrift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(90px,-60px) scale(1.12); } }
@keyframes orbDrift3 { 0%,100% { transform: translate(0,0) scale(1); opacity: 0.8; } 50% { transform: translate(-50px,-45px) scale(1.3); opacity: 0.35; } }

.hero-grid-floor {
  position: absolute; left: -30%; right: -30%; bottom: -12%; height: 58%;
  background-image:
    linear-gradient(rgba(201,162,39,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,39,0.10) 1px, transparent 1px);
  background-size: 68px 68px;
  transform: perspective(440px) rotateX(67deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 80%);
  animation: gridPan 16s linear infinite;
}
@keyframes gridPan { from { background-position: 0 0; } to { background-position: 0 68px; } }

/* Slow-rising embers */

/* Headline: word-by-word rise */
.hero h1 .word, .split-word {
  display: inline-block;
  opacity: 0; transform: translateY(28px) rotate(2deg);
  animation: wordRise 0.85s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes wordRise { to { opacity: 1; transform: none; } }

.hero .brand-mark-lg {
  animation: logoFloat 6.5s ease-in-out infinite;
  transition: transform 0.5s ease;
}
@keyframes logoFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}

/* ---------- 5. Reveal system (extends the base .reveal) ---------- */
[data-rv] {
  opacity: 0; transform: translateY(30px); filter: blur(6px);
  transition: opacity 0.85s cubic-bezier(.22,1,.36,1),
              transform 0.85s cubic-bezier(.22,1,.36,1),
              filter 0.85s ease;
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
[data-rv].rv-in { opacity: 1; transform: none; filter: none; }
[data-rv="left"]  { transform: translateX(-42px); }
[data-rv="right"] { transform: translateX(42px); }
[data-rv="scale"] { transform: scale(0.92); }
[data-rv="rise"]  { transform: translateY(56px); }

/* ---------- 6. Pointer-reactive card lighting ---------- */
.lift { position: relative; overflow: hidden; }
.lift::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: radial-gradient(320px circle at var(--mx,50%) var(--my,0%),
              rgba(201,162,39,0.16), transparent 62%);
  opacity: 0; transition: opacity 0.45s ease; pointer-events: none;
}
.lift:hover::before { opacity: 1; }
.lift > * { position: relative; z-index: 1; }
.section-navy .lift::before, .hero .lift::before {
  background: radial-gradient(320px circle at var(--mx,50%) var(--my,0%),
              rgba(246,227,168,0.20), transparent 62%);
}

/* Icon cards get an animated ring + icon life */
.icon-card { transition: transform 0.45s cubic-bezier(.22,1,.36,1), box-shadow 0.45s ease, border-color 0.4s ease; }
.icon-card .icon-circle { transition: transform 0.55s cubic-bezier(.34,1.56,.64,1), box-shadow 0.4s ease; }
.icon-card:hover .icon-circle { transform: translateY(-5px) rotate(-8deg) scale(1.14); box-shadow: 0 12px 28px rgba(201,162,39,0.3); }
.icon-card::after {
  content: ''; position: absolute; left: 14%; right: 14%; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0); transition: transform 0.55s cubic-bezier(.22,1,.36,1);
}
.icon-card:hover::after { transform: scaleX(1); }

/* ---------- 7. Buttons: sheen, magnetism, pulse ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 48%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg); pointer-events: none; z-index: 2;
  transition: left 0.7s cubic-bezier(.22,1,.36,1);
}
.btn:hover::after { left: 130%; }
.btn-gold { transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), box-shadow 0.4s ease, filter 0.3s ease; }
.btn-gold:hover { filter: saturate(1.15); }
.btn-magnetic { will-change: transform; }

.btn-pulse::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1;
  border: 2px solid rgba(201,162,39,0.8);
  animation: ctaPulse 2.8s cubic-bezier(.22,1,.36,1) infinite;
  pointer-events: none;
}
@keyframes ctaPulse {
  0%   { transform: scale(1); opacity: 0.9; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

/* ---------- 8. Urgency bar: live ticker ---------- */
.urgency-bar { position: relative; overflow: hidden; }
.urgency-bar::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.22), transparent);
  animation: urgencySweep 5s ease-in-out infinite;
}
@keyframes urgencySweep {
  0%, 60% { left: -30%; }
  100%    { left: 130%; }
}
.urgency-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; margin-right: 9px; vertical-align: middle;
  animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 currentColor; }
  50%     { opacity: 0.65; transform: scale(0.85); box-shadow: 0 0 0 5px rgba(255,255,255,0); }
}

/* ---------- 9. Stats bar ---------- */
.stats-bar { position: relative; overflow: hidden; }
.stat-num { font-variant-numeric: tabular-nums; }
.stats-grid > div { position: relative; transition: transform 0.4s cubic-bezier(.22,1,.36,1); }
.stats-grid > div:hover { transform: translateY(-5px); }
.stats-grid > div:hover .stat-num { color: var(--gold-light); }
.stat-num { transition: color 0.4s ease; }

/* ---------- 10. Step cards: connected path ---------- */
.step-card { transition: transform 0.45s cubic-bezier(.22,1,.36,1), box-shadow 0.45s ease; }
.step-card .step-num { transition: transform 0.5s cubic-bezier(.34,1.56,.64,1), box-shadow 0.4s ease; }
.step-card:hover .step-num { transform: scale(1.16) rotate(-6deg); box-shadow: 0 10px 24px rgba(201,162,39,0.4); }
.step-card .step-ghost { transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.22,1,.36,1); }
.step-card:hover .step-ghost { opacity: 0.16; transform: translateY(-6px) scale(1.06); }

/* ---------- 11. Pricing ---------- */
.pricing-card { transition: transform 0.5s cubic-bezier(.22,1,.36,1), box-shadow 0.5s ease, border-color 0.4s ease; }
.pricing-card .price { transition: transform 0.45s cubic-bezier(.34,1.56,.64,1), color 0.4s ease; display: inline-block; }
.pricing-card:hover .price { transform: scale(1.06); }
.pricing-card .pricing-list li {
  opacity: 0; transform: translateX(-10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.pricing-card.rv-in .pricing-list li, .pricing-card.visible .pricing-list li { opacity: 1; transform: none; }
.pricing-card .pricing-list li:nth-child(1) { transition-delay: 0.10s; }
.pricing-card .pricing-list li:nth-child(2) { transition-delay: 0.16s; }
.pricing-card .pricing-list li:nth-child(3) { transition-delay: 0.22s; }
.pricing-card .pricing-list li:nth-child(4) { transition-delay: 0.28s; }
.pricing-card .pricing-list li:nth-child(5) { transition-delay: 0.34s; }
.pricing-card .pricing-list li:nth-child(6) { transition-delay: 0.40s; }
.pricing-card .pricing-list li:nth-child(7) { transition-delay: 0.46s; }
.pricing-card .pricing-list li:nth-child(8) { transition-delay: 0.52s; }
.pricing-card .check { transition: transform 0.3s ease; display: inline-block; }
.pricing-card li:hover .check { transform: scale(1.3); }

/* Featured plan: solid gold card. No border animation, no extra hover effect —
   it uses the same plain .pricing-card:hover (translateY + shadow) as the $89 card. */
.pricing-card.featured {
  border: 2px solid var(--gold-deep);
  background: linear-gradient(165deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-deep) 130%);
}
.pricing-card.featured::before {
  /* invert the "MOST POPULAR" pill so it stays readable against the gold card */
  background: var(--navy-dark);
  color: var(--gold-light);
}
.pricing-card.featured .plan-name { color: var(--navy-dark); }
.pricing-card.featured .price { color: var(--navy-dark); }
.pricing-card.featured .price span { color: rgba(8,21,39,0.65); }
.pricing-card.featured .pricing-list li { border-bottom-color: rgba(8,21,39,0.18); }
.pricing-card.featured .check { color: var(--navy-dark); }
.pricing-card.featured .btn-gold {
  background: var(--navy-dark);
  color: var(--gold-light);
  box-shadow: 0 10px 26px rgba(8,21,39,0.35);
}
.pricing-card.featured .btn-gold:hover { box-shadow: 0 14px 32px rgba(8,21,39,0.5); filter: none; }

/* ---------- 12. Testimonials ---------- */
.testimonial-card { transition: transform 0.5s cubic-bezier(.22,1,.36,1), box-shadow 0.5s ease; }
.testimonial-card .quote-mark { transition: transform 0.5s cubic-bezier(.34,1.56,.64,1), opacity 0.4s ease; }
.testimonial-card:hover .quote-mark { transform: scale(1.18) translateY(-4px); opacity: 0.28; }
.avatar-initials { transition: transform 0.45s cubic-bezier(.34,1.56,.64,1); }
.testimonial-card:hover .avatar-initials { transform: rotate(-8deg) scale(1.1); }

/* ---------- 13. FAQ accordion ---------- */
.faq-item { transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; }
.faq-item:hover { border-color: rgba(201,162,39,0.5); }
.faq-item[open] { box-shadow: 0 8px 26px rgba(18,35,63,0.09); }
.faq-item summary { transition: color 0.25s ease; }
.faq-item summary:hover { color: var(--gold-deep); }
.faq-item summary::after { transition: transform 0.35s cubic-bezier(.4,0,.2,1); }
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-body { overflow: hidden; }
.faq-item p { animation: faqOpen 0.45s cubic-bezier(.22,1,.36,1); }
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 14. Split media parallax ---------- */
.split-media { will-change: transform; }
.split { overflow: hidden; }
.split-media::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(120deg, rgba(201,162,39,0.16), transparent 55%);
  opacity: 0; transition: opacity 0.6s ease;
}
.split:hover .split-media::before { opacity: 1; }

/* ---------- 15. Section rhythm ---------- */
.section { position: relative; }
.section-cream + .section:not(.section-cream)::before,
.section:not(.section-cream) + .section-cream::before {
  content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,0.4), transparent);
}
.section-header h2 { position: relative; display: block; }
.eyebrow { position: relative; display: inline-block; }
.eyebrow::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.9s cubic-bezier(.22,1,.36,1) 0.2s;
}
.rv-in .eyebrow::after, .visible .eyebrow::after { transform: scaleX(1); }

/* ---------- 16. Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-rv] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero h1 .word { opacity: 1 !important; transform: none !important; }
  .pricing-card .pricing-list li { opacity: 1 !important; transform: none !important; }
  .grain, .orb, .hero-grid-floor { display: none !important; }
}
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ==========================================================================
   ═══ DEALPENCIL SHOWCASE ═══
   The free tool doubles as top-of-funnel: it demonstrates the software that
   comes with membership, and gives non-buyers a reason to come back.
   ========================================================================== */
.tool-section {
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: var(--text-light);
  position: relative; overflow: hidden;
}
.tool-section::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 700px 420px at 82% 12%, rgba(201,162,39,0.20), transparent 62%),
    radial-gradient(ellipse 600px 400px at 8% 88%, rgba(64,116,196,0.16), transparent 62%);
}
.tool-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center;
  position: relative; z-index: 1;
}
@media (max-width: 900px) { .tool-grid { grid-template-columns: 1fr; gap: 36px; } }

.tool-copy h2 { color: var(--white); font-size: clamp(28px, 4vw, 42px); margin-bottom: 16px; }
.tool-copy > p { color: rgba(244,241,232,0.84); font-size: 17px; margin-bottom: 26px; }
.tool-points { list-style: none; padding: 0; margin: 0 0 32px; }
.tool-points li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 9px 0; color: rgba(244,241,232,0.9); font-size: 15.5px;
}
.tool-points .tp-check {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(201,162,39,0.2); color: var(--gold-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; margin-top: 1px;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), background 0.3s ease;
}
.tool-points li:hover .tp-check { transform: scale(1.18) rotate(-10deg); background: var(--gold); color: var(--navy); }
.tool-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.tool-free-tag {
  display: flex; width: fit-content; align-items: center; gap: 8px;
  background: rgba(63,191,127,0.16); color: #6fe0a8;
  border: 1px solid rgba(63,191,127,0.35);
  padding: 6px 14px; border-radius: 100px;
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 18px;
}

/* Faux app window — a real screenshot can replace this later */
.tool-window {
  background: linear-gradient(180deg, #16294A, #0D1626);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,0.5);
  transform: perspective(1400px) rotateY(-7deg) rotateX(3deg);
  transition: transform 0.7s cubic-bezier(.22,1,.36,1);
}
.tool-window:hover { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg) translateY(-6px); }
@media (max-width: 900px) { .tool-window, .tool-window:hover { transform: none; } }

.tw-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; background: rgba(0,0,0,0.28);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.tw-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.tw-title {
  margin-left: 10px; font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase; color: rgba(244,241,232,0.5); font-weight: 700;
}
.tw-body { padding: 22px; }
.tw-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.tw-row:last-of-type { border-bottom: none; }
.tw-label { color: rgba(244,241,232,0.6); font-size: 13.5px; }
.tw-value { font-weight: 700; font-size: 19px; color: var(--white); font-variant-numeric: tabular-nums; }
.tw-value.gold  { color: var(--gold-light); }
.tw-value.green { color: #6fe0a8; }
.tw-verdict {
  margin-top: 16px; padding: 11px; border-radius: 8px; text-align: center;
  background: rgba(63,191,127,0.14); color: #6fe0a8;
  font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
}
.tw-stack { display: flex; height: 10px; border-radius: 100px; overflow: hidden; margin-top: 18px; }
.tw-seg { height: 100%; transition: width 1.2s cubic-bezier(.22,1,.36,1); }
.tw-seg.s1 { background: #5b6b86; }
.tw-seg.s2 { background: var(--gold); }
.tw-seg.s3 { background: #3FBF7F; }

/* ---------- Film: scroll-driven expansion ----------
   .film-track is pure travel: a runway taller than the viewport so there is
   scroll distance for the expansion to be scrubbed against. .film-stage
   inside is sticky and exactly one viewport tall — its box never changes
   size, it just sticks once its natural position reaches top:0.
   .film-shell is the growth target: a single `transform` (translateY +
   scale) driven by --p, computed every scroll frame in the inline script.
   Because transform applies to the whole subtree, the video, the pause
   button and the label all scale together as one composition. */
.film-chapter {
  /* `clip` not `hidden`: hidden establishes a scroll container and kills the
     sticky pin. clip clips without one, so .film-stage still sticks. */
  overflow-x: clip;
  overflow-y: visible;
  background: linear-gradient(160deg, var(--navy-dark) 0%, var(--navy) 55%, var(--navy-light) 100%);
  color: var(--text-light);
  /* No horizontal padding: .film-track must reach both screen edges so the
     frame is genuinely full-bleed at --p = 1. The lede and foot keep their
     inset via .container. */
  padding: 100px 0 0;
  /* Matches the real sticky header height so the frame's pre-pin offset
     lands exactly under the bar, the same relationship v23 encodes. */
  --header-h: 81px;
}
/* Centred to match every other section header on the site. Left-aligning it
   was the reason this chapter read as lopsided: a narrow block of type with a
   wide empty field beside it, in a layout where nothing else is left-aligned. */
.film-lede {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: clamp(40px, 5vw, 64px);
}
.film-lede h2 {
  color: var(--text-light);
  margin: 0;
  /* Same ramp as .section-header h2 so the two read as one type system. */
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
}
.film-track { height: 155svh; position: relative; }
.film-stage {
  position: sticky; top: 0;
  width: 100%; height: 100svh;
  overflow: hidden;
  /* <figure> carries a UA default `margin: 1em 40px`, which insets the pinned
     frame and stops it ever reaching the screen edges. */
  margin: 0;
}
.film-shell {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  transform-origin: 50% 0%;
  /* translateY BEFORE scale: transform functions compose right to left, so
     the scale applies first in local space and the translate happens second
     in unscaled pixels — keeping the header offset a constant amount rather
     than shrinking along with the frame as --p climbs. */
  transform:
    translateY(calc(var(--header-h) * (1 - var(--p, 0))))
    scale(calc(0.77 + 0.23 * var(--p, 0)));
  border-radius: calc(18px * (1 - var(--p, 0)));
  will-change: transform;
}
.film-video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--navy-dark);
}
/* ── Film: scrub bar ──────────────────────────────────────────────────────
   Sits along the bottom edge of the frame, above the play overlay so the
   visitor can jump around without first dismissing it. The gradient behind
   it guarantees contrast for the thumb and timecode over any frame. */
.film-scrub {
  position: absolute; z-index: 5;
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 28px 24px 16px;
  background: linear-gradient(to top, rgba(8,15,27,0.78), rgba(8,15,27,0));
  pointer-events: none;   /* the gradient must not eat clicks */
}
.film-scrub > * { pointer-events: auto; }
.film-time {
  flex: none;
  font: 700 12px/1 'Inter', sans-serif;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.92);
  font-variant-numeric: tabular-nums;   /* stops the timecode jittering */
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
/* The slider is fully restyled, so the native widget is stripped first. A
   generous transparent hit area keeps it comfortable on touch even though
   the visible track is thin. */
.film-seek {
  -webkit-appearance: none; appearance: none;
  flex: 1 1 auto; min-width: 0;
  height: 22px;
  background: transparent;
  cursor: pointer;
}
.film-seek::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.32);
}
.film-seek::-moz-range-track {
  height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.32);
}
.film-seek::-moz-range-progress {
  height: 4px; border-radius: 999px; background: var(--gold);
}
.film-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold);
  border: 2px solid rgba(8,15,27,0.55);
  margin-top: -5px;        /* centres the thumb on a 4px track */
  transition: transform 160ms ease;
}
.film-seek::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold); border: 2px solid rgba(8,15,27,0.55);
  transition: transform 160ms ease;
}
.film-seek:hover::-webkit-slider-thumb,
.film-seek:active::-webkit-slider-thumb { transform: scale(1.25); }
.film-seek:hover::-moz-range-thumb,
.film-seek:active::-moz-range-thumb { transform: scale(1.25); }
.film-seek:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 999px; }
/* Both controls share one absolutely-positioned row, so adding the sound
   toggle does not require hand-tuning a second set of offsets. */
/* Top-right, offset below the sticky header so the controls never sit under
   the nav while the film is pinned full-screen. Moved off the bottom edge
   because the footage carries its own logo lockup in that corner. */
.film-controls {
  /* Above the play overlay (z-index 4): the clip auto-plays silently behind
     that scrim, and WCAG 2.2.2 requires its stop control to stay reachable
     rather than being sealed under the offer of sound. */
  position: absolute; z-index: 5;
  right: 24px; top: calc(var(--header-h, 81px) + 16px);
  display: flex; align-items: center; gap: 10px;
}
.film-sound-icon {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
/* ── Film: play-with-sound overlay ────────────────────────────────────────
   Covers the whole frame so the tap target is the video, which is where a
   visitor instinctively presses. Only rendered while the clip is silent.
   `hidden` is toggled in script; the !important guards against the display
   value below overriding the attribute. */
.film-play-overlay[hidden] { display: none !important; }
.film-play-overlay {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  /* Offsets the scrub bar's height so the play button stays optically
     centred in the visible frame instead of colliding with the timeline on
     short viewports. */
  padding-bottom: clamp(40px, 6vh, 62px);
  border: 0; cursor: pointer;
  /* A scrim, so the button stays legible over any frame of the footage and
     the poster reads as a held moment rather than a stalled video. */
  background: radial-gradient(circle at 50% 50%, rgba(8,21,39,0.45), rgba(8,21,39,0.72));
  -webkit-tap-highlight-color: transparent;
  transition: background 300ms ease;
}
.film-play-overlay:hover { background: radial-gradient(circle at 50% 50%, rgba(8,21,39,0.34), rgba(8,21,39,0.64)); }
.film-play-overlay:focus-visible { outline: 3px solid var(--gold); outline-offset: -6px; }
.film-play-ring {
  display: grid; place-items: center;
  width: clamp(64px, 9vw, 92px); aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--navy-dark);
  box-shadow: 0 14px 40px rgba(8,21,39,0.5);
  transition: transform 320ms cubic-bezier(.34,1.56,.64,1);
}
/* Triangle drawn with borders: no icon request for a control that has to be
   on screen the instant the poster is. Nudged right so it reads optically
   centred inside the circle rather than mathematically centred. */
.film-play-ring::before {
  content: '';
  border-left: clamp(18px, 2.4vw, 24px) solid currentColor;
  border-block: clamp(12px, 1.6vw, 16px) solid transparent;
  margin-left: 22%;
}
.film-play-overlay:hover .film-play-ring { transform: scale(1.07); }
.film-play-overlay:active .film-play-ring { transform: scale(0.97); }
.film-play-text {
  font: 800 clamp(0.78rem, 1.1vw, 0.9rem)/1 'Inter', sans-serif;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
@media (prefers-reduced-motion: reduce) {
  .film-play-overlay, .film-play-ring { transition: none; }
}

/* While sound is off the control is an invitation, not just a toggle: the
   browser blocked audio and one press restores it, so it carries the gold
   treatment and a slow halo until pressed. */
.film-sound.is-muted {
  border-color: var(--gold);
  background: rgba(201, 162, 39, 0.22);
  animation: filmSoundNudge 2.6s ease-in-out infinite;
}
@keyframes filmSoundNudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.5); }
  50%      { box-shadow: 0 0 0 7px rgba(201, 162, 39, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .film-sound.is-muted { animation: none; }
}
.film-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 15, 27, 0.72);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  transition: background 240ms ease, border-color 240ms ease;
  font-family: 'Inter', sans-serif;
}
.film-toggle:hover { background: rgba(8,15,27,0.9); border-color: var(--gold); }
.film-toggle-icon {
  width: 10px; height: 12px; flex: none;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
.film-toggle[aria-pressed="true"] .film-toggle-icon {
  width: 0; height: 0; border: 0;
  border-left: 11px solid currentColor;
  border-block: 7px solid transparent;
}
.film-foot-wrap { padding: 48px 24px 100px; }
.film-foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 64px);
}
.film-read { max-width: 52ch; color: rgba(244, 241, 232, 0.78); font-size: 16px; line-height: 1.7; margin: 0 auto; }
@media (max-width: 900px) {
  .film-foot { grid-template-columns: 1fr; }
}

/* ---- Header while the film is full-screen ----
   Once the clip covers the viewport, the solid bar is the only thing
   interrupting it. The BAR is what goes — the wordmark, nav and CTA stay,
   sitting directly on the footage, so navigation is never removed.
   Toggled from the stage's own intersection ratio in the inline script. */
.site-header.is-over-film {
  background: linear-gradient(180deg, rgba(8,21,39,0.55) 0%, rgba(8,21,39,0) 100%);
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
.site-header.scrolled.is-over-film,
.site-header.condensed.is-over-film {
  background: linear-gradient(180deg, rgba(8,21,39,0.55) 0%, rgba(8,21,39,0) 100%);
  border-bottom-color: transparent;
  box-shadow: none;
}
@media (max-width: 900px) {
  /* No pin on phones, so the bar never needs to dissolve. */
  .site-header.is-over-film { background: rgba(18, 35, 63, 0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .film-track { height: auto; }
  .film-stage { position: static; height: auto; overflow: visible; }
  .film-shell { transform: none; border-radius: 0; aspect-ratio: 16 / 9; height: auto; max-height: 72vh; }
}

@media (max-width: 900px) {
  .film-track { height: auto; }
  .film-stage { position: static; height: auto; overflow: visible; }
  .film-shell { transform: none; border-radius: 0; aspect-ratio: 16 / 9; height: auto; }
  /* Controls drop below the clip on phones; the scrub bar stays on the frame
     where it belongs, just tightened up for the smaller box. */
  .film-controls { position: static; margin-top: 16px; margin-left: 24px; }
  .film-scrub { padding: 20px 16px 10px; gap: 10px; }
  .film-time { font-size: 11px; }
}