/* =============================================================
   Spotto Finance — self-hosted webfonts
   All faces are served from our own origin and declared here rather than
   pulled in with @import: an @import forces the browser to finish this file
   before it can even discover the font CSS, which cost ~2s of render-blocking
   time on mobile. URLs are root-absolute because this stylesheet is inlined
   into each page's <head> at build time (see tools/build.py).
   ============================================================= */

/* ---- Manrope (display / --serif) ---- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Inter (body / --sans) ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Fraunces (footer credit only) ----
   Subset to the glyphs of "Usher Media" and "&" by tools/subset-fraunces.py;
   the full latin faces were 149 KiB for eleven characters. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/fraunces-normal-subset-v2.woff2") format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/fraunces-italic-subset.woff2") format('woff2');
}

/* =============================================================
   Spotto Finance — Design System
   Shared stylesheet for all pages (DRY across the multi-page site)
   ============================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Color — deep trust green + premium gold, warm off-white canvas */
  --bg:          #fbfaf6;
  --surface:     #ffffff;
  --surface-alt: #f2efe7;
  --ink:         #0f241f;
  --ink-soft:    #3c4c47;
  --muted:       #64726d;
  --line:        #e4e0d5;

  --brand-900:   #082e27;
  --brand-700:   #0c4f43;
  --brand-600:   #0f6a5a;
  --brand-500:   #17836f;
  --brand-050:   #e7f2ee;

  --accent-600:  #c9861f;
  --accent-500:  #e0a13c;
  --accent-100:  #f7e6c7;

  --white:       #ffffff;

  /* Type scale (fluid) */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.32rem + 0.9vw, 2.1rem);
  --step-3:  clamp(1.7rem, 1.35rem + 1.9vw, 3.25rem);
  --step-4:  clamp(2.05rem, 1.45rem + 3.6vw, 4.9rem);

  /* Spacing scale */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 6.5rem;

  /* System */
  --radius:    18px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --shadow-sm: 0 1px 2px rgba(15,36,31,.04), 0 6px 16px rgba(15,36,31,.05);
  --shadow-md: 0 4px 10px rgba(15,36,31,.05), 0 18px 44px rgba(15,36,31,.10);
  --shadow-lg: 0 10px 24px rgba(15,36,31,.07), 0 40px 90px rgba(15,36,31,.16);
  --maxw: 1180px;
  --nav-h: 76px;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.011em;
  font-feature-settings: "cv11", "ss01", "kern", "liga", "calt";
  overflow-x: hidden; /* guard against horizontal scroll at every breakpoint */
}

img { max-width: 100%; display: block; height: auto; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-700); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 560;
  margin: 0 0 var(--sp-3);
  /* Fraunces: large optical size + soft terminals = warm, high-end display */
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-feature-settings: "kern", "liga", "calt", "ss01";
}
h1 { font-size: var(--step-4); letter-spacing: -0.03em; line-height: 1.02; font-weight: 540; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); letter-spacing: -0.018em; }
p  { margin: 0 0 var(--sp-3); }

/* ---------- Layout helpers ---------- */
.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.section { padding-block: clamp(3.25rem, 2rem + 6vw, var(--sp-8)); }
.section--tight { padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); }
.section--alt { background: var(--surface-alt); }
.section--ink { background: var(--brand-900); color: #cfe0da; }
.section--ink h2, .section--ink h3 { color: #fff; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: var(--sp-3);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--accent-500);
  display: inline-block;
}
.section-head { max-width: 42rem; margin-bottom: var(--sp-6); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.lead { font-size: var(--step-1); color: var(--muted); font-family: var(--sans); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--brand-600);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* justify-content centres the label as a block; text-align centres its lines
     against each other once a long label wraps onto two. */
  text-align: center;
  gap: .55em;
  padding: .85em 1.5em;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  box-shadow: var(--shadow-sm);
}
.btn:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--brand-700); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--accent-500); outline-offset: 3px; }

.btn--accent { --btn-bg: var(--accent-500); --btn-fg: #2a1c05; }
.btn--accent:hover { background: var(--accent-600); color: #2a1c05; }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--brand-700);
  border-color: var(--line);
  box-shadow: none;
  background: var(--surface);
}
.btn--ghost:hover { background: var(--surface); color: var(--brand-700); border-color: var(--brand-500); }

.btn--light { --btn-bg:#fff; --btn-fg: var(--brand-700); }
.btn--light:hover { background:#fff; color: var(--brand-900); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* Light sweep across buttons on hover */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-135%); pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%);
}
.btn:hover::after { animation: shine .7s var(--ease); }

/* Scroll progress bar (element injected by JS) */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; pointer-events: none; }
.scroll-progress__bar {
  display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  transition: transform .12s linear;
}

/* ---------- Navbar (premium, animated) ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251,250,246,.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
  animation: navDrop .7s var(--ease) both;
}
@keyframes navDrop { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
/* Condense + lift into a floating bar once the page scrolls */
.nav.scrolled {
  background: rgba(251,250,246,.9);
  border-color: var(--line);
  box-shadow: 0 8px 30px rgba(15,36,31,.09);
}
.nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  transition: height .4s var(--ease);
}
/* Give the primary nav a little more room than the content column so 8 items breathe */
.nav .wrap.nav__inner { width: min(100% - 2.5rem, 1300px); }

/* Brand + animated logo mark (hover tilt + shine sweep) */
.brand { display: inline-flex; align-items: center; gap: .6em; font-family: var(--serif); font-weight: 700; font-size: 1.55rem; color: var(--ink); letter-spacing: -.02em; }
.brand:hover { color: var(--ink); }
.brand__mark {
  position: relative; overflow: hidden;
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  display: grid; place-items: center; color: #fff; font-family: var(--sans); font-weight: 800; font-size: 1rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-6deg) scale(1.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), var(--shadow-md); }
.brand__mark::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-130%);
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.55) 50%, transparent 68%);
}
.brand:hover .brand__mark::after { animation: shine .8s var(--ease); }
@keyframes shine { to { transform: translateX(130%); } }

/* Links — gliding highlight pill that follows hover, rests on the active page */
.nav__menu { display: flex; align-items: center; }
.nav__links { position: relative; display: flex; align-items: center; gap: clamp(.2rem, .6vw, .5rem); list-style: none; margin: 0; padding: 0; }
.nav__indicator {
  position: absolute; top: 50%; left: 0; width: 0; height: 2.1em;
  transform: translateY(-50%);
  background: var(--brand-050); border-radius: 999px;
  opacity: 0; z-index: 0; pointer-events: none;
  transition: left .4s var(--ease), width .4s var(--ease), opacity .3s var(--ease);
}
.nav__links a {
  position: relative; z-index: 1;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .92rem;
  color: var(--ink-soft);
  padding: .58em .8em;
  border-radius: 999px;
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav__links a:hover { color: var(--brand-700); }
.nav__links a[aria-current="page"] { color: var(--brand-700); }
/* Gold underline marks the current page */
.nav__links a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: .26em; height: 2px; border-radius: 2px;
  background: var(--accent-500); transition: left .3s var(--ease), right .3s var(--ease);
}
.nav__links a[aria-current="page"]::after { left: .85em; right: .85em; }
.nav__links a:focus-visible { outline: 3px solid var(--accent-500); outline-offset: 2px; }

.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 12px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.nav__toggle:hover { box-shadow: var(--shadow-sm); }
.nav__toggle:active { transform: scale(.94); }
.nav__toggle:focus-visible { outline: 3px solid var(--accent-500); outline-offset: 2px; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__toggle span { position: relative; }
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after  { position: absolute; top:  6px; }
.nav[data-open="true"] .nav__toggle span { background: transparent; }
.nav[data-open="true"] .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav[data-open="true"] .nav__toggle span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Shrink the bar on scroll — desktop only (keeps mobile menu offset exact) */
@media (min-width: 1301px) {
  .nav.scrolled .nav__inner { height: var(--nav-h); }
}

/* Mobile menu */
@media (max-width: 1300px) {
  .nav__menu {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-3) 0 var(--sp-5);
    display: block;
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    /* closed state */
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .34s var(--ease), opacity .3s var(--ease), visibility .34s;
  }
  .nav[data-open="true"] .nav__menu { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .nav__indicator { display: none; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links a { padding: .95em 1.4em; font-size: 1.06rem; border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav__links a::after { display: none; }
  .nav__links a:hover { background: var(--brand-050); }
  /* Staggered entrance for menu items */
  .nav[data-open="true"] .nav__links li { animation: linkIn .42s var(--ease) both; }
  .nav[data-open="true"] .nav__links li:nth-child(1) { animation-delay: .04s; }
  .nav[data-open="true"] .nav__links li:nth-child(2) { animation-delay: .09s; }
  .nav[data-open="true"] .nav__links li:nth-child(3) { animation-delay: .14s; }
  .nav[data-open="true"] .nav__links li:nth-child(4) { animation-delay: .19s; }
  .nav[data-open="true"] .nav__links li:nth-child(5) { animation-delay: .24s; }
  .nav[data-open="true"] .nav__links li:nth-child(6) { animation-delay: .29s; }
  .nav[data-open="true"] .nav__links li:nth-child(7) { animation-delay: .34s; }
  .nav[data-open="true"] .nav__links li:nth-child(8) { animation-delay: .39s; }
  @keyframes linkIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .nav__toggle { display: inline-flex; }
}

/* Reduced-motion: keep the nav static */
@media (prefers-reduced-motion: reduce) {
  .nav { animation: none; }
  .brand__mark, .brand:hover .brand__mark { transition: none; }
  .brand:hover .brand__mark::after { animation: none; }
  .nav[data-open="true"] .nav__links li { animation: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(2.5rem, 1rem + 8vw, 5.5rem); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 70% at 82% 8%, rgba(224,161,60,.16), transparent 60%),
    radial-gradient(70% 80% at 8% 100%, rgba(15,106,90,.12), transparent 60%);
}
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero__eyebrow { color: var(--brand-700); }
.hero h1 { margin-bottom: var(--sp-4); font-size: clamp(2.05rem, 1.45rem + 3vw, 4.1rem); text-wrap: balance; }
.hero__sub { font-family: var(--sans); font-size: var(--step-1); color: var(--ink-soft); max-width: 34rem; }
.hero__micro { font-size: var(--step--1); color: var(--muted); margin-top: var(--sp-3); }
.hero__trust { display: flex; align-items: center; gap: .6em; margin-top: var(--sp-5); font-size: var(--step--1); color: var(--muted); font-weight: 500; }
.hero__trust::before { content: "★★★★★"; color: var(--accent-500); letter-spacing: .1em; }

.proof-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.proof {
  display: inline-flex; flex-direction: column; padding: .6em 1.1em;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-sm); flex-direction: row; align-items: baseline; gap: .5em;
}
.proof b { font-family: var(--serif); color: var(--brand-700); font-size: 1.05rem; }
.proof span { font-size: var(--step--1); color: var(--muted); }

/* ---------- Media placeholders (AI images not generated — styled stand-ins) ---------- */
.media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--brand-700), var(--brand-500) 55%, #1f9a83);
  box-shadow: var(--shadow-lg);
  min-height: 260px;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: end start;
  color: #eafaf5;
  isolation: isolate;
}
.media::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,.22), transparent 32%),
    radial-gradient(circle at 78% 70%, rgba(224,161,60,.35), transparent 40%);
}
.media__label {
  font-family: var(--sans); font-size: var(--step--1); font-weight: 500;
  padding: .8em 1em; margin: var(--sp-3);
  background: rgba(8,46,39,.42); backdrop-filter: blur(4px);
  border-radius: 12px; max-width: 90%; line-height: 1.4;
}
.media__label b { display:block; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.68rem; color: var(--accent-100); margin-bottom:.25em; }
.media--tall { aspect-ratio: 3 / 4; }
.media--wide { aspect-ratio: 16 / 9; }
.media--alt { background: linear-gradient(135deg, #123a33, var(--brand-600) 60%, var(--accent-600)); }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: var(--sp-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d6cdb6; }
.card h3 { font-size: var(--step-1); }
.card__icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.5rem;
  background: var(--brand-050); margin-bottom: var(--sp-3);
}
.card__list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: .5em; }
.card__list li { position: relative; padding-left: 1.6em; font-size: .98rem; }
.card__list li::before { content: "✓"; position: absolute; left: 0; color: var(--brand-500); font-weight: 700; }
.card__cta { font-family: var(--sans); font-weight: 600; display: inline-flex; align-items: center; gap: .4em; }
.card__cta::after { content: "→"; transition: transform .25s var(--ease); }
.card:hover .card__cta::after { transform: translateX(4px); }

/* Stat tiles */
.stat { text-align: center; padding: var(--sp-4); }
.stat__icon { font-size: 2rem; }
.stat__value { font-family: var(--serif); font-size: var(--step-3); color: var(--brand-700); line-height: 1; margin: .2em 0 .1em; }
.stat__label { font-size: var(--step--1); color: var(--muted); font-weight: 500; }
.section--ink .stat__value { color: var(--accent-500); }
.section--ink .stat__label { color: #a9c2ba; }

/* Concern cards */
.concern .concern__q { font-family: var(--serif); font-size: var(--step-1); color: var(--ink); font-style: italic; margin-bottom: var(--sp-3); }
.concern__proof { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--line); font-size: .95rem; color: var(--brand-700); font-weight: 600; display: flex; gap: .5em; }
.concern__proof::before { content: "✓"; }

/* Testimonials */
.quote {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-5); box-shadow: var(--shadow-sm); height: 100%;
  display: flex; flex-direction: column;
}
.quote__mark { font-family: var(--serif); font-size: 3rem; line-height: .6; color: var(--accent-500); margin-bottom: var(--sp-2); }
.quote p { font-size: 1.02rem; color: var(--ink-soft); }
.quote__who { margin-top: auto; padding-top: var(--sp-4); }
.quote__name { font-weight: 700; color: var(--ink); font-family: var(--sans); }
.quote__detail { font-size: var(--step--1); color: var(--brand-600); font-weight: 600; }

/* Steps timeline */
.steps { display: grid; gap: var(--sp-4); grid-template-columns: repeat(4, 1fr); counter-reset: step; }
.step { position: relative; padding: var(--sp-5) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.step__num {
  counter-increment: step;
  font-family: var(--serif); font-size: 1rem; font-weight: 700; color: var(--accent-600);
  width: 40px; height: 40px; border-radius: 50%; background: var(--accent-100);
  display: grid; place-items: center; margin-bottom: var(--sp-3);
}
.step__num::before { content: counter(step); }
.step__icon { font-size: 1.6rem; margin-bottom: .4em; }
.step h3 { font-size: var(--step-1); }
.step p { font-size: .98rem; margin: 0; }

/* Detailed step blocks (how-we-help) */
.stepblock { display: grid; grid-template-columns: 64px 1fr; gap: var(--sp-4); padding: var(--sp-5) 0; border-top: 1px solid var(--line); }
.stepblock:first-of-type { border-top: 0; }
.stepblock__badge { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color:#fff; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--brand-600), var(--brand-700)); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.stepblock__body h3 { font-size: var(--step-2); }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }
.mini { background: var(--surface-alt); border-radius: var(--radius-sm); padding: var(--sp-4); }
.mini h4 { font-family: var(--sans); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-600); margin-bottom: var(--sp-2); }
.mini ul { margin: 0; padding-left: 1.1em; display: grid; gap: .35em; font-size: .96rem; }
.mini p { margin: 0; }

/* Feature list (checkmarks) */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.checks li { position: relative; padding-left: 2em; }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.4em; height: 1.4em; background: var(--brand-050); color: var(--brand-600); border-radius: 6px; display: grid; place-items: center; font-weight: 700; font-size: .85em; }
.checks--2 { grid-template-columns: repeat(2, 1fr); }

/* Value list (why choose / promises) */
.values { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); }
.value { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.value:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.value__n { font-family: var(--serif); color: var(--accent-600); font-size: 1.1rem; font-weight: 700; }
.value h3 { font-size: var(--step-1); margin: .3em 0 .4em; }
.value p { margin: 0; font-size: .98rem; }

/* Tables */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
table.compare { width: 100%; border-collapse: collapse; min-width: 520px; background: var(--surface); font-size: .98rem; }
table.compare caption { text-align: left; padding: var(--sp-3) var(--sp-4); font-weight: 600; color: var(--muted); }
table.compare th, table.compare td { padding: .9em 1.1em; text-align: left; border-bottom: 1px solid var(--line); }
table.compare thead th { background: var(--brand-900); color: #fff; font-family: var(--sans); font-weight: 600; }
table.compare thead th:last-child { background: var(--brand-600); }
table.compare tbody tr:last-child td { border-bottom: 0; }
table.compare td:first-child { font-weight: 600; color: var(--ink); }
table.compare tbody tr:nth-child(even) { background: var(--surface-alt); }

/* Prose */
.prose { max-width: 44rem; }
.prose p { color: var(--ink-soft); }
.prose strong { color: var(--ink); }
.prose ul { padding-left: 1.2em; display: grid; gap: .4em; margin: 0 0 var(--sp-4); }

/* Split section */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.split--reverse .split__media { order: 2; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--brand-900), var(--brand-700)); color: #dff0ea; border-radius: var(--radius-lg); padding: clamp(2.25rem, 1.5rem + 4vw, 4.5rem); text-align: center; box-shadow: var(--shadow-lg); }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(50% 80% at 80% 10%, rgba(224,161,60,.28), transparent 55%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: #bcd4cc; max-width: 40rem; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: var(--sp-5); }

/* ---------- FAQ accordion ---------- */
.faq { display: grid; gap: var(--sp-2); max-width: 52rem; margin-inline: auto; }
.faq__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.faq__q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: var(--sp-4); font-family: var(--serif); font-size: var(--step-1); color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.faq__q:focus-visible { outline: 3px solid var(--accent-500); outline-offset: -3px; }
.faq__icon { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-050); color: var(--brand-600); display: grid; place-items: center; font-size: 1.2rem; transition: transform .3s var(--ease); }
.faq__item[data-open="true"] .faq__icon { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq__a p { padding: 0 var(--sp-4) var(--sp-4); margin: 0; color: var(--ink-soft); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.contact-list li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.contact-list .ico { font-size: 1.3rem; flex: 0 0 auto; }
.contact-list a { color: var(--ink); font-weight: 600; }
.contact-list a:hover { color: var(--brand-600); }
.contact-list small { display:block; color: var(--muted); font-weight: 400; }

.form { display: grid; gap: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow-sm); }
.field { display: grid; gap: .4em; }
.field label { font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .98rem; padding: .75em .9em; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-050); }
.form__note { font-size: var(--step--1); color: var(--muted); }
.form__ok { display:none; background: var(--brand-050); color: var(--brand-700); border-radius: 10px; padding: var(--sp-3); font-weight: 600; }
.form__ok[data-show="true"] { display:block; }

