/* ==========================================================================
   NEST Mortgage & Financial Solutions — design tokens
   Values copied verbatim from DESIGN-SYSTEM.md (HSL channel triplets, no
   hsl() wrapper — consumed as hsl(var(--token))).
   ========================================================================== */

:root {
  --background: 220 25% 97%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;

  --primary: 229 38% 35%;           /* brand navy #36417D */
  --primary-foreground: 0 0% 100%;

  --secondary: 220 20% 94%;
  --secondary-foreground: 224 50% 18%;

  --muted: 220 15% 92%;
  --muted-foreground: 220 10% 46%;

  --accent: 35 94% 49%;             /* brand gold #F59007 */
  --accent-foreground: 0 0% 100%;
  --warm: 32 95% 55%;

  --destructive: 0 84% 60%;
  --border: 220 15% 88%;
  --input: 220 15% 88%;
  --ring: 35 94% 49%;

  --legal-background: 220 10% 58%;
  --legal-foreground: 220 10% 85%;
  --legal-muted: 220 10% 85%;
  --legal-subtle: 220 10% 78%;

  --radius: 0.625rem;
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  --shadow-card: 0 1px 2px hsl(229 38% 35% / 0.04), 0 4px 16px -4px hsl(229 38% 35% / 0.08);
  --shadow-elevated: 0 2px 4px hsl(229 38% 35% / 0.06), 0 12px 40px -8px hsl(229 38% 35% / 0.14);
  --shadow-depth: 0 1px 0 hsl(0 0% 100% / 0.7) inset, 0 4px 16px -4px hsl(229 38% 35% / 0.08);
  --shadow-section: 0 -1px 0 hsl(0 0% 100% / 0.5) inset, 0 1px 3px hsl(229 38% 35% / 0.06);

  --font-display: 'Signika', 'DM Sans', system-ui, sans-serif;
  --font-body: 'Montserrat', 'DM Sans', system-ui, sans-serif;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 8rem; }
