/* ============================================================
   MY MORTGAGE MENTOR - Design System
   Brand palette derived from logo (approx values supplied;
   swap the --navy/--blue/--cyan/--grey custom properties the
   moment the real logo file is available: everything else
   in this system is built to inherit from them).
   ============================================================ */

:root{
  /* ---- Brand colours ---- */
  --navy: #17234D;
  --navy-700: #1E2E5C;
  --navy-600: #263A70;
  --blue: #178DC1;
  --blue-dark: #136F97;
  --cyan: #22B7DF;
  --slate: #4A6580; /* secondary tone sampled from the logo's lower chevron */
  --grey: #C7CCD1;
  --grey-100: #F4F6F8;
  --grey-200: #E9ECEF;
  --white: #FFFFFF;
  --red: #C0392B; /* used sparingly: book "bestseller" ribbon/badge only, not a site-wide accent */
  --red-dark: #9B2C21;

  --gradient-brand: linear-gradient(135deg, var(--blue) 0%, var(--cyan) 100%);
  --gradient-navy: linear-gradient(160deg, #101A3D 0%, var(--navy) 55%, var(--navy-600) 100%);

  /* ---- Type ----
     Bold, confident sans throughout, no serif, for a modern
     advisory-firm feel (headlines in Manrope, body in Inter). */
  --font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Spacing / layout ---- */
  --max-w: 1220px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-soft: 0 16px 40px -22px rgba(23,35,77,0.28);
  --shadow-card: 0 8px 20px -14px rgba(23,35,77,0.18);

  --section-pad: clamp(56px, 8vw, 112px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
[id]{ scroll-margin-top: 88px; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
input,select,textarea{ font-family: inherit; font-size: 1rem; }
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--navy); margin:0 0 .5em; font-weight:800; line-height:1.08; letter-spacing:-0.02em; }
h3{ letter-spacing:-0.01em; }
p{ margin:0 0 1em; }

.container{
  width:100%;
  max-width: var(--max-w);
  margin-inline:auto;
  padding-inline: 20px;
}
@media(min-width:640px){ .container{ padding-inline: 32px; } }

section{ padding-block: var(--section-pad); position:relative; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size: 1rem;
  font-weight:700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
.eyebrow::before{
  content:"";
  width:26px; height:2px;
  background: var(--blue);
  display:inline-block;
}

/* One heading size sitewide (matches "A Career Built On Numbers..."): change --heading-size to resize every heading at once. */
:root{ --heading-size: clamp(1.5rem, 2.6vw, 1.9rem); }
h1, h2, h3{ font-size: var(--heading-size); }
h3{ margin-bottom:.35em; }
.lede{ font-size: clamp(1.05rem, 1.6vw, 1.2rem); color:#3C4A73; max-width: 54ch; }
.center{ text-align:center; margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 16px 30px;
  border-radius: var(--radius-sm);
  font-weight:700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1.5px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--blue);
  color: var(--white);
}
.btn-primary:hover{ background: var(--blue-dark); transform: translateY(-2px); }
.btn-secondary{
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-secondary:hover{ background: var(--navy); color: var(--white); transform: translateY(-2px); }
.btn-ghost-light{
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.55);
}
.btn-ghost-light:hover{ background: var(--white); color: var(--navy); border-color: var(--white); }
.btn-on-navy{
  background: var(--cyan);
  color: var(--navy);
}
.btn-on-navy:hover{ transform: translateY(-2px); background: var(--white); }
.btn-block{ width:100%; }
.btn-lg{ padding: 20px 32px; font-size: .92rem; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none !important; }

.cta-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* ============================================================
   ANIMATED BACKGROUNDS + SCROLL EFFECTS
   Subtle, on-brand motion only - a slow-drifting gradient glow
   behind the navy sections, a lighter version for the white
   page-hero, scroll-triggered fade-up reveals for cards/sections
   (added via JS so nothing is ever hidden if JS fails to load),
   and an animated count-up for the stat numbers. Everything here
   is neutralised under prefers-reduced-motion (see the dedicated
   rule near the end of this file) and none of it blocks or slows
   down the actual content - purely decorative, pointer-events:none.
   ============================================================ */

/* Aurora glow: navy/gradient-navy sections (hero, calculator, stats bar, final CTA) */
.strategy-hero::after,
.calc-section::after,
.stats-bar::after,
.final-cta::after{
  content:"";
  position:absolute; inset:-25%;
  background:
    radial-gradient(circle at 18% 28%, rgba(34,183,223,0.28), transparent 42%),
    radial-gradient(circle at 82% 74%, rgba(23,141,193,0.24), transparent 48%),
    radial-gradient(circle at 50% 100%, rgba(16,26,61,0.5), transparent 60%);
  animation: auroraDrift 24s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:0;
}
@keyframes auroraDrift{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(-2.5%,2%,0) scale(1.08); }
  100%{ transform: translate3d(2%,-2.5%,0) scale(1.04); }
}

/* Lighter version for the white page-hero (book page + legal pages) */
.page-hero::after{
  content:"";
  position:absolute; inset:-25%;
  background:
    radial-gradient(circle at 15% 20%, rgba(23,141,193,0.09), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(34,183,223,0.10), transparent 50%);
  animation: auroraDrift 26s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:0;
}

/* Scroll-reveal (class added by js/main.js - initScrollReveal).
   Wrapped in prefers-reduced-motion: no-preference as a second
   safety net on top of the JS-side check, so content is never
   hidden for a visitor who prefers reduced motion. */
@media (prefers-reduced-motion: no-preference){
  .reveal-init{
    opacity:0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .reveal-init.is-visible{ opacity:1; transform:none; }
}

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(23,35,77,0.07);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: 14px;
  gap: 16px;
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{ width:auto; height:38px; flex-shrink:0; object-fit:contain; }
.brand-word{ font-family: var(--font-body); font-weight:800; font-size:1.02rem; letter-spacing:-0.01em; text-transform:uppercase; color: var(--navy); line-height:1.05; }
.brand-word small{ display:block; font-family: var(--font-body); font-weight:600; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color: var(--blue); margin-top:4px; }

.footer-brand .brand-logo{ height:auto; width:150px; margin-bottom: 4px; }

.main-nav{ display:flex; align-items:center; gap: 2px; }
.main-nav a{
  padding: 10px 9px;
  border-radius: 999px;
  font-weight:600;
  font-size: .87rem;
  color: var(--navy);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ background: var(--grey-100); color: var(--blue); }

.header-actions{ display:flex; align-items:center; gap:10px; }
.nav-toggle{
  display:none;
  width:44px;height:44px;border-radius:12px;border:1px solid var(--grey-200);
  background:var(--white); align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:20px; height:2px; background:var(--navy); position:relative; transition: all .2s ease;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

@media (max-width: 1240px){
  .main-nav{
    position: fixed; inset: 68px 0 auto 0;
    background: var(--white);
    flex-direction:column; align-items:stretch;
    padding: 10px 20px 24px;
    box-shadow: var(--shadow-soft);
    transform: translateY(-12px);
    opacity:0; pointer-events:none;
    transition: all .2s ease;
    border-bottom: 1px solid var(--grey-200);
  }
  .main-nav.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .main-nav a{ padding: 14px 12px; font-size:.95rem; border-bottom:1px solid var(--grey-100); border-radius:0; }
  .main-nav .dropdown-toggle{ font-size:.95rem; padding:14px 12px; }
  .nav-toggle{ display:inline-flex; }
  .header-actions .btn-secondary{ display:none; }
}
@media (max-width: 480px){
  /* Phone header: logo mark + name text, with a compact call-to-action and menu button */
  .header-inner{ gap:8px; padding-block:10px; }
  .brand{ gap:8px; min-width:0; }
  .brand-mark{ height:34px; }
  .brand-word{ font-size:.8rem; letter-spacing:-0.005em; flex-shrink:0; max-width:9em; }
  .brand-word small{ font-size:.5rem; letter-spacing:.12em; margin-top:3px; white-space:nowrap; }
  .header-actions{ gap:6px; flex-shrink:0; }
  .header-actions .btn{ padding:8px 10px !important; font-size:.64rem; line-height:1.2; letter-spacing:.04em; text-align:center; min-height:0; white-space:normal; max-width:104px; }
  .nav-toggle{ width:40px; height:40px; }
  .main-nav{ inset: 76px 0 auto 0; }
}
@media (max-width: 345px){
  .brand-word{ font-size:.7rem; }
  .brand-word small{ font-size:.44rem; letter-spacing:.08em; }
  .brand-mark{ height:30px; }
  .header-actions .btn{ font-size:.56rem; padding:7px 6px !important; max-width:84px; }
  .nav-toggle{ width:36px; height:36px; }
  .main-nav{ inset: 70px 0 auto 0; }
}
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform: rotate(45deg); top:0; }
.nav-toggle[aria-expanded="true"] span::after{ transform: rotate(-45deg); top:0; }

/* ---------- Geometric brand motifs ---------- */
.motif-arc{
  position:absolute; pointer-events:none; z-index:0;
  border-radius:50%;
  border: 1.5px solid rgba(23,35,77,0.10);
}
.motif-fill{
  position:absolute; pointer-events:none; z-index:0;
  border-radius:50%;
  background: var(--grey-100);
  opacity:.7;
}
.divider-chevron{
  width:100%; height:56px; display:block;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding-top: clamp(48px, 8vw, 88px);
  padding-bottom: clamp(56px, 9vw, 100px);
  overflow:hidden;
  background: var(--white);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items:center;
  position:relative; z-index:1;
}
@media(max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } .hero-photo{ order:-1; } }

.hero-copy h1{ margin-bottom:.35em; }
.hero-copy .lede{ margin-bottom: 30px; }

.trust-strip{
  margin-top: 40px;
  display:flex; flex-wrap:wrap; gap: 22px 34px;
  align-items:center;
}
.trust-item{ display:flex; align-items:center; gap:10px; font-size:.9rem; font-weight:600; color:#3C4A73; }
.trust-item .num{ font-family: var(--font-display); font-weight:700; font-size:1.25rem; color: var(--navy); }

.hero-photo{ position:relative; }
.photo-frame{
  position:relative;
  border-radius: var(--radius-md);
  overflow:hidden;
  aspect-ratio: 4/5;
  background: var(--gradient-navy);
  display:flex; align-items:flex-end;
}
.photo-placeholder-tag{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; color: rgba(255,255,255,0.85); text-align:center; padding: 24px;
}
.photo-placeholder-tag svg{ width:64px; height:64px; opacity:.9; }
.photo-placeholder-tag .ph-label{ font-family: var(--font-display); font-size:1.05rem; color:#fff; }
.photo-placeholder-tag .ph-sub{ font-size:.8rem; color: rgba(255,255,255,0.65); max-width:26ch; }
.frame-photo-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position: center 15%;
  display:block;
}
.photo-frame .frame-caption{
  position:relative; z-index:2; width:100%;
  background: linear-gradient(0deg, rgba(9,14,33,0.75), rgba(9,14,33,0));
  padding: 26px 22px 20px;
  color:#fff;
}
.frame-caption strong{ font-family:var(--font-display); font-size:1.1rem; display:block; }
.frame-caption span{ font-size:.82rem; color: rgba(255,255,255,0.75); }


/* ---------- Section headers ---------- */
.section-head{ max-width: 640px; margin-bottom: 46px; }
.section-head.center{ margin-inline:auto; text-align:center; }

/* ---------- Stephen / About section ---------- */
.about-grid{
  display:grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(30px,5vw,64px);
  align-items:center;
}
@media(max-width:900px){ .about-grid{ grid-template-columns:1fr; } }
.about-photo{
  border-radius: var(--radius-md);
  aspect-ratio: 3/3.6;
  background: linear-gradient(160deg, var(--grey-100), var(--grey-200));
  border: 1px solid var(--grey-200);
  position:relative; overflow:hidden;
}

/* ---------- Pillar grid ("Why Choose Us") ---------- */
.pillar-section{ background: var(--grey-100); }
.pillar-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
@media(max-width:980px){ .pillar-grid{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:560px){ .pillar-grid{ grid-template-columns: 1fr; } }
.pillar-item{ border-top: 3px solid var(--navy); padding-top: 22px; }
.pillar-item:nth-child(2){ border-top-color: var(--blue); }
.pillar-item:nth-child(3){ border-top-color: var(--cyan); }
.pillar-item:nth-child(4){ border-top-color: var(--slate); }
.pillar-item h3{ font-size: 1.1rem; margin-bottom: 8px; }
.pillar-item p{ font-size:.92rem; color:#5A6584; margin-bottom:0; }

/* ---------- Provocation banner ---------- */
.provoke-banner{
  background: var(--navy);
  color:#fff;
  position:relative;
  overflow:hidden;
  padding-block: clamp(52px, 7vw, 84px);
}
.provoke-inner{ position:relative; z-index:1; display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px,5vw,56px); align-items:center; }
@media(max-width:860px){ .provoke-inner{ grid-template-columns:1fr; text-align:left; } }
.provoke-banner h2{ color:#fff; margin-bottom:16px; max-width: 15ch; }
.provoke-banner .eyebrow{ color: rgba(255,255,255,0.85); }
.provoke-banner .eyebrow::before{ background:#fff; }
.provoke-banner p{ color: rgba(255,255,255,0.86); max-width: 46ch; }
.provoke-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
@media(max-width:860px){ .provoke-cta{ align-items:flex-start; } }
.provoke-cta .prompt-line{ font-family: var(--font-display); font-size:1.15rem; color:#fff; max-width:28ch; }

/* ---------- Book section ---------- */
.book-section{
  background: var(--gradient-navy);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.book-section h2, .book-section h3{ color:#fff; }
.book-section .eyebrow{ color: var(--cyan); }
.book-grid{
  display:grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px,6vw,72px);
  align-items:center; position:relative; z-index:1;
}
@media(max-width:900px){ .book-grid{ grid-template-columns:1fr; } .book-mockup-wrap{ order:-1; } }

.book-mockup-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.book-mockup{
  position:relative;
  width: min(280px, 70vw);
  aspect-ratio: 5/7.6;
  perspective: 1200px;
}
.book-cover{
  position:absolute; inset:0;
  border-radius: 4px 10px 10px 4px;
  background: linear-gradient(135deg, var(--blue), var(--navy) 70%);
  box-shadow: 18px 24px 50px -14px rgba(0,0,0,0.55), inset -6px 0 12px rgba(0,0,0,0.25);
  transform: rotateY(-18deg) rotateX(2deg);
  display:flex; flex-direction:column; justify-content:space-between;
  padding: 26px 22px;
  border: 1px solid rgba(255,255,255,0.12);
}
.book-cover .book-kicker{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color: var(--cyan); font-weight:700; }
.book-cover .book-title{ font-family: var(--font-display); font-size: 1.55rem; line-height:1.15; color:#fff; margin-top:10px; }
.book-cover .book-mark{ width:38px; height:38px; }
.book-cover .book-author{ font-size:.8rem; color: rgba(255,255,255,0.8); }
.book-spine{
  position:absolute; left:-9px; top:6px; bottom:6px; width:9px;
  background: linear-gradient(180deg, var(--navy-600), var(--navy));
  transform: rotateY(-18deg) translateX(0);
  border-radius: 3px 0 0 3px;
  box-shadow: inset -2px 0 4px rgba(0,0,0,0.4);
}
.badge-bestseller{
  position:absolute; top:-16px; right:-14px;
  background:#fff; color:var(--navy);
  font-size:.72rem; font-weight:800; letter-spacing:.03em;
  border-radius:999px; padding: 9px 14px;
  box-shadow: var(--shadow-card);
  display:flex; align-items:center; gap:6px;
}
.badge-bestseller svg{ width:14px;height:14px; }

.book-points{ display:grid; gap:14px; margin: 26px 0 30px; }
.book-point{ display:flex; gap:12px; align-items:flex-start; }
.book-point svg{ width:20px;height:20px; flex-shrink:0; margin-top:2px; }
.book-point p{ margin:0; color: rgba(255,255,255,0.82); font-size:.95rem; }

/* ---------- Info cards ---------- */
.card-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:22px;
}
@media(max-width:980px){ .card-grid{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:560px){ .card-grid{ grid-template-columns: 1fr; } }
/* Mobile: cards that carry an inline 3-column setting (home "Where Stephen Can Help", book "Why Get The Book")
   stack in one full-width column. !important is needed to beat that inline style; desktop is untouched. */
@media(max-width:767px){ .card-grid{ grid-template-columns: 1fr !important; gap:20px; } .info-card{ min-width:0; } }
.info-card{
  background:#fff; border:1px solid var(--grey-200); border-radius: var(--radius-md);
  padding: 30px 26px; position:relative; overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.info-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--cyan); }
.info-card .card-icon{
  width:42px;height:42px;border-radius:10px;
  border: 1.5px solid var(--navy);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.info-card .card-icon svg{ width:20px;height:20px; color:var(--navy); }
.info-card h3{ margin-bottom:8px; }
.info-card p{ font-size:.92rem; color:#5A6584; margin-bottom:16px; }
.info-card .card-link{ font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--blue); display:inline-flex; align-items:center; gap:6px; }
.info-card .card-link svg{ width:13px;height:13px; transition: transform .15s ease; }
.info-card:hover .card-link svg{ transform: translateX(3px); }

/* ---------- Media grid ---------- */
.filter-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.filter-chip{
  padding: 9px 18px; border-radius: var(--radius-sm); border:1px solid var(--grey-200);
  font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#3C4A73; background:#fff;
  transition: all .15s ease;
}
.filter-chip:hover{ border-color: var(--blue); color:var(--blue); }
.filter-chip.active{ background: var(--navy); border-color: var(--navy); color:#fff; }

.media-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
@media(max-width:980px){ .media-grid{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:640px){ .media-grid{ grid-template-columns: 1fr; } }

.media-card{
  background:#fff; border:1px solid var(--grey-200); border-radius: var(--radius-md);
  overflow:hidden; display:flex; flex-direction:column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.media-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card); }
.media-thumb{
  aspect-ratio: 16/10; position:relative;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  display:flex; align-items:center; justify-content:center;
}
.media-thumb::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 55%);
}
.media-thumb .play-icon{
  width:52px;height:52px;border-radius:50%;
  background: rgba(255,255,255,0.16); border:1.5px solid rgba(255,255,255,0.5);
  display:flex; align-items:center; justify-content:center; position:relative; z-index:1;
}
.media-thumb .play-icon svg{ width:18px; height:18px; color:#fff; margin-left:2px; }
.media-type-tag{
  position:absolute; top:12px; left:12px; z-index:2;
  background: rgba(255,255,255,0.92); color:var(--navy);
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding: 5px 10px; border-radius: 4px;
}
.media-body{ padding: 20px 22px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.media-body h3{ font-size:1.05rem; margin-bottom:2px; }
.media-body p{ font-size:.88rem; color:#5A6584; margin-bottom:10px; flex:1; }
.media-link{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--blue); display:inline-flex; align-items:center; gap:6px; }
.media-link svg{ width:14px;height:14px; transition: transform .15s ease; }
.media-card:hover .media-link svg{ transform: translateX(3px); }

.media-cta-banner{
  grid-column: 1 / -1;
  background: var(--grey-100);
  border-radius: var(--radius-md);
  padding: 30px 28px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
}
.media-cta-banner h3{ margin-bottom:4px; }
.media-cta-banner p{ margin:0; color:#5A6584; font-size:.92rem; }

/* ---------- Media page: portrait video (left) + caption (right) ---------- */
.media-video-list{ display:flex; flex-direction:column; }
.media-video-row{
  display:grid; grid-template-columns: minmax(220px,320px) 1fr; gap: clamp(28px,5vw,56px);
  align-items:center; padding: clamp(34px,5vw,52px) 0; border-bottom:1px solid var(--grey-200);
}
.media-video-row:last-child{ border-bottom:none; padding-bottom:0; }
@media(max-width:700px){ .media-video-row{ grid-template-columns:1fr; } }

.media-video-frame{
  position:relative; width:100%; max-width:320px; aspect-ratio:9/16;
  border-radius: var(--radius-md); overflow:hidden; background:var(--navy);
  box-shadow: var(--shadow-card);
}
.media-video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media(max-width:700px){ .media-video-frame{ margin-inline:auto; } }

.yt-facade{
  position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; margin:0;
  cursor:pointer; background:var(--navy); display:block;
}
.yt-facade img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .3s ease, filter .3s ease; }
.yt-facade:hover img{ transform: scale(1.04); filter: brightness(.85); }
.yt-facade::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,20,48,0.05) 40%, rgba(11,20,48,0.55) 100%);
}
.yt-facade-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1;
  width:58px; height:58px; border-radius:50%;
  background: rgba(11,20,48,0.55); border:1.5px solid rgba(255,255,255,0.7);
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease, transform .2s ease;
}
.yt-facade:hover .yt-facade-play{ background: var(--blue); transform:translate(-50%,-50%) scale(1.08); }
.yt-facade-play svg{ width:20px; height:20px; color:#fff; margin-left:3px; }

.media-caption-label{
  font-size:.76rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--blue); margin-bottom:10px; display:block;
}
.media-video-caption p{ font-size:1.02rem; line-height:1.65; color:#3C4A73; margin-bottom:18px; max-width:56ch; }
.media-video-caption .media-link{ font-size:.8rem; }
.media-video-caption .media-link:hover svg{ transform: translateX(3px); }

/* ---------- Forms ---------- */
.form-panel{
  background:#fff; border:1px solid var(--grey-200); border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 44px); box-shadow: var(--shadow-card);
}
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
@media(max-width:560px){ .form-grid{ grid-template-columns:1fr; } }
.form-field{ display:flex; flex-direction:column; gap:7px; }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{ font-size:.85rem; font-weight:700; color:var(--navy); }
.form-field input, .form-field select, .form-field textarea{
  padding: 13px 15px; border-radius: var(--radius-sm); border:2px solid var(--blue);
  background: #fff; color: var(--navy); transition: border-color .15s ease, box-shadow .15s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color: var(--blue-dark); background:#fff; box-shadow: 0 0 0 3px rgba(23,141,193,0.28);
}
.form-field textarea{ resize:vertical; min-height:96px; }
.form-note{ font-size:.78rem; color:#7A84A0; margin-top:14px; }
.form-submit-row{ margin-top:22px; }
.form-error{ font-size:.8rem; color:#C0392B; display:none; margin-top:4px; }
.form-field.invalid input, .form-field.invalid select{ border-color:#C0392B; }
.form-field.invalid .form-error{ display:block; }

.form-success{ display:none; text-align:center; padding: 20px 0; }
.form-success.visible{ display:block; }
.form-success .success-icon{
  width:64px;height:64px;border-radius:50%;
  background: var(--gradient-brand); display:flex; align-items:center; justify-content:center;
  margin: 0 auto 18px;
}
.form-success .success-icon svg{ width:30px;height:30px; color:#fff; }

/* ---------- Lead / Talk section ---------- */
.talk-section{ background: var(--grey-100); }
.talk-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px,5vw,60px); align-items:flex-start; }
@media(max-width:900px){ .talk-grid{ grid-template-columns:1fr; } }
.talk-points{ display:grid; gap:16px; margin-top:26px; }
.talk-point{ display:flex; gap:12px; align-items:flex-start; }
.talk-point svg{ width:20px;height:20px; flex-shrink:0; margin-top:2px; }
.talk-point p{ margin:0; font-size:.94rem; color:#3C4A73; }

/* ---------- Final CTA ---------- */
.final-cta{
  background: var(--gradient-navy);
  color:#fff; text-align:left; position:relative; overflow:hidden;
}
.final-cta > .container{ position:relative; z-index:1; }
.final-cta h2{ color:#fff; max-width: 26ch; }
.final-cta .lede{ color: rgba(255,255,255,0.75); }
.final-cta .highlight-line{ color:#fff; font-family: var(--font-display); font-weight:700; font-size: clamp(1.05rem,2vw,1.3rem); max-width:34ch; margin: 24px 0; line-height:1.4; }
.final-cta .cta-row{ margin-top: 30px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy); color: rgba(255,255,255,0.75); padding-block: 52px 28px; }
.footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,0.12); }
.footer-brand{ max-width:320px; }
.footer-brand .brand-word{ color:#fff; }
.footer-brand p{ font-size:.88rem; color: rgba(255,255,255,0.6); margin-top:12px; }
.footer-links{ display:flex; gap:56px; flex-wrap:wrap; }
.footer-col h4{ font-family: var(--font-body); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color: rgba(255,255,255,0.5); margin-bottom:14px; }
.footer-col a, .footer-col span{ display:block; font-size:.9rem; color: rgba(255,255,255,0.82); margin-bottom:10px; }
.footer-col a:hover{ color: var(--cyan); }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:22px; font-size:.78rem; color: rgba(255,255,255,0.45); }

/* ---------- Page hero (book/media inner pages) ---------- */
.page-hero{
  padding-top: clamp(44px,7vw,72px); padding-bottom: clamp(30px,5vw,50px);
  background: var(--white);
  position:relative; overflow:hidden;
}
.page-hero > .container{ position:relative; z-index:1; }
.page-hero .section-head{ margin-bottom:0; }

/* ---------- Book page specific ---------- */
.book-hero-grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(30px,5vw,64px); align-items:center; }
@media(max-width:900px){ .book-hero-grid{ grid-template-columns:1fr; } .book-hero-grid .book-mockup-wrap{ order:-1; } }
.book-hero-grid .book-mockup .book-cover{ background: linear-gradient(135deg, var(--navy), var(--blue) 85%); }

.what-you-learn{ display:grid; grid-template-columns: repeat(2,1fr); gap:16px; margin-top:8px; }
@media(max-width:560px){ .what-you-learn{ grid-template-columns:1fr; } }
.learn-item{ display:flex; gap:12px; padding: 16px; border:1px solid var(--grey-200); border-radius: var(--radius-sm); background:#fff; }
.learn-item svg{ width:20px;height:20px; flex-shrink:0; margin-top:2px; }
.learn-item p{ margin:0; font-size:.9rem; color:#3C4A73; }
.learn-bonus-note{ display:flex; gap:10px; align-items:flex-start; margin-top:14px; font-size:.88rem; color:#3C4A73; }
.learn-bonus-note svg{ width:18px;height:18px; flex-shrink:0; margin-top:2px; color:var(--blue); }
.learn-bonus-note strong{ color:var(--navy); }

.gate-note{ display:flex; align-items:center; gap:10px; font-size:.82rem; color:#7A84A0; margin-top:16px; }
.gate-note svg{ width:16px;height:16px; flex-shrink:0; }

/* ---------- FAQ accordion ---------- */
.faq-list{ display:flex; flex-direction:column; border-top:1px solid var(--grey-200); }
.faq-item{ border-bottom:1px solid var(--grey-200); }
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:none; border:none; text-align:left; padding: 22px 4px;
  font-family: var(--font-display); font-weight:700; font-size:1.02rem; color:var(--navy);
}
.faq-question .faq-icon{ width:20px; height:20px; flex-shrink:0; position:relative; }
.faq-question .faq-icon::before, .faq-question .faq-icon::after{
  content:""; position:absolute; background: var(--navy); border-radius:2px;
  transition: transform .2s ease, opacity .2s ease;
}
.faq-question .faq-icon::before{ width:14px; height:2px; top:9px; left:3px; }
.faq-question .faq-icon::after{ width:2px; height:14px; top:3px; left:9px; }
.faq-item.open .faq-question .faq-icon::after{ transform: rotate(90deg); opacity:0; }
.faq-answer{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.faq-answer p{ padding: 0 4px 22px; margin:0; font-size:.94rem; color:#5A6584; max-width:66ch; }
.faq-item.open .faq-answer{ max-height:240px; }

/* ---------- Footer newsletter ---------- */
.footer-newsletter h4{ font-family: var(--font-body); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color: rgba(255,255,255,0.5); margin-bottom:14px; }
.newsletter-form{ display:flex; gap:0; max-width:320px; }
.newsletter-form input{
  flex:1; padding:12px 14px; border:2px solid var(--blue);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: rgba(255,255,255,0.06); color:#fff; font-size:.88rem;
}
.newsletter-form input::placeholder{ color: rgba(255,255,255,0.45); }
.newsletter-form input:focus{ outline:none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,183,223,0.35); }
.newsletter-form button{
  padding: 0 18px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--cyan); color: var(--navy); border:none; font-weight:800; font-size:.9rem;
}
.newsletter-note{ font-size:.76rem; color: rgba(255,255,255,0.4); margin-top:10px; max-width:280px; }
.newsletter-success{ display:none; font-size:.85rem; color:var(--cyan); font-weight:600; }
.newsletter-success.visible{ display:block; }

/* ---------- Utility ---------- */
.text-cyan{ color: var(--cyan); }
.mt-0{ margin-top:0; }
.visually-hidden{ position:absolute; width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link{
  position:absolute; left:12px; top:-60px; background:var(--navy); color:#fff;
  padding:10px 16px; border-radius:8px; z-index:1000; transition: top .15s ease;
}
.skip-link:focus{ top:12px; }

@media (max-width: 480px){
  .btn{ padding: 14px 22px; font-size:.92rem; white-space:normal; text-align:center; }
  section{ padding-block: 48px; }
}

/* ---------- Footer social icons ---------- */
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.25);
  display:flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,0.75);
  transition: all .15s ease;
  flex-shrink:0;
}
.footer-social a:hover{ background: var(--cyan); border-color: var(--cyan); color: var(--navy); }
.footer-social svg{ width:17px; height:17px; }

/* ---------- Media card date ---------- */
.media-date{ font-size:.76rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--blue); }

/* ---------- Media CTA banner (data-driven, inserted via JS) ---------- */
.media-cta-banner .cta-row{ flex-shrink:0; }

/* ---------- Contact page ---------- */
.contact-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px,5vw,60px); align-items:flex-start; }
@media(max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-points{ display:grid; gap:20px; margin-top:26px; }
.contact-point{ display:flex; gap:12px; align-items:flex-start; }
.contact-point svg{ width:20px;height:20px; flex-shrink:0; margin-top:3px; }
.contact-point p{ margin:0; font-size:.94rem; color:#3C4A73; }
.contact-point strong{ display:block; font-family:var(--font-display); font-size:1rem; color:var(--navy); margin-bottom:4px; }

.how-it-works{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; counter-reset: step; }
@media(max-width:760px){ .how-it-works{ grid-template-columns:1fr; } }
.how-step{ position:relative; padding-top:8px; }
.how-step::before{
  counter-increment: step; content: counter(step);
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background: var(--navy); color:#fff; font-family: var(--font-display); font-weight:700;
  margin-bottom:16px;
}
.how-step h3{ margin-bottom:6px; }
.how-step p{ font-size:.92rem; color:#5A6584; margin-bottom:0; }

/* ---------- Legal / policy pages ---------- */
.legal-content{ max-width: 760px; }
.legal-content h2{ margin-top:1.6em; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p{ color:#3C4A73; }
.legal-note{
  background: var(--grey-100); border:1px solid var(--grey-200); border-radius: var(--radius-sm);
  padding: 18px 20px; font-size:.9rem; color:#5A6584; margin-bottom: 34px;
}

/* ============================================================
   V2 - "Strategy" restyle additions
   Bolder hero, working calculator, 5-step framework, stats bar,
   redesigned book cover treatment, nav dropdowns.
   ============================================================ */

.text-blue{ color: var(--cyan); }

/* ---------- Nav dropdowns ---------- */
.main-nav .nav-item{ position:relative; display:inline-flex; }
.main-nav .dropdown-toggle{
  display:inline-flex; align-items:center; gap:4px;
  padding: 10px 8px; border-radius:999px; font-weight:600; font-size:.87rem; color:var(--navy);
  background:none; border:none; white-space:nowrap; transition: background .15s ease, color .15s ease;
}
.main-nav .dropdown-toggle:hover{ background: var(--grey-100); color: var(--blue); }
.main-nav .dropdown-toggle .caret{ width:9px; height:9px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
.nav-item.open .dropdown-toggle .caret{ transform: rotate(-135deg) translateY(2px); }
.dropdown-menu{
  position:absolute; top: calc(100% + 6px); left:0; min-width:230px;
  background:#fff; border:1px solid var(--grey-200); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft); padding:8px; display:none; z-index:200;
}
.nav-item.open .dropdown-menu{ display:block; }
.dropdown-menu a{ display:block; padding:10px 12px; border-radius:6px; font-size:.92rem; font-weight:600; color:var(--navy); }
.dropdown-menu a:hover{ background: var(--grey-100); color: var(--blue); }
@media(max-width:1240px){
  .main-nav .nav-item{ display:flex; flex-direction:column; align-items:stretch; }
  .dropdown-menu{ position:static; box-shadow:none; border:none; padding:0 0 0 14px; display:none; }
  .nav-item.open .dropdown-menu{ display:block; }
  .main-nav .dropdown-toggle{ justify-content:space-between; border-bottom:1px solid var(--grey-100); border-radius:0; }
}

/* ---------- Strategy hero (v2) ---------- */
.strategy-hero{
  position:relative; overflow:hidden;
  background: var(--gradient-navy);
  padding-top: clamp(52px, 8vw, 92px);
  padding-bottom: clamp(64px, 9vw, 110px);
  color:#fff;
}
.strategy-hero::before{
  /* stylised city skyline silhouette standing in for a real photograph:
     replace this section's background with real photography when supplied */
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:38%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cg fill='%23101a3d'%3E%3Crect x='0' y='120' width='60' height='80'/%3E%3Crect x='70' y='90' width='45' height='110'/%3E%3Crect x='125' y='140' width='70' height='60'/%3E%3Crect x='205' y='60' width='40' height='140'/%3E%3Crect x='255' y='110' width='55' height='90'/%3E%3Crect x='320' y='150' width='90' height='50'/%3E%3Crect x='420' y='80' width='50' height='120'/%3E%3Crect x='480' y='130' width='60' height='70'/%3E%3Crect x='550' y='40' width='42' height='160'/%3E%3Crect x='600' y='100' width='65' height='100'/%3E%3Crect x='675' y='150' width='80' height='50'/%3E%3Crect x='765' y='70' width='48' height='130'/%3E%3Crect x='820' y='120' width='58' height='80'/%3E%3Crect x='888' y='95' width='40' height='105'/%3E%3Crect x='935' y='145' width='85' height='55'/%3E%3Crect x='1030' y='60' width='45' height='140'/%3E%3Crect x='1085' y='115' width='60' height='85'/%3E%3Crect x='1155' y='135' width='45' height='65'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size: 100% 100%; opacity:.55; pointer-events:none;
}
.strategy-hero .container{ position:relative; z-index:1; }
.strategy-hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,5vw,64px); align-items:center; }
@media(max-width:960px){ .strategy-hero-grid{ grid-template-columns:1fr; } }
.strategy-hero h1{ color:#fff; }
.strategy-hero .eyebrow{ color: var(--cyan); }
.strategy-hero .eyebrow::before{ background: var(--cyan); }
.strategy-hero .lede{ color: rgba(255,255,255,0.82); font-weight:700; }
.hero-subclaim{ font-family: var(--font-body); font-weight:300; font-size: clamp(1.05rem,1.8vw,1.25rem); color: var(--white); max-width:46ch; margin: -6px 0 18px; line-height:1.4; }
.strategy-trust-row{ display:flex; flex-wrap:wrap; gap:22px 30px; margin-top:36px; }
.strategy-trust-row .trust-item{ color: rgba(255,255,255,0.85); }
.strategy-trust-row .trust-item .num{ color:#fff; }
.strategy-hero .btn-ghost-light:hover{ color:var(--navy); }
.hero-cta-line{ font-size:.9rem; color: rgba(255,255,255,0.7); margin-top:14px; }

.strategy-photo-wrap{ position:relative; width:100%; max-width:420px; margin-inline:auto; }
.strategy-photo-frame{
  position:relative; width:100%; max-width:420px; aspect-ratio: 4/4.6;
  border-radius: var(--radius-md); overflow:hidden;
  background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.14);
}
.strategy-book-float{
  position:absolute; right:-10%; bottom:-8%; width:46%; z-index:2;
  transform: rotate(7deg);
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.45));
}

/* ---------- Quick benefits row ---------- */
.quick-benefits{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
@media(max-width:760px){ .quick-benefits{ grid-template-columns:1fr; } }
.quick-benefit{ display:flex; gap:16px; align-items:flex-start; }
.quick-benefit .qb-icon{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--blue); display:flex; align-items:center; justify-content:center;
}
.quick-benefit .qb-icon svg{ width:22px; height:22px; color:var(--blue); }
.quick-benefit h3{ font-size:1.05rem; margin-bottom:4px; }
.quick-benefit p{ font-size:.9rem; color:#5A6584; margin:0; }

/* ---------- Calculator ---------- */
.calc-section{ background: var(--gradient-navy); color:#fff; position:relative; overflow:hidden; }
.calc-grid{ position:relative; z-index:1; display:grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px,5vw,64px); align-items:center; }
@media(max-width:900px){ .calc-grid{ grid-template-columns:1fr; } }
.calc-section h2{ color:#fff; max-width:14ch; }
.calc-section .lede{ color: rgba(255,255,255,0.78); }
.calc-card{
  background:#fff; border-radius: var(--radius-lg); padding: clamp(32px,5vw,52px);
  box-shadow: var(--shadow-soft); color: var(--navy);
}
.calc-fields{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:24px; }
@media(max-width:640px){ .calc-fields{ grid-template-columns:1fr; } }
.calc-field label{ display:block; font-size:.95rem; font-weight:700; color:var(--navy); margin-bottom:8px; }
.calc-field .calc-input-wrap{ position:relative; display:flex; align-items:center; }
.calc-field .calc-input-wrap span{ position:absolute; left:16px; color:#7A84A0; font-weight:600; font-size:1.05rem; }
.calc-field .calc-input-wrap span.suffix{ left:auto; right:16px; }
.calc-field input{
  width:100%; padding:17px 16px; border-radius: var(--radius-sm); border:2px solid var(--blue);
  background: #fff; color:var(--navy); font-size:1.15rem; font-weight:700; transition: border-color .15s ease, box-shadow .15s ease;
}
.calc-field input.with-prefix{ padding-left:30px; }
.calc-field input.with-suffix{ padding-right:30px; }
.calc-field input:focus{ outline:none; border-color: var(--blue-dark); background:#fff; box-shadow: 0 0 0 3px rgba(23,141,193,0.28); }
.calc-field.invalid input{ border-color:#C0392B; background:#FDEEEC; }
.calc-note{ display:flex; align-items:center; gap:8px; font-size:.85rem; color:#7A84A0; margin-top:16px; }
.calc-note svg{ width:16px; height:16px; flex-shrink:0; }
.calc-result{ display:none; margin-top:26px; border-top:1px solid var(--grey-200); padding-top:26px; }
.calc-result.visible{ display:block; }
.calc-result-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:20px; }
@media(max-width:480px){ .calc-result-grid{ grid-template-columns:1fr; } }
.calc-stat{ background: var(--grey-100); border-radius: var(--radius-sm); padding:20px 22px; }
.calc-stat .calc-stat-num{ font-family: var(--font-display); font-size:2.1rem; font-weight:800; color: var(--navy); display:block; }
.calc-stat .calc-stat-label{ font-size:.88rem; color:#5A6584; }
.calc-disclaimer{ font-size:.8rem; color:#8892A8; margin-bottom:0; }
.calc-error{ display:none; color:var(--red); font-size:.9rem; font-weight:600; margin-top:12px; }
.calc-error.visible{ display:block; }
.calc-good-rate-note{
  display:none; font-size:1rem; color: var(--navy); background: var(--grey-100);
  border-radius: var(--radius-sm); padding:18px 20px; margin-bottom:20px;
}
.calc-good-rate-note.visible{ display:block; }
.calc-lead-cta{ margin-top:20px; }
.calc-leadform-panel{ margin-top:26px; border-top:1px solid var(--grey-200); padding-top:26px; }
.calc-leadform-panel .form-field label{ font-size:.95rem; }
.calc-leadform-panel .form-field input{ padding:16px 16px; font-size:1.05rem; }
.calc-leadform-success-heading{ font-size:var(--heading-size); margin-bottom:10px; }

/* ---------- Meet Stephen v2 layout ---------- */
.meet-grid-v2{ display:grid; grid-template-columns: .82fr 1.18fr .68fr; gap: clamp(24px,4vw,44px); align-items:start; }
@media(max-width:1080px){ .meet-grid-v2{ grid-template-columns: .9fr 1.1fr; } .meet-grid-v2 > .book-teaser-card{ grid-column: 1 / -1; } }
@media(max-width:760px){ .meet-grid-v2{ grid-template-columns: 1fr; } }
.meet-bullets{ display:grid; gap:12px; margin: 20px 0 26px; }
.meet-bullet{ display:flex; gap:10px; align-items:flex-start; font-size:.95rem; color:#3C4A73; }
.meet-bullet svg{ width:19px;height:19px; flex-shrink:0; margin-top:2px; color: var(--blue); }

/* ---------- Meet Stephen: focus areas + passion banner ---------- */
.meet-passion-banner{ text-align:left; margin: 0 0 40px; grid-column:2; }
/* Same column grid as the "Meet Stephen" row above, so the passion block lines up with the bio text column */
.meet-passion-row{ display:grid; grid-template-columns: .82fr 1.18fr .68fr; gap: clamp(24px,4vw,44px); }
@media(max-width:1080px){ .meet-passion-row{ grid-template-columns: .9fr 1.1fr; } }
@media(max-width:760px){ .meet-passion-row{ grid-template-columns: 1fr; } .meet-passion-banner{ grid-column:1; } }
.meet-passion-banner .eyebrow{ justify-content:flex-start; }
.meet-passion-banner .lede{ margin-left:0; margin-right:auto; }
.meet-passion-banner h3{ font-size: var(--heading-size); margin-bottom:16px; }
.meet-focus-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; margin-bottom:44px; }
@media(max-width:900px){ .meet-focus-grid{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:560px){ .meet-focus-grid{ grid-template-columns: 1fr; } }
.meet-focus-item{ padding:22px 20px; border-radius: var(--radius-md); background: var(--grey-100); border:1px solid var(--grey-200); }
.meet-focus-item h4{ font-family: var(--font-display); font-size:1rem; color:var(--navy); margin-bottom:8px; }
.meet-focus-item p{ font-size:.88rem; color:#5A6584; margin:0; }
.meet-closing{ text-align:center; }
.meet-closing p{ font-weight:600; color:var(--navy); max-width:52ch; margin: 0 auto 20px; }

.book-teaser-card{
  background: linear-gradient(165deg, #E7F4FA, #F4F9FC);
  border:1px solid #D6E9F2; border-radius: var(--radius-lg);
  padding: 28px 26px; text-align:center;
}
.book-teaser-card .btp-eyebrow{ font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-bottom:14px; }
.book-teaser-card .btp-heading{ font-family: var(--font-display); font-weight:800; color: var(--navy); font-size: 1.05rem; line-height:1.3; margin: 16px 0 6px; }
.book-teaser-card p{ font-size:.9rem; color:#3C4A73; margin: 16px 0 20px; }

/* ---------- Real book cover photo (3D render, transparent background) ---------- */
.book-cover-img{
  display:block; width:100%; height:auto;
  filter: drop-shadow(0 18px 34px rgba(11,20,48,0.35));
}

/* ---------- Book cover v2 (white / red ribbon) - CSS fallback, no longer used by default ---------- */
.book-cover-v2{
  position:relative; width:100%; aspect-ratio: 5/7.3;
  background:#fff; border-radius: 4px 8px 8px 4px;
  box-shadow: 0 20px 46px -16px rgba(23,35,77,0.4), inset -4px 0 10px rgba(0,0,0,0.05);
  border:1px solid var(--grey-200);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding: 20px 16px 50px; text-align:center;
}
.book-cover-v2 .bcv2-ribbon,
.book-cover-v2 .bcv2-the,
.book-cover-v2 .bcv2-property,
.book-cover-v2 .bcv2-sub,
.book-cover-v2 .bcv2-kicker,
.book-cover-v2 .bcv2-house{ position:relative; z-index:1; }
.book-cover-v2 .bcv2-kicker{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:#5A6584; font-weight:700; }
.book-cover-v2 .bcv2-the{ font-family: var(--font-display); font-weight:800; font-size:1rem; color:var(--navy); margin-top:10px; }
.book-cover-v2 .bcv2-ribbon{
  position:relative; margin: 6px 0; padding: 5px 10px;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color:#fff; font-family: var(--font-display); font-weight:800; font-size:1.35rem; letter-spacing:-0.01em;
  transform: rotate(-1.5deg); box-shadow: 0 6px 14px -6px rgba(155,44,33,0.6);
}
.book-cover-v2 .bcv2-property{ font-family: var(--font-display); font-weight:800; font-size:1.15rem; color:var(--navy); line-height:1.1; }
.book-cover-v2 .bcv2-sub{ font-size:.62rem; color:#5A6584; margin-top:8px; max-width:22ch; }
.book-cover-v2 .bcv2-house{ margin-top:auto; padding-top:10px; width:46%; opacity:.85; }
.book-cover-v2 .bcv2-badge{
  position:absolute; top:8px; right:-20px; width:80px; height:80px; transform:rotate(18deg);
  background: var(--gradient-brand); border-radius:50%; color:#fff;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-display); font-weight:800; font-size:.52rem; line-height:1.2; padding:8px;
  box-shadow: 0 8px 18px -8px rgba(23,35,77,0.5);
  letter-spacing:.01em;
}
.book-cover-v2 .bcv2-bonus{
  position:absolute; left:10px; bottom:10px; background: var(--navy); color:#fff;
  font-size:.56rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:4px 8px; border-radius:4px; max-width:70%; text-align:left; line-height:1.3;
}

/* ---------- 5 Steps ---------- */
.five-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; position:relative; }
@media(max-width:980px){ .five-steps{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:640px){ .five-steps{ grid-template-columns:1fr 1fr; } }
@media(max-width:420px){ .five-steps{ grid-template-columns:1fr; } }
.step-item{ text-align:left; }
.step-circle{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:800; font-size:.92rem; color:#fff; margin-bottom:16px;
  background: var(--navy);
}
.step-item:nth-child(even) .step-circle{ background: var(--blue); }
.step-item h3{ font-size:1rem; margin-bottom:6px; text-transform:uppercase; letter-spacing:.02em; }
.step-item p{ font-size:.88rem; color:#5A6584; margin:0; }

/* ---------- Stats / testimonial bar ---------- */
.stats-bar{ background: var(--gradient-navy); color:#fff; position:relative; overflow:hidden; }
.stats-bar > .container{ position:relative; z-index:1; }
.stats-bar-head{ text-align:center; margin-bottom:40px; }
.stats-bar-head h2{ color:#fff; }
.stats-bar-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 32px; align-items:start; }
@media(max-width:980px){ .stats-bar-grid{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:560px){ .stats-bar-grid{ grid-template-columns: 1fr; } }
.stats-bar-item{ border-left:2px solid rgba(255,255,255,0.18); padding-left:18px; }
.stats-bar-item .sb-num{ font-family: var(--font-display); font-weight:800; font-size:1.9rem; color:#fff; display:block; line-height:1; }
.stats-bar-item .sb-label{ font-size:.85rem; color: rgba(255,255,255,0.65); margin-top:8px; }
.stats-bar-item.testimonial .sb-quote{ font-size:.95rem; color: rgba(255,255,255,0.9); font-style:italic; margin-bottom:8px; }
.stats-bar-item.testimonial .sb-attrib{ font-size:.8rem; color: rgba(255,255,255,0.6); }
.stats-bar-item.google{ display:flex; flex-direction:column; gap:8px; }
.stats-bar-item.google .sb-stars{ color:#FFC94D; font-size:1rem; letter-spacing:2px; }
.stats-bar-item.google .sb-google-row{ display:flex; align-items:center; gap:8px; font-size:.82rem; color: rgba(255,255,255,0.7); }
.stats-bar-item.google .sb-google-row svg{ width:16px; height:16px; }
.stats-bar-verify-note{ text-align:center; font-size:.72rem; color: rgba(255,255,255,0.4); margin-top:36px; max-width:520px; margin-inline:auto; }

/* Ascending growth-chart graphic behind the stats bar - "draws" in
   the first time it scrolls into view (class added by js/main.js). */
.stats-chart-line{
  position:absolute; left:0; right:0; bottom:0; width:100%; height:48%;
  opacity:.4; pointer-events:none; z-index:1;
}
.stats-chart-line path{ stroke-dasharray:900; stroke-dashoffset:900; }
@media (prefers-reduced-motion: no-preference){
  .stats-chart-line path{ transition: stroke-dashoffset 1.8s ease; }
  .stats-bar.is-visible .stats-chart-line path{ stroke-dashoffset:0; }
}
@media (prefers-reduced-motion: reduce){
  .stats-chart-line path{ stroke-dashoffset:0; }
}

/* ---------- Animated count-up numbers (js/main.js - initCountUpStats) ---------- */
.sb-num, .trust-item .num{ font-variant-numeric: tabular-nums; }

/* ---------- Your Financial Journey - image sections ---------- */
.fj-media-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,5vw,60px); align-items:center; }
@media(max-width:900px){ .fj-media-grid{ grid-template-columns:1fr; } }
.fj-factfind-grid{ display:grid; grid-template-columns: .82fr 1.18fr; gap: clamp(28px,5vw,56px); align-items:center; }
@media(max-width:900px){ .fj-factfind-grid{ grid-template-columns:1fr; } }
.fj-media-photo{ width:100%; max-width:380px; margin-inline:auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); display:block; }
.fj-book-wrap{ display:flex; justify-content:center; }
.fj-book-wrap .book-cover-img{ width:min(240px,68vw); }

/* ============================================================
   REDUCED MOTION SAFETY NET
   Belt-and-braces on top of the JS-side prefers-reduced-motion
   checks and the scoped CSS media queries above: neutralises any
   animation/transition/smooth-scroll sitewide for a visitor who
   has asked their OS for reduced motion.
   ============================================================ */
@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;
  }
}

/* ---------- Book download details pop-up (book.html) ---------- */
.mmm-modal{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; }
.mmm-modal.open{ display:flex; }
.mmm-modal-backdrop{ position:absolute; inset:0; background:rgba(23,35,77,0.62); }
.mmm-modal-dialog{ position:relative; width:100%; max-width:480px; max-height:calc(100vh - 40px); overflow-y:auto; }
.mmm-modal-dialog .form-panel{ box-shadow: 0 30px 70px -20px rgba(23,35,77,0.5); }
.mmm-modal-close{
  position:absolute; top:12px; right:14px; z-index:2; width:36px; height:36px; border:0; border-radius:50%;
  background:var(--grey-100); color:var(--navy); font-size:1.4rem; line-height:1; cursor:pointer;
}
.mmm-modal-close:hover{ background:var(--grey-200); }
.mmm-modal h2{ font-size:var(--heading-size); margin-bottom:8px; padding-right:28px; }
.mmm-modal .modal-sub{ color:var(--slate); font-size:.95rem; margin-bottom:22px; }
body.modal-open{ overflow:hidden; }

/* Homepage hero tagline: same size as the headline, bold, kept on one line where there is room (wraps only on narrow phones) */
.hero-tagline{ font-weight:800; display:inline-block; margin-top:6px; }
@media(min-width:620px){ .hero-tagline{ white-space:nowrap; } }

/* Shown when a form could not be emailed (never show false success) */
.form-send-error{ display:none; margin:14px 0 0; padding:12px 14px; border-radius:10px; background:#FDECEC; color:#8C1D22; font-size:.9rem; line-height:1.5; border:1px solid #F3B9BC; }
.form-send-error a{ color:#8C1D22; font-weight:700; text-decoration:underline; }