/* ---------- Footer (premium) ---------- */
.footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0b3a30 0%, var(--brand-900) 60%);
  color: #a7c1b9;
  padding-block: var(--sp-8) var(--sp-5);
}
/* Animated gradient top edge */
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500), var(--brand-500));
  background-size: 200% 100%;
  animation: footerEdge 9s linear infinite;
}
@keyframes footerEdge { to { background-position: 200% 0; } }
/* Soft ambient glow */
.footer::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 560px; height: 560px; right: -140px; top: -180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(224,161,60,.10), transparent 70%);
}
.footer .wrap { position: relative; z-index: 1; }

.footer a { color: #cfe0da; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: var(--sp-5); }
.footer__brand .brand { color: #fff; }
.footer__brand .brand__mark { background: linear-gradient(135deg, var(--accent-500), var(--accent-600)); color: #241701; }
.footer__brand p { margin-top: var(--sp-3); max-width: 26rem; font-size: .96rem; line-height: 1.7; }

/* Column headings with an animated accent bar */
.footer h3, .footer h4 {
  position: relative; color: #fff; font-family: var(--sans);
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: var(--sp-4); padding-bottom: .7em;
}
.footer h3::after, .footer h4::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px;
  background: var(--accent-500); border-radius: 2px; transition: width .4s var(--ease);
}
.footer__grid > div:hover h3::after, .footer__grid > div:hover h4::after { width: 46px; }

.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7em; font-size: .96rem; }
/* Link hover: sliding underline */
.footer ul a {
  color: #bcd4cc;
  background-image: linear-gradient(var(--accent-500), var(--accent-500));
  background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .35s var(--ease), color .25s var(--ease);
}
.footer ul a:hover { color: #fff; background-size: 100% 1.5px; }

/* Icon-based contact list (replaces emoji) */
.f-contact { gap: .8em; }
.f-contact li { display: flex; gap: .65em; align-items: flex-start; }
.f-contact svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: .18em; color: var(--accent-500); }
.f-contact span { color: #bcd4cc; }

/* Social buttons */
.socials { display: flex; gap: .6em; margin-top: var(--sp-4); }
.socials a {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08);
  transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.socials a:hover {
  background: var(--accent-500); color: #241701; border-color: transparent;
  transform: translateY(-3px); box-shadow: 0 8px 20px rgba(224,161,60,.3);
}

.footer__bottom {
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,.12);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: .35rem 1.5rem;
  font-size: var(--step--1); color: #86a49a;
}
.footer__bottom > span:nth-child(1) { justify-self: start;  text-align: left; }
.footer__bottom > span:nth-child(2) { justify-self: center; text-align: center; }
.footer__bottom > span:nth-child(3) { justify-self: end;    text-align: right; }

/* Footer entrance: columns lifted in via the shared reveal system (JS-tagged) */
@media (prefers-reduced-motion: reduce) {
  .footer::before { animation: none; }
}

/* WhatsApp float */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color:#fff; display: grid; place-items: center; box-shadow: var(--shadow-md); transition: transform .25s var(--ease); }
.wa-float:hover { transform: scale(1.08); color:#fff; }
.wa-float svg { width: 30px; height: 30px; }

/* ---------- Scroll reveal ----------
   The hidden state is scoped to .js (set by a one-line inline script in <head>)
   so that with scripting off every section is simply visible instead of stuck
   at opacity 0 forever. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

/* Above-the-fold content is never faded in.
   It used to inherit the .reveal hidden state and wait for main.js to boot its
   IntersectionObserver, which cost the homepage ~3.2s of LCP element render
   delay. Fading it in with a CSS keyframe instead was worse: under the 4x CPU
   throttle PageSpeed applies, the hero was still transparent at 2.3s and Chrome
   emitted no LCP candidate at all (NO_LCP), leaving the page unscoreable.
   So the hero paints fully opaque on the very first frame and only its position
   is animated — a transform never affects whether Chrome considers an element
   painted. The observer still handles everything below the fold. */
@keyframes reveal-rise {
  from { transform: translateY(22px); }
  to   { transform: none; }
}
.js .hero .reveal,
.js .cf-hero .reveal {
  opacity: 1;
  animation: reveal-rise .7s var(--ease) both;
}
.js .hero .reveal[data-delay="1"], .js .cf-hero .reveal[data-delay="1"] { animation-delay: .08s; }
.js .hero .reveal[data-delay="2"], .js .cf-hero .reveal[data-delay="2"] { animation-delay: .16s; }
.js .hero .reveal[data-delay="3"], .js .cf-hero .reveal[data-delay="3"] { animation-delay: .24s; }
.js .hero .reveal[data-delay="4"], .js .cf-hero .reveal[data-delay="4"] { animation-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .btn, .card, .value, .wa-float { transition: none !important; }
  .btn::after { display: none; }
  .hero .media { transform: none !important; }
}

/* ---------- Service cards with native disclosure (Loan Solutions page) ---------- */
.svc { display: flex; flex-direction: column; }
.svc__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.svc__head .card__icon { margin-bottom: 0; flex: 0 0 auto; }
.svc__head .card__icon svg { width: 26px; height: 26px; stroke: var(--brand-600); }
.svc__head h3 { margin: 0; font-size: var(--step-1); }
.svc__lead { color: var(--ink-soft); }
.svc__more { border-top: 1px solid var(--line); margin-top: auto; }
.svc__more > summary {
  list-style: none; cursor: pointer; padding: var(--sp-3) 0 0;
  font-family: var(--sans); font-weight: 600; color: var(--brand-700); font-size: .95rem;
  display: flex; align-items: center; gap: .5em;
}
.svc__more > summary::-webkit-details-marker { display: none; }
.svc__more > summary::after { content: "＋"; margin-left: auto; font-size: 1.1rem; transition: transform .3s var(--ease); color: var(--accent-600); }
.svc__more[open] > summary::after { transform: rotate(45deg); }
.svc__more > summary:focus-visible { outline: 3px solid var(--accent-500); outline-offset: 3px; border-radius: 6px; }
.svc__body { padding-top: var(--sp-3); }
.svc__body h4 { font-family: var(--sans); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-600); margin: 0 0 var(--sp-2); }
.svc__body ul { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: .4em; }
.svc__body ul li { position: relative; padding-left: 1.5em; font-size: .95rem; }
.svc__body ul li::before { content: "→"; position: absolute; left: 0; color: var(--brand-500); }
.svc__adv { background: var(--brand-050); border-radius: var(--radius-sm); padding: var(--sp-3); font-size: .95rem; }
.svc__adv strong { display: block; font-family: var(--sans); color: var(--brand-700); margin-bottom: .25em; }
.svc .btn { margin-top: var(--sp-4); align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .svc__more > summary::after { transition: none; } }

/* ---------- Lender chips ---------- */
.lenders { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lender {
  font-size: .9rem; font-weight: 500; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: .5em 1em; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.lender:hover { transform: translateY(-2px); border-color: var(--brand-500); color: var(--brand-700); }
.lender--more { background: var(--brand-050); border-color: transparent; color: var(--brand-700); font-weight: 600; }

/* Two-up info panels (pricing transparency) */
.panels { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow-sm); }
.panel__tag { display: inline-flex; align-items: center; gap: .5em; font-family: var(--sans); font-weight: 700; font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-600); margin-bottom: var(--sp-3); }
.panel p { margin: 0; }
@media (max-width: 700px) { .panels { grid-template-columns: 1fr; } }

/* ---------- Timeline (About page) ---------- */
.timeline { position: relative; max-width: 46rem; margin-inline: auto; padding-left: 2.5rem; }
.timeline::before { content: ""; position: absolute; left: 11px; top: .4rem; bottom: .4rem; width: 2px; background: linear-gradient(var(--brand-500), var(--accent-500)); }
.tl-item { position: relative; padding-bottom: var(--sp-5); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -2.5rem; top: .35rem; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--brand-500); box-shadow: 0 0 0 4px var(--brand-050);
}
.tl-year { font-family: var(--serif); font-size: var(--step-1); color: var(--brand-700); font-weight: 700; line-height: 1; }
.tl-event { margin: .4em 0 0; color: var(--ink-soft); }

/* ---------- Credentials & awards ---------- */
.cred { display: flex; gap: var(--sp-3); }
.cred .cred__badge { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 1.4rem; background: var(--brand-050); }
/* A flex item will not shrink below its min-content, and an email address is
   one unbreakable word — so the "Email Us" card's text block sat 24px past the
   card's padding and the end of the address was clipped off. Let the item
   shrink and let the address wrap. */
.cred > * { min-width: 0; }
.cred h3 { font-size: var(--step-1); margin: 0 0 .3em; }
.cred p { margin: 0; font-size: .96rem; overflow-wrap: anywhere; }
.award { text-align: center; }
.award__badge { font-size: 2rem; }
.award__year { display: inline-block; font-family: var(--sans); font-weight: 700; font-size: var(--step--1); color: var(--accent-600); background: var(--accent-100); border-radius: 999px; padding: .15em .8em; margin-bottom: .4em; }
.award h3 { font-size: var(--step-1); margin: .3em 0 .2em; }
.award p { margin: 0; font-size: .95rem; color: var(--muted); }

/* ---------- Compliance panel ---------- */
.compliance { display: grid; gap: var(--sp-3); }
.compliance .card h3 { font-size: var(--step-1); }
.compliance .card p { margin: 0; font-size: .98rem; }

/* Skip link */
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .7em 1.2em; border-radius: 0 0 10px 0; z-index: 200; }
.skip:focus { left: 0; color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .split, .split--reverse { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: -1; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4, .steps, .values, .checks--2 { grid-template-columns: 1fr; }
  .ocard h3 { min-height: 0; }
  .footer__grid { grid-template-columns: 1fr; }
  .stepblock { grid-template-columns: 1fr; }
  .footer__bottom { grid-template-columns: 1fr; justify-items: center; gap: .5rem; }
  .footer__bottom > span:nth-child(1),
  .footer__bottom > span:nth-child(2),
  .footer__bottom > span:nth-child(3) { justify-self: center; text-align: center; }
}

/* =====================================================================
   HOME PAGE — premium visuals & animations
   ===================================================================== */

/* Animated ambient orb behind the hero (adds to existing .hero::before) */
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: min(42vw, 460px); aspect-ratio: 1; border-radius: 50%;
  right: -8%; top: 4%;
  background: radial-gradient(circle at 35% 35%, rgba(224,161,60,.30), rgba(224,161,60,0) 68%);
  animation: floatY 9s ease-in-out infinite;
}
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-24px); } }

/* Hero illustrated visual + floating UI chips */
.hero-visual { position: relative; }
.hero-illustration {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; background: #dff0ea;
}
.hero-illustration svg { display: block; width: 100%; height: 100%; }
.hero-chip {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: .6em;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 16px; padding: .6em .9em;
  box-shadow: var(--shadow-md); font-family: var(--sans); font-weight: 700; font-size: .9rem; color: var(--ink);
}
.hero-chip small { display: block; font-weight: 500; color: var(--muted); font-size: .72rem; }
.hero-chip .chip-ic {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); flex: 0 0 auto;
}
.hero-chip .chip-ic svg { width: 20px; height: 20px; }
.hero-chip--stars { color: var(--accent-600); letter-spacing: .08em; }
.hero-chip--1 { top: 9%; left: -5%; animation: floatY 6s ease-in-out infinite; }
.hero-chip--2 { top: 40%; right: -6%; animation: floatY 7.5s ease-in-out infinite .6s; }
.hero-chip--3 { bottom: 6%; left: 8%; animation: floatY 8.5s ease-in-out infinite 1.1s; }

/* The negative offsets are a desktop effect — the hero visual sits in its own
   column there with room to overhang. Once the hero stacks, the visual is the
   full width of the wrap, so -5%/-6% pushed chip 1 into the page gutter and ran
   chip 2 clean off the right edge of the screen. Bring them inside the photo. */
@media (max-width: 900px) {
  .hero-chip--1 { left: 3%; }
  .hero-chip--2 { right: 3%; }
}
@media (max-width: 560px) {
  .hero-chip { font-size: .8rem; padding: .5em .7em; gap: .5em; max-width: 68%; }
  .hero-chip small { font-size: .64rem; }
  .hero-chip .chip-ic { width: 30px; height: 30px; border-radius: 9px; }
  .hero-chip .chip-ic svg { width: 17px; height: 17px; }
  .hero-chip--1 { top: 4%; left: 3%; }
  .hero-chip--2 { top: 38%; right: 3%; }
  .hero-chip--3 { bottom: 5%; left: 3%; }
}

/* Offering cards with illustrated media banners */
.ocard { overflow: hidden; padding-top: 0; display: flex; flex-direction: column; }
.card__media {
  position: relative; margin: 0 calc(-1 * var(--sp-5)) var(--sp-4);
  aspect-ratio: 3 / 2; overflow: hidden; flex-shrink: 0;
}
.card__media svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .55s var(--ease); }
.ocard:hover .card__media svg { transform: scale(1.07); }
.card__badge {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2;
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 1.35rem;
  background: rgba(255,255,255,.96); box-shadow: var(--shadow-md); backdrop-filter: blur(4px);
}
/* Keep titles, checklists and CTAs aligned across a row regardless of length */
.ocard h3 { margin-top: 0; min-height: 2.6em; display: flex; align-items: flex-start; }
.ocard .card__list { margin-bottom: var(--sp-4); }
.ocard .card__cta { margin-top: auto; align-self: flex-start; }

/* Testimonials — stars + avatars */
.quote__stars { color: var(--accent-500); letter-spacing: .12em; font-size: 1rem; margin-bottom: var(--sp-2); }
.quote__who { display: flex; align-items: center; gap: .8em; }
.quote__avatar {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 1.05rem;
  color: #fff; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); box-shadow: var(--shadow-sm);
}
.quote__avatar--2 { background: linear-gradient(135deg, var(--accent-500), var(--accent-600)); color: #2a1c05; }
.quote__avatar--3 { background: linear-gradient(135deg, #1f9a83, var(--brand-600)); }

/* Premium "Get in touch" panel */
.contact-cta {
  position: relative; overflow: hidden;
  /* minmax(0,…) rather than a bare fr: `1fr` is `minmax(auto, 1fr)`, so the
     map's track was sized by its min-content and grew to 311px inside a
     274px content box. The card clips at its own border, so the right 37px
     of the map — Google's fullscreen control and the end of its attribution
     bar — was cut off. That is what looked like a broken map on a phone. */
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  background: linear-gradient(135deg, var(--brand-050), #ffffff 70%);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  --cta-pad: clamp(1.75rem, 1.2rem + 3vw, 3.5rem);
  padding: var(--cta-pad); box-shadow: var(--shadow-md);
}
.contact-cta::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 420px; height: 420px; right: -120px; bottom: -160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(224,161,60,.16), transparent 70%);
}
.contact-cta > * { position: relative; z-index: 1; }

/* minmax(0,…) and min-width:0 for the same reason as .cred: the email address
   is one unbreakable word, so .cmethod's min-content was 310px and the auto
   grid track blew out to match — every contact row ran 38px past the panel's
   padding and was cut off at its right edge. */
.contact-methods { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); margin: var(--sp-4) 0; }
.cmethod {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .85em 1em; color: var(--ink);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.cmethod:hover { transform: translateX(5px); box-shadow: var(--shadow-md); border-color: var(--brand-500); color: var(--ink); }
.cmethod__ic {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--brand-050); color: var(--brand-600);
  transition: background .28s var(--ease), color .28s var(--ease);
}
.cmethod:hover .cmethod__ic { background: var(--brand-600); color: #fff; }
.cmethod__ic svg { width: 20px; height: 20px; }
.cmethod { min-width: 0; }
.cmethod__tx { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.cmethod__tx b { font-size: .96rem; }
.cmethod__tx small { color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.cmethod__arrow { margin-left: auto; color: var(--brand-500); font-weight: 700; transition: transform .28s var(--ease); }
.cmethod:hover .cmethod__arrow { transform: translateX(4px); }

.contact-visual { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 5 / 4; background: var(--brand-050); }
.contact-visual svg,
.contact-visual iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.contact-visual .btn { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2; white-space: nowrap; box-shadow: var(--shadow-md); }

@media (max-width: 860px) {
  .contact-cta { grid-template-columns: minmax(0, 1fr); }
  .contact-cta .contact-visual { order: -1; }
}

/* Reduced motion for home visuals */
@media (prefers-reduced-motion: reduce) {
  .hero::after, .hero-chip { animation: none; }
  .ocard:hover .card__media svg { transform: none; }
}

/* =====================================================================
   HOME — photographic card media (concerns, steps, FAQ) & polish
   ===================================================================== */

/* Photos inside card media banners */
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ocard:hover .card__media img { transform: scale(1.07); }
.card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,46,39,0) 55%, rgba(8,46,39,.28));
}

/* Concern cards: quote sits closer under the image */
.ocard.concern .concern__q { margin-top: 0; }

/* Step cards (now media-topped) — number badge overlaid on the photo */
.step-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 1.1rem; color: #2a1c05;
  background: var(--accent-500); box-shadow: var(--shadow-md);
}
.steps .card h3 { font-size: var(--step-1); }
.steps .card p { font-size: .98rem; margin: 0; }

/* FAQ — supporting image beside the accordion */
.faq-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: stretch; }
.faq-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); min-height: 340px; }
.faq-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.faq-media__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: var(--sp-4);
  background: linear-gradient(0deg, rgba(8,46,39,.82), rgba(8,46,39,0));
  color: #fff; font-family: var(--serif); font-size: var(--step-1);
}
.faq-layout .faq { max-width: none; margin: 0; }
@media (max-width: 860px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-media { min-height: 200px; }
}