@media (min-width: 768px) { [id] { scroll-margin-top: 10rem; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: hsl(var(--foreground));
  margin: 0 0 1rem;
  line-height: 1.15;
}
h1 { font-size: 2.25rem; font-weight: 700; }
h2 { font-size: 1.875rem; font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
@media (min-width: 768px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2.25rem; }
}

p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.site-main { flex: 1; }
.min-h-screen-flex {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.section { padding: 4rem 0; }
@media (min-width: 768px) { .section { padding: 6rem 0; } }
.section-muted { background: hsl(var(--muted)); }

.eyebrow {
  display: inline-block;
  color: hsl(var(--accent));
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.section-header { text-align: center; max-width: 640px; margin: 0 auto 3rem; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.75rem 1.75rem;
  border: none;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.btn-gold {
  background: linear-gradient(135deg, hsl(35 94% 49%), hsl(32 95% 55%));
  color: hsl(var(--accent-foreground));
}
.btn-gold:hover { opacity: 0.9; }
.btn-outline-white {
  background: transparent;
  border: 1.5px solid hsl(0 0% 100% / 0.6);
  color: #fff;
}
.btn-outline-white:hover { background: hsl(0 0% 100% / 0.1); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(0 0% 100%);
}

/* ==========================================================================
   Gradients
   ========================================================================== */

.bg-gradient-navy {
  background: linear-gradient(160deg, hsl(229 42% 30%), hsl(229 38% 35%) 40%, hsl(229 34% 28%));
  color: #fff;
}
.bg-gradient-gold {
  background: linear-gradient(135deg, hsl(35 94% 49%), hsl(32 95% 55%));
}
.text-gradient-gold {
  background-image: linear-gradient(135deg, hsl(35 94% 49%), hsl(32 95% 55%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   Header / navigation
   ========================================================================== */

/* utility bar (phone/email/location + language switcher) */
.utility-bar { background: hsl(229 42% 18%); color: hsl(0 0% 100% / 0.8); font-size: 0.8125rem; }
.utility-bar-row { display: none; align-items: center; justify-content: space-between; padding: 0.5rem 0; }
@media (min-width: 900px) { .utility-bar-row { display: flex; } }
.utility-bar-left { display: flex; align-items: center; gap: 1.5rem; }
.utility-bar-left a, .utility-bar-location { display: inline-flex; align-items: center; gap: 0.4rem; }
.utility-bar-left a:hover { color: #fff; }

/* Language switcher — lives in the logo row now (always visible at every
   screen width), not the desktop-only utility bar above, which is why it
   was reported as "still missing" — it existed but was hidden below
   900px. */
.lang-switch { display: flex; gap: 0.3rem; border: 1px solid hsl(var(--border)); border-radius: 999px; padding: 0.2rem; }
.lang-btn {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.lang-btn.is-active { background: hsl(var(--primary)); color: #fff; }

/* site search trigger + ⌘K modal */
.site-search-trigger {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: hsl(var(--secondary));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  padding: 0.45rem 0.75rem;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}
@media (min-width: 900px) { .site-search-trigger { display: inline-flex; } }
.site-search-trigger kbd { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 4px; padding: 0.05rem 0.35rem; font-size: 0.75rem; }
.search-modal-overlay {
  position: fixed; inset: 0; z-index: 110;
  background: hsl(222 47% 11% / 0.55);
  display: none; align-items: flex-start; justify-content: center;
  padding: 10vh 1.5rem 1.5rem;
}
.search-modal-overlay.is-open { display: flex; }
.search-modal { background: hsl(var(--card)); border-radius: var(--radius); width: 100%; max-width: 34rem; max-height: 70vh; display: flex; flex-direction: column; box-shadow: var(--shadow-elevated); overflow: hidden; }
.search-modal-input-row { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.search-modal-input-row input { flex: 1; border: none; outline: none; font-size: 1rem; background: transparent; color: hsl(var(--foreground)); }
.search-modal-input-row button { background: hsl(var(--secondary)); border: none; border-radius: 4px; padding: 0.2rem 0.5rem; font-size: 0.75rem; color: hsl(var(--muted-foreground)); cursor: pointer; }
.search-modal-results { list-style: none; margin: 0; padding: 0.5rem; overflow-y: auto; }
.search-modal-results li a { display: block; padding: 0.65rem 0.75rem; border-radius: var(--radius-md); }
.search-modal-results li a:hover, .search-modal-results li a.is-highlighted { background: hsl(var(--secondary)); }
.search-result-title { display: block; font-weight: 600; font-size: 0.9375rem; }
.search-result-desc { display: block; font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }
.search-modal-results li.is-hidden { display: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid hsl(var(--border));
}
.logo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  gap: 0.6rem;
  position: relative;
  flex-wrap: nowrap;
}
.site-logo img { height: 44px; width: auto; max-width: none; flex-shrink: 0; }
.site-logo { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: hsl(var(--primary)); flex-shrink: 0; }
@media (max-width: 400px) {
  .logo-row { gap: 0.3rem; }
  .site-logo img { height: 30px; }
  .header-actions { gap: 0.4rem; }
  .lang-switch { padding: 0.1rem; }
  .lang-btn { padding: 0.15rem 0.35rem; font-size: 0.65rem; }
  .btn.btn-gold { padding: 0.5rem 0.6rem; font-size: 0.75rem; }
  .menu-toggle { padding: 0.3rem; }
  .menu-toggle svg { width: 20px; height: 20px; }
}

/* Shared "scrollable nav row" mechanics — used by BOTH the main nav
   (below the logo) and the contextual sub-nav (below that). Nothing is
   ever hidden behind a hamburger; on narrow screens the row simply
   scrolls horizontally, with the same round arrow-button affordance
   already proven to work well for the sub-nav. See main.js: it now loops
   over every .scroll-nav-wrap on the page (querySelectorAll), not just
   the first one — with two such rows on the same page, using
   querySelector (singular) would have silently left the second row
   without working arrows. */
.scroll-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll-nav::-webkit-scrollbar { display: none; }
.scroll-nav .container {
  display: flex;
  gap: 1.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  white-space: nowrap;
  scroll-snap-type: x proximity;
}
.scroll-nav a { scroll-snap-align: start; }

.header-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap; min-width: 0; }

/* Normal, always-visible primary nav row (no hamburger — removed
   entirely per explicit request, not just hidden at a breakpoint). Uses
   the same scroll-nav mechanics as the sub-nav below it so nothing is
   ever hidden behind a tap, even on narrow phones. */
.primary-nav { background: #fff; border-bottom: 1px solid hsl(var(--border)); }
.primary-nav a {
  font-weight: 600;
  font-size: 0.9375rem;
  color: hsl(var(--foreground));
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
.primary-nav a:hover,
.primary-nav a.is-active {
  color: hsl(var(--accent));
  border-bottom-color: hsl(var(--accent));
}

/* contextual sub-nav */
.sub-nav {
  background: hsl(var(--secondary));
  border-bottom: 1px solid hsl(var(--border));
}
.sub-nav a { font-size: 0.875rem; font-weight: 600; color: hsl(var(--muted-foreground)); }
.sub-nav a:hover, .sub-nav a.is-active { color: hsl(var(--accent)); }

/* Mobile-only scroll affordance: small round arrow buttons at each edge,
   shown only on the side(s) that still have hidden links, toggled via JS
   (main.js) using .is-scrollable / .at-start / .at-end on the wrapper.
   (A pure colour fade was tried first but is invisible when the fade
   colour matches the row's own background — arrows give an unambiguous,
   visible affordance instead.) */
.scroll-nav-wrap { position: relative; }
.scroll-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: hsl(var(--card));
  box-shadow: var(--shadow-card);
  border: 1px solid hsl(var(--border));
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 42;
  cursor: pointer;
  padding: 0;
  color: hsl(var(--accent));
}
.scroll-nav-arrow svg { width: 16px; height: 16px; }
.scroll-nav-arrow.left { left: 4px; }
.scroll-nav-arrow.right { right: 4px; }
.scroll-nav-wrap.is-scrollable:not(.at-start) .scroll-nav-arrow.left { display: flex; }
.scroll-nav-wrap.is-scrollable:not(.at-end) .scroll-nav-arrow.right { display: flex; }
@media (min-width: 900px) {
  .scroll-nav-arrow { display: none !important; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right center;
  z-index: 0;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: hsl(229 45% 28% / 0.62);
}
.hero-inner { position: relative; z-index: 1; padding-top: 5rem; padding-bottom: 3.5rem; max-width: 640px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.hero-badges span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid hsl(0 0% 100% / 0.35);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.hero-badges span svg { width: 14px; height: 14px; flex-shrink: 0; color: hsl(var(--accent)); }
.hero-eyebrow { color: hsl(var(--accent)); font-weight: 700; letter-spacing: 0.1em; font-size: 0.8125rem; text-transform: uppercase; margin-bottom: 0.75rem; }
.hero h1 { color: #fff; }
.hero h1 .accent { color: hsl(var(--accent)); }
.hero p.lead { color: hsl(0 0% 100% / 0.85); font-size: 1.05rem; max-width: 34rem; }

.trust-strip {
  background: #fff;
  border-bottom: 1px solid hsl(var(--border));
  padding: 1.25rem 0;
}
.trust-strip .container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: center;
}
.trust-strip img { width: auto; opacity: 1; }

/* ==========================================================================
   Cards / grids
   ========================================================================== */

.grid { display: grid; gap: 1.5rem; }
.grid-3 { grid-template-columns: repeat(1, 1fr); }
.grid-4 { grid-template-columns: repeat(1, 1fr); }
.grid-2 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
}
@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}
.card.is-interactive { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.card.is-interactive:hover { box-shadow: var(--shadow-elevated); transform: translateY(-3px); }

.icon-badge {
  width:3.25rem;
  height:3.25rem;
  color: hsl(var(--accent));
  margin: 0 auto 1rem;
}
.icon-badge svg { width: 100%; height: 100%; }
.service-card { text-align: center; }
.service-card .link-arrow-wrap { text-align: left; }

.photo-card {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.photo-card:hover { box-shadow: var(--shadow-elevated); transform: translateY(-3px); }
.photo-card .photo-wrap { position: relative; flex: 0 0 140px; }
.photo-card .photo-wrap img {
  width: 140px; height: 150px; object-fit: cover;
  border-radius: var(--radius-md); position: relative; z-index: 2; display: block;
}
.photo-card .photo-wrap::after {
  content: "";
  position: absolute; left: -10px; bottom: -12px;
  width: 64px; height: 26px;
  background: linear-gradient(135deg, hsl(35 94% 49%), hsl(32 95% 55%));
  border-radius: 4px; z-index: 1;
}
.photo-card .photo-content { flex: 1; padding-top: 0.25rem; }

.link-arrow { color: hsl(var(--accent)); font-weight: 600; font-size: 0.9375rem; }

/* Subtle pulse on the Credit Report referral link — this is a real
   revenue line for NEST (per their note), so it's worth a gentle nudge
   to draw the eye without being obnoxious (no actual blinking/flashing —
   that's an accessibility problem for photosensitive users; a soft
   glow/scale pulse gets the same "notice me" effect safely). */
.credit-report-link { display: inline-block; animation: nestfs-credit-pulse 2.4s ease-in-out infinite; }

/* Home page credit-score widget */
.credit-widget {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, hsl(35 94% 49%), hsl(32 95% 55%));
  color: #fff;
  border-radius: var(--radius);
  padding: 1.1rem 1.5rem;
  text-decoration: none;
  box-shadow: var(--shadow-elevated);
  transition: transform 0.2s ease;
}
.credit-widget:hover { transform: translateY(-2px); }
.credit-widget-icon { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; background: hsl(0 0% 100% / 0.2); border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.credit-widget-icon svg { width: 20px; height: 20px; }
.credit-widget strong { display: block; font-size: 1rem; }
.credit-widget-sub { display: block; font-size: 0.8125rem; color: hsl(0 0% 100% / 0.85); margin-top: 0.15rem; }
.credit-widget-arrow { margin-left: auto; font-size: 1.25rem; flex: 0 0 auto; }
@keyframes nestfs-credit-pulse {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 8px hsl(var(--accent) / 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .credit-report-link { animation: none; }
}

/* Personal/Property Protection cards — previously raw inline
   display:flex with no mobile override, so on narrow phones the icon
   stayed beside the text instead of stacking, squeezing everything into
   a narrow column with dead space on the right (confirmed via real
   iPhone Safari screenshots). Icon now stacks above the text below 640px,
   using the full available width like every other card on this page. */
.protection-card { display: flex; gap: 1.5rem; align-items: flex-start; }
.protection-card-icon { flex: 0 0 4.5rem; width: 4.5rem; height: 4.5rem; color: hsl(var(--accent)); }
@media (max-width: 640px) {
  .protection-card { flex-direction: column; gap: 1rem; }
  .protection-card-icon { width: 3.5rem; height: 3.5rem; }
}

/* Client-type cards (Services page) — full-width image banner + a
   2-column grid of short checkmark phrases instead of a vertical bullet
   list of full sentences, which previously made these read as a long,
   narrow, text-heavy column. */
.client-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.client-card:hover { box-shadow: var(--shadow-elevated); transform: translateY(-3px); }
.client-card-banner { aspect-ratio: 3 / 2; height: auto; }
.client-card-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
/* Remortgage card ("Client Type 3") — the key word "RATE" sits low in
   this specific photo, unlike the other three cards, so the shared
   center-20% crop was cutting it off. Per-image override instead of
   changing the shared rule and affecting the other three. */
.client-card#remortgage .client-card-banner img { object-position: center 50%; }
.client-card-content { padding: 1.5rem; }
.client-card-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--accent));
  border: 1px solid hsl(var(--accent));
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  margin-bottom: 0.5rem;
}
.client-card-chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 0.75rem;
  list-style: none;
  margin: 0.75rem 0 1rem;
  padding: 0;
}
.client-card-chips li {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.4;
}
.client-card-chips svg { flex: 0 0 auto; margin-top: 0.15rem; color: hsl(var(--accent)); }
.client-card-chips-single { grid-template-columns: 1fr; }
@media (max-width: 480px) {
  .client-card-chips { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Mortgage calculator
   ========================================================================== */

.calculator-panel {
  background: hsl(var(--card));
  border-radius: var(--radius);
  box-shadow: var(--shadow-elevated);
  border: 1px solid hsl(var(--border));
  max-width: 42rem;
  margin: 0 auto;
  padding: 2rem;
}
.calculator-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.calculator-tabs button {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: none;
  font-weight: 600;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}
.calculator-tabs button.is-active {
  background: hsl(var(--primary));
  color: #fff;
}
.calc-fields { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.25rem; }
@media (min-width: 640px) { .calc-fields { grid-template-columns: 1fr 1fr; } }
.calc-fields label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.4rem; }
.calc-fields input, .calc-fields select {
  width: 100%;
  height: 2.5rem;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--input));
  padding: 0 0.75rem;
  font-size: 0.9375rem;
  background: hsl(var(--background));
}
.calc-result {
  background: hsl(var(--secondary));
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.calc-result strong { font-size: 1.5rem; color: hsl(var(--primary)); font-family: var(--font-display); }
.calc-disclaimer { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); margin-bottom: 0.4rem; }
.calc-disclaimer.is-warning { color: hsl(var(--destructive)); font-weight: 700; }

/* ==========================================================================
   How it works / steps
   ========================================================================== */

.steps { display: grid; grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step-number {
  width: 3rem; height: 3rem; border-radius: 999px;
  background: linear-gradient(135deg, hsl(35 94% 49%), hsl(32 95% 55%));
  color: #fff; font-weight: 700; font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonial-card { text-align: left; }
.testimonial-stars { color: hsl(var(--accent)); letter-spacing: 0.1em; margin-bottom: 0.75rem; }

.testimonial-carousel { position: relative; display: flex; align-items: center; gap: 0.75rem; }
.testimonial-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.25rem;
  -webkit-overflow-scrolling: touch;
}
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-track { scrollbar-width: none; }
.testimonial-track .testimonial-card {
  flex: 0 0 calc(100% - 0.5rem);
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .testimonial-track .testimonial-card { flex-basis: calc(50% - 0.75rem); }
}
@media (min-width: 1024px) {
  .testimonial-track .testimonial-card { flex-basis: calc(33.333% - 1rem); }
}
.carousel-arrow {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: hsl(var(--accent));
}
.carousel-arrow svg { width: 18px; height: 18px; }
.carousel-arrow:hover { background: hsl(var(--secondary)); }
@media (max-width: 639px) {
  .carousel-arrow { display: none; }
}
.testimonial-author { font-weight: 700; margin-top: 1rem; }
.testimonial-location { color: hsl(var(--muted-foreground)); font-size: 0.875rem; }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.faq-item {
  background: #fff;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 1.1rem 1.25rem;
  font-weight: 600;
  text-align: left;
  font-size: 0.9375rem;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  padding: 0 1.25rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.9375rem;
}
.faq-item.is-open .faq-answer { padding-bottom: 1.1rem; }
.faq-item.is-open .faq-question .faq-plus { transform: rotate(45deg); }
.faq-plus { transition: transform 0.15s ease; font-size: 1.25rem; color: hsl(var(--accent)); }

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band { text-align: center; padding: 4rem 0; }
.cta-band h2 { color: #fff; }
.cta-band p { color: hsl(0 0% 100% / 0.85); margin-bottom: 1.75rem; }

/* ==========================================================================
   Team grid (About)
   ========================================================================== */

.team-card .team-photo { width: 100%; aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; background: hsl(var(--muted)); }
/* Black & white treatment with a uniform tone across every photo, even
   though the original source photos have different real-world
   backgrounds (a studio shot, an office, etc.) — grayscale + a matched
   contrast/brightness curve is the practical way to make a mixed set of
   real photos read as one consistent, professional set without
   re-shooting or manually re-backgrounding each one. */
.team-card .team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; filter: grayscale(100%) contrast(1.05) brightness(1.02); transition: filter 0.3s ease; }
/* Bio truncated to 5 lines with a "...more" toggle (main.js) — only
   matters once a bio is actually long enough to overflow; short ones
   render exactly as before with no visible change. */
.team-bio { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.team-bio.is-expanded { -webkit-line-clamp: unset; overflow: visible; }
.team-bio-toggle { display: none; background: none; border: none; padding: 0; margin-top: 0.35rem; color: hsl(var(--accent)); font-weight: 600; font-size: 0.8125rem; cursor: pointer; }
.team-bio-toggle.is-visible { display: inline-block; }
/* Team photos stay permanently black & white — no hover state that
   partially reduces the grayscale. That hover effect was the actual
   cause of a real bug: scrolling content under a stationary mouse
   cursor can trigger :hover in some browsers even with zero mouse
   movement, which looked like "photos turn colour again when scrolling
   back up". Removed entirely rather than only reduced, since any
   hover-driven filter change risks the same issue recurring. */
.team-card .role { color: hsl(var(--accent)); font-size: 0.875rem; font-weight: 600; }

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-details dt {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: hsl(var(--accent)); font-weight: 700; margin-top: 1.5rem;
}
.contact-details dd { margin: 0.25rem 0 0; font-weight: 600; }

.contact-form-card {
  background: hsl(var(--card));
  border-radius: var(--radius);
  box-shadow: var(--shadow-elevated);
  border: 1px solid hsl(var(--border));
  padding: 2rem;
}
.form-field { margin-bottom: 1.1rem; }
.form-field label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.4rem; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--input));
  padding: 0.65rem 0.85rem;
  font-size: 0.9375rem;
  font-family: inherit;
  background: hsl(var(--background));
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-hint { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin: 0.35rem 0 0; }
.phone-input-row { display: flex; gap: 0.5rem; }
.phone-country-select { flex: 0 0 6.5rem; width: 6.5rem; }
.phone-number-input { flex: 1; }
.form-consent { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.8125rem; margin-bottom: 1.25rem; }
.form-honeypot { position: absolute; left: -9999px; top: -9999px; }

.form-notice { border-radius: var(--radius-md); padding: 0.9rem 1.1rem; margin-bottom: 1.25rem; font-size: 0.9375rem; }
.form-notice.is-success { background: hsl(140 50% 94%); color: hsl(140 60% 25%); }
.form-notice.is-error { background: hsl(0 70% 95%); color: hsl(0 70% 35%); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: hsl(229 42% 24%); color: hsl(0 0% 100% / 0.85); }
.footer-columns { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-top: 3.5rem; padding-bottom: 2.5rem; }
@media (min-width: 768px) { .footer-columns { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer h3 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.site-footer a { display: block; margin-bottom: 0.6rem; font-size: 0.9375rem; }
.site-footer a:hover { color: hsl(var(--accent)); }
.footer-tagline { color: hsl(var(--accent)); font-weight: 700; margin-bottom: 0.5rem; }
.footer-social { display: flex; gap: 0.75rem; margin-top: 1rem; }
.footer-social a {
  width: 2.25rem; height: 2.25rem; border-radius: 999px;
  background: hsl(0 0% 100% / 0.1);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0;
}

.footer-disclaimer { background: hsl(var(--legal-background)); padding: 1.5rem 0 2rem; }
.footer-disclaimer-title {
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: hsl(var(--legal-foreground)); margin-bottom: 0.6rem;
}
.footer-disclaimer-copy { font-size: 0.9375rem; font-weight: 500; line-height: 1.8; color: hsl(var(--legal-muted)); margin-bottom: 0.5rem; }
.footer-disclaimer-fineprint { font-size: 0.875rem; font-weight: 500; line-height: 1.75; color: hsl(var(--legal-subtle)); }

/* ==========================================================================
   WhatsApp floating button
   ========================================================================== */

.whatsapp-fab {
  position: fixed;
  /* Same reasoning as .dictionary-fab above — raised clear of a
     bottom-anchored cookie-consent banner (a separate plugin, not part
     of this theme) so its links stay clickable. */
  bottom: 6rem;
  right: 1.5rem;
  z-index: 50;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-elevated);
}
.whatsapp-fab::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid #25D366;
  animation: nest-ping 1.8s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes nest-ping {
  75%, 100% { transform: scale(1.4); opacity: 0; }
}
.whatsapp-fab:hover { background: #1fa855; }
@media (max-width: 640px) {
  .whatsapp-fab { bottom: 7rem; right: 1rem; }
}

/* ==========================================================================
   Floating Mortgage Dictionary widget (global, bottom-left)
   ========================================================================== */

.dictionary-fab {
  position: fixed;
  /* Raised well clear of the bottom of the viewport — the cookie-consent
     banner is a separate WordPress plugin (no matching markup exists
     anywhere in this theme), so its exact height can't be measured here.
     Sitting this low previously meant the widget could sit directly on
     top of that banner's own "Accept All" / "Privacy & Cookie Policy"
     links, making them unclickable — exactly the kind of thing that
     invites a real accessibility/compliance complaint. This offset gives
     generous clearance above any reasonably-sized cookie banner. */
  bottom: 6rem;
  left: 1.5rem;
  z-index: 50;
  height: 48px;
  border-radius: 999px;
  background: hsl(var(--primary));
  border: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.1rem 0 1rem;
  box-shadow: var(--shadow-elevated);
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.dictionary-fab:hover { background: hsl(229 42% 28%); }

.dictionary-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: hsl(222 47% 11% / 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.dictionary-modal-overlay.is-open { display: flex; }

.dictionary-modal {
  background: hsl(var(--card));
  border-radius: var(--radius);
  width: 100%;
  max-width: 40rem;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-elevated);
  padding: 1.5rem;
}
.dictionary-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.dictionary-modal-header h2 { margin: 0; font-size: 1.25rem; }
.dictionary-modal-close {
  background: none;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}
.dictionary-modal-close:hover { color: hsl(var(--foreground)); }
.dictionary-modal .dictionary-filter input { margin-bottom: 1rem; }
.dictionary-modal-body { overflow-y: auto; flex: 1; }
.dictionary-modal-footer { border-top: 1px solid hsl(var(--border)); margin-top: 1rem; padding-top: 1rem; text-align: center; }
.dictionary-modal-footer a { color: hsl(var(--accent)); font-weight: 600; font-size: 0.9375rem; }
@media (max-width: 640px) {
  /* Mobile cookie banners are usually taller (buttons stack, text wraps
     across the narrower width), so the widget needs even more clearance
     here than on desktop. */
  .dictionary-fab { height: 44px; bottom: 7rem; left: 1rem; font-size: 0.7rem; }
}

/* ==========================================================================
   Mortgage dictionary
   ========================================================================== */

.dictionary-filter input {
  width: 100%;
  max-width: 28rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--input));
  padding: 0 1rem;
  margin-bottom: 2.5rem;
  font-size: 0.9375rem;
}
.dictionary-group h2 { color: hsl(var(--accent)); font-size: 1.5rem; margin: 2rem 0 1rem; }
.dictionary-term { border-bottom: 1px solid hsl(var(--border)); padding: 1rem 0; }
.dictionary-term dt { font-weight: 700; font-family: var(--font-display); }
.dictionary-term dd { margin: 0.35rem 0 0; color: hsl(var(--muted-foreground)); }
.dictionary-term.is-hidden { display: none; }

/* ==========================================================================
   Blog
   ========================================================================== */

.blog-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card img { border-radius: var(--radius); aspect-ratio: 16/10; object-fit: cover; margin-bottom: 1rem; }
.blog-card .category-pill {
  display: inline-block; font-size: 0.75rem; font-weight: 700; color: hsl(var(--accent));
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem;
}
.category-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.5rem; }
.category-pills a {
  border: 1px solid hsl(var(--border)); border-radius: 999px;
  padding: 0.4rem 1rem; font-size: 0.8125rem; font-weight: 600;
}
.category-pills a.is-active, .category-pills a:hover { background: hsl(var(--primary)); color: #fff; border-color: hsl(var(--primary)); }
.category-pill-count { opacity: 0.65; font-size: 0.75em; }

/* ==========================================================================
   404
   ========================================================================== */

.error-404-page { text-align: center; padding: 6rem 0; }
.error-404-page .code { font-family: var(--font-display); font-size: 5rem; color: hsl(var(--accent)); font-weight: 700; }
.error-404-links { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }

/* ==========================================================================
   Utility
   ========================================================================== */

.text-center { text-align: center; }
.text-muted { color: hsl(var(--muted-foreground)); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.max-w-prose { max-width: 42rem; margin-left: auto; margin-right: auto; }
.max-w-4xl { max-width: 56rem; margin-left: auto; margin-right: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Cookie consent banner — sits above the two floating action buttons
   (.dictionary-fab / .whatsapp-fab), which is exactly why those were
   raised earlier: this banner needs to be the bottom-most fixed element
   with the highest stacking priority so its own links/buttons are never
   covered by anything else. */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: hsl(222 47% 11%);
  color: #fff;
  box-shadow: 0 -4px 20px hsl(0 0% 0% / 0.25);
  display: none;
}
.cookie-banner.is-visible { display: block; }
.cookie-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cookie-banner p { margin: 0; font-size: 0.875rem; color: hsl(0 0% 100% / 0.85); flex: 1 1 320px; }
.cookie-banner a { color: hsl(var(--accent)); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
.btn-cookie-secondary {
  background: transparent;
  border: 1px solid hsl(0 0% 100% / 0.4);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 0.65rem 1.25rem;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
}
.btn-cookie-secondary:hover { background: hsl(0 0% 100% / 0.1); }
/* When the cookie banner is visible, push both floating buttons up
   further via body.has-cookie-banner (added/removed by JS) — more
   precise than a permanently-raised fixed offset, and they settle back
   down to their normal position the moment consent is given and the
   banner disappears. */
body.has-cookie-banner .dictionary-fab,
body.has-cookie-banner .whatsapp-fab { bottom: 8rem; }
@media (max-width: 640px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .cookie-banner-actions { justify-content: center; }
  body.has-cookie-banner .dictionary-fab,
  body.has-cookie-banner .whatsapp-fab { bottom: 10rem; }
}