/* Stat cards — accent icon disc + lift */
.stat__icon {
  width: 62px; height: 62px; margin: 0 auto var(--sp-2); border-radius: 50%;
  display: grid; place-items: center; font-size: 1.7rem;
  background: radial-gradient(circle at 50% 35%, var(--brand-050), #dcece6);
  box-shadow: inset 0 0 0 1px rgba(15,106,90,.12);
}

@media (prefers-reduced-motion: reduce) {
  .ocard:hover .card__media img { transform: none; }
}

/* =====================================================================
   HOME — real photos for hero + offering cards; SVG stat/badge icons
   ===================================================================== */
/* Hero photo fills the illustration frame */
.hero-illustration img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Stat icons as line-art SVGs in the accent disc */
.stat__icon svg { width: 28px; height: 28px; stroke: var(--brand-600); fill: none; }

/* Offering card badge now holds an SVG icon */
.card__badge svg { width: 24px; height: 24px; stroke: var(--brand-600); fill: none; }

/* =====================================================================
   PREMIUM CARD HOVER INTERACTIONS
   ===================================================================== */
/* Base card: deeper, springier lift */
.card { transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease); }
.card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(15,36,31,.18); border-color: #d8cba6; }

/* Photo/media cards (offerings, concerns, steps) */
.ocard .card__media img { transition: transform .7s var(--ease), filter .7s var(--ease); }
.ocard:hover .card__media img { transform: scale(1.1); filter: saturate(1.08) brightness(1.04); }
.ocard:hover .card__media::after { background: linear-gradient(180deg, rgba(8,46,39,0) 38%, rgba(8,46,39,.42)); }

/* Diagonal light sheen sweeping across the photo on hover */
.card__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  transform: translateX(-150%);
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.4) 50%, transparent 64%);
}
.ocard:hover .card__media::before { animation: shine .85s var(--ease); }

/* Icon badge pops up */
.card__badge { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.ocard:hover .card__badge { transform: translateX(-50%) translateY(-4px) scale(1.08); box-shadow: var(--shadow-lg); }

/* Title warms to brand green; CTA arrow already glides */
.ocard h3, .card__cta { transition: color .3s var(--ease); }
.ocard:hover h3, .card:hover .card__cta { color: var(--brand-700); }

/* Concern quote mark lifts subtly */
.ocard.concern:hover .concern__q { color: var(--brand-900); }

/* Stat cards — icon disc + value react */
.stat__icon, .stat__value { transition: transform .4s var(--ease), background .4s var(--ease); }
.stat.card:hover .stat__icon { transform: translateY(-3px) scale(1.1); background: radial-gradient(circle at 50% 35%, #eef6f2, #cfe7df); }
.stat.card:hover .stat__value { transform: scale(1.05); }

/* Testimonial cards — lift + avatar tilt */
.quote { transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease); }
.quote:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: #d8cba6; }
.quote__avatar { transition: transform .4s var(--ease); }
.quote:hover .quote__avatar { transform: scale(1.1) rotate(-4deg); }

/* Value cards — number goes gold */
.value__n { transition: color .3s var(--ease); }
.value:hover .value__n { color: var(--accent-600); }

@media (prefers-reduced-motion: reduce) {
  .card:hover, .quote:hover { transform: none; }
  .ocard:hover .card__media img { transform: none; filter: none; }
  .card__media::before { display: none; }
  .ocard:hover .card__badge, .stat.card:hover .stat__icon,
  .stat.card:hover .stat__value, .quote:hover .quote__avatar { transform: none; }
}

/* =====================================================================
   ABOUT PAGE — real photo frames, floating chips, founder card, stat band
   ===================================================================== */

/* Premium photo frame (replaces the gradient .media stand-ins) */
.figure {
  position: relative; margin: 0; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-lg); background: var(--brand-050);
  box-shadow: var(--shadow-lg);
}
.figure::after { /* subtle inner ring for a crafted, framed feel */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .85s var(--ease), filter .85s var(--ease); }
.figure:hover img { transform: scale(1.055); filter: saturate(1.06); }
.figure--wide { aspect-ratio: 16 / 10; }
.figure--tall { aspect-ratio: 3 / 4; }
.figure--43   { aspect-ratio: 4 / 3; }
.figure__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--sp-6) var(--sp-4) var(--sp-4); color: #fff;
  background: linear-gradient(0deg, rgba(8,46,39,.88), rgba(8,46,39,.18) 58%, transparent);
}
.figure__cap b { display: block; font-family: var(--sans); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .68rem; color: var(--accent-100); margin-bottom: .3em; }
.figure__cap span { font-family: var(--serif); font-size: var(--step-1); line-height: 1.25; }

/* Floating glass chips over the hero photo */
.fig-wrap { position: relative; }
.fig-chip {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: .6em;
  background: rgba(255,255,255,.93); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  border: 1px solid var(--line); border-radius: 16px; padding: .6em .9em;
  box-shadow: var(--shadow-md); font-family: var(--sans); font-weight: 700; font-size: .9rem; color: var(--ink);
}
.fig-chip small { display: block; font-weight: 500; color: var(--muted); font-size: .72rem; }
.fig-chip .chip-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); }
.fig-chip .chip-ic svg { width: 20px; height: 20px; stroke: #fff; fill: none; }
.fig-chip--stars { color: var(--accent-600); letter-spacing: .06em; font-size: 1rem; }
.fig-chip--1 { top: 7%; left: -6%; animation: floatY 6s ease-in-out infinite; }
.fig-chip--2 { top: 30%; right: -6%; animation: floatY 7.5s ease-in-out infinite .6s; }

/* Founder signature card inside the origin story */
.founder {
  display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5);
  padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.founder__photo { flex: 0 0 auto; width: 66px; height: 66px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--brand-050); }
.founder__meta { line-height: 1.45; }
.founder__name { font-family: var(--serif); font-weight: 700; font-size: var(--step-1); color: var(--ink); }
.founder__role { font-size: var(--step--1); color: var(--brand-600); font-weight: 600; }
.founder__sig { font-family: var(--serif); font-style: italic; color: var(--muted); margin-top: .15em; }

/* "By the numbers" stat band (sits in a .section--ink) */
.statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.statband .stat { border-radius: var(--radius); }
.statband .stat__icon { background: rgba(224,161,60,.14); box-shadow: inset 0 0 0 1px rgba(224,161,60,.25); }
.statband .stat__icon svg { width: 28px; height: 28px; stroke: var(--accent-500); fill: none; }

@media (max-width: 760px) { .statband { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .fig-chip--1 { left: 4%; }
  .fig-chip--2 { right: 4%; }
}
@media (max-width: 560px) {
  .fig-chip { font-size: .8rem; padding: .5em .7em; gap: .5em; }
  .fig-chip small { font-size: .64rem; }
  .fig-chip .chip-ic { width: 30px; height: 30px; border-radius: 9px; }
  .fig-chip .chip-ic svg { width: 17px; height: 17px; }
  .fig-chip--stars { font-size: .82rem; }

  /* These chips floated over the photo, and on a phone there is no room for
     that: the 16/10 hero is only 175-200px tall and its caption already owns
     the bottom third, so chip 2 sat on top of chip 1 (which is what cut off
     "ACL Holder · MFAA Member" and "Hundreds of families helped"), and at
     320px chip 1 ran over the caption text as well. Below 560px they come out
     of the overlay and stack under the photo — same signals, no collisions.
     The blur is dropped with them; there is nothing behind them to blur. */
  .fig-wrap { display: grid; gap: .5rem; }
  .fig-chip {
    position: static; animation: none; max-width: none;
    background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .figure:hover img { transform: none; filter: none; }
  .fig-chip { animation: none; }
}

/* =====================================================================
   ABOUT PAGE — premium SVG icons + per-card animations (scoped)
   ===================================================================== */

/* ---- Line-art icons replacing emoji ---- */
.page-about .card__icon svg { width: 27px; height: 27px; stroke: var(--brand-600); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s var(--ease); }
.page-about .cred__badge svg { width: 25px; height: 25px; stroke: var(--brand-600); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s var(--ease); }
.page-about .award__badge { display: grid; place-items: center; }
.page-about .award__badge svg { width: 42px; height: 42px; stroke: var(--accent-600); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Universal accent top-bar that sweeps in on hover ---- */
.page-about .card { position: relative; overflow: hidden; }
.page-about .card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  transition: transform .55s var(--ease); z-index: 4;
}
.page-about .card:hover::before { transform: scaleX(1); }
/* Soft radial glow that fades in from a corner on hover */
.page-about .card::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 260px; height: 260px; right: -90px; top: -90px; border-radius: 50%;
  background: radial-gradient(circle, rgba(224,161,60,.12), transparent 68%);
  opacity: 0; transform: scale(.6); transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.page-about .card:hover::after { opacity: 1; transform: scale(1); }
.page-about .card > * { position: relative; z-index: 1; }

/* ---- Expertise (feature) cards — icon comes alive ---- */
.page-about .card__icon {
  position: relative; overflow: hidden;
  transition: transform .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.page-about .card:hover .card__icon {
  transform: rotate(-6deg) scale(1.1);
  background: linear-gradient(135deg, var(--brand-050), #d5eae2);
  box-shadow: inset 0 0 0 1px rgba(15,106,90,.18), 0 8px 18px rgba(15,106,90,.14);
}
.page-about .card:hover .card__icon svg { stroke: var(--brand-700); }
/* light sweep across the icon tile */
.page-about .card__icon::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-140%);
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.6) 50%, transparent 62%);
}
.page-about .card:hover .card__icon::after { animation: shine .8s var(--ease); }
.page-about .feature-grid h3 { transition: color .35s var(--ease); }
.page-about .feature-grid .card:hover h3 { color: var(--brand-700); }

/* ---- Credentials cards — badge tilt + fill ---- */
.page-about .cred__badge { transition: transform .5s var(--ease), background .5s var(--ease); }
.page-about .cred:hover .cred__badge { transform: rotate(-8deg) scale(1.1); background: linear-gradient(135deg, var(--brand-050), #d5eae2); }
.page-about .cred:hover .cred__badge svg { stroke: var(--brand-700); }

/* ---- Award cards — trophy lifts, year badge pops ---- */
.page-about .award__badge { transition: transform .5s var(--ease); }
.page-about .award:hover .award__badge { transform: translateY(-5px) scale(1.08); }
.page-about .award__year { transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease); }
.page-about .award:hover .award__year { transform: translateY(-2px); background: var(--accent-500); color: #2a1c05; }

/* ---- Stat band cards — icon spins up subtly ---- */
.page-about .statband .stat__icon { transition: transform .5s var(--ease), background .5s var(--ease); }
.page-about .statband .stat:hover .stat__icon { transform: translateY(-4px) rotate(6deg) scale(1.08); }

/* ---- Value cards — number watermark + left accent grows ---- */
.page-about .value { position: relative; overflow: hidden; }
.page-about .value::after {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 3px;
  background: linear-gradient(var(--brand-500), var(--accent-500));
  transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease);
  border-radius: 3px;
}
.page-about .value:hover::after { transform: scaleY(1); }
.page-about .value__n { display: inline-block; transition: transform .4s var(--ease), color .3s var(--ease); }
.page-about .value:hover .value__n { transform: translateX(4px); color: var(--accent-600); }
.page-about .value h3 { transition: color .35s var(--ease); }
.page-about .value:hover h3 { color: var(--brand-700); }

/* ---- Founder card — photo & sheen ---- */
.page-about .founder { position: relative; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.page-about .founder:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #d8cba6; }
.page-about .founder__photo { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.page-about .founder:hover .founder__photo { transform: scale(1.06); box-shadow: 0 0 0 3px var(--accent-100); }

/* =====================================================================
   ABOUT — animated timeline (fixes list-numbers, adds motion)
   ===================================================================== */
.page-about .timeline { list-style: none; }
/* the vertical spine draws itself in */
.page-about .timeline::before { transform: scaleY(0); transform-origin: top; transition: transform 1.2s var(--ease); }
.page-about .timeline.in::before { transform: scaleY(1); }

/* each milestone slides + fades in, staggered */
/* Slides in from the left, toward the spine. Offsetting to the right pushed
   the items 2px past the viewport before the reveal fired, which let a phone
   drag the whole page sideways. */
.page-about .tl-item { opacity: 0; transform: translateX(-22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.page-about .timeline.in .tl-item { opacity: 1; transform: none; }
.page-about .timeline.in .tl-item:nth-child(1) { transition-delay: .25s; }
.page-about .timeline.in .tl-item:nth-child(2) { transition-delay: .42s; }
.page-about .timeline.in .tl-item:nth-child(3) { transition-delay: .59s; }
.page-about .timeline.in .tl-item:nth-child(4) { transition-delay: .76s; }
.page-about .timeline.in .tl-item:nth-child(5) { transition-delay: .93s; }

/* dot: pops in, fills with brand on hover, gentle ring pulse */
.page-about .tl-item::before {
  transform: scale(0); transition: transform .45s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.page-about .timeline.in .tl-item::before { transform: scale(1); }
.page-about .timeline.in .tl-item:nth-child(1)::before { transition-delay: .3s; }
.page-about .timeline.in .tl-item:nth-child(2)::before { transition-delay: .47s; }
.page-about .timeline.in .tl-item:nth-child(3)::before { transition-delay: .64s; }
.page-about .timeline.in .tl-item:nth-child(4)::before { transition-delay: .81s; }
.page-about .timeline.in .tl-item:nth-child(5)::before { transition-delay: .98s; }
.page-about .tl-item:hover::before { background: var(--brand-500); box-shadow: 0 0 0 6px var(--brand-050); }
.page-about .tl-year { transition: color .35s var(--ease), transform .35s var(--ease); }
.page-about .tl-item:hover .tl-year { color: var(--accent-600); transform: translateX(3px); }

/* =====================================================================
   ABOUT — section heading flourish
   ===================================================================== */
.page-about .section-head.center .eyebrow { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .page-about .card::before, .page-about .card::after,
  .page-about .value::after { transition: none; }
  .page-about .card:hover .card__icon,
  .page-about .cred:hover .cred__badge,
  .page-about .award:hover .award__badge,
  .page-about .statband .stat:hover .stat__icon,
  .page-about .founder:hover .founder__photo { transform: none; }
  .page-about .card:hover .card__icon::after { animation: none; }
  .page-about .timeline::before,
  .page-about .timeline.in::before { transform: scaleY(1); transition: none; }
  .page-about .tl-item { opacity: 1; transform: none; transition: none; }
  .page-about .tl-item::before { transform: scale(1); transition: none; }
}

/* =====================================================================
   ABOUT — editorial "Our Story" typography & animation
   ===================================================================== */
.page-about .story { position: relative; }
/* oversized decorative quote mark behind the copy */
.page-about .story::before {
  content: "\201C"; position: absolute; top: -2.4rem; right: -.5rem; z-index: 0;
  font-family: var(--serif); font-size: 9rem; line-height: 1; color: var(--brand-500);
  opacity: .09; pointer-events: none; user-select: none;
}
.page-about .story > * { position: relative; z-index: 1; }

/* gradient divider that scales in under the heading */
.page-about .story__divider {
  display: block; height: 3px; width: 62px; border-radius: 3px; margin: .2rem 0 var(--sp-4);
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
}
.page-about .story__divider.reveal { opacity: 1; transform: scaleX(0); transform-origin: left; transition: transform .85s var(--ease) .15s; }
.page-about .story__divider.reveal.in { transform: scaleX(1); }

/* lead paragraph with editorial drop cap */
.page-about .story__lead { font-size: 1.14rem; line-height: 1.7; color: var(--ink-soft); }
.page-about .story__lead::first-letter {
  float: left; font-family: var(--serif); font-weight: 600; color: var(--brand-600);
  font-size: 3.6em; line-height: .74; padding: .04em .1em 0 0;
}
.page-about .story__lead::first-line { letter-spacing: .002em; }

/* serif-italic emphasis on the signature lines */
.page-about .story__em { font-family: var(--serif); font-style: italic; font-weight: 600; color: var(--brand-700); }

/* animated highlighter marker over key phrases (sweeps in on scroll) */
.page-about .mark {
  background-image: linear-gradient(var(--accent-100), var(--accent-100));
  background-repeat: no-repeat; background-position: 0 92%; background-size: 0% 42%;
  padding: 0 .12em; border-radius: 2px; color: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background-size .95s var(--ease) .35s;
}
.page-about .story p.reveal.in .mark { background-size: 100% 42%; }

.page-about .story p { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .page-about .story__divider.reveal,
  .page-about .story__divider.reveal.in { transform: scaleX(1); transition: none; }
  .page-about .mark { background-size: 100% 42%; transition: none; }
}

/* Nav: keep brand & links on one line with the display serif */
.brand { white-space: nowrap; }
.nav__links a { white-space: nowrap; }
/* Give the tight tablet zone a touch more room before the mobile menu */
@media (min-width: 901px) and (max-width: 1080px) {
  .nav__links { gap: .05rem; }
  .nav__links a { padding: .5em .55em; font-size: .9rem; }
  .brand { font-size: 1.34rem; }
}

/* =====================================================================
   HOME PAGE — premium polish & richer animation (scoped .page-home)
   ===================================================================== */

/* ---- Hero: cinematic slow zoom on the photo ---- */
.page-home .hero-illustration { overflow: hidden; }
.page-home .hero-illustration img { animation: kenburns 22s ease-in-out infinite alternate; will-change: transform; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.page-home .faq-media img { animation: kenburns 26s ease-in-out infinite alternate; }

/* proof chips lift */
.page-home .proof { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.page-home .proof:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand-500); }

/* ---- Animated accent bar under every section heading ---- */
.page-home .section-head h2 { position: relative; }
.page-home .section-head.center h2::after {
  content: ""; display: block; width: 66px; height: 3px; margin: var(--sp-3) auto 0;
  border-radius: 3px; background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  transform: scaleX(0); transform-origin: center; transition: transform .8s var(--ease) .15s;
}
.page-home .section-head:not(.center) h2::after {
  content: ""; display: block; width: 66px; height: 3px; margin: var(--sp-3) 0 0;
  border-radius: 3px; background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) .15s;
}
.page-home .section-head h2.reveal.in::after { transform: scaleX(1); }

/* ---- Stat cards: accent sweep + living icon ---- */
.page-home .stat.card { position: relative; overflow: hidden; }
.page-home .stat.card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: left; z-index: 3;
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  transition: transform .55s var(--ease);
}
.page-home .stat.card:hover::before { transform: scaleX(1); }
.page-home .stat__icon { transition: transform .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease); }
.page-home .stat.card:hover .stat__icon { transform: translateY(-4px) rotate(6deg) scale(1.08); box-shadow: inset 0 0 0 1px rgba(15,106,90,.16), 0 8px 18px rgba(15,106,90,.14); }
.page-home .stat.card:hover .stat__value { color: var(--brand-600); }

/* ---- Offering / concern / step photo cards: gold ring on hover ---- */
.page-home .ocard::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 0 rgba(224,161,60,0); transition: box-shadow .5s var(--ease);
}
.page-home .ocard:hover::after { box-shadow: inset 0 0 0 2px rgba(224,161,60,.55); }
/* badge tilts on hover */
.page-home .ocard:hover .card__badge { transform: translateX(-50%) translateY(-4px) scale(1.1) rotate(-6deg); }

/* ---- Steps: number badge pop ---- */
.page-home .steps .step-badge { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.page-home .steps .card:hover .step-badge { transform: scale(1.15) rotate(-8deg); box-shadow: var(--shadow-lg); }

/* ---- Testimonials: decorative quote watermark + stagger polish ---- */
.page-home .quote { position: relative; overflow: hidden; isolation: isolate; }
.page-home .quote::after {
  content: "\201D"; position: absolute; right: .6rem; top: -1.4rem; z-index: 0;
  font-family: var(--serif); font-size: 7rem; line-height: 1; color: var(--brand-500);
  opacity: .08; pointer-events: none; user-select: none;
}
.page-home .quote > * { position: relative; z-index: 1; }

/* ---- CTA band: slow light sheen sweeping across ---- */
.page-home .cta-band { position: relative; overflow: hidden; }
.page-home .cta-band::after {
  content: ""; position: absolute; top: -20%; left: -45%; width: 38%; height: 140%; z-index: 0;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.10), transparent);
  transform: skewX(-18deg); animation: ctaSheen 7s ease-in-out infinite;
}
@keyframes ctaSheen { 0%, 100% { left: -45%; } 55% { left: 115%; } }

/* ---- Contact method rows: icon fills on hover (already translateX) ---- */
.page-home .cmethod__ic { transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.page-home .cmethod:hover .cmethod__ic { transform: scale(1.08) rotate(-4deg); }

@media (prefers-reduced-motion: reduce) {
  .page-home .hero-illustration img,
  .page-home .faq-media img,
  .page-home .cta-band::after { animation: none; }
  .page-home .section-head.center h2::after,
  .page-home .section-head:not(.center) h2::after,
  .page-home .section-head h2.reveal.in::after { transform: scaleX(1); transition: none; }
  .page-home .stat.card:hover .stat__icon,
  .page-home .ocard:hover .card__badge,
  .page-home .steps .card:hover .step-badge,
  .page-home .cmethod:hover .cmethod__ic,
  .page-home .proof:hover { transform: none; }
}

/* =====================================================================
   NAVBAR — premium refinement & animation (site-wide)
   ===================================================================== */

/* Deeper, cleaner glass */
.nav {
  background: rgba(251,250,246,.62);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}
.nav.scrolled {
  background: rgba(251,250,246,.88);
  box-shadow: 0 12px 34px rgba(15,36,31,.10);
}
/* Animated gradient hairline that fades in once scrolled */
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--accent-500) 30%, var(--brand-500) 70%, transparent);
  background-size: 200% 100%; opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease); animation: navEdge 9s linear infinite;
}
.nav.scrolled::after { opacity: .7; }
@keyframes navEdge { to { background-position: 200% 0; } }

/* Gliding indicator removed — active page shown via the gold underline instead */
.nav__indicator { display: none !important; }

/* Brand: refined weight + a slightly richer mark */
.brand__mark { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 6px 16px rgba(15,106,90,.22); }

@keyframes navLinkIn { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: none; } }

/* Desktop-only premium touches */
@media (min-width: 901px) {
  /* staggered entrance for links on load */
  .nav__links li { animation: navLinkIn .6s var(--ease) both; }
  .nav__links li:nth-child(1) { animation-delay: .12s; }
  .nav__links li:nth-child(2) { animation-delay: .18s; }
  .nav__links li:nth-child(3) { animation-delay: .24s; }
  .nav__links li:nth-child(4) { animation-delay: .30s; }
  .nav__links li:nth-child(5) { animation-delay: .36s; }
  .nav__links li:nth-child(6) { animation-delay: .42s; }
  .nav__links li:nth-child(7) { animation-delay: .48s; }

  .nav__links a { transition: color .25s var(--ease), transform .25s var(--ease); }
  .nav__links a:hover { transform: translateY(-1px); }
  /* gold underline slides in on hover, mirroring the active page */
  .nav__links a:hover::after { left: .85em; right: .85em; }

  /* Last link ("Get Started") becomes an accent CTA button */
  .nav__links > li:last-of-type { margin-left: .4rem; }
  .nav__links > li:last-of-type a {
    position: relative; overflow: hidden; z-index: 1;
    color: #2a1c05; font-weight: 600;
    background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
    padding: .62em 1.2em; border-radius: 999px;
    box-shadow: 0 6px 16px rgba(224,161,60,.28);
  }
  .nav__links > li:last-of-type a:hover { color: #2a1c05; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(224,161,60,.36); }
  .nav__links > li:last-of-type a::after { display: none; } /* no gold underline on the CTA */
  .nav__links > li:last-of-type a::before {
    content: ""; position: absolute; inset: 0; transform: translateX(-140%); pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  }
  .nav__links > li:last-of-type a:hover::before { animation: shine .75s var(--ease); }
}

@media (prefers-reduced-motion: reduce) {
  .nav::after { animation: none; }
  .nav__links li { animation: none; }
  .nav__links a:hover { transform: none; }
  .nav__links > li:last-of-type a:hover { transform: none; }
  .nav__links > li:last-of-type a:hover::before { animation: none; }
}

/* =====================================================================
   ABOUT PAGE — extra premium polish to match/exceed the home standard
   ===================================================================== */

/* Animated accent bar under each centered section heading */
.page-about .section-head h2 { position: relative; }
.page-about .section-head.center h2::after {
  content: ""; display: block; width: 66px; height: 3px; margin: var(--sp-3) auto 0;
  border-radius: 3px; background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  transform: scaleX(0); transform-origin: center; transition: transform .8s var(--ease) .15s;
}
.page-about .section-head h2.reveal.in::after { transform: scaleX(1); }
/* on the dark "By the Numbers" band, brighten the bar */
.page-about .section--ink .section-head h2::after { background: linear-gradient(90deg, var(--accent-500), var(--accent-600)); }

/* Values heading (left-aligned, not in a section-head) gets a matching bar */
.page-about #values-head { position: relative; }
.page-about #values-head::after {
  content: ""; display: block; width: 66px; height: 3px; margin: var(--sp-3) 0 0;
  border-radius: 3px; background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) .15s;
}
.page-about #values-head.reveal.in::after { transform: scaleX(1); }

/* Proof chips lift on hover (hero) */
.page-about .proof { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.page-about .proof:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand-500); }

/* CTA band: slow light sheen sweeping across */
.page-about .cta-band { position: relative; overflow: hidden; }
.page-about .cta-band::after {
  content: ""; position: absolute; top: -20%; left: -45%; width: 38%; height: 140%; z-index: 0;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.10), transparent);
  transform: skewX(-18deg); animation: ctaSheen 7s ease-in-out infinite;
}

/* Hero photo: gentle cinematic drift */
.page-about .hero .figure--wide img { animation: kenburns 24s ease-in-out infinite alternate; }
.page-about .hero .figure--wide:hover img { animation-play-state: paused; }

/* Stat band values shift to gold-warm on hover of their card */
.page-about .statband .stat:hover .stat__value { color: var(--accent-600); }

@media (prefers-reduced-motion: reduce) {
  .page-about .section-head.center h2::after,
  .page-about #values-head::after,
  .page-about .section-head h2.reveal.in::after,
  .page-about #values-head.reveal.in::after { transform: scaleX(1); transition: none; }
  .page-about .cta-band::after,
  .page-about .hero .figure--wide img { animation: none; }
  .page-about .proof:hover { transform: none; }
}

/* =====================================================================
   LOAN SOLUTIONS — premium polish & animation (scoped .page-loans)
   ===================================================================== */

/* Pricing panel tag icon (replaces emoji) */
.page-loans .panel__tag { align-items: center; }
.page-loans .panel__tag svg { width: 20px; height: 20px; stroke: var(--brand-600); vertical-align: -.35em; margin-right: .15em; }

/* Animated accent bar under each centered section heading */
.page-loans .section-head h2 { position: relative; }
.page-loans .section-head.center h2::after {
  content: ""; display: block; width: 66px; height: 3px; margin: var(--sp-3) auto 0;
  border-radius: 3px; background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  transform: scaleX(0); transform-origin: center; transition: transform .8s var(--ease) .15s;
}
.page-loans .section-head h2.reveal.in::after { transform: scaleX(1); }

/* Service cards — accent sweep + living icon + title warm */
.page-loans .card.svc { position: relative; overflow: hidden; }
.page-loans .card.svc::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: left; z-index: 4;
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  transition: transform .55s var(--ease);
}
.page-loans .card.svc:hover::before { transform: scaleX(1); }
.page-loans .svc__head .card__icon { transition: transform .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease); }
.page-loans .svc:hover .card__icon { transform: rotate(-6deg) scale(1.1); background: linear-gradient(135deg, var(--brand-050), #d5eae2); box-shadow: inset 0 0 0 1px rgba(15,106,90,.18); }
.page-loans .svc:hover .card__icon svg { stroke: var(--brand-700); }
.page-loans .svc__head h3 { transition: color .3s var(--ease); }
.page-loans .svc:hover .svc__head h3 { color: var(--brand-700); }
.page-loans .svc__more > summary { transition: color .25s var(--ease); }
.page-loans .svc__more > summary:hover { color: var(--accent-600); }

/* Pricing panels lift */
.page-loans .panel { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.page-loans .panel:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d8cba6; }

/* Comparison table — highlight the Spotto column (base highlighted the wrong one) + row hover */
.page-loans table.compare thead th:last-child { background: var(--brand-900); }
.page-loans table.compare thead th:nth-child(2) { background: var(--brand-600); }
.page-loans table.compare td:nth-child(2) { color: var(--brand-700); font-weight: 600; }
.page-loans table.compare tbody tr { transition: background .25s var(--ease); }
.page-loans table.compare tbody tr:hover { background: var(--brand-050); }

/* Below 760px the three columns cannot fit. The reader had to drag a 520px
   table sideways inside the page, and the third column ("Going Direct to Your
   Bank") sat entirely off-screen with nothing to hint that it existed — so the
   comparison, which is the whole point of the table, was invisible on a phone.
   Each row becomes a self-contained card instead: the factor as its heading,
   then the two sides stacked and labelled. The header row is only visually
   hidden, so screen readers still announce the column names for each cell. */
@media (max-width: 760px) {
  .table-scroll { overflow: visible; border: 0; border-radius: 0; box-shadow: none; }

  table.compare { display: block; min-width: 0; background: none; font-size: .95rem; }
  table.compare thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  table.compare tbody { display: grid; gap: var(--sp-3); }

  table.compare tbody tr,
  table.compare tbody tr:nth-child(even),
  .page-loans table.compare tbody tr:hover {
    display: block; padding: var(--sp-4); background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }

  table.compare td,
  table.compare tbody tr:last-child td { display: block; padding: 0; border-bottom: 0; }

  /* Factor name — the card's heading. */
  table.compare td:first-child {
    font-family: var(--serif); font-size: 1.08rem; font-weight: 700; line-height: 1.3;
    padding-bottom: .65em; margin-bottom: var(--sp-3);
    border-bottom: 1px solid var(--line);
  }

  table.compare td[data-label] + td[data-label] { margin-top: var(--sp-2); }
  table.compare td[data-label]::before {
    content: attr(data-label);
    display: block; margin-bottom: .25em;
    font-family: var(--sans); font-size: .68rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  }

  /* Keep the Spotto side visually ahead of the bank side, as it is on desktop. */
  table.compare td[data-label="Spotto Finance"] {
    padding: var(--sp-3); border-radius: var(--radius-sm); background: var(--brand-050);
  }
  table.compare td[data-label="Spotto Finance"]::before { color: var(--brand-700); }
  table.compare td[data-label="Going Direct to Your Bank"] { padding: var(--sp-3); color: var(--ink-soft); }
}

/* Lender chips: consistent hover depth */
.page-loans .lender { transition: transform .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.page-loans .lender:hover { box-shadow: var(--shadow-sm); }

/* CTA band sheen */
.page-loans .cta-band { position: relative; overflow: hidden; }
.page-loans .cta-band::after {
  content: ""; position: absolute; top: -20%; left: -45%; width: 38%; height: 140%; z-index: 0;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.10), transparent);
  transform: skewX(-18deg); animation: ctaSheen 7s ease-in-out infinite;
}

/* Hero photo cinematic drift */
.page-loans .hero .figure--wide img { animation: kenburns 24s ease-in-out infinite alternate; }
.page-loans .hero .figure--wide:hover img { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .page-loans .section-head.center h2::after,
  .page-loans .section-head h2.reveal.in::after { transform: scaleX(1); transition: none; }
  .page-loans .svc:hover .card__icon, .page-loans .panel:hover { transform: none; }
  .page-loans .cta-band::after, .page-loans .hero .figure--wide img { animation: none; }
}

/* =====================================================================
   WHY CHOOSE SPOTTO — premium polish & animation (scoped .page-why)
   ===================================================================== */

/* Line-art icons (What We Stand For) */
.page-why .card__icon svg { width: 27px; height: 27px; stroke: var(--brand-600); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s var(--ease); }
/* icons inside ghost buttons (contact) */
.page-why .btn svg { vertical-align: -.2em; }

/* Animated accent bar under centered section headings */
.page-why .section-head h2 { position: relative; }
.page-why .section-head.center h2::after {
  content: ""; display: block; width: 66px; height: 3px; margin: var(--sp-3) auto 0;
  border-radius: 3px; background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  transform: scaleX(0); transform-origin: center; transition: transform .8s var(--ease) .15s;
}
.page-why .section-head h2.reveal.in::after { transform: scaleX(1); }

/* Cards (What We Stand For + Service Promise) — accent sweep, icon life, title warm */
.page-why .card { position: relative; overflow: hidden; }
.page-why .card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: left; z-index: 4;
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  transition: transform .55s var(--ease);
}
.page-why .card:hover::before { transform: scaleX(1); }
.page-why .card__icon { transition: transform .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease); }
.page-why .card:hover .card__icon { transform: rotate(-6deg) scale(1.1); background: linear-gradient(135deg, var(--brand-050), #d5eae2); box-shadow: inset 0 0 0 1px rgba(15,106,90,.18); }
.page-why .card:hover .card__icon svg { stroke: var(--brand-700); }
.page-why .card h3 { transition: color .3s var(--ease); }
.page-why .card:hover h3 { color: var(--brand-700); }

/* Value cards (The Spotto Difference) — left accent rail + gold number */
.page-why .value { position: relative; overflow: hidden; }
.page-why .value::after {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 3px;
  background: linear-gradient(var(--brand-500), var(--accent-500));
  transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease); border-radius: 3px;
}
.page-why .value:hover::after { transform: scaleY(1); }
.page-why .value__n { display: inline-block; transition: transform .4s var(--ease), color .3s var(--ease); }
.page-why .value:hover .value__n { transform: translateX(4px); color: var(--accent-600); }
.page-why .value h3 { transition: color .3s var(--ease); }
.page-why .value:hover h3 { color: var(--brand-700); }

/* Testimonial cards — decorative quote mark colour + oversized mark */
.page-why .quote__mark { font-size: 3.4rem; color: var(--accent-500); opacity: .9; }

/* Credentials checklist card lift */
.page-why .checks li { transition: transform .25s var(--ease); }
.page-why .checks li:hover { transform: translateX(3px); }

/* CTA band sheen */
.page-why .cta-band { position: relative; overflow: hidden; }
.page-why .cta-band::after {
  content: ""; position: absolute; top: -20%; left: -45%; width: 38%; height: 140%; z-index: 0;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.10), transparent);
  transform: skewX(-18deg); animation: ctaSheen 7s ease-in-out infinite;
}

/* Hero photo cinematic drift */
.page-why .hero .figure--wide img { animation: kenburns 24s ease-in-out infinite alternate; }
.page-why .hero .figure--wide:hover img { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .page-why .section-head.center h2::after,
  .page-why .section-head h2.reveal.in::after { transform: scaleX(1); transition: none; }
  .page-why .card:hover .card__icon, .page-why .value:hover .value__n,
  .page-why .checks li:hover { transform: none; }
  .page-why .value::after { transition: none; }
  .page-why .cta-band::after, .page-why .hero .figure--wide img { animation: none; }
}

/* =====================================================================
   Figure placeholder — elegant stand-in until a real photo is supplied
   ===================================================================== */
.figure--placeholder {
  background: linear-gradient(135deg, var(--brand-700), var(--brand-500) 58%, #1f9a83);
}
.figure--placeholder::before { /* soft light accents */
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5;
  background:
    radial-gradient(circle at 22% 24%, rgba(255,255,255,.20), transparent 34%),
    radial-gradient(circle at 78% 72%, rgba(224,161,60,.30), transparent 42%);
}
.figure__ph {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-content: center; justify-items: center; gap: .9em;
  color: #eafaf5; text-align: center; padding: var(--sp-4);
}
.figure__ph-icon { width: 84px; height: 84px; opacity: .92; }
.figure__ph span {
  font-family: var(--sans); font-size: var(--step--1); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; opacity: .85;
}

/* =====================================================================
   HOW WE HELP — premium polish, connected timeline & animation
   ===================================================================== */

/* Overview step icons (SVG) */
.page-howwehelp .step__icon { display: inline-grid; place-items: center; }
.page-howwehelp .step__icon svg { width: 30px; height: 30px; stroke: var(--brand-600); fill: none; transition: stroke .4s var(--ease); }

/* Step-1 contact links with inline icons */
.page-howwehelp .mini-links a { display: flex; align-items: flex-start; gap: .55em; font-weight: 600; overflow-wrap: anywhere; }
.page-howwehelp .mini-links svg { width: 17px; height: 17px; color: var(--brand-600); flex: 0 0 auto; margin-top: .15em; }

/* Animated accent bars under headings */
.page-howwehelp .section-head.center h2,
.page-howwehelp #detail { position: relative; }
.page-howwehelp .section-head.center h2::after {
  content: ""; display: block; width: 66px; height: 3px; margin: var(--sp-3) auto 0;
  border-radius: 3px; background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  transform: scaleX(0); transform-origin: center; transition: transform .8s var(--ease) .15s;
}
.page-howwehelp #detail::after {
  content: ""; display: block; width: 66px; height: 3px; margin: var(--sp-3) auto 0;
  border-radius: 3px; background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  transform: scaleX(0); transition: transform .8s var(--ease) .15s;
}
.page-howwehelp .section-head.center h2.reveal.in::after,
.page-howwehelp #detail.reveal.in::after { transform: scaleX(1); }

/* Overview step cards — premium hover: lift, accent bar, living icon + number */
.page-howwehelp .step { position: relative; overflow: hidden; transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease); }
.page-howwehelp .step:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(15,36,31,.16); border-color: #d8cba6; }
.page-howwehelp .step::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: left; z-index: 2;
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500)); transition: transform .55s var(--ease);
}
.page-howwehelp .step:hover::before { transform: scaleX(1); }
.page-howwehelp .step__num { transition: transform .4s var(--ease), background .4s var(--ease); }
.page-howwehelp .step:hover .step__num { transform: scale(1.1) rotate(-6deg); background: var(--accent-500); }
.page-howwehelp .step__icon { transition: transform .45s var(--ease); }
.page-howwehelp .step:hover .step__icon { transform: translateY(-3px) scale(1.08); }
.page-howwehelp .step:hover .step__icon svg { stroke: var(--brand-700); }
.page-howwehelp .step h3 { transition: color .3s var(--ease); }
.page-howwehelp .step:hover h3 { color: var(--brand-700); }

/* Detailed steps — premium stacked cards (fills the space, reads intentional) */
.page-howwehelp .stepblock {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
  margin-bottom: var(--sp-4);
  grid-template-columns: 64px 1fr;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.page-howwehelp .stepblock:first-of-type { border-top: 1px solid var(--line); }
.page-howwehelp .stepblock:last-of-type { margin-bottom: 0; }
.page-howwehelp .stepblock:hover { transform: translateY(-5px); box-shadow: 0 26px 54px rgba(15,36,31,.15); border-color: #d8cba6; }
.page-howwehelp .stepblock::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: left; z-index: 2;
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500)); transition: transform .55s var(--ease);
}
.page-howwehelp .stepblock:hover::before { transform: scaleX(1); }
.page-howwehelp .stepblock__badge { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.page-howwehelp .stepblock:hover .stepblock__badge { transform: scale(1.08) rotate(-4deg); box-shadow: 0 10px 22px rgba(15,106,90,.28); }
.page-howwehelp .stepblock__body h3 { transition: color .3s var(--ease); }
.page-howwehelp .stepblock:hover .stepblock__body h3 { color: var(--brand-700); }
.page-howwehelp .mini { transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); }
.page-howwehelp .mini:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); background: var(--brand-050); }

/* CTA sheen + hero drift */
.page-howwehelp .cta-band { position: relative; overflow: hidden; }
.page-howwehelp .cta-band::after {
  content: ""; position: absolute; top: -20%; left: -45%; width: 38%; height: 140%; z-index: 0;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.10), transparent);
  transform: skewX(-18deg); animation: ctaSheen 7s ease-in-out infinite;
}
.page-howwehelp .hero .figure--wide img { animation: kenburns 24s ease-in-out infinite alternate; }
.page-howwehelp .hero .figure--wide:hover img { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .page-howwehelp .section-head.center h2::after, .page-howwehelp #detail::after,
  .page-howwehelp .section-head.center h2.reveal.in::after, .page-howwehelp #detail.reveal.in::after { transform: scaleX(1); transition: none; }
  .page-howwehelp .step:hover, .page-howwehelp .step:hover .step__num, .page-howwehelp .step:hover .step__icon,
  .page-howwehelp .stepblock:hover, .page-howwehelp .stepblock:hover .stepblock__badge, .page-howwehelp .mini:hover { transform: none; }
  .page-howwehelp .cta-band::after, .page-howwehelp .hero .figure--wide img { animation: none; }
}

/* =====================================================================
   HOW WE HELP — Process-in-Detail: roomy layout, accent contact, watermark
   ===================================================================== */
/* Big faint step-number watermark fills the card elegantly */
.page-howwehelp .section--alt .wrap { counter-reset: sbstep; }
.page-howwehelp .stepblock { counter-increment: sbstep; align-items: start; }
.page-howwehelp .stepblock > * { position: relative; z-index: 1; }
.page-howwehelp .stepblock::after {
  content: counter(sbstep); position: absolute; right: clamp(1rem, -0.5rem + 4vw, 3rem); top: 50%;
  transform: translateY(-50%); z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--serif); font-weight: 600; font-size: clamp(6rem, 3rem + 9vw, 12rem);
  line-height: 1; color: var(--brand-700); opacity: .05;
}

/* Roomy 2-column info grid (was cramping 4 cols → contact text clipped) */
.page-howwehelp .mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); }
.page-howwehelp .mini { background: var(--surface-alt); padding: var(--sp-4) var(--sp-5); }
.page-howwehelp .mini h4 { margin-bottom: var(--sp-3); }
/* the "Book Your Free Consultation" panel becomes an accent CTA block */
.page-howwehelp .mini:last-child {
  background: linear-gradient(135deg, var(--brand-050), #eef6f2);
  border: 1px solid rgba(15,106,90,.14);
}
.page-howwehelp .mini:last-child .mini-links a { font-size: 1rem; }
@media (max-width: 620px) {
  .page-howwehelp .mini-grid { grid-template-columns: 1fr; }

  /* The shared rule collapses .stepblock to one column at 560px, but the
     .page-howwehelp override above re-declares `64px 1fr` with higher
     specificity and lands later in the file, so the collapse never applied on
     the only page that uses these cards. The badge kept its 64px column and
     left 195px for every heading, paragraph and nested card at 375px — which
     is the narrow, indented column of text with a wide empty gutter beside it.
     Collapse it here, where the override can be beaten. */
  .page-howwehelp .stepblock { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* =====================================================================
   RESOURCES + GET STARTED — premium polish & animation
   ===================================================================== */

/* Line-art icons replacing emoji */
.page-resources .card__icon svg,
.page-getstarted .card__icon svg { width: 27px; height: 27px; stroke: var(--brand-600); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s var(--ease); }
.page-getstarted .cred__badge svg { width: 25px; height: 25px; stroke: var(--brand-600); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s var(--ease); }

/* Animated accent bar under centered section headings */
.page-resources .section-head.center h2,
.page-getstarted .section-head.center h2 { position: relative; }
.page-resources .section-head.center h2::after,
.page-getstarted .section-head.center h2::after {
  content: ""; display: block; width: 66px; height: 3px; margin: var(--sp-3) auto 0;
  border-radius: 3px; background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  transform: scaleX(0); transform-origin: center; transition: transform .8s var(--ease) .15s;
}
.page-resources .section-head.center h2.reveal.in::after,
.page-getstarted .section-head.center h2.reveal.in::after { transform: scaleX(1); }

/* Cards — accent sweep + living icon + title warm (hub cards, channel cards) */
.page-resources .card, .page-getstarted .card { position: relative; overflow: hidden; }
.page-resources .card::before, .page-getstarted .card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: left; z-index: 4;
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500)); transition: transform .55s var(--ease);
}
.page-resources .card:hover::before, .page-getstarted .card:hover::before { transform: scaleX(1); }
.page-resources .card__icon, .page-getstarted .card__icon { transition: transform .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease); }
.page-resources .card:hover .card__icon, .page-getstarted .card:hover .card__icon { transform: rotate(-6deg) scale(1.1); background: linear-gradient(135deg, var(--brand-050), #d5eae2); box-shadow: inset 0 0 0 1px rgba(15,106,90,.18); }
.page-resources .card:hover .card__icon svg, .page-getstarted .card:hover .card__icon svg { stroke: var(--brand-700); }
.page-resources .card h3, .page-getstarted .card h3 { transition: color .3s var(--ease); }
.page-resources .card:hover h3, .page-getstarted .card:hover h3 { color: var(--brand-700); }

/* Contact detail (cred) cards — badge tilt/fill */
.page-getstarted .cred__badge { transition: transform .5s var(--ease), background .5s var(--ease); }
.page-getstarted .cred:hover .cred__badge { transform: rotate(-8deg) scale(1.1); background: linear-gradient(135deg, var(--brand-050), #d5eae2); }
.page-getstarted .cred:hover .cred__badge svg { stroke: var(--brand-700); }

/* FAQ accordion — premium hover */
.page-resources .faq__item, .page-getstarted .faq__item { transition: box-shadow .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.page-resources .faq__item:hover, .page-getstarted .faq__item:hover { box-shadow: var(--shadow-md); border-color: #d8cba6; }
.page-resources .faq__q:hover, .page-getstarted .faq__q:hover { color: var(--brand-700); }

/* Booking form — premium lift */
.page-getstarted .form { transition: box-shadow .4s var(--ease); }
.page-getstarted .form:hover { box-shadow: var(--shadow-md); }
.page-getstarted .btn[type="submit"] { width: 100%; }

/* CTA sheen (resources) */
.page-resources .cta-band { position: relative; overflow: hidden; }
.page-resources .cta-band::after {
  content: ""; position: absolute; top: -20%; left: -45%; width: 38%; height: 140%; z-index: 0;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.10), transparent);
  transform: skewX(-18deg); animation: ctaSheen 7s ease-in-out infinite;
}

/* Hero photo drift (resources) */
.page-resources .hero .figure--wide img { animation: kenburns 24s ease-in-out infinite alternate; }
.page-resources .hero .figure--wide:hover img { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .page-resources .section-head.center h2::after, .page-getstarted .section-head.center h2::after,
  .page-resources .section-head.center h2.reveal.in::after, .page-getstarted .section-head.center h2.reveal.in::after { transform: scaleX(1); transition: none; }
  .page-resources .card:hover .card__icon, .page-getstarted .card:hover .card__icon,
  .page-getstarted .cred:hover .cred__badge, .page-resources .faq__item:hover, .page-getstarted .faq__item:hover { transform: none; }
  .page-resources .cta-band::after, .page-resources .hero .figure--wide img { animation: none; }
}

/* =====================================================================
   Brand logo image (real Spotto emblem, replaces the letter mark)
   ===================================================================== */
.brand__logo { height: 56px; width: auto; display: block; flex: 0 0 auto; transition: transform .45s var(--ease); }
.brand:hover .brand__logo { transform: scale(1.06) rotate(-2deg); }
/* logo stays the same size on scroll (no compress) */
/* Footer: place the colour emblem on a soft white tile so it reads on the dark bg */
.footer__brand .brand__logo { background: #fff; border-radius: 12px; padding: 6px 9px; box-shadow: var(--shadow-sm); height: 60px; }
@media (max-width: 900px) { .brand__logo { height: 48px; } }
@media (prefers-reduced-motion: reduce) { .brand:hover .brand__logo { transform: none; } }

/* Wordmark in the logo's brand colours (green + blue) — nav + footer */
.wm-a, .brand:hover .wm-a { color: #4b984d; }
.wm-b, .brand:hover .wm-b { color: #387dbe; }
/* brighten slightly on the dark footer for contrast */
.footer__brand .wm-a { color: #6cc06e; }
.footer__brand .wm-b { color: #63ace4; }

/* =====================================================================
   Brand tagline under the logo (nav + footer)
   ===================================================================== */
.brand__text { display: flex; flex-direction: column; justify-content: center; line-height: 1.04; }
.brand__tagline {
  font-family: var(--sans); font-weight: 600; font-size: .62rem;
  letter-spacing: .2em; text-transform: uppercase; color: #387dbe; margin-top: .35em;
}
.footer__brand .brand__tagline { color: #7fb8e8; letter-spacing: .22em; }
@media (max-width: 900px) { .brand__tagline { font-size: .56rem; } }

/* =====================================================================
   Floating contact stack (WhatsApp, Phone, Email, Instagram, Facebook)
   ===================================================================== */
.fab-stack { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: .6rem; }
.fab {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; box-shadow: var(--shadow-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.fab:hover { transform: scale(1.12); color: #fff; box-shadow: var(--shadow-lg); }
.fab svg { width: 26px; height: 26px; }
.fab--wa   { background: #25d366; }
.fab--call { background: var(--brand-600); }
.fab--mail { background: var(--brand-700); }
.fab--ig   { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.fab--fb   { background: #1877f2; }
/* gentle staggered entrance */
.fab { animation: fabIn .5s var(--ease) both; }
.fab--call { animation-delay: .06s; } .fab--mail { animation-delay: .12s; }
.fab--ig { animation-delay: .18s; } .fab--fb { animation-delay: .24s; }
@keyframes fabIn { from { opacity: 0; transform: translateY(14px) scale(.8); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .fab { width: 46px; height: 46px; } .fab svg { width: 23px; height: 23px; } .fab-stack { gap: .5rem; } }
@media (prefers-reduced-motion: reduce) { .fab { animation: none; } .fab:hover { transform: none; } }

/* =====================================================================
   Premium floating contact stack — depth, tooltips, hover motion
   ===================================================================== */
.fab {
  position: relative;
  box-shadow: 0 7px 20px rgba(15,36,31,.24), inset 0 0 0 1px rgba(255,255,255,.18);
}
.fab svg { transition: transform .4s var(--ease); }
.fab:hover { transform: scale(1.15) translateX(-2px); box-shadow: 0 14px 30px rgba(15,36,31,.32), inset 0 0 0 1px rgba(255,255,255,.30); }
.fab:hover svg { transform: rotate(-10deg) scale(1.06); }
.fab:active { transform: scale(1.05); }
/* sliding tooltip label (uses the aria-label text) */
.fab::before {
  content: attr(aria-label);
  position: absolute; right: calc(100% + 14px); top: 50%;
  transform: translateY(-50%) translateX(10px) scale(.96);
  background: var(--ink); color: #fff; font-family: var(--sans); font-weight: 600; font-size: .82rem;
  white-space: nowrap; padding: .55em .85em; border-radius: 10px; box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.fab::after {
  content: ""; position: absolute; right: calc(100% + 8px); top: 50%;
  transform: translateY(-50%); border: 6px solid transparent; border-left-color: var(--ink);
  opacity: 0; transition: opacity .28s var(--ease);
}
.fab:hover::before { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
.fab:hover::after  { opacity: 1; }
/* gentle attention pulse on WhatsApp */
@keyframes waPulse {
  0%   { box-shadow: 0 7px 20px rgba(15,36,31,.24), 0 0 0 0 rgba(37,211,102,.5); }
  70%  { box-shadow: 0 7px 20px rgba(15,36,31,.24), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 7px 20px rgba(15,36,31,.24), 0 0 0 0 rgba(37,211,102,0); }
}
.fab--wa { animation: fabIn .5s var(--ease) both, waPulse 2.8s ease-out 1.2s infinite; }
.fab--wa:hover { animation: none; }

/* =====================================================================
   Premium footer socials — lift, icon wiggle, per-brand hover colour
   ===================================================================== */
.socials a {
  width: 44px; height: 44px; border-radius: 13px;
  transition: transform .32s var(--ease), background .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease), color .32s var(--ease);
}
.socials a svg { transition: transform .38s var(--ease); }
.socials a:hover { transform: translateY(-4px) scale(1.07); box-shadow: 0 10px 22px rgba(0,0,0,.28); }
.socials a:hover svg { transform: rotate(-10deg); }
.footer .socials a:nth-child(1):hover { background: #25d366; border-color: transparent; color: #fff; }
.footer .socials a:nth-child(2):hover { background: var(--brand-500); border-color: transparent; color: #fff; }
.footer .socials a:nth-child(3):hover { background: var(--brand-500); border-color: transparent; color: #fff; }
.footer .socials a:nth-child(4):hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); border-color: transparent; color: #fff; }
.footer .socials a:nth-child(5):hover { background: #1877f2; border-color: transparent; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .fab--wa { animation: none; }
  .fab:hover, .fab:hover svg, .socials a:hover, .socials a:hover svg { transform: none; }
}

/* =====================================================================
   Footer socials — premium glass tiles, shine sweep, coloured glow
   ===================================================================== */
.socials a {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.16);
}
.socials a svg { position: relative; z-index: 1; }
.socials a::before {
  content: ""; position: absolute; inset: 0; z-index: 0; transform: translateX(-140%); pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
}
.socials a:hover::before { animation: shine .8s var(--ease); }
.footer .socials a:nth-child(1):hover { background: #25d366; box-shadow: 0 10px 24px rgba(37,211,102,.45); }
.footer .socials a:nth-child(2):hover { background: var(--brand-500); box-shadow: 0 10px 24px rgba(23,131,111,.5); }
.footer .socials a:nth-child(3):hover { background: var(--brand-500); box-shadow: 0 10px 24px rgba(23,131,111,.5); }
.footer .socials a:nth-child(4):hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); box-shadow: 0 10px 24px rgba(214,36,159,.5); }
.footer .socials a:nth-child(5):hover { background: #1877f2; box-shadow: 0 10px 24px rgba(24,119,242,.5); }

/* =====================================================================
   Get Started — balanced contact cards + premium badges
   ===================================================================== */
.page-getstarted .contact-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); }
.page-getstarted .contact-cards .card { flex: 1 1 300px; max-width: 400px; }
.page-getstarted .cred__badge { background: linear-gradient(135deg, var(--brand-050), #dcefe8); box-shadow: inset 0 0 0 1px rgba(15,106,90,.10); }
.page-getstarted .cred { align-items: center; }

/* =====================================================================
   Footer socials — premium uniform glass tiles; colour + lift on hover
   ===================================================================== */
.footer .socials { gap: .7em; }
.footer .socials a {
  width: 46px; height: 46px; border-radius: 50%;
  color: #e2efe9;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 2px 10px rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.footer .socials a svg { width: 19px; height: 19px; transition: transform .4s var(--ease); }
.footer .socials a:hover {
  color: #fff; border-color: transparent;
  transform: translateY(-4px) scale(1.09);
}
.footer .socials a:hover svg { transform: rotate(-8deg); }
.footer .socials a:nth-child(1):hover { background: #25d366; box-shadow: 0 12px 28px rgba(37,211,102,.45); }
.footer .socials a:nth-child(2):hover { background: var(--brand-500); box-shadow: 0 12px 28px rgba(23,131,111,.5); }
.footer .socials a:nth-child(3):hover { background: var(--brand-500); box-shadow: 0 12px 28px rgba(23,131,111,.5); }
.footer .socials a:nth-child(4):hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); box-shadow: 0 12px 28px rgba(214,36,159,.45); }
.footer .socials a:nth-child(5):hover { background: #1877f2; box-shadow: 0 12px 28px rgba(24,119,242,.45); }
@media (prefers-reduced-motion: reduce) { .footer .socials a:hover { transform: none; } .footer .socials a:hover svg { transform: none; } }

/* =====================================================================
   Get Started — premium contact icon badges (gradient + white icon)
   ===================================================================== */
.page-getstarted .cred__badge {
  width: 56px; height: 56px; border-radius: 16px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 10px 22px rgba(15,106,90,.30), inset 0 0 0 1px rgba(255,255,255,.18);
}
.page-getstarted .cred__badge svg { width: 27px; height: 27px; stroke: #fff; }
.page-getstarted .cred:hover .cred__badge {
  transform: rotate(-8deg) scale(1.1);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 14px 28px rgba(15,106,90,.4), inset 0 0 0 1px rgba(255,255,255,.28);
}
.page-getstarted .cred:hover .cred__badge svg { stroke: #fff; }
/* subtle shine sweep across the badge on card hover */
.page-getstarted .cred__badge { position: relative; overflow: hidden; }
.page-getstarted .cred__badge::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-140%); pointer-events: none;
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.45) 50%, transparent 64%);
}
.page-getstarted .cred:hover .cred__badge::after { animation: shine .8s var(--ease); }

/* =====================================================================
   RESPONSIVE — mobile brand sizing + premium mobile menu
   ===================================================================== */
@media (min-width: 561px) and (max-width: 900px) { .brand { font-size: 1.4rem; } }
@media (max-width: 560px) {
  .brand { font-size: 1.16rem; gap: .5em; }
  .brand__logo { height: 44px; }
  .brand__tagline { font-size: .5rem; letter-spacing: .16em; margin-top: .3em; }
  .nav__inner { gap: var(--sp-2); }
}
@media (max-width: 380px) {
  .brand { font-size: 1.04rem; }
  .brand__tagline { display: none; }
  .brand__logo { height: 40px; }
}

@media (max-width: 900px) {
  .nav__menu {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: var(--sp-4) var(--sp-4) var(--sp-5);
    box-shadow: 0 26px 52px rgba(15,36,31,.24);
  }
  /* Centered, evenly-spaced stack */
  .nav__links {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    margin: 0 auto;
  }
  .nav__links li { width: 100%; display: flex; justify-content: center; }
  .nav__links a {
    display: flex; align-items: center; justify-content: center;
    width: 100%; max-width: 340px; text-align: center;
    font-size: 1.06rem; font-weight: 500; padding: .9em 1em;
    border-radius: 14px; border-bottom: 0 !important;
    transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  }
  .nav__links a::after { display: none; }
  .nav__links a:hover { background: var(--brand-050); color: var(--brand-700); transform: translateY(-1px); }
  .nav__links a[aria-current="page"] { background: var(--brand-050); color: var(--brand-700); }
  /* Get Started becomes an accent CTA button inside the menu */
  .nav__links > li:last-of-type a {
    margin-top: .7rem; text-align: center; justify-content: center;
    color: #2a1c05; font-weight: 700;
    background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
    box-shadow: 0 6px 16px rgba(224,161,60,.3);
  }
  .nav__links > li:last-of-type a:hover { color: #2a1c05; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(224,161,60,.36); }
  /* dim, blurred backdrop behind the open menu */
  .nav[data-open="true"]::after {
    content: ""; position: fixed; inset: var(--nav-h) 0 0 0; z-index: -1;
    background: rgba(8,46,39,.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    animation: navBackdrop .35s var(--ease) both;
  }
  @keyframes navBackdrop { from { opacity: 0; } to { opacity: 1; } }
}

/* =====================================================================
   GOOGLE REVIEWS — rating badge + horizontal auto-scroll marquee
   ===================================================================== */
.reviews { overflow: hidden; }

/* Google rating summary badge */
.grating {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  margin: 0 auto var(--sp-6); padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  color: var(--ink); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.reviews .section-head + .grating { display: flex; width: fit-content; }
.grating:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--ink); }
.grating__logo { flex: 0 0 auto; display: grid; place-items: center; }
.grating__body { display: flex; flex-direction: column; gap: 2px; }
.grating__top { display: flex; align-items: baseline; gap: .5em; }
.grating__score { font-family: var(--serif); font-size: 1.7rem; line-height: 1; color: var(--ink); }
.grating__stars { color: var(--accent-500); letter-spacing: .1em; font-size: 1.05rem; }
.grating__meta { font-size: var(--step--1); color: var(--muted); }
.grating__meta strong { color: var(--ink-soft); }
.grating__link { color: var(--brand-600); font-weight: 600; }

/* Reviews carousel — manual arrows + gentle auto-advance */
.revcarousel { position: relative; width: 100%; }
/* Scrollable viewport, faded at both edges */
.revmarquee {
  position: relative; width: 100%;
  overflow-x: auto; scroll-snap-type: none;
  -ms-overflow-style: none; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.revmarquee::-webkit-scrollbar { display: none; }
.revmarquee__track { display: flex; gap: var(--sp-4); width: max-content; padding: 4px 2px; }
.rev { scroll-snap-align: center; }

/* Slide arrows */
.revnav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--brand-700);
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), opacity .18s var(--ease);
}
.revnav svg { width: 22px; height: 22px; }
.revnav:hover { background: var(--brand-600); color: #fff; border-color: transparent; transform: translateY(-50%) scale(1.08); }
.revnav:active { transform: translateY(-50%) scale(.96); }
.revnav--prev { left: -8px; }
.revnav--next { right: -8px; }
@media (min-width: 1280px) { .revnav--prev { left: -22px; } .revnav--next { right: -22px; } }
@media (max-width: 560px) { .revnav { width: 42px; height: 42px; } .revnav svg { width: 19px; height: 19px; } }

/* Individual review card */
.rev {
  flex: 0 0 clamp(300px, 78vw, 380px);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: var(--sp-4); white-space: normal;
}
.rev__head { display: flex; align-items: center; gap: .7em; margin-bottom: var(--sp-2); }
.rev__avatar {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--serif); font-weight: 700;
  color: #fff; background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
}
.rev__name { font-weight: 700; color: var(--ink); font-family: var(--sans); line-height: 1.2; }
.rev__sub { font-size: .78rem; color: var(--muted); }
.rev__g { margin-left: auto; align-self: flex-start; flex: 0 0 auto; display: block; }
.rev__g svg { display: block; width: 20px; height: 20px; }
.rev__stars { color: var(--accent-500); letter-spacing: .12em; font-size: .95rem; margin-bottom: var(--sp-2); }
.rev__text { font-size: .96rem; color: var(--ink-soft); margin: 0; }
.rev__text mark {
  background: linear-gradient(transparent 55%, var(--accent-100) 55%);
  color: var(--ink); font-weight: 600; padding: 0 .05em;
}
.rev__reply {
  margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius-sm);
  background: var(--surface-alt); font-size: .86rem; color: var(--muted);
}
.rev__replyhead { display: block; font-weight: 700; color: var(--ink-soft); margin-bottom: 2px; }

/* Slider control — arrows plus one dot per review. Only shown where the side
   arrows are not: on a phone they would sit on top of the card. */
.revctrl { display: none; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-4); max-width: 100%; }
.revctrl__arrow {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--brand-700);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: background .18s var(--ease), color .18s var(--ease), opacity .18s var(--ease);
}
.revctrl__arrow svg { width: 19px; height: 19px; }
.revctrl__arrow:active { background: var(--brand-600); color: #fff; border-color: transparent; }
.revctrl__dots { display: flex; align-items: center; gap: 4px; min-width: 0; }
/* Ten dots plus two 44px arrows is a tight fit at 375px and does not fit at 320,
   so the buttons may shrink — the visible dot is the ::before and keeps its size,
   only the padding around it gives way. The arrows are the primary control here;
   the dots are position, and a secondary way to jump. */
.revctrl__dot {
  flex: 0 1 18px; min-width: 11px; height: 26px;
  padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.revctrl__dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--line); transition: background .25s var(--ease), width .25s var(--ease);
}
.revctrl__dot[aria-current="true"]::before { width: 17px; border-radius: 3px; background: var(--brand-600); }

@media (prefers-reduced-motion: reduce) {
  .revctrl__dot::before { transition: none; }
}

.reviews__cta { text-align: center; margin-top: var(--sp-6); }

/* ── Reviews strip on phones ─────────────────────────────────────────
   Four things went wrong at phone width. The arrows are offset -8px, and
   .wrap only leaves a 1.25rem gutter, so they sat on top of the review text.
   The 5%/95% edge mask faded the first and last words of every line. One
   700-character review stretched all ten cards to the same ~600px height.
   And the rAF drift kept writing scrollLeft while a finger was mid-swipe.
   Below 768px it is simply a snap-scroller: swipe a card at a time. */
@media (max-width: 767px) {
  .revnav { display: none; }
  .revctrl { display: flex; }

  /* `width: fit-content` on the rating badge is free to exceed the wrap on a
     narrow screen; cap it and let the meta line wrap instead of overflowing. */
  .grating { max-width: 100%; gap: var(--sp-2); padding: var(--sp-3); }
  .grating__meta { line-height: 1.45; }

  .revmarquee {
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-mask-image: none; mask-image: none;
  }
  .revmarquee__track { gap: var(--sp-3); padding-inline: 0; }

  .rev {
    flex: 0 0 min(84vw, 380px);   /* a sliver of the next card shows, so the strip reads as swipeable */
    scroll-snap-align: start;
    padding: var(--sp-3);
  }
  /* Cap the longest reviews so the strip is a predictable height instead of
     being set by its single wordiest entry. The full text is one tap away
     through the "See all reviews on Google" link below. */
  .rev__text {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10;
    overflow: hidden;
  }
  .rev__sub { font-size: .74rem; }
}

@media (prefers-reduced-motion: reduce) {
  .revmarquee__track { animation: none; }
  .revmarquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Responsive visibility utilities ──────────────────────────────
   Trim the amount of scrolling on phones by hiding lower-priority
   cards, while desktop/tablet keep the full set. Applied on the
   Why Choose Spotto page's longer card grids. */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

/* ── Booking date & time picker (get-started.html) ─────────────────── */
.book-cal {
  margin-top: .6rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff, #fbfdfc);
  padding: clamp(1rem, 2vw, 1.35rem);
  display: grid; gap: 1.25rem; box-shadow: var(--shadow-md);
}
/* Side-by-side only when the widget itself is wide enough (container query,
   falls back to the stacked layout when unsupported or in a narrow column). */
.book-cal-wrap { container-type: inline-size; }
@container (min-width: 680px) {
  .book-cal { grid-template-columns: 300px minmax(0, 1fr); gap: 1.5rem; align-items: stretch; }
  .book-times { border-top: 0 !important; padding-top: 0 !important; border-left: 1px solid var(--line); padding-left: 1.5rem; }
}
.book-head {
  display: flex; align-items: center; gap: .5rem;
  font: 700 .72rem/1 var(--serif); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink); margin-bottom: .8rem;
}
.book-head svg { width: 16px; height: 16px; color: var(--brand-600); flex: none; }

/* ── calendar ── */
.cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.cal__title { font: 700 1rem var(--serif); color: var(--ink); letter-spacing: -.01em; }
.cal__navbtns { display: inline-flex; gap: .35rem; }
.cal__arrow {
  width: 30px; height: 30px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  color: var(--ink); cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.cal__arrow svg { width: 15px; height: 15px; }
.cal__arrow:hover:not(:disabled) { border-color: var(--brand-600); color: var(--brand-600); background: var(--brand-050); transform: translateY(-1px); }
.cal__arrow:disabled { opacity: .3; cursor: not-allowed; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
/* Six rows of 36px cells plus their gaps. #calGrid ships empty and is filled by JS,
   so without this reservation the whole page below it shifts once the month renders. */
.cal__grid { min-height: 231px; align-content: start; }
.cal__dow { margin-bottom: 4px; }
.cal__dow span { text-align: center; font: 700 .66rem var(--sans); letter-spacing: .04em; color: var(--muted); padding: 1px 0; }
.cal__day {
  height: 36px; border: 0; background: transparent; border-radius: 9px;
  font: 600 .86rem var(--sans); color: var(--ink); cursor: pointer; position: relative;
  transition: background .14s var(--ease), color .14s var(--ease), box-shadow .14s var(--ease), transform .14s var(--ease);
}
.cal__day:hover:not(:disabled):not(.is-selected) { background: var(--brand-050); color: var(--brand-700); }
.cal__day:disabled { color: #cbd2ce; cursor: default; }
.cal__day.is-empty { visibility: hidden; }
.cal__day.is-today:not(.is-selected) { box-shadow: inset 0 0 0 1.5px var(--brand-500); color: var(--brand-700); }
.cal__day.is-selected {
  background: linear-gradient(150deg, var(--brand-500), var(--brand-700)); color: #fff;
  box-shadow: 0 6px 16px rgba(15,106,90,.4); transform: translateY(-1px);
}

/* ── time panel ── */
.book-times { display: flex; flex-direction: column; min-width: 0; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.book-times__sub { font-size: .9rem; color: var(--muted); margin: -.5rem 0 1rem; }
.book-times__sub strong { color: var(--ink); font-weight: 700; }
/* The time column always occupies a fixed box that scrolls internally, at every
   width. #slotGrid is empty in the markup and JS injects up to 24 slots into it;
   letting the box grow to fit them was a full-page layout shift on mobile. */
.slots-scroll {
  min-width: 0; flex: 1;
  height: 300px; overflow-y: auto;
  padding-right: 7px; margin-right: -7px;
  scrollbar-width: thin; scrollbar-color: #dbe3df transparent;
  overscroll-behavior: contain;
}
.slots-scroll::-webkit-scrollbar { width: 7px; }
.slots-scroll::-webkit-scrollbar-track { background: transparent; }
.slots-scroll::-webkit-scrollbar-thumb { background: #dbe3df; border-radius: 8px; }
.slot-group + .slot-group { margin-top: .85rem; }
.slot-group__label { font: 700 .64rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 .45rem; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 7px; }
.slot {
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  padding: 9px 5px; font: 600 .84rem var(--sans); color: var(--ink); cursor: pointer; text-align: center;
  transition: border-color .14s var(--ease), background .14s var(--ease), color .14s var(--ease), box-shadow .14s var(--ease), transform .14s var(--ease);
}
.slot:hover:not(.is-selected):not(:disabled) { border-color: var(--brand-500); color: var(--brand-700); background: var(--brand-050); transform: translateY(-1px); }
.slot.is-selected {
  background: linear-gradient(150deg, var(--brand-500), var(--brand-700)); border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px rgba(15,106,90,.34);
}
/* Taken by someone else. Kept in the grid, greyed and struck through, so the
   day keeps its shape; the two-line label is padded to match a normal slot. */
.slot.is-booked {
  background: var(--surface-alt); border-style: dashed; color: var(--muted);
  padding: 4px 5px; line-height: 1.15; cursor: not-allowed;
}
.slot.is-booked span { text-decoration: line-through; }
.slot.is-booked small {
  display: block; margin-top: 1px;
  font: 700 .58rem var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.slots-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: .7rem; min-height: 190px; padding: 1.25rem 1rem; color: var(--muted); font-size: .88rem; line-height: 1.5;
}
.slots-empty svg { width: 36px; height: 36px; color: #d4ddd8; }

/* ── timezone + summary ── */
.book-summary {
  margin-top: .95rem; padding: .95rem 1.15rem; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--brand-050), #ffffff); border: 1px solid #cfe6dd; color: var(--brand-700);
  font-weight: 700; font-size: .98rem; display: none; box-shadow: var(--shadow-sm);
}
.book-summary.is-error { background: #fdf3f2; border-color: #f1c9c5; color: #b4232a; }
.book-summary[data-show="true"] { display: block; animation: bookPop .3s var(--ease) both; }
@keyframes bookPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .cal__day, .cal__arrow, .slot { transition: none; }
  .cal__day.is-selected, .slot:hover, .cal__arrow:hover { transform: none; }
  .book-summary[data-show="true"] { animation: none; }
}

/* ── Touch targets on phones ──────────────────────────────────────────
   Several of the controls a phone user actually has to hit were well under
   the ~44px both platforms ask for: calendar days were 36px and the month
   arrows 30px — that is the booking flow — and the footer's nav links were
   bare 19px text lines. Give them a target you can hit rather than one you
   have to aim at. */
@media (max-width: 767px) {
  .cal__day { height: 44px; }
  .cal__dow, .cal__grid { gap: 2px; }
  .cal__grid { min-height: 274px; }   /* six 44px rows plus their 2px gaps */
  .cal__arrow { width: 44px; height: 44px; border-radius: 12px; }
  .cal__arrow svg { width: 17px; height: 17px; }

  /* :not(.f-contact) keeps the address/phone block's own rhythm — those rows
     are not links and do not need the padding. */
  .footer ul:not(.f-contact) { gap: .1em; }
  .footer ul:not(.f-contact) a { display: inline-block; padding-block: .62em; }

  .card__cta { min-height: 44px; }
}

/* ---------- Usher Media footer credit ---------- */
.footer__credit {
  margin-top: var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  text-align: center;
}

.footer__credit-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  font-family: var(--sans);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-indent: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .48);
  line-height: 1;
}

.footer__credit-amp {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: .92rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent-500);
  vertical-align: -.1em;
  margin: 0 .1em;
  text-shadow: 0 0 10px rgba(224, 161, 60, .35);
}

.footer__credit-orn {
  display: block;
  position: relative;
  width: 42px;
  height: 1px;
  flex-shrink: 0;
  background: linear-gradient(90deg, transparent, rgba(224, 161, 60, .5));
}

.footer__credit-orn::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  transform: rotate(45deg);
  background: var(--accent-500);
  box-shadow: 0 0 7px rgba(224, 161, 60, .5);
}

.footer__credit-orn:last-child { transform: scaleX(-1); }

.footer__credit-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 7px 18px 7px 7px;
  border-radius: 999px;
  overflow: hidden;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  border: 1px solid rgba(224, 161, 60, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}

.footer__credit-link::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(247, 230, 199, .24), transparent);
  transform: skewX(-18deg);
  transition: left .75s var(--ease);
}

.footer__credit-link:hover::after,
.footer__credit-link:focus-visible::after { left: 130%; }

.footer__credit-link:hover,
.footer__credit-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(224, 161, 60, .7);
  background: linear-gradient(135deg, rgba(224, 161, 60, .14), rgba(255, 255, 255, .02));
  box-shadow: 0 10px 26px rgba(224, 161, 60, .16);
}

.footer__credit-logo {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  object-fit: cover;
  background: #000;
  border: 1px solid rgba(224, 161, 60, .35);
  flex-shrink: 0;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}

.footer__credit-link:hover .footer__credit-logo,
.footer__credit-link:focus-visible .footer__credit-logo {
  border-color: rgba(224, 161, 60, .85);
  box-shadow: 0 0 14px rgba(224, 161, 60, .4);
}

.footer__credit-name {
  font-family: "Fraunces", var(--serif);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  background: linear-gradient(100deg, #f7e6c7 0%, #e0a13c 45%, #f7e6c7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .footer__credit-link,
  .footer__credit-link::after,
  .footer__credit-logo { transition: none; }
}

@media (max-width: 640px) {
  .footer__credit-label { gap: .55rem; font-size: .52rem; letter-spacing: .18em; text-indent: .18em; }
  .footer__credit-orn { width: 22px; }
  .footer__credit-amp { font-size: .86rem; }
  .footer__credit-link { padding: 6px 15px 6px 6px; gap: .5rem; }
  .footer__credit-logo { width: 25px; height: 25px; }
  .footer__credit-name { font-size: .86rem; }
}

/* ---------- GoodSuburb partner link (footer trust line) ----------
   A smaller sibling of the Usher Media credit pill: glass pill, gold hairline,
   pulsing gold "verified" seal and a shimmering gold wordmark. */
.footer__bottom > .footer__trust {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: .45rem .75rem;
}

.footer .footer__partner {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .85rem .3rem .32rem;
  border-radius: 999px;
  overflow: hidden;
  white-space: nowrap;
  color: #cfe0da;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  border: 1px solid rgba(224, 161, 60, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), color .3s var(--ease);
}

/* Light sweep on hover, same gesture as the credit pill */
.footer__partner::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(247, 230, 199, .26), transparent);
  transform: skewX(-18deg);
  transition: left .75s var(--ease);
  pointer-events: none;
}

.footer .footer__partner:hover,
.footer .footer__partner:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  border-color: rgba(224, 161, 60, .75);
  background: linear-gradient(135deg, rgba(224, 161, 60, .15), rgba(255, 255, 255, .02));
  box-shadow: 0 10px 24px rgba(224, 161, 60, .18);
}

.footer__partner:hover::after,
.footer__partner:focus-visible::after { left: 130%; }

/* Gold verified seal with a soft radiating ring */
.footer__partner-seal {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
  box-shadow: 0 0 12px rgba(224, 161, 60, .45), inset 0 1px 0 rgba(255, 255, 255, .4);
}

.footer__partner-seal svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #241701;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer__partner-seal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(224, 161, 60, .7);
  animation: partnerPing 2.6s var(--ease) infinite;
}

@keyframes partnerPing {
  0%   { transform: scale(1);   opacity: .9; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

.footer__partner-name {
  font-family: "Fraunces", var(--serif);
  font-weight: 600;
  letter-spacing: .02em;
  background: linear-gradient(100deg, #f7e6c7 0%, #e0a13c 30%, #fff4dc 50%, #e0a13c 70%, #f7e6c7 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: partnerShimmer 6s ease-in-out infinite;
}

@keyframes partnerShimmer {
  0%, 55%  { background-position: 100% 0; }
  85%, 100% { background-position: 0 0; }
}

.footer__partner-arrow {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--accent-500);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .75;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}

.footer__partner:hover .footer__partner-arrow,
.footer__partner:focus-visible .footer__partner-arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .footer .footer__partner,
  .footer__partner::after,
  .footer__partner-arrow { transition: none; }
  .footer__partner-seal::after,
  .footer__partner-name { animation: none; }
}

@media (max-width: 900px) {
  .footer__bottom > .footer__trust { justify-content: center; }
}

/* ---------- GoodSuburb partner chip (About › Licensed & Accredited) ----------
   Light-surface twin of .footer__partner: gold seal with a radiating ring,
   serif wordmark with a slow green-to-gold shimmer, sweep + lift on hover. */
.partner-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-top: var(--sp-4);
  padding: .4rem 1rem .4rem .4rem;
  border-radius: 999px;
  overflow: hidden;
  font-size: .92rem;
  white-space: nowrap;
  color: var(--ink-soft);
  text-decoration: none;
  background: linear-gradient(135deg, #fff 0%, var(--brand-050) 100%);
  border: 1px solid rgba(201, 134, 31, .32);
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(15, 36, 31, .06);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}

.partner-chip::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(247, 230, 199, .75), transparent);
  transform: skewX(-18deg);
  transition: left .8s var(--ease);
  pointer-events: none;
}

.partner-chip:hover,
.partner-chip:focus-visible {
  color: var(--ink);
  transform: translateY(-2px);
  border-color: rgba(201, 134, 31, .75);
  box-shadow: inset 0 1px 0 #fff, 0 12px 26px rgba(201, 134, 31, .2);
}

.partner-chip:hover::after,
.partner-chip:focus-visible::after { left: 130%; }

.partner-chip__seal {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
  box-shadow: 0 4px 10px rgba(201, 134, 31, .35), inset 0 1px 0 rgba(255, 255, 255, .45);
}

.partner-chip__seal svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.partner-chip__seal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(224, 161, 60, .6);
  animation: partnerPing 2.8s var(--ease) infinite;
}

.partner-chip__name {
  font-family: "Fraunces", var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .01em;
  background: linear-gradient(100deg, var(--brand-700) 0%, var(--brand-700) 35%, var(--accent-600) 50%, var(--brand-700) 65%, var(--brand-700) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: partnerShimmer 6s ease-in-out infinite;
}

.partner-chip__arrow {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--accent-600);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .4s var(--ease);
}

.partner-chip:hover .partner-chip__arrow,
.partner-chip:focus-visible .partner-chip__arrow { transform: translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {
  .partner-chip,
  .partner-chip::after,
  .partner-chip__arrow { transition: none; }
  .partner-chip__seal::after,
  .partner-chip__name { animation: none; }
}

@media (max-width: 560px) {
  .partner-chip { gap: .5rem; padding: .35rem .8rem .35rem .35rem; font-size: .82rem; }
  .partner-chip__seal { width: 24px; height: 24px; }
  .partner-chip__seal svg { width: 13px; height: 13px; }
  .partner-chip__name { font-size: .92rem; }
}

/* Very narrow phones: stack label over wordmark instead of overflowing the card */
@media (max-width: 400px) {
  .partner-chip { max-width: 100%; border-radius: 16px; padding: .45rem .9rem .45rem .45rem; }
  .partner-chip__text { display: flex; flex-direction: column; line-height: 1.2; }
  .partner-chip__label { font-size: .7rem; letter-spacing: .04em; color: var(--muted); }
}

/* =============================================================
   SERVICE PAGE TEMPLATE (scoped .page-service)
   Components the SEO service-page spec needs and the rest of the
   site did not already have: the sticky on-page anchor bar, the
   trust-symbol strip, the highlights band, the hero lead form and
   the footer-adjacent map/NAP card. Everything else on that page
   reuses the existing system (.card, .grid, .stat, .rev, .faq …).
   ============================================================= */

/* ---- Sticky on-page anchor bar (sits directly under the navbar) ---- */
.subnav {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  background: rgba(251, 250, 246, .88);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-block: 1px solid var(--line);
}
.subnav__inner {
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: .55rem;
}
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav a {
  flex: 0 0 auto;
  padding: .45em 1em;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.subnav a:hover, .subnav a:focus-visible { background: var(--brand-050); color: var(--brand-700); }

/* Anchor targets must clear both sticky bars when jumped to. */
.page-service :where(section[id], div[id].scroll-anchor) { scroll-margin-top: calc(var(--nav-h) + 60px); }

/* ---- Trust symbols strip ---- */
.tlogos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
}
.tlogo {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .55em 1.1em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
}
.tlogo svg { width: 20px; height: 20px; stroke: var(--brand-600); fill: none; stroke-width: 1.8; flex-shrink: 0; }

/* ---- Program highlights strip (icon + short label only) ----
   Spec section 5: a full-width coloured band, one row of small icons with a
   short uppercase label under each. No card framing, no descriptions. ---- */
.hband {
  background: linear-gradient(100deg, var(--brand-700) 0%, var(--brand-500) 55%, var(--brand-600) 100%);
  padding-block: clamp(2.4rem, 1.8rem + 2.4vw, 3.5rem);
}
.hstrip {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-2);
}
.hstrip__item { display: grid; justify-items: center; gap: .7em; text-align: center; }
.hstrip__ic { display: grid; place-items: center; width: 42px; height: 42px; }
.hstrip__ic svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 1.6; }
.hstrip__item span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.35;
  text-wrap: balance;
}

.hstrip--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .hstrip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .hstrip--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .hstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Key features grid (spec section 4: dark band, borderless 3 x 2) ---- */
.featgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 1rem + 3vw, 3.25rem) var(--sp-5); }
.feat { text-align: center; display: grid; justify-items: center; gap: .35em; }
.feat__ic {
  display: grid; place-items: center;
  width: 66px; height: 66px; margin-bottom: var(--sp-2);
  border-radius: 50%;
  background: rgba(224, 161, 60, .13);
  box-shadow: inset 0 0 0 1px rgba(224, 161, 60, .28);
}
.feat__ic svg { width: 30px; height: 30px; stroke: var(--accent-500); fill: none; stroke-width: 1.7; }
.feat h3 { font-size: var(--step-1); color: #fff; margin: 0; }
.feat p { margin: 0; color: #b9cfc8; max-width: 24rem; }

@media (max-width: 860px) { .featgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .featgrid { grid-template-columns: 1fr; } }

/* ---- Hero lead form ---- */
.hero__form { box-shadow: var(--shadow-md); }
.hero__form h2 { font-size: var(--step-1); margin-bottom: .1em; }
.hero__form .form__note { margin: 0; }


/* Anchor bar list + lead-form heading (service page template) */
.subnav__inner ul { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.leadform .form__h { font-size: var(--step-1); margin: 0; }
.leadform .form__h + .form__note { margin-top: -.35rem; }
.page-service .card__icon svg { width: 27px; height: 27px; stroke: var(--brand-600); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s var(--ease); }
.page-service .card:hover .card__icon svg { stroke: var(--brand-700); }

/* On the service page the hero's second column is the lead form, not a photo.
   Stacking it above the H1 on mobile would push the headline below the fold and
   open the page with a form, so the copy keeps its source order here. */
@media (max-width: 900px) {
  .page-service .hero__media { order: 0; }
}
/* Dark bands: the lead paragraph's default grey is unreadable on brand-900. */
.section--ink .lead { color: #b9cfc8; }

/* Footer map embed (spec section 14 — the footer carries the map alongside the
   plain-text NAP). Lazy-loaded and below the fold on every page. */
.footer__map {
  margin-top: var(--sp-3);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.footer__map iframe { display: block; width: 100%; height: 170px; border: 0; }
/* Five-across trust-signal strip (spec section 6). */
.statband--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .statband--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .statband--5 { grid-template-columns: repeat(2, 1fr); } }

/* Numbered process steps inside a body-content block (service page template) */
.numsteps { counter-reset: nstep; list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-2); }
.numsteps li { counter-increment: nstep; position: relative; padding-left: 2.4em; }
.numsteps li::before {
  content: counter(nstep);
  position: absolute; left: 0; top: .05em;
  width: 1.7em; height: 1.7em;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-050); color: var(--brand-700);
  font-family: var(--serif); font-weight: 700; font-size: .82em;
}
/* Four short key features read better two-up than three-plus-one */
.featgrid:has(> .feat:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .featgrid:has(> .feat:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }
/* Icon-led service cards (no photo for that loan type) */
.page-service .card.ocard .svc__lead { color: var(--ink-soft); margin: 0 0 var(--sp-3); }
/* The FAQ question is a heading that happens to be a button: the source copy
   marks these as H3s, and the accordion needs the button for keyboard support.
   The wrapper must add no box of its own. */
.faq__h { margin: 0; font: inherit; }

/* =====================================================================
   SERVICE PAGE — premium polish (scoped .page-service)
   Alignment first: every text-only section is one centred editorial
   column with a centred head, so the long run of body sections reads as
   one rhythm instead of drifting left against a 1180px canvas.
   ===================================================================== */

/* Centred editorial column for body copy */
.page-service .prose--center { max-width: 46rem; margin-inline: auto; }
.page-service .prose--center > p { text-align: center; }
.page-service .prose--center > p:not(:last-child) { margin-bottom: var(--sp-3); }
/* lists stay left-aligned inside the centred column - centred bullets are unreadable */
.page-service .prose--center .checks { text-align: left; margin-top: var(--sp-5); }
.page-service .prose--center .checks--2 { gap: var(--sp-2) var(--sp-5); }

/* Bulleted points get a little more presence than a bare list */
.page-service .checks li {
  padding: .55em .9em .55em 2.6em;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.page-service .checks li::before { left: .7em; top: .62em; }
.page-service .checks li:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #d8cba6; }
.page-service .checks li strong { color: var(--ink); }
.page-service .section--alt .checks li { background: var(--surface); }

/* Gold hairline under every section heading, drawn in on reveal */
.page-service .section-head h2 { position: relative; padding-bottom: .38em; }
.page-service .section-head h2::after {
  content: ""; position: absolute; bottom: 0; left: 0;
  width: 62px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-500), var(--accent-100));
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease) .15s;
}
.page-service .section-head.center h2::after { left: 50%; transform: translateX(-50%) scaleX(0); }
.page-service .section-head h2.in::after { transform: scaleX(1); }
.page-service .section-head.center h2.in::after { transform: translateX(-50%) scaleX(1); }
.page-service .section--ink .section-head h2::after { background: linear-gradient(90deg, var(--accent-500), transparent); }

/* Numbered process cards (replaces a plain ordered list) */
.page-service .steps--3 { grid-template-columns: repeat(3, 1fr); }
.page-service .steps { margin-top: var(--sp-6); }
.page-service .step {
  padding: var(--sp-5);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.page-service .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d8cba6; }
.page-service .step p { color: var(--ink-soft); }
.page-service .step p strong { color: var(--ink); font-family: var(--serif); font-size: 1.05em; }

/* Service cards: gold rule that draws across on hover */
.page-service .card.ocard { position: relative; overflow: hidden; }
.page-service .card.ocard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--accent-500), var(--brand-500));
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
}
.page-service .card.ocard:hover::before { transform: scaleX(1); }
.page-service .card.ocard .card__icon {
  background: linear-gradient(150deg, var(--brand-050), #fff);
  box-shadow: inset 0 0 0 1px rgba(15,106,90,.14);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.page-service .card.ocard:hover .card__icon { transform: translateY(-2px) scale(1.05); box-shadow: inset 0 0 0 1px rgba(224,161,60,.45); }

/* Hero lead form: a warmer, more deliberate card */
.page-service .hero__form {
  position: relative;
  border-color: #e7dfc9;
  box-shadow: 0 2px 6px rgba(15,36,31,.05), 0 26px 60px rgba(15,36,31,.14);
}
.page-service .hero__form::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--accent-500), var(--brand-500));
}
.page-service .hero__form .form__h { padding-top: .15em; }

/* Trust-symbol pills and highlight band edges */
.page-service .tlogo { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.page-service .tlogo:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.page-service .hband { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.10); }

/* FAQ: clearer open state */
.page-service .faq__item { transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.page-service .faq__item[data-open="true"] { border-color: #d8cba6; box-shadow: var(--shadow-md); }
.page-service .faq__item[data-open="true"] .faq__q { color: var(--brand-700); }

@media (prefers-reduced-motion: reduce) {
  .page-service .section-head h2::after,
  .page-service .card.ocard::before { transition: none; transform: scaleX(1); }
  .page-service .section-head.center h2::after { transform: translateX(-50%) scaleX(1); }
  .page-service .checks li:hover,
  .page-service .step:hover,
  .page-service .tlogo:hover { transform: none; }
}

@media (max-width: 900px) {
  .page-service .steps--3, .page-service .steps--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .page-service .steps--3, .page-service .steps--4 { grid-template-columns: 1fr; }
  .page-service .prose--center .checks--2 { grid-template-columns: 1fr; }
}

/* ---- Service page: fixes found on a rendered pass ---- */

/* Split blocks top-align: the photo column is much taller than the copy, and
   centring left the text floating in the middle of a large void. */
/* Flex, not grid: the media column has to be a fixed width whichever side it
   sits on, so the photo fills it exactly instead of leaving a gap under a
   max-height cap. */
.page-service .split--top {
  display: flex;
  align-items: stretch;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
/* A short copy column would otherwise dump all of its slack below the text;
   centring it against the photo keeps the pairing balanced. */
.page-service .split--top .split__text {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.page-service .split--top .split__media { flex: 0 0 26rem; max-width: 26rem; }
.page-service .split--top .section-head { margin-bottom: var(--sp-4); max-width: none; }

/* Hero proof chips: keep them on one line instead of wrapping 3 + 1 */
.page-service .proof-row { gap: .5rem; }
.page-service .proof { padding: .45em .85em; font-size: .84rem; }
.page-service .proof b { font-size: .95rem; }

/* Key features on the dark band: give the four items real presence */
.page-service .featgrid { gap: var(--sp-4); }
.page-service .feat {
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--radius);
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(224,161,60,.16);
  transition: transform .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease);
}
.page-service .feat:hover { transform: translateY(-4px); background: rgba(255,255,255,.06); border-color: rgba(224,161,60,.4); }
.page-service .feat__ic { width: 58px; height: 58px; }
.page-service .feat__ic svg { width: 26px; height: 26px; }
.page-service .feat h3 { font-size: 1.02rem; line-height: 1.35; }
.page-service .section--ink { padding-block: var(--sp-7); }

/* Highlights band: labels of one and two lines were sitting on different
   baselines, so pin the icons to the top and reserve two lines for the text. */
.page-service .hstrip { align-items: start; }
.page-service .hstrip__item { align-content: start; }
.page-service .hstrip__item span { min-height: 2.4em; display: flex; align-items: flex-start; justify-content: center; }

/* The rating star is drawn by CSS: the count-up animation rewrites the value's
   text content, which would strip any markup placed inside it. */
.stat__value.has-star::after {
  content: "\2605";
  color: var(--accent-500);
  font-size: .68em;
  margin-left: .14em;
  vertical-align: .08em;
}

/* Text-only sections were far too airy for the amount of copy they carry */
.page-service .section:not(.section--ink) { padding-block: var(--sp-7); }
.page-service .prose--center { max-width: 52rem; }
.page-service .prose--center .checks--2 { max-width: 60rem; margin-inline: auto; }
.page-service .prose--center .checks { margin-top: var(--sp-4); }

/* Reviews as a three-up grid: the marquee was clipping the outer cards */
.page-service .revgrid { align-items: stretch; margin-top: var(--sp-5); }
.page-service .revgrid .rev {
  height: 100%;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.page-service .revgrid .rev:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d8cba6; }
.page-service .reviews .grating { margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .page-service .feat:hover,
  .page-service .revgrid .rev:hover { transform: none; }
}
@media (max-width: 900px) {
  .page-service .split--top { flex-direction: column; }
  .page-service .split--top .split__media { flex: 1 1 auto; max-width: none; width: 100%; }
  .page-service .split--reverse .split__media { order: 0; }
}

/* .ocard zeroes its top padding so a photo can sit flush with the card edge.
   An icon-led card has no photo, so the icon was touching the top border -
   give those cards their padding back. */
.card.ocard.card--icon { padding-top: var(--sp-5); }
.page-service .card--icon .card__icon { margin-bottom: var(--sp-4); }
/* Flip a split so a run of image blocks alternates down the page */
.page-service .split--reverse .split__media { order: -1; }

/* ---- Highlights band: room to breathe around two-line labels ---- */
.page-service .hstrip { gap: var(--sp-4) var(--sp-3); }
.page-service .hstrip__item { gap: .85em; }
.page-service .hstrip__item span { line-height: 1.45; }

/* ---- Anchor bar on small screens ----
   It was a single scrolling row, so only three of the seven links were ever
   visible and there was nothing to suggest the rest existed. Below the tablet
   breakpoint it stops being sticky and wraps instead, so every link is on
   screen; a three-row sticky bar would eat too much of a phone viewport. */
@media (max-width: 780px) {
  .subnav { position: static; }
  .subnav__inner { overflow: visible; padding-block: .6rem; }
  .subnav__inner ul { flex-wrap: wrap; justify-content: center; gap: .35rem .3rem; }
  .subnav a { font-size: .78rem; padding: .4em .85em; }
  /* the bar no longer floats above the content, so anchors only clear the navbar */
  .page-service :where(section[id], div[id].scroll-anchor) { scroll-margin-top: calc(var(--nav-h) + 14px); }
}

/* =====================================================================
   SERVICE PAGE — motion layer
   Everything animates transform/opacity only, so it stays on the
   compositor and costs nothing on the main thread. All of it is switched
   off under prefers-reduced-motion at the end of this block.
   ===================================================================== */

/* Hero: the warm blob behind the copy drifts, very slowly */
.page-service .hero::after { animation: auroraDrift 26s ease-in-out infinite alternate; }
@keyframes auroraDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 2%, 0) scale(1.12); }
}

/* Photos settle from a slight over-scale as they enter, and keep the
   existing hover zoom - both drive the same custom property so they can
   never fight each other. */
.page-service .figure img { transform: scale(var(--fs, 1)); }
.page-service .figure.reveal img { --fs: 1.07; transition: transform 1.2s var(--ease), filter .85s var(--ease); }
.page-service .figure.reveal.in img { --fs: 1; }
.page-service .figure:hover img { --fs: 1.05; }

/* The wide streetscape gets a slow ken-burns once it is on screen */
.page-service .figure--wide.in img { animation: kenburns 28s ease-in-out infinite alternate; }

/* Service cards: a light sweep follows the cursor-side edge on hover */
.page-service .card.ocard::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .9s var(--ease);
}
.page-service .card.ocard:hover::after { transform: translateX(120%); }
.page-service .card.ocard > * { position: relative; z-index: 2; }

/* Anchor bar: an animated pill tracks the section you are reading */
.subnav a { position: relative; }
.subnav a.is-active { color: var(--brand-700); }
.subnav__pill {
  position: absolute; top: 50%; left: 0; height: 2em; z-index: -1;
  border-radius: 999px;
  background: var(--brand-050);
  transform: translateY(-50%) translateX(var(--pill-x, 0)) ;
  width: var(--pill-w, 0);
  opacity: 0;
  transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s var(--ease);
}
.subnav__pill[data-show="true"] { opacity: 1; }
.subnav__inner { position: relative; }

/* CTA band: a slow sheen crosses the panel.
   The shared ctaSheen keyframe animates `left`, which forces layout on every
   frame; this one moves on transform so it stays on the compositor. */
.page-service .cta-band::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%;
  z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.10) 50%, transparent 70%);
  animation: sheenSlide 8s ease-in-out infinite;
}
@keyframes sheenSlide {
  0%, 100% { transform: translate3d(-110%, 0, 0); }
  55%      { transform: translate3d(220%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .page-service .hero::after,
  .page-service .figure--wide.in img,
  .page-service .cta-band::after { animation: none; }
  .page-service .figure.reveal img,
  .page-service .figure.reveal.in img,
  .page-service .figure:hover img { --fs: 1; transition: none; }
  .page-service .card.ocard::after { display: none; }
  .subnav__pill { transition: none; }
}

/* =====================================================================
   NAVBAR DROPDOWN — service pages nested under "Loan Solutions"
   Desktop opens on hover and on keyboard focus; inside the mobile panel
   the sub-list is simply always visible and indented, because a hover
   menu is unusable on touch.
   ===================================================================== */
.nav__has-sub { position: relative; }
.nav__has-sub > a { display: inline-flex; align-items: center; gap: .3em; }
.nav__chev { width: 13px; height: 13px; opacity: .65; transition: transform .3s var(--ease); }
.nav__has-sub:hover > a .nav__chev,
.nav__has-sub:focus-within > a .nav__chev { transform: rotate(180deg); }

@media (min-width: 1301px) {
  .nav__sub-btn { display: none; }
  .nav__sub {
    position: absolute; top: calc(100% + .35rem); left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 15rem;
    margin: 0; padding: .4rem; list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
    z-index: 60;
  }
  /* keeps the pointer from falling through the gap between link and panel */
  .nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -.5rem; height: .5rem; }
  .nav__has-sub:hover .nav__sub,
  .nav__has-sub:focus-within .nav__sub {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .nav__sub a {
    display: block; padding: .55em .8em; border-radius: 10px;
    font-size: .9rem; white-space: nowrap;
  }
  .nav__sub a:hover, .nav__sub a:focus-visible { background: var(--brand-050); color: var(--brand-700); }
  .nav__sub a::after { content: none; }   /* no gold underline inside the panel */
}

@media (max-width: 1300px) {
  /* Every item in the slide-down panel is `.nav__links li { display:flex }` so
     its link centres. That would lay the parent link and its sub-list out as
     two columns side by side, so this item opts back into block flow - and it
     has to match that rule's specificity to win. */
  /* The parent row is a centred link plus its own chevron button; the sub-list
     is a full-width third item that wraps onto the next line and is collapsed
     until the chevron is tapped. */
  .nav__links li.nav__has-sub {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    width: 100%;
  }
  .nav__links li.nav__has-sub > a { width: auto; max-width: none; margin: 0; }
  .nav__sub-btn {
    display: grid; place-items: center;
    width: 2.4rem; height: 2.4rem; margin-left: .1rem;
    background: none; border: 0; border-radius: 50%;
    color: var(--brand-700); cursor: pointer;
    transition: background .25s var(--ease), transform .3s var(--ease);
  }
  .nav__sub-btn svg { width: 18px; height: 18px; }
  .nav__sub-btn:hover { background: var(--brand-050); }
  .nav__sub-btn:focus-visible { outline: 3px solid var(--accent-500); outline-offset: 2px; }
  .nav__has-sub[data-open="true"] .nav__sub-btn { transform: rotate(180deg); }

  .nav__sub {
    flex: 0 0 100%; width: 100%;
    list-style: none; margin: 0; padding: 0;
    display: none;                       /* collapsed by default on mobile */
  }
  .nav__has-sub[data-open="true"] .nav__sub { display: block; }
  .nav__links .nav__sub li { display: block; width: 100%; }
  .nav__sub a {
    display: block;
    margin-inline: auto;
    font-size: .95rem;
    color: var(--ink-soft);
    background: rgba(15,106,90,.035);
  }
  .nav__sub a::before {
    content: "\21B3";           /* small corner arrow marks the nesting */
    margin-right: .5em;
    color: var(--brand-500);
    opacity: .85;
  }
  .nav__chev { display: none; }
}

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

/* ── Booking card: two-panel scheduler (get-started.html) ─────────────
   Event details rail on the left, the picker (step 1) and the contact
   details (step 2) on the right — the shape people already know from
   every scheduling tool, so nobody has to learn our version of it. */
.booker {
  max-width: 1060px; margin: clamp(1.75rem, 4vw, 2.75rem) auto 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden;
}
@media (min-width: 900px) {
  .booker { grid-template-columns: 316px minmax(0, 1fr); }
  .booker__rail { border-right: 1px solid var(--line); border-bottom: 0; }
}
.booker__rail {
  padding: clamp(1.35rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(185deg, var(--brand-050), var(--surface) 62%);
}
.booker__host { display: flex; align-items: center; gap: .6rem; }
.booker__mark {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font: 800 .92rem var(--serif); letter-spacing: .02em; color: #fff;
  background: linear-gradient(150deg, var(--brand-500), var(--brand-900));
  box-shadow: 0 5px 14px rgba(8,46,39,.28);
}
.booker__org { font: 600 .8rem var(--sans); letter-spacing: .02em; color: var(--muted); }
.booker__org b { display: block; font: 700 .96rem var(--serif); color: var(--ink); letter-spacing: -.01em; }
.booker__title { font: 700 clamp(1.35rem, 2.4vw, 1.7rem) var(--serif); color: var(--ink); letter-spacing: -.02em; margin: 1rem 0 0; }
.booker__meta { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .62rem; }
.booker__meta li { display: flex; align-items: flex-start; gap: .55rem; font-size: .92rem; color: var(--ink-soft); line-height: 1.45; }
.booker__meta svg { width: 17px; height: 17px; flex: none; margin-top: .12rem; color: var(--brand-600); }
.booker__blurb { font-size: .9rem; color: var(--muted); line-height: 1.6; margin: 1.1rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); }
/* The slot chosen in step 1, echoed in the rail while details are filled in. */
.booker__pick { display: none; margin-top: 1.1rem; padding: .8rem .9rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid #cfe6dd; box-shadow: var(--shadow-sm); }
.booker__pick[data-show="true"] { display: block; }
.booker__pick span { display: block; font: 700 .64rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.booker__pick strong { font: 700 .96rem var(--serif); color: var(--brand-700); letter-spacing: -.01em; }

.booker__panel { padding: clamp(1.35rem, 3vw, 2rem); min-width: 0; }
.booker__step { display: grid; gap: 1rem; }
/* The booker's parts set their own display (grid, inline-flex), which beats the
   UA's [hidden] rule, so after a booking the fields and submit button stayed on
   screen. Make [hidden] win anywhere inside the booker. */
.booker [hidden] { display: none !important; }
.booker__h { font: 700 1.14rem var(--serif); color: var(--ink); letter-spacing: -.01em; margin: 0; }
.booker__sub { font-size: .88rem; color: var(--muted); margin: .2rem 0 0; line-height: 1.5; }
.booker__back {
  justify-self: start; display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  padding: .5rem .9rem; font: 600 .84rem var(--sans); color: var(--ink-soft); cursor: pointer;
  transition: border-color .14s var(--ease), color .14s var(--ease), background .14s var(--ease);
}
.booker__back:hover { border-color: var(--brand-600); color: var(--brand-700); background: var(--brand-050); }
.booker__back svg { width: 14px; height: 14px; }
.booker__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) clamp(1rem, 2.5vw, 1.5rem); }
@media (max-width: 640px) { .booker__grid { grid-template-columns: 1fr; } }
.booker__grid .field--wide { grid-column: 1 / -1; }
.booker__actions { display: grid; gap: .75rem; justify-items: start; }
/* Inside the card the picker needs no second frame of its own. */
.booker .book-cal { margin-top: 0; border: 0; border-radius: 0; padding: 0; box-shadow: none; background: none; }
@container (min-width: 680px) {
  .booker .book-times { padding-left: clamp(1rem, 2.5vw, 1.5rem); }
}

/* ---------- 404 ----------
   Served for any unmatched URL, so it stays deliberately light: a plain
   apology, the two actions that recover the visit, and the handful of pages
   people are usually looking for when they land here. */
.nf { max-width: 46rem; }
.nf__title { font-size: var(--step-3); letter-spacing: -.02em; margin: 0 0 var(--sp-3); }
.nf__lede { font-size: var(--step-1); color: var(--muted); font-family: var(--sans); margin: 0 0 var(--sp-5); max-width: 38rem; }
.nf__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: var(--sp-7); }

.nf__links-title { font: 700 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--sp-3); }
.nf__links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.nf__links a {
  display: block; height: 100%; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 1rem 1.1rem;
  transition: border-color .14s var(--ease), background .14s var(--ease), transform .14s var(--ease);
}
.nf__links a:hover { border-color: var(--brand-600); background: var(--brand-050); transform: translateY(-2px); }
.nf__links strong { display: block; font: 700 1rem var(--serif); color: var(--brand-700); letter-spacing: -.01em; }
.nf__links span { display: block; margin-top: .25rem; font-size: .86rem; color: var(--muted); line-height: 1.5; }

.nf__help { margin: var(--sp-6) 0 0; font-size: .92rem; color: var(--muted); font-family: var(--sans); }
/* =====================================================================
   BLOG — listing grid + post layout (TOC sidebar + prose column)
   ===================================================================== */

/* ---------- Blog card (reuses .card/.ocard photographic pattern) ---------- */
.blog-card { text-decoration: none; color: inherit; }
.blog-card .card__media { aspect-ratio: 16 / 10; }
.blog-card__tag {
  display: inline-block; font-family: var(--sans); font-weight: 700; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand-600);
  background: var(--brand-050); border-radius: 999px; padding: .3em .9em; margin-bottom: var(--sp-3);
}
.blog-card__meta { font-size: .85rem; color: var(--muted); margin-top: var(--sp-2); }
.blog-card p { color: var(--ink-soft); }

/* ---------- Post layout: full-width hero + sidebar TOC + wide content ---------- */
.post-hero .hero__sub { max-width: 42rem; }
.post-byline {
  display: flex; align-items: center; gap: .6em; font-family: var(--sans); font-size: .92rem;
  color: var(--muted); margin-top: var(--sp-3);
}
.post-byline b { color: var(--ink); }

.post-layout {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start; padding-block: clamp(2.5rem, 2rem + 3vw, 4rem);
}
.post-toc {
  position: sticky; top: calc(var(--nav-h) + 1.2rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-4); box-shadow: var(--shadow-sm); max-height: calc(100vh - var(--nav-h) - 2.4rem);
  overflow-y: auto;
}
.post-toc h2 {
  font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand-600); margin: 0 0 var(--sp-3);
}
.post-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; counter-reset: toc; }
.post-toc li { counter-increment: toc; }
.post-toc a {
  display: flex; gap: .6em; font-size: .9rem; color: var(--ink-soft); text-decoration: none;
  line-height: 1.35; padding: .25em 0;
}
.post-toc a::before {
  content: counter(toc); flex: 0 0 auto; width: 1.5em; height: 1.5em; border-radius: 50%;
  background: var(--brand-050); color: var(--brand-700); font-weight: 700; font-size: .72rem;
  display: grid; place-items: center;
}
.post-toc a:hover, .post-toc a.is-active { color: var(--brand-700); font-weight: 600; }
.post-toc a.is-active::before { background: var(--brand-600); color: #fff; }

.post-main { min-width: 0; }
.post-body { max-width: 760px; }
.post-body h2 { margin-top: var(--sp-7); scroll-margin-top: calc(var(--nav-h) + 1rem); }
.post-body h2:first-child { margin-top: 0; }
.post-body h3 { scroll-margin-top: calc(var(--nav-h) + 1rem); }
.post-body p { color: var(--ink-soft); }
.post-body ul, .post-body ol { padding-left: 1.3em; display: grid; gap: .5em; color: var(--ink-soft); }
.post-body > ul, .post-body > ol { margin-bottom: var(--sp-4); }
.post-body a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 2px; }
.post-body a:hover { color: var(--brand-700); }

/* Inline prose figures */
.post-body figure.post-figure { margin: var(--sp-6) 0; }
.post-figure img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); display: block; }
.post-figure figcaption { font-size: .85rem; color: var(--muted); margin-top: .6em; text-align: center; }

/* Data tables inside posts reuse table.compare, scrollable on mobile */
.post-body .table-scroll { margin: var(--sp-5) 0; }

/* FAQ inside posts reuses the site's own native <details> pattern (see .svc__more) */
.post-faq { margin-top: var(--sp-6); display: grid; gap: var(--sp-2); }
.post-faq details {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
}
.post-faq summary {
  cursor: pointer; font-family: var(--sans); font-weight: 600; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); list-style: none;
}
.post-faq summary::-webkit-details-marker { display: none; }
.post-faq summary::after { content: "+"; font-size: 1.1rem; color: var(--accent-600); flex: 0 0 auto; transition: transform .3s var(--ease); }
.post-faq details[open] summary::after { transform: rotate(45deg); }
.post-faq details p { margin-top: var(--sp-2); color: var(--ink-soft); }

/* CRITICAL: .post-body a{text-decoration:underline} above out-specifies plain .btn/.blog-card
   links for any CTA or card placed inside .post-body (post-end CTA, Recent Blogs section).
   Fix built in from the start, not patched after: */
.post-body .post-cta a.btn,
.post-body .post-cta a.btn *,
.post-body a.blog-card,
.post-body a.blog-card * {
  text-decoration: none;
}
.post-body .post-cta a.btn--accent { color: var(--btn-fg, #2a1c05); }
.post-body .post-cta a.btn--ghost { color: var(--brand-700); }
.post-body a.blog-card { color: inherit; }

.post-cta {
  text-align: center; background: var(--brand-050); border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1.2rem + 3vw, 3rem); margin-top: var(--sp-7);
}
.post-cta h2 { margin-top: 0 !important; }

.post-related { margin-top: var(--sp-7); }
.post-related h2 { margin-top: 0 !important; }
.post-related .grid--3 { margin-top: var(--sp-4); }

@media (max-width: 1100px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-toc { position: static; order: -1; max-height: none; }
}