/* ==========================================================================
   Kingdom Capital — site styles
   Brand: #000212 (ink) · #19b4e7 (sky) · #e5effb (mist) · #d9e8fb (frost)
   Font: Montserrat (ExtraBold for headings)
   ========================================================================== */

:root {
  /* Brand palette */
  --ink: #000212;
  --sky: #19b4e7;
  --mist: #e5effb;
  --frost: #d9e8fb;
  --white: #ffffff;

  /* Derived tokens */
  --ink-2: #0a1430;            /* raised surface on dark */
  --ink-3: #15224a;            /* borders on dark */
  --sky-ink: #0a6f94;          /* accessible sky for text/links on light (≥4.5:1 on mist) */
  --sky-soft: rgba(25, 180, 231, 0.14);
  --text: #000212;
  --text-muted: #3d4a5f;
  --on-dark: #ffffff;
  --on-dark-muted: #b9c7dd;
  --line: #c8d8ee;
  --success: #0f7a4a;
  --error: #b42318;

  /* Type */
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-h3: 1.25rem;
  --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --fs-h1: clamp(2.125rem, 1.3rem + 3.6vw, 3.75rem);

  /* Spacing (8pt) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(0, 2, 18, 0.06), 0 2px 8px rgba(0, 2, 18, 0.05);
  --shadow: 0 4px 12px rgba(0, 2, 18, 0.07), 0 16px 40px rgba(0, 2, 18, 0.08);
  --container: 1760px;
  --header-h: 76px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur: 250ms;

  /* z-index scale */
  --z-header: 40;
  --z-mobilebar: 50;
  --z-skip: 100;

  color-scheme: light;
}
/* Taller menu bar on desktop (+50%); phones and tablets keep 76px */
@media (min-width: 1024px) { :root { --header-h: 114px; } }

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0 0 var(--s-4); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 var(--s-4); }
figure, blockquote { margin: 0; }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25rem; }
a { color: var(--sky-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 700; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible { outline-color: var(--sky); }
::selection { background: var(--sky); color: var(--ink); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: var(--z-skip);
  background: var(--sky); color: var(--ink); padding: 12px 18px; border-radius: var(--radius-sm);
  font-weight: 700; text-decoration: none; transition: top var(--dur-fast);
}
.skip-link:focus { top: 12px; }

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px;
  font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none;
  border: 2px solid transparent; cursor: pointer; touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--sky); color: var(--ink); }
.btn-primary:hover { background: #3fc3ee; box-shadow: 0 6px 20px rgba(25, 180, 231, 0.35); text-decoration: none; }
/* Home hero: the "Book a 15-min call" button turns white on hover */
.hero .hero-ctas .btn-primary:hover { background: var(--white); color: var(--ink); box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--ink-2); text-decoration: none; }
.btn-outline { border-color: currentColor; color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--white); border-color: var(--ink); text-decoration: none; }
.dark .btn-outline { color: var(--white); }
.dark .btn-outline:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-sm { min-height: 44px; padding: 10px 18px; font-size: 0.9375rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.btn .spinner { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; }
.link-arrow svg { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }
.link-arrow:hover { text-decoration: underline; }

/* ---------- Header ---------- */
/* Fixed over the page with no background colour: main.js sets --header-alpha (0 → 1) as the page
   scrolls, which fades in a frosted blur of whatever is behind the bar. The blur lives on ::before
   because backdrop-filter on the header itself would trap the fixed mobile menu inside the bar.
   Solid navy with the mobile menu open. */
.site-header {
  --header-alpha: 1;
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  color: var(--on-dark);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(calc(16px * var(--header-alpha)));
  backdrop-filter: blur(calc(16px * var(--header-alpha)));
}
.js .site-header { --header-alpha: 0; }
body.nav-open .site-header { background: var(--ink); }
/* Over a light section (main.js adds .on-light) the desktop links turn navy so they stay readable */
@media (min-width: 1024px) {
  .site-header.on-light .primary-nav a { color: var(--ink); text-shadow: none; }
  .site-header.on-light .primary-nav a:hover { color: var(--sky-ink); }
}
.header-inner { display: flex; align-items: center; gap: var(--s-5); min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--white); text-decoration: none; flex: none; }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--sky); color: var(--ink); font-weight: 800; font-size: 1.375rem; letter-spacing: -0.04em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1; font-weight: 800; letter-spacing: 0.14em; font-size: 1rem; }
.brand-text span { font-size: 0.6875rem; letter-spacing: 0.42em; color: var(--sky); margin-top: 5px; font-weight: 700; }
.brand img { height: 48px; width: auto; transition: filter var(--dur-fast); }
/* The logo is white: over light sections (main.js adds .on-light) show it dark so it stays visible */
.site-header.on-light .brand img { filter: brightness(0); }
body.nav-open .site-header .brand img { filter: none; }

.primary-nav { margin-left: auto; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.primary-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px;
  color: var(--white); text-decoration: none; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  /* Soft shadow keeps white links legible over the hero photo and blurred content */
  text-shadow: 0 1px 3px rgba(0, 2, 18, 0.6);
}
.primary-nav a:hover { color: var(--sky); }
.primary-nav a[aria-current="page"] { color: var(--white); }
/* Desktop: a sky underline slides in from the left on hover and stays on the current page */
@media (min-width: 1024px) {
  .primary-nav a { position: relative; }
  .primary-nav a::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px;
    background: var(--sky); transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur) var(--ease-out);
  }
  .primary-nav a:hover::after, .primary-nav a:focus-visible::after, .primary-nav a[aria-current="page"]::after { transform: scaleX(1); }
}
@media (min-width: 1024px) and (max-width: 1279px) { .primary-nav a::after { left: 10px; right: 10px; } }
@media (prefers-reduced-motion: reduce) { .primary-nav a::after { transition: none; } }

.header-actions { display: flex; align-items: center; gap: var(--s-3); }
/* Desktop: three columns (logo / links / phone) so the links sit in the true centre of the bar */
@media (min-width: 1024px) {
  .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .primary-nav { margin-left: 0; }
  .header-actions { justify-self: end; }
}
.header-actions .btn { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) { .primary-nav a { padding: 8px 10px; } .header-inner { gap: var(--s-4); } }
/* Phone number shown as the primary (sky pill) button */
.header-phone { gap: 8px; font-weight: 700; font-size: 1rem; }
.header-phone svg { width: 18px; height: 18px; }

/* Plain white hamburger (no box); turns dark over light sections like the logo, white again when the menu is open */
.nav-toggle {
  display: none; width: 48px; height: 48px; border: 0; border-radius: 12px;
  background: transparent; color: var(--white); place-items: center;
}
.site-header.on-light .nav-toggle { color: var(--ink); }

/* Mobile menu open: logo moves to the left; a phone icon (tap to call) appears beside the close button.
   Both buttons are black icons on white circles. Closed: centred logo and plain white hamburger. */
.nav-call { display: none; }
@media (max-width: 1023px) {
  /* --menu-inset: extra space either side of the logo and buttons while the menu is open */
  .site-header { --menu-inset: 12px; }
  body.nav-open .site-header .brand { left: calc(16px + var(--menu-inset)); transform: translateY(-50%); }
  body.nav-open .header-actions { margin-right: var(--menu-inset); }
  /* Same inset above: the bar grows by --menu-inset and its contents sit that much lower;
     the menu panel (positioned from --header-h) moves down with it */
  body.nav-open .site-header { --header-h: calc(76px + var(--menu-inset)); }
  body.nav-open .header-inner { padding-top: var(--menu-inset); }
  /* Logo and phone icon are positioned from the bar centre; nudge them down to the centre of the padded row */
  body.nav-open .site-header .brand,
  body.nav-open .nav-call { top: calc(50% + var(--menu-inset) / 2); }
  body.nav-open .nav-toggle,
  body.nav-open .nav-call {
    width: 44px; height: 44px; border-radius: 50%; background: var(--white); color: var(--ink);
  }
  body.nav-open .nav-call {
    display: grid; place-items: center; position: absolute; top: calc(50% + var(--menu-inset) / 2); transform: translateY(-50%);
    right: calc(16px + var(--menu-inset) + 44px + 10px); /* edge + inset + close button + gap */
  }
  body.nav-open .nav-call svg, body.nav-open .nav-toggle svg { width: 20px; height: 20px; }
  body.nav-open .site-header .nav-toggle { color: var(--ink); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body.nav-open .site-header .brand { left: calc(32px + var(--menu-inset)); }
  body.nav-open .nav-call { right: calc(32px + var(--menu-inset) + 44px + 10px); }
}
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 1023px) {
  .nav-toggle { display: grid; }
  /* Logo centred in the bar (the menu button stays on the right) */
  .header-inner { position: relative; }
  .site-header .brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .header-actions { margin-left: auto; }
  .header-actions .btn, .header-phone { display: none; }
  .primary-nav {
    position: fixed; inset: var(--header-h) 0 0 0; margin: 0; background: var(--ink);
    padding: var(--s-5) 24px calc(var(--s-7) + env(safe-area-inset-bottom)); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  }
  .primary-nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .primary-nav ul { flex-direction: column; gap: 0; }
  .primary-nav > ul > li { border-bottom: 1px solid var(--ink-3); }
  .primary-nav > ul > li:first-child { border-top: 1px solid var(--ink-3); }
  .primary-nav a { font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; min-height: 52px; padding: 16px 4px; border-radius: 0; width: 100%; color: var(--white); }
  /* Left-aligned menu: links sit flush left, current page shown in brand blue */
  .primary-nav > ul > li > a { justify-content: flex-start; text-align: left; }
  .primary-nav a[aria-current="page"] { text-decoration: none; color: var(--sky); }
  .primary-nav a:hover { background: var(--ink-2); }
  body.nav-open { overflow: hidden; }
  /* Mobile menu: a dropdown (Calculators) is collapsed until its label is tapped (main.js toggles .is-open) */
  .primary-nav .has-submenu > a { justify-content: space-between; }
  .primary-nav .has-submenu > a .caret {
    display: inline-block; width: 7px; height: 7px; margin-left: 10px; flex: none;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg); transition: transform var(--dur) var(--ease-out);
  }
  .primary-nav .has-submenu.is-open > a .caret { transform: translateY(2px) rotate(-135deg); }
  .primary-nav .submenu {
    display: block; overflow: hidden; max-height: 0; border-left: 2px solid var(--sky); margin-left: 4px; padding-left: 14px;
    transition: max-height var(--dur) var(--ease-out);
  }
  .primary-nav .has-submenu.is-open > .submenu { max-height: 400px; } /* tall enough for all five links, wrapped or not */
  .primary-nav .submenu a {
    font-size: 0.875rem; font-weight: 500; line-height: 1.35; white-space: normal;
    min-height: 44px; padding: 10px 8px; color: var(--on-dark-muted); justify-content: flex-start; text-align: left;
  }
  .primary-nav .has-submenu:not(.is-open) .submenu a { visibility: hidden; }
}

/* A menu label with no page of its own (no href) only opens its dropdown */
.primary-nav a:not([href]) { cursor: default; }

/* ---------- Menu dropdown (desktop) ---------- */
@media (min-width: 1024px) {
  .primary-nav .has-submenu { position: relative; }
  .primary-nav .has-submenu > a .caret { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  .primary-nav .submenu {
    position: absolute; top: 100%; left: 50%; z-index: 5; display: block; min-width: 250px; padding: 8px;
    /* No colour, just a frosted blur of whatever is behind it (like the menu bar) */
    background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
    opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
  }
  .primary-nav .has-submenu:hover > .submenu,
  .primary-nav .has-submenu:focus-within > .submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
  .primary-nav .submenu a {
    display: flex; width: 100%; min-height: 40px; padding: 10px 14px; border-radius: var(--radius-sm);
    color: var(--white); font-size: 0.75rem; font-weight: 500; text-shadow: 0 1px 3px rgba(0, 2, 18, 0.6);
  }
  .primary-nav .submenu a::after { display: none; } /* no sliding underline inside the dropdown */
  .primary-nav .submenu a:hover, .primary-nav .submenu a:focus-visible { background: rgba(255, 255, 255, 0.12); color: var(--sky); }
  /* Over a light section the links turn navy, like the main menu links (main.js adds .on-light) */
  .site-header.on-light .primary-nav .submenu { border-color: rgba(0, 2, 18, 0.12); }
  .site-header.on-light .primary-nav .submenu a { color: var(--ink); text-shadow: none; }
  .site-header.on-light .primary-nav .submenu a:hover { background: rgba(0, 2, 18, 0.06); color: var(--sky-ink); }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--s-8); }
@media (min-width: 768px) { .section { padding-block: var(--s-9); } }
.section-tight { padding-block: var(--s-7); }
.bg-mist { background: var(--mist); }
.bg-frost { background: var(--frost); }
.dark { background: var(--ink); color: var(--on-dark); }
.dark a:not(.btn) { color: var(--sky); }
.dark p, .dark li { color: var(--on-dark-muted); }
.dark h1, .dark h2, .dark h3, .dark h4, .dark strong { color: var(--white); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s-4);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sky-ink);
}
.dark .eyebrow { color: var(--sky); }
/* A quotation inside an eyebrow keeps its normal capitalisation; the reference after it stays in caps */
.eyebrow-quote { text-transform: none; letter-spacing: 0.02em; }
.hero .eyebrow { font-weight: 500; } /* Proverbs line: medium, lighter than the other section labels */
.section-head { max-width: 720px; margin-bottom: var(--s-7); }
.section-head.center { text-align: center; margin-inline: auto; }
.section-head.center .eyebrow { justify-content: center; }
.lead { font-size: var(--fs-lg); color: var(--text-muted); line-height: 1.7; }
.dark .lead { color: var(--on-dark-muted); }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-sm); }
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem); margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-6); }
.prose li { margin-bottom: var(--s-2); }

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

.split { display: grid; gap: var(--s-7); align-items: center; }
.split > *, .grid > *, .article-wrap > *, .footer-grid > * { min-width: 0; }
.contact-list a, .site-footer a { overflow-wrap: anywhere; }
@media (min-width: 1024px) { .split { grid-template-columns: 1.05fr 1fr; gap: var(--s-8); } .split.reverse > :first-child { order: 2; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; background: #000; color: var(--on-dark); padding-block: calc(var(--header-h) + var(--s-8)) 0; isolation: isolate;
  /* Fill the screen (the fixed header sits over the top); min-height lets taller content grow instead of clipping */
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
}
/* Photo background (source: Media/Sydney background.jpg, resized for web) at 20% opacity over the hero's
   black base (not navy), with no colour layer over it. */
/* Fixed background: the photo is pinned to the viewport and clipped to .hero-backdrop (clip-path),
   a wrapper around the hero and the "How we help" section, so both scroll up over a still image.
   Works on iOS, unlike background-attachment: fixed. */
.hero-backdrop { position: relative; background: #000; clip-path: inset(0); isolation: isolate; }
.hero { background: transparent; }
.hero-backdrop::before {
  content: ""; position: fixed; inset: 0; z-index: -1; opacity: 0.2;
  filter: brightness(1.2) contrast(1.1); /* lifts the city lights so the hero feels less dim */
  background: url("../img/hero-sydney-sm.jpg") center / cover no-repeat;
}
@media (min-width: 768px) {
  .hero-backdrop::before { background-image: url("../img/hero-sydney.jpg"); }
}
/* A section over the fixed hero photo (inside .hero-backdrop): white heading and intro text */
.on-photo { color: var(--on-dark); }
.on-photo .section-head h2 { color: var(--white); }
.on-photo .section-head .lead { color: var(--on-dark-muted); }
.on-photo .section-head .eyebrow { color: var(--sky); }
/* Our services (home page): solid light blue panel over the fixed photo, with dark text */
.services-light { background: var(--white); color: var(--ink); } /* Who we help: white */
.services-light .section-head h2 { color: var(--ink); }
.hero-grid { display: grid; gap: var(--s-7); align-items: center; padding-bottom: var(--s-8); }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.15fr 1fr; gap: var(--s-8); padding-bottom: var(--s-9); } }
/* Short desktop/laptop screens: tighten spacing so the hero still fits in one screen */
@media (min-width: 1024px) and (max-height: 800px) {
  .hero { padding-top: calc(var(--header-h) + var(--s-6)); }
  .hero-grid { padding-bottom: var(--s-7); }
  .hero-ctas { margin-top: var(--s-6); }
  .hero-trust { margin-top: var(--s-5); }
}
.hero h1 { color: var(--white); }
.hero h1 { font-size: 2.25rem; } /* 36px on phones: the largest that keeps "Kingdom Capital," on one line */
@media (min-width: 768px) { .hero h1 { font-size: clamp(3rem, 5.2vw - 0.25rem, 4.5rem); } } /* up to 72px; scales down on narrow laptops so "Kingdom Capital," stays on one line */
@media (min-width: 1024px) { .hero h1 { font-size: clamp(2.75rem, 5.82vw - 0.91rem, 5rem); } } /* desktop: up to 80px (1920px+), scaled down in step on smaller screens; "Kingdom Capital," stays on one line */
.hero h1 .accent { color: var(--sky); }
/* Typewriter phrase (main.js): its own line with a fixed height, so the headline doesn't jump as letters come and go */
.typewriter { display: block; min-height: 1.15em; }
/* Cursor drawn just after the last typed letter (main.js wraps that letter in .typewriter-caret),
   so it stays on that letter's line and never changes where the words wrap */
.typewriter-caret { position: relative; }
/* Fixed lead-in ("helping you") matches the white headline; the typed words and cursor are brand blue */
.typewriter-prefix { color: var(--white); }
.typewriter-text, .typewriter-caret { color: var(--sky); }
.typewriter-caret::after { content: ""; position: absolute; left: calc(100% + 2px); top: 0.12em; width: 3px; height: 0.9em; background: currentColor; animation: tw-blink 1s steps(1) infinite; }
.typewriter-rest { visibility: hidden; }
@keyframes tw-blink { 50% { opacity: 0; } }
.hero .lead { color: var(--on-dark-muted); max-width: 56ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }
.hero-trust { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
.hero-trust li { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9375rem; color: var(--white); }
.hero-trust svg { width: 20px; height: 20px; color: var(--sky); flex: none; }

.page-hero { background: var(--ink); color: var(--on-dark); padding-block: calc(var(--header-h) + var(--s-8)) var(--s-8); position: relative; overflow: hidden; isolation: isolate; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 80% at 90% 0%, rgba(25, 180, 231, 0.25), transparent 70%); }
.page-hero h1 { color: var(--white); max-width: 22ch; }
.page-hero .lead { color: var(--on-dark-muted); max-width: 60ch; margin-bottom: 0; }
.breadcrumb { font-size: var(--fs-sm); margin-bottom: var(--s-4); color: var(--on-dark-muted); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--ink-3); }
.breadcrumb a { color: var(--on-dark-muted); }
.breadcrumb a:hover { color: var(--white); }

/* ---------- Cards ---------- */
.card {
  position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-6); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), border-color var(--dur);
}
.card h3 { margin-bottom: var(--s-2); }
.card p:last-child { margin-bottom: 0; }
a.card, .card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
a.card:hover, .card-link:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--sky); text-decoration: none; }
a.card .link-arrow { margin-top: auto; padding-top: var(--s-4); color: var(--sky-ink); }
.card .muted { margin-bottom: 0; }

.icon-badge {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--mist); color: var(--ink); margin-bottom: var(--s-5); flex: none;
}
.icon-badge svg { width: 26px; height: 26px; }
.dark .icon-badge, .icon-badge.on-dark { background: var(--sky-soft); color: var(--sky); }

.dark .card { background: var(--ink-2); border-color: var(--ink-3); box-shadow: none; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-5); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { counter-increment: step; position: relative; padding: var(--s-6); border-radius: var(--radius); background: #e5effb; border: 0; } /* light-blue cards on the white process section */
.steps li::before {
  content: counter(step, decimal-leading-zero); display: block; margin-bottom: var(--s-4);
  font-weight: 800; font-size: 2rem; line-height: 1; color: var(--sky); letter-spacing: -0.02em;
}
.steps h3 { color: var(--ink); }
.steps p { margin: 0; color: var(--text-muted); }
.process { background: var(--white); color: var(--ink); } /* Four simple steps: white section */

/* ---------- Checklist ---------- */
.checklist { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: grid; gap: var(--s-4); }
.checklist li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.checklist .tick { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sky); color: var(--ink); margin-top: 1px; }
.checklist .tick svg { width: 16px; height: 16px; }
.checklist strong { display: block; }
.checklist span.desc { color: var(--text-muted); }
.dark .checklist span.desc { color: var(--on-dark-muted); }

/* ---------- Feature panel ---------- */
.feature-panel { background: var(--ink); color: var(--on-dark); border-radius: var(--radius-lg); padding: var(--s-7) var(--s-6); position: relative; overflow: hidden; isolation: isolate; }
.feature-panel::after { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(25, 180, 231, 0.35), transparent 65%); z-index: -1; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 359px) { .stat-grid { gap: var(--s-3); } .stat { padding: var(--s-4); } .stat .stat-label { overflow-wrap: anywhere; } }
.stat { padding: var(--s-5); border-radius: var(--radius); background: var(--ink-2); border: 1px solid var(--ink-3); }
.stat .stat-value { display: block; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.125rem); font-weight: 800; color: var(--sky); line-height: 1.1; margin-bottom: 6px; }
.stat .stat-label { font-size: var(--fs-sm); color: var(--on-dark-muted); line-height: 1.45; display: block; }

/* ---------- Testimonials ---------- */
.testimonial { display: flex; flex-direction: column; height: 100%; }
.stars { display: flex; gap: 2px; color: #f5b301; margin-bottom: var(--s-4); }
.stars svg { width: 20px; height: 20px; }
.testimonial blockquote { margin: 0 0 var(--s-5); font-size: 1.0625rem; line-height: 1.7; }
.testimonial figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--sky); font-weight: 800; flex: none; }
.testimonial figcaption strong { display: block; line-height: 1.3; }
.testimonial figcaption span { font-size: var(--fs-sm); color: var(--text-muted); }

.placeholder-note {
  display: flex; gap: 10px; align-items: flex-start; margin-top: var(--s-5); padding: 12px 16px;
  border-radius: var(--radius-sm); background: #fff8e6; border: 1px dashed #c78a00; color: #5c3d00; font-size: var(--fs-sm);
}
.placeholder-note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }

/* ---------- Blog cards ---------- */
.post-card { padding: 0; overflow: hidden; }
.post-thumb { aspect-ratio: 16 / 9; display: grid; place-items: center; background: linear-gradient(135deg, var(--ink) 0%, #06264a 60%, #0b5b80 100%); color: var(--sky); position: relative; overflow: hidden; }
.post-thumb svg { width: 56px; height: 56px; position: relative; }
.post-thumb::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; border: 1px solid rgba(25, 180, 231, 0.35); right: -60px; bottom: -90px; }
.post-body { padding: var(--s-6); display: flex; flex-direction: column; flex: 1; }
.post-meta { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--s-2); display: flex; gap: 12px; flex-wrap: wrap; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--mist); color: var(--ink); font-weight: 600; font-size: 0.8125rem; }

/* ---------- FAQ / accordion ---------- */
.faq-list { display: grid; gap: var(--s-3); max-width: 860px; }
.faq-list.center { margin-inline: auto; }
.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color var(--dur), box-shadow var(--dur); }
.faq-item[open] { border-color: var(--sky); box-shadow: var(--shadow-sm); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 18px 22px; min-height: 56px; font-weight: 700; font-size: 1.0625rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { width: 32px; height: 32px; border-radius: 50%; background: var(--mist); display: grid; place-items: center; flex: none; transition: transform var(--dur) var(--ease-out), background-color var(--dur); }
.faq-item summary .chev svg { width: 18px; height: 18px; }
.faq-item[open] summary .chev { transform: rotate(180deg); background: var(--sky); }
.faq-item .faq-body { padding: 0 22px 20px; color: var(--text-muted); }
.faq-item .faq-body p:last-child { margin-bottom: 0; }
.faq-group + .faq-group { margin-top: var(--s-7); }
.faq-group h2 { font-size: 1.5rem; margin-bottom: var(--s-5); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--ink); color: var(--on-dark); border-radius: var(--radius-lg); padding: var(--s-7) var(--s-6); display: grid; gap: var(--s-6); align-items: center; position: relative; overflow: hidden; isolation: isolate; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 120% at 100% 0%, rgba(25, 180, 231, 0.32), transparent 65%); }
@media (min-width: 1024px) { .cta-band { grid-template-columns: 1.3fr 1fr; padding: var(--s-8); } }
.cta-band h2 { color: var(--white); }
.cta-band p { color: var(--on-dark-muted); margin: 0; }
.cta-actions { display: grid; gap: var(--s-3); }
@media (min-width: 640px) and (max-width: 1023px) { .cta-actions { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Service detail ---------- */
.chip-nav { position: sticky; top: var(--header-h); z-index: 10; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.chip-nav ul { list-style: none; margin: 0; padding: 12px 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.chip-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; background: var(--mist); color: var(--ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-fast); }
.chip-nav a:hover { background: var(--frost); }
.chip-nav a.is-active { background: var(--ink); color: var(--white); }

.service-block { display: grid; gap: var(--s-6); padding-block: var(--s-8); border-bottom: 1px solid var(--line); }
.service-block:last-of-type { border-bottom: 0; }
@media (min-width: 1024px) { .service-block { grid-template-columns: 1.2fr 1fr; gap: var(--s-8); } }
.service-block .icon-badge { width: 60px; height: 60px; }
.service-aside { background: var(--mist); border-radius: var(--radius); padding: var(--s-6); align-self: start; }
.service-aside h3 { font-size: 1.0625rem; }
.service-aside .checklist { margin-bottom: var(--s-5); }

/* ---------- Forms ---------- */
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s-6); box-shadow: var(--shadow); }
@media (min-width: 768px) { .form-card { padding: var(--s-7); } }
.form-grid { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .form-grid.two { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field { display: grid; gap: 6px; align-content: start; }
.field label, .field legend { font-weight: 600; font-size: 0.9375rem; }
.field .req { color: var(--error); margin-left: 2px; }
.field .hint { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.input, .select, .textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid #9fb3cf;
  background: var(--white); font-size: 1rem; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.textarea { min-height: 130px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--sky-ink); box-shadow: 0 0 0 4px rgba(25, 180, 231, 0.3); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--error); }
.field-error { display: none; color: var(--error); font-size: var(--fs-sm); font-weight: 600; margin: 0; }
.field-error.is-visible { display: flex; gap: 6px; align-items: center; }
.checkbox.has-error input { outline: 2px solid var(--error); outline-offset: 2px; }
.service-block { scroll-margin-top: calc(var(--header-h) + 72px); }
.field-error svg { width: 16px; height: 16px; flex: none; }
fieldset.field { border: 0; padding: 0; margin: 0; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid #9fb3cf; font-weight: 600; font-size: 0.9375rem; transition: all var(--dur-fast); }
.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); }
.choice input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.checkbox { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 0.9375rem; }
.checkbox input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ink); }
.error-summary { display: none; padding: var(--s-4) var(--s-5); border-radius: var(--radius-sm); border: 2px solid var(--error); background: #fff4f2; margin-bottom: var(--s-5); }
.error-summary.is-visible { display: block; }
.error-summary h2 { font-size: 1rem; margin-bottom: var(--s-2); color: var(--error); letter-spacing: 0; }
.error-summary ul { margin: 0; }
.error-summary a { color: var(--error); font-weight: 600; }
.form-status { display: none; padding: var(--s-5); border-radius: var(--radius); background: #e9f8f0; border: 1px solid #9fd9bb; color: var(--success); }
.form-status.is-visible { display: flex; gap: 12px; align-items: flex-start; }
.form-status svg { width: 24px; height: 24px; flex: none; }
.form-status h3 { color: var(--ink); margin-bottom: 4px; font-size: 1.125rem; }
.form-status p { color: var(--text-muted); margin: 0; }
.form-status.is-error { background: #fff4f2; border-color: #f1b5ad; color: var(--error); }
.form-footnote { font-size: var(--fs-sm); color: var(--text-muted); margin: var(--s-4) 0 0; }

/* ---------- Contact ---------- */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-5); }
.contact-list li { display: grid; grid-template-columns: 48px 1fr; gap: var(--s-4); align-items: start; }
.contact-list .icon-badge { width: 48px; height: 48px; margin: 0; border-radius: 12px; }
.contact-list .icon-badge svg { width: 22px; height: 22px; }
.contact-list strong { display: block; }
.contact-list a { font-weight: 600; }
.hours { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.hours th, .hours td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--ink-3); }
.hours th { font-weight: 600; color: var(--white); }
.hours td { color: var(--on-dark-muted); text-align: right; }

/* ---------- Calculators ---------- */
.tabs { display: flex; gap: 6px; padding: 6px; background: var(--mist); border-radius: 999px; width: fit-content; max-width: 100%; overflow-x: auto; margin-bottom: var(--s-6); }
.tab { min-height: 48px; padding: 10px 20px; border: 0; border-radius: 999px; background: transparent; font-weight: 700; font-size: 0.9375rem; color: var(--text-muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; transition: background-color var(--dur-fast), color var(--dur-fast); }
.tab svg { width: 18px; height: 18px; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--white); box-shadow: var(--shadow-sm); }
@media (max-width: 639px) {
  .tabs { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border-radius: 16px; overflow: visible; }
  .tab { white-space: normal; justify-content: center; text-align: center; line-height: 1.25; padding: 8px 6px; border-radius: 12px; font-size: 0.875rem; }
  .tab svg { display: none; }
}
@media (max-width: 1023px) { .calc-result { position: static; } }
.calc { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .calc { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.calc-inputs { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s-6); }
.calc-result { background: var(--ink); color: var(--on-dark); border-radius: var(--radius-lg); padding: var(--s-6); position: sticky; top: calc(var(--header-h) + 24px); overflow: hidden; isolation: isolate; }
.calc-result::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 100% 0%, rgba(25, 180, 231, 0.3), transparent 70%); }
.calc-result .result-label { font-size: var(--fs-sm); font-weight: 600; color: var(--on-dark-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; }
.calc-result .result-big { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); font-weight: 800; line-height: 1.05; color: var(--white); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-bottom: var(--s-2); }
.calc-result .result-sub { color: var(--on-dark-muted); font-size: 0.9375rem; margin-bottom: var(--s-5); }
.result-rows { list-style: none; margin: 0 0 var(--s-5); padding: 0; border-top: 1px solid var(--ink-3); }
.result-rows li { display: flex; justify-content: space-between; gap: var(--s-4); padding: 12px 0; border-bottom: 1px solid var(--ink-3); color: var(--on-dark-muted); font-size: 0.9375rem; }
.result-rows li strong { color: var(--white); font-variant-numeric: tabular-nums; text-align: right; }
.result-rows li.total { color: var(--white); font-weight: 700; }
.result-rows li.total strong { color: var(--sky); font-size: 1.125rem; }
.split-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--ink-3); margin-bottom: 10px; }
.split-bar span { display: block; height: 100%; transition: width var(--dur) var(--ease-out); }
.split-bar .seg-principal { background: var(--sky); }
.split-bar .seg-interest { background: var(--frost); }
.legend { display: flex; gap: var(--s-5); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--on-dark-muted); margin-bottom: var(--s-5); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.input-prefix { position: relative; }
.input-prefix > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--text-muted); pointer-events: none; }
.input-prefix .input { padding-left: 30px; }
.input-suffix { position: relative; }
.input-suffix > span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--text-muted); pointer-events: none; }
.input-suffix .input { padding-right: 56px; }
.range { width: 100%; accent-color: var(--sky-ink); height: 28px; margin: 0; }
.calc-disclaimer { font-size: 0.8125rem; color: var(--on-dark-muted); margin: 0; line-height: 1.55; }
.calc-note { font-size: var(--fs-sm); color: var(--text-muted); max-width: 80ch; }
[hidden] { display: none !important; }

/* ---------- Dedicated calculator pages ---------- */
/* Split banner: navy text panel on the left, property photo on the right */
.calc-hero { display: grid; background: var(--ink); color: var(--on-dark); }
.calc-hero-text { padding: calc(var(--header-h) + var(--s-7)) 16px var(--s-8); }
.calc-hero h1 { color: var(--white); max-width: 18ch; }
.calc-hero .lead { color: var(--on-dark-muted); max-width: 62ch; }
.calc-hero-media { min-height: 260px; background: url("../img/hero-sydney-sm.jpg") center / cover no-repeat; }
@media (min-width: 768px) {
  .calc-hero-text { padding-inline: 32px; }
  .calc-hero-media { background-image: url("../img/hero-sydney.jpg"); }
}
@media (min-width: 1024px) {
  .calc-hero { grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100svh; } /* full screen, text and photo 50/50 */
  /* Line the text up with the page content edge on wide screens */
  .calc-hero-text { align-self: center; padding: calc(var(--header-h) + var(--s-7)) var(--s-8) var(--s-8) max(32px, calc((100vw - var(--container)) / 2 + 32px)); }
  .calc-hero-media { min-height: 100%; }
}

/* Calculator: inputs on the left, outlined result card on the right */
.calc-section { background: var(--white); padding-block: var(--s-8); }
@media (min-width: 768px) { .calc-section { padding-block: var(--s-9); } }
.calc-layout { display: grid; gap: var(--s-7); max-width: 1500px; margin-inline: auto; }
@media (min-width: 1024px) { .calc-layout { grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: start; } }
.calc-form-title { font-size: 1.25rem; margin-bottom: var(--s-5); }
.calc-form .input, .calc-form .select { background: var(--white); }
.result-frame { background: var(--white); border: 1px solid var(--ink); border-radius: var(--radius-lg); padding: var(--s-4); }
@media (min-width: 1024px) { .result-frame { position: sticky; top: calc(var(--header-h) + 24px); } }
.result-panel { background: var(--ink); color: var(--on-dark); border-radius: var(--radius); padding: var(--s-6) var(--s-5); text-align: center; }
.result-panel .result-label { font-size: var(--fs-sm); font-weight: 600; color: var(--on-dark-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; }
.result-panel .result-big { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); font-weight: 800; line-height: 1.05; color: var(--white); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-bottom: var(--s-2); }
.result-panel .result-sub { color: var(--on-dark-muted); font-size: 0.9375rem; margin: 0; }
.result-details { padding: var(--s-5) var(--s-3) var(--s-2); }
.result-details .result-rows { border-top-color: var(--line); }
.result-details .result-rows li { border-bottom-color: var(--line); color: var(--text-muted); }
.result-details .result-rows li strong { color: var(--ink); }
.result-details .result-rows li.total { color: var(--ink); }
.result-details .result-rows li.total strong { color: var(--sky-ink); }
.result-details .calc-disclaimer, .result-details .legend { color: var(--text-muted); }
.result-details .split-bar { background: var(--line); }
.calc-section .calc-note { margin: var(--s-7) auto 0; max-width: 1120px; }

/* Calculators overview page */
.calc-cards { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .calc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .calc-cards { grid-template-columns: repeat(3, 1fr); } }

/* Hero mini calculator */
.hero-card { background: rgba(0, 0, 0, 0.2); border: 1px solid var(--ink-3); border-radius: var(--radius-lg); padding: var(--s-6); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); backdrop-filter: blur(10px); }
/* Mobile/tablet home page: the first screen shows only the headline and the RBA card — this card
   is collapsed to nothing until the visitor starts scrolling (main.js adds .is-revealed on first scroll) */
@media (max-width: 1023px) {
  .hero-card { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 500ms var(--ease-out), opacity 400ms var(--ease-out); }
  .hero-card.is-revealed { max-height: 2000px; opacity: 1; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) { .hero-card { transition: none; } }
.hero-card h2 { font-size: 1.375rem; color: var(--white); margin-bottom: var(--s-2); }
.hero-card .field label { color: var(--white); }
.hero-card .field-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hero-card output { font-weight: 800; color: var(--sky); font-variant-numeric: tabular-nums; }
.hero-card .range { accent-color: var(--sky); }
.hero-card .result { margin-top: var(--s-5); padding: var(--s-5); border-radius: var(--radius); background: var(--sky); border: 1px solid var(--sky); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hero-card .result .result-big { font-size: 2rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.hero-card .result small { color: var(--ink); font-size: var(--fs-sm); }
/* Two quick calculators in the hero card, switched with pill tabs */
.mini-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: var(--s-5); background: rgba(255, 255, 255, 0.08); border-radius: 999px; }
.mini-tab {
  flex: 1; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 999px; background: transparent;
  color: var(--on-dark-muted); font-weight: 700; font-size: 0.875rem; white-space: nowrap;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.mini-tab:hover { color: var(--white); }
/* Narrow phones: smaller tab labels that may wrap, so the card never grows wider than the screen */
@media (max-width: 479px) {
  .mini-tab { min-width: 0; padding: 8px 10px; font-size: 0.8125rem; line-height: 1.2; white-space: normal; }
}
.mini-tab[aria-selected="true"] { background: var(--sky); color: var(--ink); }
.mini-panel .form-grid { gap: var(--s-4); }
.mini-panel .input { color: var(--ink); } /* inputs would otherwise inherit the hero's white text */
.mini-panel .field label { font-size: 0.8125rem; font-weight: 600; }
.mini-panel .result { margin-top: var(--s-5); }
.mini-note { margin: var(--s-3) 0 var(--s-4); font-size: 0.75rem; color: var(--on-dark-muted); }

/* Right-hand hero column: RBA rate widget above the mini calculator */
.hero-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); min-width: 0; } /* cards shrink to fit narrow screens */
/* Compact card, about half the column width, aligned to the right */
.rba-widget {
  justify-self: end; width: max(50%, 240px); max-width: 100%;
  display: grid; grid-template-columns: 1fr; justify-items: start; gap: 4px;
  padding: var(--s-4) var(--s-5); border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.2); border: 1px solid transparent;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px);
}
/* Stacked, left-aligned: RBA / Official Cash Rate / rate */
.rba-text { display: contents; }
.rba-label { display: inline-flex; align-items: center; gap: 10px; font-size: 1.5625rem; line-height: 1.1; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; text-transform: uppercase; color: var(--sky); }
.rba-name { font-size: 0.875rem; font-weight: 400; color: var(--white); }
.rba-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 0 rgba(25, 180, 231, 0.6); animation: rba-pulse 2s ease-out infinite; flex: none; }
@keyframes rba-pulse { 70% { box-shadow: 0 0 0 8px rgba(25, 180, 231, 0); } 100% { box-shadow: 0 0 0 0 rgba(25, 180, 231, 0); } }
.rba-rate { margin-top: 2px; font-size: 2.25rem; font-weight: 800; line-height: 1; color: var(--white); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rba-rate span { font-size: inherit; color: inherit; }
.rba-link { justify-self: stretch; margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--ink-3); display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; white-space: nowrap; font-weight: 700; color: var(--sky); text-decoration: none; }
.rba-link svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.rba-link:hover { text-decoration: underline; }
.rba-link:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .rba-dot { animation: none; } }
/* Desktop: lift the RBA card up towards the menu bar, leaving the calculator where it is */
@media (min-width: 1024px) {
  .rba-widget { transform: translateY(-48px); width: 240px; }
  /* Calculator card lifted closer to the RBA card (transform, so the RBA card does not move) */
  .hero-card { transform: translateY(-32px); }
  /* Narrower right-hand column on desktop, kept against the right edge */
  .hero-aside { justify-self: end; width: 100%; max-width: 700px; }
}

/* Home hero on phones only (desktop and tablet unchanged) */
@media (max-width: 767px) {
  .hero { padding-top: calc(var(--header-h) + var(--s-6)); }
  .hero-grid { gap: var(--s-6); }
  /* Quote on one line, reference underneath, instead of two squeezed columns */
  .hero .eyebrow { display: block; line-height: 1.5; font-size: 0.6875rem; }
  .hero .eyebrow-quote { display: block; margin-bottom: 4px; }
  /* Equal, full-width buttons */
  .hero-ctas { flex-direction: column; align-items: flex-start; }
  .hero-ctas .btn { width: 100%; max-width: 280px; } /* equal, narrower buttons */
  /* RBA card full width so its text sits on one line */
  .rba-widget { justify-self: stretch; width: 100%; }
  .hero-card { padding: var(--s-5); }
}

/* ---------- Team ---------- */
.team-card { text-align: left; }
.team-photo { aspect-ratio: 4 / 5; border-radius: var(--radius); background: linear-gradient(160deg, var(--frost), var(--mist)); display: grid; place-items: center; margin-bottom: var(--s-5); color: var(--ink); overflow: hidden; }
.team-photo span { font-size: 3.5rem; font-weight: 800; color: var(--sky-ink); }
.team-card .role { color: var(--sky-ink); font-weight: 700; font-size: 0.9375rem; margin-bottom: var(--s-3); }

/* ---------- Article ---------- */
.article-header { max-width: 760px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; color: var(--on-dark-muted); font-size: var(--fs-sm); margin-top: var(--s-5); }
.article-wrap { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) { .article-wrap { grid-template-columns: minmax(0, 1fr) 320px; } }
.article-aside { align-self: start; position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: var(--s-5); }
.callout { padding: var(--s-5); border-radius: var(--radius); background: var(--mist); border-left: 4px solid var(--sky); margin: var(--s-6) 0; }
.callout p:last-child { margin: 0; }
.disclaimer-box { font-size: var(--fs-sm); color: var(--text-muted); border-top: 1px solid var(--line); padding-top: var(--s-5); margin-top: var(--s-7); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--on-dark-muted); padding-top: var(--s-8); font-size: 0.9375rem; }
.footer-grid { display: grid; gap: var(--s-7); padding-bottom: var(--s-7); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.site-footer h2 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--white); margin-bottom: var(--s-4); font-weight: 700; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.site-footer a { color: var(--on-dark-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer a svg { width: 18px; height: 18px; color: var(--sky); flex: none; }
.footer-blurb { max-width: 36ch; margin-top: var(--s-4); }
.socials { display: flex; gap: 8px; margin-top: var(--s-5); }
.socials a { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ink-2); border: 1px solid var(--ink-3); transition: background-color var(--dur-fast), border-color var(--dur-fast); }
.socials a:hover { background: var(--ink-3); border-color: var(--sky); }
.socials svg { width: 20px; height: 20px; color: var(--white); }
/* Mobile menu: social icons at the bottom, under the nav links — mobile only */
.primary-nav-social { display: none; }
@media (max-width: 1023px) {
  .primary-nav-social { display: flex; margin: var(--s-6) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--ink-3); }
  .primary-nav-social a { width: auto; height: auto; background: none; border: 0; border-radius: 0; }
  .primary-nav-social a:hover { background: none; }
  .primary-nav-social svg { width: 32px; height: 32px; }
}
.footer-legal { border-top: 1px solid var(--ink-3); padding-block: var(--s-6); font-size: 0.8125rem; line-height: 1.6; }
.footer-legal p { margin-bottom: var(--s-3); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-4); }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* ---------- Preloader (first page of a visit) ---------- */
.preloader { display: none; }
.is-preloading body { overflow: hidden; }
.is-preloading .preloader {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 1000;
  /* Plain solid near-black (#0F0E0C), no photo or blur */
  background: #0F0E0C;
  color: var(--white);
  transition: opacity 450ms var(--ease-out), visibility 0s linear 450ms;
  /* Failsafe: hide after 5s even if JavaScript never runs */
  animation: preloader-failsafe 0s linear 5s forwards;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader-inner { display: grid; justify-items: center; gap: 22px; }
.preloader-logo {
  width: clamp(88px, 22vw, 128px); height: auto;
  animation: preloader-fade-rise 900ms var(--ease-out) both;
}
.preloader.is-done .preloader-inner { transform: scale(0.96); transition: transform 450ms var(--ease-out); }

@keyframes preloader-fade-rise { from { opacity: 0; transform: translateY(22px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes preloader-failsafe { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .preloader-logo { animation: none !important; }
}

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  a.card:hover, .card-link:hover { transform: none; }
}

@media print {
  .site-header, .site-footer .socials, .chip-nav { display: none; }
  body { padding: 0; }
}

/* ---------- Our services: square photo tiles (home page) ---------- */
/* Large white uppercase title over a photo. Photos (Unsplash, free licence) are 900x900 in assets/img/service-*.jpg. */
/* Carousel: one row of tiles that slides sideways (swipe, trackpad or the arrow buttons; main.js).
   Tiles per view: about 1.3 on phones, 2.1 on tablets, 3.8 on desktop, so the next one peeks in. */
.service-tiles {
  --tile-gap: var(--s-4); --tiles-in-view: 1.2;
  display: grid; grid-auto-flow: column; gap: var(--tile-gap);
  grid-auto-columns: calc((100% - (var(--tiles-in-view) - 1) * var(--tile-gap)) / var(--tiles-in-view));
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.service-tiles::-webkit-scrollbar { display: none; }
.service-tiles > .service-tile { scroll-snap-align: start; }
@media (min-width: 768px) { .service-tiles { --tiles-in-view: 2.1; --tile-gap: var(--s-5); } }
@media (min-width: 1024px) { .service-tiles { --tiles-in-view: 3.2; } }
/* Heading on the left, arrow buttons on the right */
.services-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-7); }
.services-top .section-head { margin-bottom: 0; }
.carousel-controls { display: flex; gap: 10px; flex: none; }
.carousel-btn {
  width: 52px; height: 52px; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer;
  background: var(--ink); color: var(--white); border: 0;
  transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.carousel-btn svg { width: 22px; height: 22px; }
.carousel-prev svg { transform: rotate(180deg); }
.carousel-btn:hover { background: var(--sky); color: var(--ink); }
.carousel-btn:active { transform: scale(0.95); }
.carousel-btn:disabled { opacity: 0.3; cursor: default; background: var(--ink); color: var(--white); }
@media (max-width: 767px) { .carousel-controls { display: none; } } /* phones swipe */
.service-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-3); /* title and link sit together at the bottom */
  aspect-ratio: 1 / 1; padding: var(--s-5); border-radius: var(--radius-lg); overflow: hidden; isolation: isolate;
  color: var(--white); text-decoration: none; background: var(--ink); container-type: inline-size;
  box-shadow: none;
}
.service-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--ink) center / cover no-repeat;
  transition: transform 700ms var(--ease-out);
}
.tile-home-loans::before { background-image: url("../img/service-home-loans.jpg"); }
.tile-next-home::before { background-image: url("../img/who-next-home.jpg"); }
.tile-refinancers::before { background-image: url("../img/who-refinancers.jpg"); }
.tile-construction::before { background-image: url("../img/who-construction.jpg"); }
.tile-specialist::before { background-image: url("../img/self-employed.jpg"); }
.tile-investment::before { background-image: url("../img/service-investment.jpg"); }
/* Darker towards the bottom so the title and link stay readable on any photo */
.service-tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(0, 2, 18, 0) 40%, rgba(0, 2, 18, 0.45) 70%, rgba(0, 2, 18, 0.8) 100%);
}
.service-tile h3 {
  margin: 0; color: var(--white); text-transform: uppercase; font-weight: 800;
  font-size: clamp(1rem, 5.2cqi, 1.625rem); line-height: 1.1; letter-spacing: -0.01em; /* scales with the tile, 16-26px */
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.service-tile-more { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 700; color: var(--white); }
.service-tile-more svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.service-tile:hover::before, .service-tile:focus-visible::before { transform: scale(1.06); }
.service-tile:hover .service-tile-more, .service-tile:focus-visible .service-tile-more { color: var(--sky); }
.service-tile:hover .service-tile-more svg { transform: translateX(3px); }
/* Phones: the row runs to the screen edges, so the next tile peeks in from the right */
@media (max-width: 767px) {
  .service-tiles { --tile-gap: var(--s-3); margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; grid-auto-columns: 74%; }
  .service-tile { padding: var(--s-5); }
}
@media (prefers-reduced-motion: reduce) { .service-tile::before { transition: none; } .service-tiles { scroll-behavior: auto; } }

/* Loan solutions & services: the same photo tiles as the carousels above, as square boxes that all fit together in one screen */
.solution-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.solution-tile { aspect-ratio: 1 / 1; }
@media (min-width: 768px) { .solution-tiles { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) {
  /* Two rows of four, the same gap and tile proportions as the "Who we help" cards above */
  .solution-tiles { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
  #loan-solutions .section-head { margin-bottom: var(--s-5); }
}
.tile-sol-first-home::before { background-image: url("../img/service-home-loans.jpg"); }
.tile-sol-investment::before { background-image: url("../img/service-investment.jpg"); }
.tile-sol-recycling::before { background-image: url("../img/service-refinancing.jpg"); }
.tile-sol-structuring::before { background-image: url("../img/who-next-home.jpg"); }
.tile-sol-comparison::before { background-image: url("../img/who-refinancers.jpg"); }
.tile-sol-consolidation::before { background-image: url("../img/service-commercial.jpg"); }
.tile-sol-equity::before { background-image: url("../img/service-specialist.jpg"); }

.services-light { position: relative; }

/* ---------- Home page, desktop: every section fills the screen ---------- */
/* min-height (not height), so a section with more content than fits still grows instead of clipping.
   Content is centred in the space below the fixed menu bar. */
@media (min-width: 1024px) {
  .screen-section { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  .screen-section > .container { width: 100%; }
  .section.screen-section, .section-tight.screen-section { padding-top: calc(var(--header-h) + var(--s-6)); padding-bottom: var(--s-8); }
  /* Who we help + lender panel: half-height sections */
  .services-light.screen-section, .lenders.screen-section { min-height: 50vh; min-height: 50svh; }
}
/* Mobile/tablet: every section also fills the screen. 100dvh (not just vh/svh) so it tracks the
   browser chrome showing/hiding as the user scrolls, across the different mobile browsers. */
@media (max-width: 1023px) {
  .screen-section {
    min-height: 100vh; min-height: 100svh; min-height: 100dvh;
    display: flex; flex-direction: column; justify-content: center;
  }
  .screen-section > .container { width: 100%; }
  .section.screen-section, .section-tight.screen-section { padding-top: calc(var(--header-h) + var(--s-5)); padding-bottom: var(--s-6); }
  /* These sections' content is shorter than one screen, so forcing them to full height just leaves a
     block of empty space around it — let them size to their own content instead. */
  #who-we-help, #loan-solutions, section.lenders.screen-section, section.process.screen-section, #calculators {
    min-height: 0;
    padding-top: var(--s-8);
    padding-bottom: var(--s-8);
  }
}

/* ---------- Who we help: richer tiles (home page) ---------- */
.services-light > .container { position: relative; z-index: 1; }
.services-light .section-head h2 { max-width: 20ch; font-weight: 800; }
.services-light .section-head h2 .accent { color: var(--sky); } /* "goals." in brand blue */
/* Room above and below the row so the hover lift and shadows are not clipped by the scroller */
.service-tiles { padding-block: 10px 30px; margin-block: -10px -30px; }
/* One photo style: slightly muted colour, more contrast, and a light navy wash over every photo */
.service-tile::before { filter: saturate(0.82) contrast(1.06); }
.service-tile::after {
  background:
    linear-gradient(to bottom, rgba(0, 2, 18, 0.25) 0%, rgba(0, 2, 18, 0.1) 30%, rgba(0, 2, 18, 0.55) 62%, rgba(0, 2, 18, 0.9) 100%),
    rgba(12, 40, 92, 0.18);
}
.service-tile { transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out); }
.service-tile-desc { margin: var(--s-2) 0 var(--s-3); font-size: 0.875rem; line-height: 1.45; color: rgba(255, 255, 255, 0.86); max-width: 34ch; }
/* Sky bar along the bottom edge, drawn on hover */
.service-tile-body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--sky);
  transform: scaleX(0); transform-origin: left; transition: transform 450ms var(--ease-out);
}
.service-tile:hover .service-tile-body::after, .service-tile:focus-visible .service-tile-body::after { transform: scaleX(1); }
/* Desktop with a mouse: the line under the title slides up on hover, and the tile lifts */
@media (hover: hover) and (min-width: 1024px) {
  .service-tile-desc { max-height: 0; opacity: 0; margin-block: 0; overflow: hidden; transform: translateY(8px);
    transition: max-height 450ms var(--ease-out), opacity 350ms var(--ease-out), margin 450ms var(--ease-out), transform 450ms var(--ease-out); }
  .service-tile:hover .service-tile-desc, .service-tile:focus-visible .service-tile-desc { max-height: 4.5em; opacity: 1; margin-block: var(--s-2) var(--s-3); transform: none; }
  .service-tile:hover, .service-tile:focus-visible { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .service-tile, .service-tile-desc, .service-tile-body::after { transition: none; }
}
/* Desktop: tighter spacing so the whole section still fits one screen on a 1440x900 laptop */
@media (min-width: 1024px) {
  .services-light .services-top { margin-bottom: var(--s-5); }
  .section.services-light.screen-section { min-height: 100vh; min-height: 100svh; padding-top: calc(var(--header-h) + var(--s-4)); padding-bottom: var(--s-6); } /* full screen */
}

/* ---------- Who we help heading: split layout ---------- */
/* Heading on the left, a vertical divider, intro text on the right; arrow buttons sit below on the right.
   Phones: stacked, with a short horizontal divider between heading and text. */
.services-light .services-top { flex-direction: column; align-items: stretch; }
.services-light .services-top .section-head {
  max-width: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4);
}
.services-light .services-top .section-head h2 { margin: 0; }
.services-light .services-top .section-head .lead { margin: 0; padding-top: 0; border-top: 0; max-width: 60ch; }
.services-light .carousel-controls { align-self: flex-end; }
@media (min-width: 768px) {
  .services-light .services-top .section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 0; }
  .services-light .services-top .section-head h2 { max-width: none; }
  .services-light .services-top .section-head .lead { font-size: 1.125rem; line-height: 1.65; }
  .services-light .services-top .section-head h2 { padding-right: var(--s-7); }
  .services-light .services-top .section-head .lead {
    padding: var(--s-6) 0 var(--s-6) var(--s-7); border-top: 0; border-left: 0;
  }
}
@media (min-width: 1024px) {
  .services-light .services-top .section-head h2 { font-size: clamp(2.25rem, 1.2rem + 1.6vw, 3rem); padding-right: var(--s-8); }
  .services-light .services-top .section-head .lead { padding-left: var(--s-8); }
}

/* ---------- Hello: introduction under the hero (home page) ---------- */
/* Full screen (all sizes): an oversized "Hello." on the left, the introduction on the right. Phones: stacked. */
.hello { background: var(--white); color: var(--ink); min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.hello-grid { display: grid; gap: var(--s-6); align-items: center; width: 100%; }
.hello-word { margin: 0; font-size: clamp(4.5rem, 2rem + 12vw, 11rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; color: var(--ink); }
.hello-word .accent { color: var(--sky); }
.hello-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-6); }
@media (min-width: 1024px) {
  .hello-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-8); }
  .section.hello.screen-section { padding-top: calc(var(--header-h) + var(--s-6)); padding-bottom: var(--s-8); }
}
/* "Who we help." matches the Integrity / Service / Speed headings in the Hello section */
.services-light .services-top .section-head h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.75rem); line-height: 1.05; letter-spacing: -0.02em; }
/* "Who we help" button jumps here; on desktop the section's own top padding already clears the menu bar,
   so land with the section's top edge at the top of the screen */
@media (min-width: 1024px) { #who-we-help { scroll-margin-top: calc(-1 * (var(--header-h) + 16px)); } }

/* Hello: the three values as large stacked headings */
.hello-values { list-style: none; margin: 0; padding: 0; }
.hello-values li { padding-block: var(--s-4); }
.hello-value { display: block; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.hello-value-desc { display: block; margin-top: var(--s-2); font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); max-width: 64ch; }
.hello-values li:first-child { padding-top: 0; }
.hello-values .accent { color: var(--sky); }
.hello-col .hello-ctas { margin-top: var(--s-6); }

/* ---------- Lender panel (home page): navy band, text left, logo grid right ---------- */
/* Logos (assets/img/lenders/*.png) in full colour on white cards against the navy.
   Desktop: a full screen. Phones: text above a three-column grid. */
.lenders { background: var(--ink); color: var(--on-dark); position: relative; margin-top: -1px; } /* 1px overlap hides a hairline seam */
.lenders-split { display: grid; gap: var(--s-7); align-items: center; }
.lenders .section-head { margin: 0; max-width: 34rem; }
.lenders .section-head h2 { margin: 0 0 var(--s-4); font-weight: 800; color: var(--white); font-size: clamp(2rem, 1.3rem + 2.6vw, 3.75rem); line-height: 1.05; letter-spacing: -0.02em; }
.lenders .section-head h2 .accent { color: var(--sky); }
.lenders .section-head h2 .nowrap { white-space: nowrap; }
.lenders .section-head .lead { margin: 0; color: var(--on-dark-muted); font-size: 1.125rem; line-height: 1.65; }
.lender-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.lender-logo {
  display: grid; place-items: center; height: 64px; padding: 0 var(--s-3); border-radius: var(--radius);
  background: var(--white); border: 0;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.lender-logo img { display: block; width: auto; height: 28px; max-width: 100%; object-fit: contain; }
.lender-logo:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); }
@media (min-width: 768px) {
  .lender-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lenders-split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-8); }
  .section.lenders.screen-section { min-height: 100vh; min-height: 100svh; padding-top: calc(var(--header-h) + var(--s-6)); padding-bottom: var(--s-8); } /* full screen */
  .lender-logo { height: 72px; }
  .lender-logo img { height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .lender-logo { transition: none; } }
/* Who we help: one full screen at every size */
@media (min-width: 768px) and (max-width: 1023px) { /* tablets: full screen; phones use natural height (below) */
  .services-light { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  .services-light > .container { width: 100%; }
}
/* Desktop: on short screens, cap the tile size by the screen height so the section still fits one screen */
@media (min-width: 1024px) {
  .service-tiles { grid-auto-columns: min(calc((100% - (var(--tiles-in-view) - 1) * var(--tile-gap)) / var(--tiles-in-view)), 40vh); }
  @supports (height: 1svh) {
    .service-tiles { grid-auto-columns: min(calc((100% - (var(--tiles-in-view) - 1) * var(--tile-gap)) / var(--tiles-in-view)), 40svh); }
  }
}
@media (min-width: 1024px) and (max-height: 700px) {
  .service-tiles { grid-auto-columns: min(calc((100% - (var(--tiles-in-view) - 1) * var(--tile-gap)) / var(--tiles-in-view)), 36vh); }
}
/* Who we help: equal space above and below the content on desktop screens tall enough to allow it
   (shorter screens keep the menu-bar clearance at the top so nothing hides behind the bar) */
@media (min-width: 1024px) and (min-height: 780px) {
  .section.services-light.screen-section { padding-top: var(--header-h); padding-bottom: var(--header-h); }
}

/* ---------- Phones: Who we help + lender panel tuned for small screens ---------- */
@media (max-width: 767px) {
  /* Who we help: natural height, bigger and taller photo tiles you swipe through (next one peeks in) */
  .services-light { padding-block: var(--s-8); }
  .services-light .services-top { margin-bottom: var(--s-5); }
  .services-light .services-top .section-head .lead { font-size: 1rem; line-height: 1.6; }
  .service-tiles { grid-auto-columns: 84%; }
  .service-tile { aspect-ratio: 4 / 5; padding: var(--s-5); }
  .service-tile h3 { font-size: 1.25rem; }

  /* Lender panel: a two-row strip of logos you swipe sideways, instead of a long wall of logos */
  .lenders { padding-block: var(--s-8); }
  .lenders-split { gap: var(--s-6); }
  .lenders .section-head .lead { font-size: 1rem; line-height: 1.6; }
  .lender-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, 60px); grid-auto-columns: 40%;
    gap: var(--s-3); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent);
  }
  .lender-grid::-webkit-scrollbar { display: none; }
  .lender-logo { height: 60px; scroll-snap-align: start; }
  .lender-logo img { height: 26px; }
}
/* Lender panel: last tile completes the grid ("+ more lenders"), in brand blue instead of a logo */
.lender-logo.lender-more { background: var(--sky); }
.lender-more span { font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }

/* Lender panel on phones: four rows drifting in alternating directions (left, right, left, right). main.js builds
   .lender-marquee from the grid; tablet and desktop hide it and keep the still grid. */
.lender-marquee { display: none; }
@media (max-width: 767px) {
  .lenders { overflow-x: clip; }
  .lenders-split { grid-template-columns: minmax(0, 1fr); } /* keep the column at screen width; only the logo strip runs wider */
  .lender-grid.has-marquee { display: none; }
  .lender-marquee { display: grid; gap: var(--s-3); margin-inline: -16px; }
  .lender-mrow { overflow: hidden; }
  .lender-mtrack { display: flex; gap: var(--s-3); width: max-content; animation: lender-drift 120s linear infinite; }
  .lender-mrow--right .lender-mtrack { animation-direction: reverse; }
  .lender-mrow:active .lender-mtrack { animation-play-state: paused; } /* hold a finger on a row to pause it */
  .lender-mtrack .lender-logo { flex: none; width: 150px; height: 60px; }
}
@keyframes lender-drift { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--s-3) / 2)); } }
/* Hello: introduction under the big "Hello." */
.hello-text { margin: var(--s-6) 0 0; max-width: 46ch; font-size: 1.0625rem; line-height: 1.7; color: var(--text-muted); }
/* Calculator pages: large label above the heading (e.g. "LOAN REPAYMENT CALCULATOR") */
.eyebrow.calc-eyebrow-lg { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
/* Calculator pages: smaller main heading under the big label */
.calc-eyebrow-lg + h1 { font-size: 50px; line-height: 1.15; text-transform: uppercase; }
/* Calculator pages: on phones, the hero type scales down so it doesn't dominate the screen */
@media (max-width: 639px) {
  .eyebrow.calc-eyebrow-lg { font-size: 22px; }
  .calc-eyebrow-lg + h1 { font-size: 34px; line-height: 1.2; }
  .calc-hero .lead { font-size: 1rem; }
}
/* Borrowing power calculator: its own hero photo (city skyline over the river at dusk) */
.calc-hero-media.media-borrowing { background-image: url("../img/calc-borrowing-sm.jpg"); background-position: center 40%; }
@media (min-width: 768px) { .calc-hero-media.media-borrowing { background-image: url("../img/calc-borrowing.jpg"); } }
/* Refinance calculator: its own hero photo (city towers over the river on a clear day) */
.calc-hero-media.media-refinance { background-image: url("../img/calc-refinance-sm.jpg"); background-position: 45% center; }
@media (min-width: 768px) { .calc-hero-media.media-refinance { background-image: url("../img/calc-refinance.jpg"); } }
/* Stamp duty calculator: its own hero photo (city skyline above parkland) */
.calc-hero-media.media-stamp-duty { background-image: url("../img/calc-stamp-duty-sm.jpg"); background-position: 55% center; }
@media (min-width: 768px) { .calc-hero-media.media-stamp-duty { background-image: url("../img/calc-stamp-duty.jpg"); } }
/* Calculator pages: on desktop, where the text panel has room, the white heading sits on one line */
@media (min-width: 1024px) {
  .calc-eyebrow-lg + h1 { white-space: nowrap; max-width: none; }
}

/* ---------- Calculator pages: explainer band under the hero ("What is borrowing power?" etc.) ---------- */
/* Sky-blue band, half a screen tall, centred heading matching the site's standard heading style, with two short paragraphs. */
.calc-explainer { background: #19b4e7; color: var(--ink); min-height: 50vh; min-height: 50svh; display: flex; align-items: center; padding-block: var(--s-8); }
.calc-explainer-inner { width: 100%; text-align: center; }
.calc-explainer h2 { margin: 0 auto var(--s-5); max-width: 24ch; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; font-size: clamp(1.75rem, 1.1rem + 2vw, 2.75rem); color: var(--ink); }
.calc-explainer p { margin: 0 auto var(--s-4); max-width: 80ch; font-size: 1.0625rem; line-height: 1.7; color: var(--ink); }
.calc-explainer p:last-child { margin-bottom: 0; }
/* Hero calculator card: title and line above the tabs */
.hero-card-head { margin-bottom: var(--s-5); }
.hero-card .hero-card-title { margin: 0 0 var(--s-2); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); font-weight: 800; line-height: 1.2; color: var(--white); }
.hero-card-sub { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--on-dark-muted); }

/* ---------- Home hero, desktop: everything fits in one screen ---------- */
/* Compact single-row RBA card, tighter calculator card and less padding, so the hero (menu bar included)
   fits the screen height without scrolling. Phones and tablets are unchanged. */
@media (min-width: 1024px) {
  .hero { padding-top: calc(var(--header-h) + var(--s-5)); padding-bottom: var(--s-5); }
  .hero-grid { padding-bottom: 0; }
  .hero-aside { gap: var(--s-3); }
  /* RBA card: one row (dot RBA · Official Cash Rate · 4.60% · link) */
  .rba-widget { transform: none; width: auto; display: flex; align-items: center; gap: 14px; padding: 10px 18px; }
  .rba-label { font-size: 1.125rem; }
  .rba-rate { margin: 0; font-size: 1.5rem; }
  .rba-link { justify-self: auto; margin: 0; padding: 0 0 0 14px; border-top: 0; border-left: 1px solid var(--ink-3); }
  /* Calculator card */
  .hero-card { transform: none; padding: var(--s-5) var(--s-6); }
  .hero-card-head { margin-bottom: var(--s-4); }
  .hero-card .hero-card-title { font-size: 1.375rem; }
  .hero-card-sub { font-size: 0.875rem; }
  .mini-tabs { margin-bottom: var(--s-4); }
  .mini-panel .form-grid { gap: var(--s-3) var(--s-4); }
  .mini-panel .input { min-height: 44px; padding-block: 9px; }
  .mini-panel .result { margin-top: var(--s-4); padding: var(--s-4) var(--s-5); }
  .hero-card .result .result-big { font-size: 1.75rem; }
  .mini-note { margin: var(--s-2) 0 var(--s-3); }
}
@media (min-width: 1024px) {
  .rba-name, .rba-link { white-space: nowrap; }
}
/* Narrower laptops: drop the "Official Cash Rate" words so the RBA row stays on one line */
@media (min-width: 1024px) and (max-width: 1279px) {
  .rba-name { display: none; }
}
/* Short desktop screens (laptops with display scaling, e.g. 1366x657): tighter again */
@media (min-width: 1024px) and (max-height: 800px) {
  .hero { padding-top: calc(var(--header-h) + var(--s-3)); padding-bottom: var(--s-3); }
  .hero-card { padding: var(--s-4) var(--s-5); }
  .hero-card-head { margin-bottom: var(--s-3); }
  .hero-card .hero-card-title { font-size: 1.25rem; margin-bottom: 4px; }
  .hero-card-sub { font-size: 0.8125rem; line-height: 1.45; }
  .mini-tabs { margin-bottom: var(--s-3); }
  .mini-tab { padding-block: 7px; }
  .mini-panel .field label { font-size: 0.75rem; }
  .mini-panel .input { min-height: 40px; padding-block: 7px; }
  .mini-panel .result { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); }
  .hero-card .result .result-big { font-size: 1.5rem; }
  .mini-note { margin: var(--s-2) 0; }
}
/* Hero RBA card (desktop): "What it means for your loan" on its own line beneath the cash rate */
@media (min-width: 1024px) {
  .rba-widget { flex-wrap: wrap; row-gap: 2px; padding-block: 8px; }
  .rba-link { flex-basis: 100%; padding: 0; border-left: 0; }
}
/* Very short desktop screens (under 700px tall): trim the last few pixels */
@media (min-width: 1024px) and (max-height: 700px) {
  .hero-aside { gap: var(--s-2); }
  .hero-card-head { margin-bottom: var(--s-2); }
  .mini-panel .form-grid { gap: var(--s-2) var(--s-4); }
  .mini-note { margin: 4px 0 var(--s-2); }
}
/* Hero RBA card (desktop): half the width of the calculator card, aligned to its right edge */
@media (min-width: 1024px) {
  .rba-widget { width: 50%; justify-self: end; box-sizing: border-box; }
}
/* Half-width RBA card layout: RBA / Official Cash Rate on the left, rate on the right, link along the bottom */
@media (min-width: 1024px) {
  .rba-widget { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label rate" "name rate" "link link"; align-items: center; column-gap: 12px; row-gap: 0; padding: 8px 16px; }
  .rba-label { grid-area: label; font-size: 1rem; }
  .rba-name { grid-area: name; display: block; font-size: 0.75rem; line-height: 1.3; color: var(--on-dark-muted); }
  .rba-rate { grid-area: rate; font-size: 1.625rem; }
  .rba-link { grid-area: link; margin-top: 4px; font-size: 0.75rem; }
}
@media (min-width: 1024px) and (max-height: 700px) {
  .rba-widget { padding-block: 6px; }
  .rba-link { margin-top: 2px; }
  .hero-card { padding-block: var(--s-3); }
}
/* RBA card: bigger cash-rate figure (4.60%) */
.rba-rate { font-size: 2.75rem; }
@media (min-width: 1024px) { .rba-rate { font-size: 2.25rem; } }
@media (min-width: 1024px) and (max-width: 1279px) { .rba-link { white-space: normal; } } /* narrow RBA card: let the link wrap rather than spill out */

/* ---------- Steps section (home page): navy, continuing on from the lender panel ---------- */
/* Same navy as the lender panel; headline styled like "A loan for every client." (white, blue full stop). */
.process.process-dark { background: var(--ink); color: var(--on-dark); }
.process-dark .section-head h2 { color: var(--white); font-weight: 800; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.75rem); line-height: 1.05; letter-spacing: -0.02em; }
.process-dark .section-head h2 .accent { color: var(--sky); }
.process-dark .section-head .lead { color: var(--on-dark-muted); }
.process-dark .steps li { background: var(--ink-2); border: 1px solid var(--ink-3); }
.process-dark .steps h3 { color: var(--white); }
.process-dark .steps p { color: var(--on-dark-muted); }
/* Steps section, desktop: content centred, with equal space above and below */
@media (min-width: 1024px) {
  .section.process.screen-section { padding-top: var(--header-h); padding-bottom: var(--header-h); }
}
@media (min-width: 1024px) and (max-height: 780px) { /* short screens: keep clear of the menu bar, trim the bottom */
  .section.process.screen-section { padding-top: calc(var(--header-h) + var(--s-3)); padding-bottom: var(--s-5); }
}
@media (min-width: 1024px) and (min-height: 781px) {
  .section.process.screen-section { padding-top: calc(var(--header-h) - 8px); padding-bottom: calc(var(--header-h) + 8px); } /* evens out the heading's built-in top space */
}
@media (min-width: 1024px) and (max-height: 700px) {
  .section.process.screen-section { padding-top: calc(var(--header-h) + var(--s-2)); padding-bottom: 6px; }
}
/* Steps section, desktop: less space at the top (content starts higher); the section still fills the screen */
@media (min-width: 1024px) and (min-height: 861px) {
  .section.process.screen-section { justify-content: flex-start; padding-top: calc(var(--header-h) + var(--s-6)); padding-bottom: var(--s-8); }
}
/* Steps section: heading on the left, intro line on the right (as in "Who we help.") */
@media (min-width: 768px) {
  .process-dark .section-head { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 0; }
  .process-dark .section-head h2 { margin: 0; padding-right: var(--s-7); }
  .process-dark .section-head .lead { margin: 0; max-width: 60ch; font-size: 1.125rem; line-height: 1.65; padding-left: var(--s-7); }
}
@media (min-width: 1024px) {
  .process-dark .section-head h2 { padding-right: var(--s-8); }
  .process-dark .section-head .lead { padding-left: var(--s-8); }
}

/* Steps: seven steps plus a closing "Ready to start?" card, which completes the four-column grid on desktop */
.steps-seven .steps-cta { counter-increment: none; background: var(--sky); border-color: var(--sky); display: flex; flex-direction: column; }
.steps-seven .steps-cta::before { content: none; }
.process-dark .steps-seven .steps-cta h3 { color: var(--ink); }
.process-dark .steps-seven .steps-cta p { color: var(--ink); margin-bottom: var(--s-4); }
.steps-seven .steps-cta .btn { margin-top: auto; align-self: flex-start; background: var(--ink); color: var(--white); }
.steps-seven .steps-cta .btn:hover { background: var(--ink-2); box-shadow: none; }
@media (min-width: 1024px) {
  .steps-seven { gap: var(--s-4); }
  .steps-seven li { padding: var(--s-5); }
  .steps-seven li::before { font-size: 1.625rem; margin-bottom: var(--s-3); }
  .steps-seven h3 { font-size: 1.125rem; margin-bottom: var(--s-2); }
  .steps-seven p { font-size: 0.9375rem; line-height: 1.55; }
}
@media (min-width: 1024px) and (max-height: 860px) {
  .steps-seven { gap: var(--s-3); }
  .steps-seven li { padding: var(--s-4); }
  .steps-seven li::before { font-size: 1.375rem; margin-bottom: var(--s-2); }
  .steps-seven h3 { font-size: 1rem; margin-bottom: 4px; }
  .steps-seven p { font-size: 0.875rem; line-height: 1.5; }
  .process-dark .section-head { margin-bottom: var(--s-5); }
  .process-dark .steps-seven .steps-cta p { margin-bottom: var(--s-3); }
  .steps-seven .steps-cta .btn { min-height: 40px; padding-block: 8px; }
}
@media (min-width: 1024px) and (max-height: 700px) {
  .process-dark .section-head h2 { font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem); }
  .process-dark .section-head { margin-bottom: var(--s-4); }
}
/* "Ready to start?" card: same dark card as the steps, light-blue title, button turns light blue on hover */
.process-dark .steps-seven .steps-cta { background: var(--ink-2); border-color: var(--ink-3); }
.process-dark .steps-seven .steps-cta h3 { color: var(--sky); }
.process-dark .steps-seven .steps-cta p { color: var(--on-dark-muted); }
.process-dark .steps-seven .steps-cta .btn { background: transparent; color: var(--white); border: 2px solid var(--white); }
.process-dark .steps-seven .steps-cta .btn:hover, .process-dark .steps-seven .steps-cta .btn:focus-visible { background: var(--sky); border-color: var(--sky); color: var(--ink); box-shadow: none; }

/* Steps section on phones: one row of step cards you swipe through (the next card peeks in), so the whole
   section takes about one screen instead of a long scroll. "Ready to start?" is the last card. */
@media (max-width: 767px) {
  .process-dark { padding-block: var(--s-8); }
  .process-dark .section-head { margin-bottom: var(--s-5); }
  .process-dark .section-head .lead { font-size: 1rem; line-height: 1.6; }
  .steps-seven {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--s-3);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px;
  }
  .steps-seven::-webkit-scrollbar { display: none; }
  .steps-seven > li { scroll-snap-align: start; padding: var(--s-5); display: flex; flex-direction: column; }
  .steps-seven > li::before { font-size: 1.75rem; margin-bottom: var(--s-3); }
  .steps-seven h3 { font-size: 1.125rem; margin-bottom: var(--s-2); }
  .steps-seven p { font-size: 0.9375rem; line-height: 1.55; }
  .steps-hint { display: flex; align-items: center; gap: 8px; margin: var(--s-4) 0 0; font-size: 0.8125rem; color: var(--on-dark-muted); }
}
@media (min-width: 768px) { .steps-hint { display: none; } }

.steps-hint svg { width: 14px; height: 14px; }
/* Hero typewriter on phones: "helping you" on its own line and the typed phrase always starting below it,
   so the headline keeps the same shape for every phrase instead of jumping between layouts */
@media (max-width: 767px) {
  .hero .typewriter-prefix { display: block; }
}

/* "Run the numbers" (home page): all five calculators — one column on phones, two on tablets, five across on desktop */
.calc-tools { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .calc-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } .calc-tools > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .calc-tools { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); } .calc-tools > :last-child { grid-column: auto; } .calc-tools .card { padding: var(--s-5); } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .calc-tools { gap: var(--s-3); }
  .calc-tools .card { padding: var(--s-4); }
  .calc-tools .card h3 { font-size: 1.0625rem; }
  .calc-tools .card p { font-size: 0.875rem; line-height: 1.5; }
}
@media (min-width: 1024px) and (max-height: 800px) {
  .calc-tools .icon-badge { margin-bottom: var(--s-3); }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .section.calc-home.screen-section { padding-top: calc(var(--header-h) + var(--s-3)); padding-bottom: var(--s-4); }
  .calc-home .section-head { margin-bottom: var(--s-5); }
  .calc-home .section-head .lead { font-size: 1rem; }
  .calc-tools .card { padding: var(--s-4); }
  .calc-tools .card p { font-size: 0.875rem; line-height: 1.5; margin-bottom: var(--s-3); }
}

/* ---------- Run the numbers (home page): styled like the steps section ---------- */
/* Navy section (shares the steps' heading layout via .process-dark), dark cards with sky icons, a closing call card. */
.process-dark.calc-home .calc-tools .card { background: var(--ink-2); border: 1px solid var(--ink-3); box-shadow: none; color: var(--on-dark); transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.process-dark.calc-home .calc-tools a.card:hover { transform: translateY(-3px); border-color: var(--sky); }
.process-dark.calc-home .calc-tools .card h3 { color: var(--white); }
.process-dark.calc-home .calc-tools .card .muted { color: var(--on-dark-muted); }
.process-dark.calc-home .calc-tools .icon-badge { background: rgba(25, 180, 231, 0.14); color: var(--sky); }
.process-dark.calc-home .calc-tools .link-arrow { color: var(--sky); }
/* Grid: 1 column on phones, 2 on tablets, 3 across (two rows) on desktop */
.calc-home .calc-tools > :last-child { grid-column: auto; }
@media (min-width: 640px) { .calc-home .calc-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } .calc-home .calc-tools > :last-child { grid-column: auto; } }
@media (min-width: 1024px) { .calc-home .calc-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }
/* Closing call card (like "Ready to start?") */
.process-dark.calc-home .calc-cta { display: flex; flex-direction: column; }
.process-dark.calc-home .calc-cta h3 { color: var(--sky); }
.process-dark.calc-home .calc-cta .btn { margin-top: auto; align-self: flex-start; background: transparent; color: var(--white); border: 2px solid var(--white); }
.process-dark.calc-home .calc-cta .btn:hover, .process-dark.calc-home .calc-cta .btn:focus-visible { background: var(--sky); border-color: var(--sky); color: var(--ink); box-shadow: none; }
/* Section spacing on desktop, matching the steps section */
@media (min-width: 1024px) {
  .section.calc-home.screen-section { padding-top: var(--header-h); padding-bottom: var(--header-h); }
  .calc-home .section-head { margin-bottom: var(--s-6); }
}
@media (min-width: 1024px) and (max-height: 780px) {
  .section.calc-home.screen-section { padding-top: calc(var(--header-h) + var(--s-3)); padding-bottom: var(--s-4); }
  .calc-home .section-head { margin-bottom: var(--s-4); }
  .calc-tools .card { padding: var(--s-4); }
  .calc-tools .icon-badge { width: 40px; height: 40px; margin-bottom: var(--s-2); }
}
.calc-home.process-dark { background: var(--ink); color: var(--on-dark); }
@media (min-width: 1024px) and (min-height: 781px) {
  .section.calc-home.screen-section { padding-bottom: var(--s-7); }
}
@media (min-width: 1024px) and (max-height: 700px) {
  .section.calc-home.screen-section { padding-top: calc(var(--header-h) + var(--s-2)); padding-bottom: var(--s-2); }
  .calc-home .section-head h2 { font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem); }
  .calc-home .section-head .lead { font-size: 1rem; }
  .calc-tools .card p { margin-bottom: var(--s-2); }
}
@media (min-width: 1024px) and (min-height: 781px) and (max-height: 880px) {
  .calc-home .section-head { margin-bottom: var(--s-5); }
  .calc-tools .card { padding: var(--s-4) var(--s-5); }
  .calc-tools .icon-badge { width: 40px; height: 40px; margin-bottom: var(--s-2); }
  .section.calc-home.screen-section { padding-bottom: var(--s-5); }
}
/* Run the numbers on phones: one row of calculator cards you swipe through, like the steps */
@media (max-width: 639px) {
  .calc-home .calc-tools {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--s-3);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px;
  }
  .calc-home .calc-tools::-webkit-scrollbar { display: none; }
  .calc-home .calc-tools > * { scroll-snap-align: start; display: flex; flex-direction: column; }
  .calc-home .calc-tools .link-arrow { margin-top: auto; }
  .calc-home .section-head { margin-bottom: var(--s-5); }
  .calc-home .section-head .lead { font-size: 1rem; line-height: 1.6; }
}
@media (min-width: 640px) { .calc-home .steps-hint { display: none; } }
/* Run the numbers: white section (navy cards kept), dark heading and intro */
.calc-home.process-dark { background: var(--white); color: var(--ink); }
.calc-home.process-dark .section-head h2 { color: var(--ink); }
.calc-home.process-dark .section-head .lead { color: var(--text-muted); }
.calc-home.process-dark .steps-hint { color: var(--text-muted); }

/* Hero on phones: a portrait crop of the Sydney photo (Opera House + towers) shown more clearly, with a soft
   dark gradient (stronger at the top behind the menu and at the bottom behind the cards) to keep text readable */
@media (max-width: 767px) {
  .hero-backdrop::before {
    background-image: url("../img/hero-sydney-mobile.jpg"); background-position: center bottom;
    opacity: 0.6; filter: brightness(1.05) contrast(1.08) saturate(1.1);
  }
  .hero-backdrop::after {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 2, 18, 0.55) 0%, rgba(0, 2, 18, 0.2) 30%, rgba(0, 2, 18, 0.25) 60%, rgba(0, 2, 18, 0.7) 100%);
  }
}
/* Hero card title "Feeling the pinch from rate rises?" — larger on desktop */
@media (min-width: 1024px) { .hero-card .hero-card-title { font-size: 1.875rem; line-height: 1.15; } }
@media (min-width: 1024px) and (max-height: 800px) { .hero-card .hero-card-title { font-size: 1.5rem; } }
@media (min-width: 1024px) and (max-width: 1279px) { .hero-card .hero-card-title { font-size: 1.375rem; } } /* narrow laptops: keep the earlier size so the hero still fits */
@media (min-width: 1024px) and (max-width: 1279px) { .rba-widget .rba-name { display: none; } .rba-widget { grid-template-areas: "label rate" "link link"; } } /* narrow laptops: slimmer RBA card */
@media (min-width: 1024px) and (max-width: 1279px) { .rba-widget { width: 64%; } .rba-link { white-space: nowrap; } } /* narrow laptops: a little wider so the link stays on one line */
/* Narrow, short laptop screens (e.g. 1024x768): drop the line under the card title and tighten the note */
@media (min-width: 1024px) and (max-width: 1279px) and (max-height: 800px) {
  .hero-card-sub { display: none; }
  .hero-card-head { margin-bottom: var(--s-3); }
  .mini-note { font-size: 0.6875rem; line-height: 1.4; }
  .hero-card .result small { font-size: 0.8125rem; }
}
/* Home hero, desktop: lift the RBA card higher, away from the calculator card (only as far as the menu bar allows) */
@media (min-width: 1024px) and (min-height: 801px) { .rba-widget { transform: translateY(-48px); } }
@media (min-width: 1024px) and (min-height: 1000px) { .rba-widget { transform: translateY(-80px); } }
@media (min-width: 1024px) and (min-height: 760px) and (max-height: 800px) { .rba-widget { transform: translateY(-28px); } }
/* Hello: Proverbs 11:3 under the introduction — sky-blue quote with a small-caps reference, set off by a short line */
.hello-verse { margin: var(--s-5) 0 0; padding-left: var(--s-4); border-left: 3px solid var(--sky); display: grid; gap: 4px; }
.hello-verse-quote { font-size: 0.9375rem; font-style: italic; font-weight: 600; color: var(--sky-ink); line-height: 1.5; }
.hello-verse-ref { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
/* Hello: "We're Kingdom Capital." as a smaller heading under the big "Hello." */
.hello-subtitle { margin: var(--s-4) 0 0; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); }
.hello-subtitle .accent { color: var(--sky); }
.hello-subtitle + .hello-text { margin-top: var(--s-4); }

/* ---------- Borrower pages (first-home-buyers.html etc., linked from "Who we help") ---------- */
/* Same split hero as the calculator pages, with headings in the "We're Kingdom Capital." style: bold 800 + sky dot. */
.kc-heading { font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; font-size: clamp(1.75rem, 1.1rem + 2vw, 2.75rem); color: var(--ink); }
.kc-heading .accent, .bt-title .accent { color: var(--sky); }
.dark .kc-heading { color: var(--white); }
.bt-hero .bt-title { font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4.25rem); max-width: 16ch; }
.calc-hero-media.media-fhb { background-image: url("../img/service-home-loans.jpg"); }
.calc-hero-media.media-upgrade { background-image: url("../img/who-next-home.jpg"); }
.calc-hero-media.media-invest { background-image: url("../img/service-investment.jpg"); }
.calc-hero-media.media-refi { background-image: url("../img/who-refinancers.jpg"); }
.calc-hero-media.media-business { background-image: url("../img/self-employed.jpg"); }
.calc-hero-media.media-develop { background-image: url("../img/who-construction.jpg"); }

.bt-section { background: var(--white); }
.bt-consider { background: #e5effb; }
.bt-head { max-width: 760px; margin-bottom: var(--s-7); }
.bt-head .kc-heading { margin-bottom: var(--s-4); }
.bt-options { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .bt-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bt-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
.bt-option { display: flex; flex-direction: column; padding: var(--s-6); border-radius: var(--radius-lg); background: var(--ink-2); border: 1px solid var(--ink-3); color: var(--on-dark); }
.bt-option h3 { margin: 0 0 var(--s-3); font-size: 1.1875rem; font-weight: 800; color: var(--white); }
.bt-option p { margin: 0 0 var(--s-4); color: var(--on-dark-muted); font-size: 0.9375rem; line-height: 1.6; }
.bt-option .bt-best { margin: auto 0 0; padding-top: var(--s-4); border-top: 1px solid var(--ink-3); color: var(--white); font-size: 0.875rem; }
.bt-option .bt-best strong { color: var(--sky); }
/* Who-we-help pages: link across to the matching Services page's loan options */
.bt-head-links { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin: var(--s-4) 0 0; }
.bt-cross-link { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-4); font-weight: 700; font-size: 0.9375rem; color: var(--sky-ink); }
.bt-head-links .bt-cross-link { margin-top: 0; }
.bt-cross-link svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.bt-cross-link:hover svg, .bt-cross-link:focus-visible svg { transform: translateX(4px); }
.bt-consider .kc-heading { margin-bottom: var(--s-4); }
.bt-consider .checklist a { color: var(--sky-ink); font-weight: 600; }
.cta-band .kc-heading { margin-bottom: var(--s-3); }
.bt-disclaimer { margin: var(--s-6) 0 0; font-size: var(--fs-sm); color: var(--text-muted); max-width: 90ch; }
/* Borrower pages: "WHO WE HELP" label above the hero heading — 30px, extra bold */
.bt-hero .eyebrow { font-size: 30px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }

/* "Scroll down for more info" cue at the bottom centre of the full-screen hero (calculator and borrower pages, desktop) */
.scroll-cue { display: none; }
@media (min-width: 1024px) {
  .calc-hero { position: relative; }
  .dark .calc-hero a.scroll-cue, .calc-hero.dark a.scroll-cue, .calc-hero a.scroll-cue {
    position: absolute; left: 50%; bottom: var(--s-5); transform: translateX(-50%); z-index: 2;
    display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 18px 8px; border-radius: 999px; background: rgba(0, 2, 18, 0.55); backdrop-filter: blur(6px);
    color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  }
  .calc-hero a.scroll-cue:hover, .calc-hero a.scroll-cue:focus-visible { color: var(--sky); }
  .scroll-cue-arrow { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; }
  .scroll-cue-arrow svg { width: 14px; height: 14px; transform: rotate(90deg); }
  .scroll-cue-arrow { animation: cue-bob 1.8s ease-in-out infinite; }
}
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue-arrow { animation: none; } }

/* ---------- Sub-pages (calculators + Who we help): one shared format ---------- */
/* Hero label and heading use the same sizes on every sub-page: 30px label + 50px heading on desktop, 22px + 34px on phones.
   Borrower headings keep their sentence case and sky dot; they can wrap since names like "Refinancers and debt consolidators" are long. */
.bt-hero .eyebrow { letter-spacing: -0.02em; line-height: 1.05; }
.bt-hero .bt-title { font-size: 50px; line-height: 1.15; letter-spacing: -0.02em; max-width: 18ch; }
.calc-hero .eyebrow { margin-bottom: var(--s-3); }

/* Phones only: tighter heroes, a shorter photo, and swipe rows instead of long stacks */
@media (max-width: 639px) {
  .bt-hero .eyebrow { font-size: 22px; }
  .bt-hero .bt-title { font-size: 34px; line-height: 1.2; }
  .calc-hero-text { padding-top: calc(var(--header-h) + var(--s-6)); padding-bottom: var(--s-7); }
  .calc-hero .hero-ctas { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .calc-hero .hero-ctas .btn { justify-content: center; }
  .calc-hero-media { min-height: 220px; }

  .calc-explainer { min-height: 0; padding-block: var(--s-8); }
  .calc-explainer h2 { margin-bottom: var(--s-4); }
  .calc-explainer p { font-size: 1rem; line-height: 1.65; }

  /* Borrower pages: the six loan options swipe sideways (and auto-slide) instead of stacking six cards deep */
  .bt-head { margin-bottom: var(--s-6); }
  .bt-options { display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .bt-options::-webkit-scrollbar { display: none; }
  .bt-options > .bt-option { flex: 0 0 80%; scroll-snap-align: start; padding: var(--s-5); opacity: 1; transform: none; transition: none; } /* no fade-in: cards swiped into view show straight away */
  .bt-section .steps-hint { display: flex; color: var(--text-muted); }

  .cta-band { padding: var(--s-6) var(--s-5); gap: var(--s-5); }
  .cta-band .cta-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .cta-band .cta-actions .btn { justify-content: center; }
}
@media (min-width: 640px) { .bt-section .steps-hint { display: none; } }

/* ---------- Home: "Run the numbers in minutes" as big headings (same look as the Integrity / Service / Speed values) ---------- */
/* Each calculator is a bold heading with a sky dot, a short line underneath and a "Calculate" link. 3 x 2 on desktop, stacked on phones. */
.calc-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
@media (min-width: 640px) { .calc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); } }
@media (min-width: 1024px) { .calc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8) var(--s-7); } }
.calc-item { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
.calc-item .calc-item-title { margin: 0; font-size: clamp(2rem, 1.3rem + 2vw, 3.25rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); transition: color var(--dur-fast) var(--ease-out); }
.calc-item .calc-item-title .accent { color: var(--sky); }
.calc-item p { margin: var(--s-3) 0 var(--s-4); font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); max-width: 40ch; }
.calc-item-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9375rem; color: var(--sky-ink); }
.calc-item-link svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
a.calc-item:hover .calc-item-title, a.calc-item:focus-visible .calc-item-title { color: var(--sky); }
a.calc-item:hover .calc-item-link svg, a.calc-item:focus-visible .calc-item-link svg { transform: translateX(4px); }
.calc-item-cta .btn { margin-top: auto; align-self: flex-start; }
/* Short laptop screens: shrink the headings so the section still fits one screen */
@media (min-width: 1024px) and (max-height: 820px) {
  .calc-list { gap: var(--s-6) var(--s-7); }
  .calc-item .calc-item-title { font-size: 2.5rem; }
  .calc-item p { margin: var(--s-2) 0 var(--s-3); }
}
@media (max-width: 639px) {
  .calc-list { gap: var(--s-5); }
  .calc-item .calc-item-title { font-size: 2rem; }
  .calc-item p { margin: var(--s-2) 0 var(--s-2); }
}

/* Home calculators: split layout — heading, intro and "Book a free call" on the left, the five calculators in two columns on the right */
.calc-split { display: grid; gap: var(--s-7); }
.calc-home .calc-split-head { margin-bottom: 0; max-width: 520px; }
.calc-split-head .lead { margin-bottom: var(--s-4); }
.calc-split-note { margin: 0 0 var(--s-5); font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); max-width: 42ch; }
@media (min-width: 1024px) {
  .calc-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-9); align-items: center; }
  .calc-split .calc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-7); }
  .calc-split-head h2 { font-size: clamp(2.25rem, 1.2rem + 2.4vw, 3.75rem); line-height: 1.05; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .calc-split .calc-list { row-gap: var(--s-5); }
  .calc-split .calc-item .calc-item-title { font-size: 2rem; }
  .calc-split .calc-item p { margin: var(--s-2) 0 var(--s-2); }
}
@media (min-width: 1024px) { .calc-split .calc-item .calc-item-title { font-size: clamp(1.5rem, 0.2rem + 2vw, 2.75rem); } }
@media (min-width: 1024px) and (max-height: 820px) { .calc-split .calc-item .calc-item-title { font-size: clamp(1.5rem, 0.2rem + 2vw, 2.25rem); } }
/* Calculators split: the left column is a simple stack (heading, intro, note, button), not the two-column header used by the steps section */
.calc-home.process-dark .calc-split-head { display: block; max-width: 520px; margin-bottom: 0; }
.calc-home.process-dark .calc-split-head h2 { margin: 0 0 var(--s-4); padding: 0; }
.calc-home.process-dark .calc-split-head .lead { margin: 0 0 var(--s-5); padding: 0; max-width: 44ch; font-size: 1.0625rem; line-height: 1.65; }
.calc-home.process-dark .calc-split-head .calc-split-note { margin: 0 0 var(--s-5); padding-top: var(--s-5); border-top: 1px solid rgba(0, 2, 18, 0.12); max-width: 44ch; }
.calc-home.process-dark .calc-split-head .btn { display: inline-flex; }
@media (min-width: 1024px) {
  .calc-home.process-dark .calc-split-head h2 { font-size: clamp(2.25rem, 1rem + 2.2vw, 3.5rem); line-height: 1.05; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .calc-home.process-dark .calc-split-head h2 { font-size: clamp(2rem, 1rem + 1.8vw, 2.75rem); margin-bottom: var(--s-3); }
  .calc-home.process-dark .calc-split-head .lead { font-size: 1rem; margin-bottom: var(--s-4); }
  .calc-home.process-dark .calc-split-head .calc-split-note { margin-bottom: var(--s-4); padding-top: var(--s-4); }
}
@media (min-width: 1024px) { .calc-home.process-dark .calc-split-head { max-width: 640px; } } /* wide enough for the heading to sit on two lines */
@media (min-width: 1024px) and (max-height: 720px) { .calc-split .calc-list { row-gap: var(--s-4); } .calc-split .calc-item p { margin: var(--s-1) 0 var(--s-2); } } /* six calculators on short laptop screens */
@media (min-width: 1024px) and (max-height: 720px) { .calc-split .calc-item-link { font-size: 0.8125rem; } .calc-split .calc-item p { font-size: 0.875rem; line-height: 1.5; } }

/* Home calculators on phones: a compact tappable list (title, one line of text, round arrow) instead of tall stacked blocks */
@media (max-width: 639px) {
  .calc-split { gap: var(--s-6); }
  .calc-home.process-dark .calc-split-head h2 { font-size: 2rem; line-height: 1.1; margin-bottom: var(--s-3); }
  .calc-home.process-dark .calc-split-head .lead { font-size: 1rem; line-height: 1.6; margin-bottom: var(--s-4); }
  .calc-home.process-dark .calc-split-head .calc-split-note { font-size: 0.875rem; margin-bottom: var(--s-4); padding-top: var(--s-4); }
  .calc-home.process-dark .calc-split-head .btn { width: 100%; justify-content: center; }

  .calc-list { gap: 0; border-top: 1px solid rgba(0, 2, 18, 0.12); }
  /* How we help: no top divider here — it read as a hard line between this section and Who we help above it */
  #loan-solutions .calc-list { border-top: 0; }
  .calc-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid rgba(0, 2, 18, 0.12); }
  .calc-item .calc-item-title { grid-column: 1; font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.01em; }
  .calc-item p { grid-column: 1; margin: 4px 0 0; font-size: 0.875rem; line-height: 1.45; max-width: none; }
  /* The link label is hidden visually (the heading names the calculator); just the round arrow shows */
  .calc-item-link { grid-column: 2; grid-row: 1 / span 2; margin: 0; width: 40px; height: 40px; justify-content: center; border-radius: 50%; border: 1.5px solid var(--sky-ink); font-size: 0; color: var(--sky-ink); }
  .calc-item-link svg { width: 18px; height: 18px; }
  a.calc-item:active .calc-item-link { background: var(--sky); border-color: var(--sky); color: var(--ink); }
}
@media (max-width: 639px) { .calc-item p { display: none; } .calc-item { padding: var(--s-3) 0; min-height: 64px; } .calc-item-link { grid-row: 1; } } /* phones: title + arrow rows only */
/* Phones: "Not sure which to use?" and the Book a free call button move below the calculator list (after LMI) */
@media (max-width: 639px) {
  .calc-split { display: flex; flex-direction: column; gap: 0; }
  .calc-home.process-dark .calc-split-head { display: contents; }
  .calc-split-head h2 { order: 1; }
  .calc-home.process-dark .calc-split-head .lead { order: 2; margin-bottom: var(--s-5); }
  .calc-split .calc-list { order: 3; }
  .calc-home.process-dark .calc-split-head .calc-split-note { order: 4; margin: var(--s-5) 0 var(--s-4); padding-top: 0; border-top: 0; font-size: 0.9375rem; }
  .calc-home.process-dark .calc-split-head .btn { order: 5; }
}

/* Steps: "Ready to start?" is the hero card — white, bold navy heading with a sky "?", solid sky button */
.process-dark .steps-seven .steps-cta { background: var(--white); border-color: var(--white); position: relative; overflow: hidden; isolation: isolate; }
.process-dark .steps-seven .steps-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 90% at 100% 0%, rgba(25, 180, 231, 0.22), transparent 65%); }
.process-dark .steps-seven .steps-cta h3 { color: var(--ink); font-size: clamp(1.5rem, 1.1rem + 0.9vw, 2rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.process-dark .steps-seven .steps-cta h3 .accent { color: var(--sky); }
.process-dark .steps-seven .steps-cta p { color: var(--text-muted); }
.process-dark .steps-seven .steps-cta .btn { background: var(--sky); color: var(--ink); border: 2px solid var(--sky); }
.process-dark .steps-seven .steps-cta .btn:hover, .process-dark .steps-seven .steps-cta .btn:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--white); box-shadow: none; }

/* Footer: five columns on desktop now there's a Legal column (brand, Loans, Company, Legal, Get in touch) */
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 0.8fr 1.3fr; gap: var(--s-6); } }

/* Footer: availability line above the phone number, a light-blue "Book a chat" pill, brand-coloured social logos */
.site-footer .footer-hours { color: var(--white); font-weight: 700; line-height: 1.35; margin-bottom: 4px; }
.site-footer .footer-hours span { display: block; font-weight: 500; font-size: 0.875rem; color: var(--sky); }
.site-footer a.footer-book { margin-top: var(--s-3); padding: 10px 22px; border-radius: 999px; background: var(--sky); color: var(--ink); font-weight: 700; text-decoration: none; transition: background-color var(--dur-fast), color var(--dur-fast); }
.site-footer a.footer-book svg { color: currentColor; transition: transform var(--dur-fast); }
.site-footer a.footer-book:hover, .site-footer a.footer-book:focus-visible { background: var(--white); color: var(--ink); text-decoration: none; }
.site-footer a.footer-book:hover svg { transform: translateX(3px); }
.site-footer .socials { gap: 12px; }
.site-footer .socials a { width: 36px; height: 36px; min-height: 0; padding: 0; background: none; border: 0; border-radius: 8px; transition: transform var(--dur-fast); }
.site-footer .socials a:hover { background: none; transform: translateY(-2px); }
.site-footer .socials a svg { width: 32px; height: 32px; color: inherit; }
@media (min-width: 1024px) { #calculators { scroll-margin-top: calc(-1 * (var(--header-h) + 16px)); } } /* footer "Calculators" link: land on the full-screen section top, like #who-we-help */

/* Home FAQ heading: same bold style as "Run your numbers in minutes." (800 weight, tight tracking, sky full stop) */
.section-head .faq-heading { font-size: clamp(2rem, 1rem + 2.2vw, 3.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.section-head .faq-heading .accent { color: var(--sky); }
@media (min-width: 1024px) and (max-height: 820px) { .section-head .faq-heading { font-size: clamp(2rem, 1rem + 1.8vw, 2.75rem); } } /* short laptop screens, same as the calculators heading */
@media (min-width: 1024px) and (max-height: 820px) { section[aria-labelledby="faq-title"].screen-section { padding-bottom: var(--s-6); } section[aria-labelledby="faq-title"] .section-head { margin-bottom: var(--s-6); } } /* FAQ fits one screen on short laptops */

/* ---------- Home: Free property report (Sydney photo, address search with suggestions) ---------- */
.property-report { position: relative; isolation: isolate; color: var(--white); background: var(--ink) url("../img/hero-sydney-sm.jpg") center / cover no-repeat; padding-block: var(--s-9); }
@media (min-width: 768px) { .property-report { background-image: url("../img/hero-sydney.jpg"); } }
@media (min-width: 1024px) { .property-report { min-height: 70vh; min-height: 70svh; display: flex; align-items: center; } .property-report-inner { width: 100%; } }
.property-report::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 2, 18, 0.82), rgba(0, 2, 18, 0.45)); }
.property-report-eyebrow { margin: 0 0 var(--s-3); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sky); }
.property-report h2 { margin: 0 0 var(--s-4); max-width: 18ch; font-size: clamp(2rem, 1rem + 2.2vw, 3.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--white); }
.property-report h2 .accent { color: var(--sky); }
.property-report-lead { margin: 0 0 var(--s-6); max-width: 52ch; font-size: 1.0625rem; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.report-form { display: flex; max-width: 860px; }
.report-field { position: relative; flex: 1; min-width: 0; }
.report-input { width: 100%; height: 60px; padding: 0 20px; border: 0; border-radius: 12px 0 0 12px; background: var(--white); color: var(--ink); font: inherit; font-size: 1rem; }
.report-input::placeholder { color: #7a8597; }
.report-input:focus { outline: 3px solid var(--sky); outline-offset: 0; }
.report-submit { display: inline-flex; align-items: center; gap: 8px; height: 60px; padding: 0 28px; border: 0; border-radius: 0 12px 12px 0; background: var(--sky); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-fast); }
.report-submit svg { width: 18px; height: 18px; transition: transform var(--dur-fast); }
.report-submit:hover, .report-submit:focus-visible { background: var(--white); }
.report-submit:hover svg { transform: translateX(3px); }
.report-options { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; background: var(--white); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 2, 18, 0.28); max-height: 320px; overflow-y: auto; }
.report-options li { padding: 12px 14px; border-radius: 8px; color: var(--ink); font-size: 0.9375rem; cursor: pointer; }
.report-options li:hover, .report-options li[aria-selected="true"] { background: #e5effb; }
.report-error { min-height: 1.5em; margin: var(--s-3) 0 0; font-size: 0.875rem; font-weight: 600; color: #ffb4b4; }
.report-credit { margin: var(--s-2) 0 0; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); }
.report-credit a { color: inherit; }
@media (max-width: 639px) {
  .report-form { flex-direction: column; gap: var(--s-3); }
  .report-input { border-radius: 12px; }
  .report-submit { justify-content: center; border-radius: 999px; }
}
/* Property report: OpenStreetMap credit sits at the foot of the suggestions list (only while it's open) */
.report-options li.report-attrib { padding: 6px 14px 4px; font-size: 0.6875rem; color: #7a8597; text-align: right; cursor: default; background: none; }
.report-options li.report-attrib a { color: inherit; }
/* Free property report sits in its own .hero-backdrop, so the hero's fixed Sydney photo shows through as the page scrolls */
.hero-backdrop .property-report { background: transparent; }
.hero-backdrop .property-report::before { content: none; }
/* Free property report: its own fixed photo (aerial Sydney Harbour) with a navy wash so the white text reads clearly.
   The "-sm" export (900x601) is too low-res for this full-bleed background on most phones' pixel density, so every
   size uses the larger file. */
.property-backdrop::before { background-image: url("../img/property-report.jpg"); background-position: center; opacity: 1; filter: none; }
.property-backdrop::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(0, 2, 18, 0.8), rgba(0, 2, 18, 0.4)); }
@media (max-width: 767px) {
  .property-backdrop::after { background: linear-gradient(to bottom, rgba(0, 2, 18, 0.75), rgba(0, 2, 18, 0.55)); }
}
@media (max-width: 767px) { .hero-card .hero-card-title { font-size: 1.625rem; line-height: 1.15; letter-spacing: -0.01em; } } /* phones: larger "Feeling the pinch from rate rises?" */
.hc-yearly { display: block; margin-top: 2px; } /* rate rise card: "($1,199 a year)" under the monthly figure */
.hero .hero-ctas .btn-primary:hover, .hero .hero-ctas .btn-primary:focus-visible { box-shadow: none; } /* hero "Book a 15-min call": no glow on hover */
.tile-specialist::before { background-image: url("../img/who-business-owner.webp"); background-position: 62% center; } /* Business Owners card: cafe owner photo, cropped on the person */
.calc-hero-media.media-business { background-image: url("../img/who-business-owner.webp"); background-position: 68% 25%; } /* Business Owners page hero: cafe owner photo, cropped on the person */
/* How we help (same split layout as the calculators): wider list column and slightly smaller titles for the longer headings */
@media (min-width: 1024px) {
  .how-split .calc-split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); }
  .how-split .calc-split .calc-item .calc-item-title { font-size: clamp(1.5rem, 0.3rem + 1.75vw, 2.5rem); }
}
/* Free property report: same photo as the Refinance savings calculator page (city towers over the river) */
.property-backdrop::before { background-image: url("../img/calc-refinance-sm.jpg"); background-position: 45% center; }
@media (min-width: 768px) { .property-backdrop::before { background-image: url("../img/calc-refinance.jpg"); } }
@media (max-width: 767px) { .property-backdrop::before { background-image: url("../img/calc-refinance-sm.jpg"); background-position: 45% center; } }
.tile-home-loans::before { background-image: url("../img/who-first-home.webp"); background-position: 40% center; } /* First Home Buyers card: new two-storey home */
.calc-hero-media.media-fhb { background-image: url("../img/who-first-home.webp"); background-position: 45% center; } /* First home buyers page hero: new two-storey home */
@media (min-width: 1024px) { #loan-solutions { scroll-margin-top: calc(-1 * (var(--header-h) + 16px)); } } /* menu "Services" link: land on the full-screen How we help section top */

/* Services pages (How we help): hero photos */
.calc-hero-media.media-svc-home { background-image: url("../img/service-home-loans.jpg"); }
.calc-hero-media.media-svc-invest { background-image: url("../img/property-report-sm.jpg"); }
@media (min-width: 768px) { .calc-hero-media.media-svc-invest { background-image: url("../img/property-report.jpg"); } }
.calc-hero-media.media-svc-refi { background-image: url("../img/calc-refinance-sm.jpg"); background-position: 45% center; }
@media (min-width: 768px) { .calc-hero-media.media-svc-refi { background-image: url("../img/calc-refinance.jpg"); } }
.calc-hero-media.media-svc-equity { background-image: url("../img/who-next-home.jpg"); }
.calc-hero-media.media-svc-cashflow { background-image: url("../img/service-refinancing.jpg"); }
.calc-hero-media.media-svc-debt { background-image: url("../img/who-refinancers.jpg"); }
.section.about-top { padding-top: calc(var(--header-h) + var(--s-8)); } /* About page opens with the team section: clear the fixed menu bar */
/* About heading: "Meet Steven," large, then the role on its own line, smaller so it fits on one line on desktop */
.about-top .section-head { max-width: none; }
.about-role { display: block; margin-top: 0.15em; font-size: 0.7em; line-height: 1.2; }
@media (min-width: 1024px) { .about-role { white-space: nowrap; } }

/* About: Steven's profile card (photo, name, role) with the bio beside it */
.team-profile { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 768px) { .team-profile { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--s-8); } }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.team-card h3 { margin-bottom: 4px; }
.team-card .role { margin-bottom: 0; }
.team-bio p { font-size: 1.0625rem; line-height: 1.7; color: var(--text-muted); max-width: 62ch; }
@media (min-width: 768px) { .team-profile { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); } } /* larger profile photo */
@media (min-width: 768px) and (max-width: 1023px) { .team-profile { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--s-6); } } /* tablets: keep room for the bio */
/* About profile on desktop: photo card takes half the page and the photo fills the screen height */
@media (min-width: 1024px) {
  .team-profile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
  .team-card .team-photo { aspect-ratio: auto; height: calc(100vh - var(--header-h) - 200px); min-height: 520px; }
}

/* ---------- About: full-screen "Meet Steven" split (text left, photo filling the right half) ---------- */
.about-hero { display: grid; background: var(--white); }
.about-hero-text { padding: calc(var(--header-h) + var(--s-6)) 16px var(--s-7); }
.about-hero .about-role { white-space: normal; }
.about-hero .lead { margin: var(--s-4) 0 var(--s-5); color: var(--text-muted); max-width: 52ch; }
.about-name { margin: 0 0 var(--s-3); display: flex; flex-direction: column; gap: 2px; }
.about-name strong { font-size: 1.125rem; font-weight: 800; color: var(--ink); }
.about-name span { font-size: 0.9375rem; font-weight: 700; color: var(--sky-ink); }
.about-hero-media { background: linear-gradient(160deg, var(--frost), var(--mist)); min-height: 520px; overflow: hidden; }
.about-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
@media (min-width: 768px) { .about-hero-text { padding-inline: 32px; } }
@media (min-width: 1024px) {
  .about-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; min-height: 100svh; }
  .about-hero-text { align-self: center; padding: calc(var(--header-h) + var(--s-6)) var(--s-8) var(--s-7) max(32px, calc((100vw - var(--container)) / 2 + 32px)); }
  .about-hero-media { min-height: 100%; }
  .about-hero .about-role { font-size: 0.6em; }
}
.about-hero-media { position: relative; } .about-hero-media img { position: absolute; inset: 0; } /* photo fills the half without stretching the section past the screen */
/* About hero: photo on the left, text on the right, and the whole full-length photo visible (scaled to fit, not cropped) */
.about-hero-media img { object-fit: contain; object-position: center bottom; }
@media (min-width: 1024px) {
  .about-hero-media { order: -1; }
  .about-hero-text { padding: calc(var(--header-h) + var(--s-6)) max(32px, calc((100vw - var(--container)) / 2 + 32px)) var(--s-7) var(--s-8); }
}
@media (max-width: 1023px) { .about-hero-media { min-height: 640px; } }
.about-hero .about-role, .about-hero .about-role { font-size: 1em; line-height: 1.1; margin-top: 0; } @media (min-width: 1024px) { .about-hero .about-role { font-size: 1em; } } /* role line same size as "Meet Steven" */
@media (min-width: 1024px) and (max-height: 760px) { .about-hero-text { padding-top: calc(var(--header-h) + var(--s-4)); padding-bottom: var(--s-5); } .about-hero .lead { margin: var(--s-3) 0 var(--s-4); } } /* short laptops: keep the About intro inside one screen */
@media (min-width: 1024px) { .about-hero-text { align-self: start; } } /* About: "Meet Steven." starts at the top of the section */
/* About hero: "Meet Steven." on its own at the top of the text side; the role line, intro, name and bio stay centred below */
.about-hero .about-meet { margin: 0; }
.about-hero .about-role-line { margin: 0; line-height: 1.1; }
/* About: LinkedIn icon between the heading and the bio */
.about-linkedin { display: inline-flex; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; margin-top: var(--s-5); transition: transform var(--dur-fast) var(--ease-out); }
.about-linkedin:hover, .about-linkedin:focus-visible { transform: translateY(-2px); }
.about-linkedin svg { width: 100%; height: 100%; }
.about-hero-body { margin-top: var(--s-2); }
/* About: subheading under "Meet Steven." */
.about-subheading { margin: var(--s-3) 0 0; font-size: clamp(1.25rem, 0.9rem + 0.9vw, 1.75rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--sky-ink); max-width: 30ch; }
.about-hero .about-role-line { font-size: clamp(1.375rem, 0.9rem + 1.1vw, 2rem); margin-top: var(--s-2); } /* role line: smaller than "Meet Steven." but same bold style */
/* About: name and role sit on the photo, bottom right */
.about-caption { position: absolute; right: var(--s-5); bottom: var(--s-5); z-index: 1; margin: 0; padding: var(--s-3) var(--s-5); border-radius: var(--radius); background: rgba(0, 2, 18, 0.82); backdrop-filter: blur(6px); text-align: right; }
.about-caption strong { color: var(--white); }
.about-caption span { color: var(--sky); }
@media (max-width: 639px) { .about-caption { right: var(--s-3); bottom: var(--s-3); padding: var(--s-2) var(--s-4); } .about-caption strong { font-size: 1rem; } .about-caption span { font-size: 0.8125rem; } }
.about-caption strong { font-size: 1.625rem; line-height: 1.15; letter-spacing: -0.01em; } @media (max-width: 639px) { .about-caption strong { font-size: 1.25rem; } } /* larger name on the photo caption */
/* About hero with the full bio: a little more room for the text, and tighter text on short laptop screens */
@media (min-width: 1024px) {
  .about-hero { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .about-hero .team-bio p { max-width: 68ch; }
}
@media (min-width: 1024px) and (max-height: 860px) {
  .about-hero .team-bio p { font-size: 0.9375rem; line-height: 1.6; margin-bottom: var(--s-3); }
  .about-hero .lead { font-size: 1rem; margin: var(--s-3) 0; }
  .about-hero .about-role-line { font-size: clamp(1.25rem, 0.8rem + 1vw, 1.75rem); }
}
@media (min-width: 1024px) and (max-width: 1199px) and (max-height: 760px) { .about-hero .team-bio p { font-size: 0.875rem; line-height: 1.55; margin-bottom: var(--s-2); } .about-hero .lead { font-size: 0.9375rem; } } /* small laptops */
.about-hero-media { background: #e5effb; } /* About photo backdrop: flat light blue */

/* About: Our values (deep blue band with outlined cards, as in the brief) */
.about-values { background: #0d6eb3; color: var(--white); }
.about-values .kc-heading { color: var(--white); }
.about-values .kc-heading .accent { color: #8fdcf7; }
.value-grid { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .value-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.value-card { padding: var(--s-6) var(--s-5); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 14px; background: rgba(255, 255, 255, 0.07); text-align: center; }
.value-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--ink); margin-bottom: var(--s-4); }
.value-icon svg { width: 24px; height: 24px; color: var(--sky); }
.value-card h3 { margin: 0 0 var(--s-3); font-size: 1.25rem; font-weight: 700; color: var(--white); }
.value-card p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: rgba(255, 255, 255, 0.88); }
/* About: Our values restyled to match the home page 7 steps section (navy band, navy cards, white titles, muted text, sky accents) */
.about-values { background: var(--ink); color: var(--on-dark); }
.about-values .section-head .kc-heading { color: var(--white); font-weight: 800; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.75rem); line-height: 1.05; letter-spacing: -0.02em; }
.about-values .kc-heading .accent { color: var(--sky); }
.value-card { text-align: left; padding: var(--s-6); border-radius: var(--radius); background: var(--ink-2); border: 1px solid var(--ink-3); }
.value-icon { width: 48px; height: 48px; border-radius: var(--radius); background: rgba(25, 180, 231, 0.14); }
.value-icon svg { color: var(--sky); }
.value-card h3 { font-size: 1.125rem; font-weight: 800; color: var(--white); margin-bottom: var(--s-2); }
.value-card p { color: var(--on-dark-muted); font-size: 0.9375rem; line-height: 1.6; }
.value-card h3 { font-weight: 700; } /* same weight as the 7 steps titles */
.about-values .section-head { text-align: left; margin-inline: 0; } /* Our values heading aligned left, like the 7 steps heading */
/* About "Ready when you are." band: white instead of navy, with navy text and outline buttons */
.cta-band.cta-white { background: var(--white); color: var(--ink); border: 1px solid rgba(0, 2, 18, 0.12); }
.cta-band.cta-white::before { background: radial-gradient(60% 120% at 100% 0%, rgba(25, 180, 231, 0.12), transparent 65%); }
.cta-band.cta-white .kc-heading { color: var(--ink); }
.cta-band.cta-white p { color: var(--text-muted); }
.value-icon { width: auto; height: auto; background: none; border-radius: 0; display: block; margin-bottom: var(--s-4); } .value-icon svg { width: 40px; height: 40px; stroke-width: 1.5; } /* Our values: bigger icons, no tile behind them */
.value-icon svg { width: 56px; height: 56px; stroke-width: 1.4; } /* Our values: larger icons */
.about-values .section-head { max-width: none; } .about-values .section-head .kc-heading { white-space: nowrap; } @media (max-width: 639px) { .about-values .section-head .kc-heading { font-size: clamp(1.375rem, 6.6vw, 2rem); } } /* "Our commitment to you." on one line */
@media (min-width: 640px) { .about-values .section-head .kc-heading { font-size: clamp(1.75rem, 1rem + 2.4vw, 3rem); line-height: 1.15; letter-spacing: -0.01em; } } /* same size as the "No one should feel overwhelmed..." statement */

/* About bio: accreditations list */
.bio-cred-title { margin: var(--s-4) 0 var(--s-2); font-weight: 800; color: var(--ink); font-size: 0.9375rem; }
.bio-creds { margin: 0; padding-left: 1.1em; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.55; }
.bio-creds li { margin-bottom: 4px; }
.bio-creds li::marker { color: var(--sky); }
@media (min-width: 1024px) and (max-height: 800px) { .about-hero .team-bio p { font-size: 0.875rem; line-height: 1.5; margin-bottom: var(--s-2); } .about-hero .bio-cred-title { margin-top: var(--s-3); font-size: 0.875rem; } .about-hero .bio-creds { font-size: 0.8125rem; line-height: 1.45; } .about-hero-text { padding-top: calc(var(--header-h) + var(--s-3)); padding-bottom: var(--s-4); } } /* longer bio: fit short laptop screens */
@media (min-width: 1024px) { .about-hero .about-role-line, .about-hero .about-role-line { white-space: nowrap; font-size: clamp(0.875rem, 1.5vw, 1.75rem); letter-spacing: -0.015em; } } /* role line on one line on desktop */
.about-hero-body::before { content: ""; display: block; width: 56px; height: 3px; border-radius: 3px; background: var(--sky); margin: 0 0 var(--s-4); } /* About: short light-blue divider between the heading and the bio */
.about-hero-body::before { width: 50%; height: 2px; } /* divider runs half the width of the text */
.about-hero-body::before { width: calc(6.52 * clamp(1.75rem, 1.1rem + 2vw, 2.75rem)); max-width: 100%; } /* divider ends where "Meet Steven" ends (tracks the heading size) */
.about-hero .team-bio p { font-size: 0.9375rem; line-height: 1.6; } @media (min-width: 1024px) and (max-height: 800px) { .about-hero .team-bio p { font-size: 0.8125rem; line-height: 1.5; } } /* bio text same size as the accreditations list */

/* About: Credentials you can check (logo slot beside each credential) */
.cred-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.cred-list li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.cred-logo { display: grid; place-items: center; height: 64px; border-radius: var(--radius); background: #e5effb; color: var(--ink); font-weight: 800; letter-spacing: 0.04em; font-size: 0.9375rem; overflow: hidden; }
.cred-logo img { max-width: 84%; max-height: 48px; object-fit: contain; }
.cred-list strong { display: block; margin-bottom: 4px; color: var(--ink); }
.cred-list .desc { display: block; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; }
.cred-list .desc a { color: var(--sky-ink); font-weight: 600; }
@media (max-width: 479px) { .cred-list li { grid-template-columns: 72px minmax(0, 1fr); } .cred-logo { height: 52px; font-size: 0.8125rem; } }
/* Credentials: official MFAA and AFCA logos on a white tile */
.cred-list li { grid-template-columns: 120px minmax(0, 1fr); }
.cred-logo { height: 80px; }
.cred-logo.has-img { background: var(--white); border: 1px solid rgba(0, 2, 18, 0.1); }
.cred-logo.has-img img { max-width: 86%; max-height: 64px; width: auto; height: auto; }
@media (max-width: 479px) { .cred-list li { grid-template-columns: 88px minmax(0, 1fr); } .cred-logo { height: 64px; } .cred-logo.has-img img { max-height: 50px; } }
/* Credentials: bigger logos, no tile border */
.cred-list li { grid-template-columns: 160px minmax(0, 1fr); align-items: center; }
.cred-logo { height: 100px; }
.cred-logo.has-img { border: 0; background: none; }
.cred-logo.has-img img { max-width: 100%; max-height: 96px; }
@media (max-width: 479px) { .cred-list li { grid-template-columns: 104px minmax(0, 1fr); } .cred-logo { height: 76px; } .cred-logo.has-img img { max-height: 72px; } }
.cred-list .cred-num { display: block; margin-top: 2px; font-size: 0.875rem; font-weight: 700; color: var(--sky-ink); } /* membership number on its own line */
.cred-logo:not(.has-img) { background: none; font-size: 2.25rem; letter-spacing: 0.02em; color: var(--ink); } @media (max-width: 479px) { .cred-logo:not(.has-img) { font-size: 1.625rem; } } /* ASIC: larger word, no tile */
.cta-band.cta-white { border: 0; } /* About "Ready when you are." band: no border */
.story-dark { background: var(--ink-2); } /* About: "Why we started" on dark blue (a shade lighter than the navy commitment section below) */
.story-dark { background: var(--ink); } .story-dark .feature-panel { background: var(--ink-2); border: 1px solid var(--ink-3); } /* same navy as "Our commitment to you"; promise panel styled like those cards */
.story-dark .container > div { max-width: 820px; } /* story text reads at a comfortable line length */
.story-dark .story-statement { margin: 0 auto; max-width: 22ch; text-align: center; color: var(--white); font-size: clamp(1.75rem, 1rem + 2.4vw, 3rem); line-height: 1.15; } .story-dark .container > h2 { max-width: 22ch; } /* About: centred belief statement */
.story-dark .story-statement, .story-dark .container > h2 { max-width: 30ch; } /* three lines on desktop, as in the brief */
.story-dark .story-statement, .story-dark .container > h2 { max-width: 26ch; }
.story-dark .story-purpose { margin: var(--s-5) auto 0; max-width: 60ch; text-align: center; font-size: 1.0625rem; line-height: 1.7; color: var(--on-dark-muted); } .story-dark .story-attrib { margin: var(--s-4) auto 0; text-align: center; font-size: 0.9375rem; font-weight: 700; color: var(--sky); } /* About statement: purpose line and attribution */
.cta-band.cta-white::before { content: none; } /* About "Ready when you are." band: no glow */
/* Free property report: a full screen tall, with the search in the upper part so the suggestions list has room below */
.property-report { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-start; padding-top: calc(var(--header-h) + 12vh); padding-bottom: var(--s-8); }
.property-report-inner { width: 100%; }
@media (max-width: 767px) { .property-report { padding-top: calc(var(--header-h) + var(--s-8)); } }
/* Short screens: lift the search higher and keep the suggestions list inside the section (it scrolls if needed) */
@media (min-width: 768px) and (max-height: 820px) {
  .property-report { padding-top: calc(var(--header-h) + 3vh); }
  .property-report h2 { margin-bottom: var(--s-3); }
  .property-report-lead { margin-bottom: var(--s-4); }
  .report-options { max-height: 240px; }
}
@media (max-width: 767px) and (max-height: 720px) {
  .property-report { padding-top: calc(var(--header-h) + var(--s-5)); }
  .report-options { max-height: 180px; }
}
/* Free property report: contents centred in the full-height section (desktop and phones) */
.property-report { align-items: center; padding-top: calc(var(--header-h) + var(--s-5)); padding-bottom: var(--s-7); }
@media (max-width: 767px) { .property-report { padding-top: calc(var(--header-h) + var(--s-5)); } }
@media (min-width: 768px) and (max-height: 820px) { .property-report { padding-top: calc(var(--header-h) + var(--s-4)); } }
/* If there isn't room below the search box, the suggestions open upwards instead (set by main.js) */
.report-options.open-up { top: auto; bottom: calc(100% + 6px); }

/* About "Ready when you are.": Steven's photo on the left, heading + text + buttons on the right; buttons sized to their text */
.about-cta { grid-template-columns: minmax(0, 1fr); align-items: center; padding-block: var(--s-6); }
.about-cta-photo { display: flex; justify-content: center; }
.about-cta-photo img { display: block; width: 100%; max-width: 300px; height: auto; }
.about-cta-body .kc-heading { margin-bottom: var(--s-3); }
.about-cta-body p { margin: 0 0 var(--s-5); }
.cta-band.about-cta .cta-actions { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; gap: var(--s-3); }
.cta-band.about-cta .cta-actions .btn { width: auto; flex: 0 0 auto; justify-content: center; }
@media (min-width: 768px) {
  .about-cta { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-7); }
  .about-cta-photo img { max-width: 360px; }
}
@media (max-width: 767px) { .about-cta-photo img { max-width: 220px; } }
/* About CTA: bigger photo that sits flush on the bottom edge of the section (no gap above the footer) */
.about-cta-section { padding-bottom: 0; }
.about-cta { padding-bottom: 0; align-items: stretch; }
.about-cta-photo { align-items: flex-end; }
.about-cta-photo img { max-width: 460px; }
.about-cta-body { align-self: center; padding-bottom: var(--s-6); }
@media (max-width: 767px) {
  .about-cta-photo { order: 2; }
  .about-cta-photo img { max-width: 300px; }
  .about-cta-body { padding-bottom: 0; }
}

/* ---------- Free property report: step 2 (details) and thank-you ---------- */
.report-step2, .report-thanks { max-width: 860px; }
.report-chosen { margin: 0 0 var(--s-4); color: rgba(255, 255, 255, 0.9); font-size: 0.9375rem; }
.report-chosen strong { color: var(--white); }
.report-change { margin-left: 8px; padding: 0; border: 0; background: none; color: var(--sky); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.report-grid { display: grid; gap: var(--s-3) var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .report-grid .full { grid-column: 1 / -1; } }
.rf { margin: 0; padding: 0; border: 0; min-width: 0; }
.rf label, .rf legend { display: block; margin-bottom: 6px; font-size: 0.875rem; font-weight: 700; color: var(--white); }
.rf input[type="text"], .rf input[type="tel"], .rf input[type="email"] { width: 100%; height: 50px; padding: 0 16px; border: 2px solid transparent; border-radius: 10px; background: var(--white); color: var(--ink); font: inherit; }
.rf input:focus { outline: none; border-color: var(--sky); }
.rf input[aria-invalid="true"] { border-color: #ff8f8f; }
.rf-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.rf-choices label { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px; border: 1.5px solid rgba(255, 255, 255, 0.55); border-radius: 999px; font-weight: 600; cursor: pointer; }
.rf-choices input { accent-color: var(--sky); }
.rf-choices label:has(input:checked) { border-color: var(--sky); background: rgba(25, 180, 231, 0.2); }
.rf-err { min-height: 1.2em; margin: 4px 0 0; font-size: 0.8125rem; font-weight: 600; color: #ffb4b4; }
.rf-check { display: flex; gap: 10px; align-items: flex-start; margin: var(--s-3) 0 0; font-size: 0.875rem; line-height: 1.5; color: rgba(255, 255, 255, 0.9); cursor: pointer; }
.rf-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--sky); }
.rf-check a { color: var(--sky); }
.rf-err-check { margin-left: 28px; }
.rf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.report-send { margin-top: var(--s-4); border-radius: 12px; }
.report-send.is-sending { opacity: 0.7; cursor: progress; }
.report-thanks { outline: none; }
.report-thanks h3 { margin: 0 0 var(--s-3); font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); font-weight: 800; line-height: 1.15; color: var(--white); }
.report-thanks h3 .accent { color: var(--sky); }
.report-thanks p { margin: 0 0 var(--s-3); max-width: 60ch; color: rgba(255, 255, 255, 0.88); line-height: 1.65; }
.report-thanks-links { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.report-thanks-links a { color: var(--sky); font-weight: 700; }
@media (max-width: 639px) { .report-send { width: 100%; justify-content: center; border-radius: 999px; } }
/* Step 2 kept compact so the section still fits one screen: intro hidden, three fields across on desktop, no reserved error space */
.property-report.is-step2 .property-report-lead { display: none; }
.property-report.is-step2 h2 { margin-bottom: var(--s-3); }
.rf-err:empty { min-height: 0; margin: 0; }
@media (min-width: 1024px) {
  .report-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-grid .rf:nth-child(3) { grid-column: auto; }
}
@media (min-width: 1024px) { .hero-backdrop:not(.property-backdrop)::before { opacity: 0.3; } } /* home hero photo: 30% on desktop */
/* Who we help on desktop: all five cards in one row across the screen (no carousel, no arrows) */
@media (min-width: 1024px) {
  #service-track { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; }
  #who-we-help .carousel-controls { display: none; }
}
section[aria-labelledby="creds-title"] { padding-top: calc(var(--s-9) + 40px); padding-bottom: calc(var(--s-9) - 40px); } @media (max-width: 767px) { section[aria-labelledby="creds-title"] { padding-top: calc(var(--s-8) + 24px); padding-bottom: calc(var(--s-8) - 24px); } } /* Credentials: centred between the navy section above and the closing band below */
@media (max-width: 767px) { section[aria-labelledby="creds-title"] { padding-top: calc(var(--s-8) + 40px); padding-bottom: calc(var(--s-8) - 40px); } }
.story-dark { padding-top: calc(var(--s-9) + 48px); padding-bottom: calc(var(--s-9) - 48px); } @media (max-width: 767px) { .story-dark { padding-top: calc(var(--s-8) + 32px); padding-bottom: calc(var(--s-8) - 32px); } } /* quote centred between the top of the navy band and "Our commitment to you." */

/* ---------- Privacy policy: white page heading and dropdown sections ---------- */
.policy-top { padding-top: calc(var(--header-h) + var(--s-8)); padding-bottom: var(--s-5); }
.policy-title { font-size: clamp(2.25rem, 1.2rem + 3vw, 3.5rem); margin-bottom: var(--s-4); }
.policy-top .lead { max-width: 70ch; color: var(--text-muted); margin: 0; }
.policy-body { padding-top: var(--s-5); }
.policy-intro { max-width: 860px; margin: 0 0 var(--s-6); color: var(--text-muted); line-height: 1.7; }
.policy-item summary { gap: 12px; }
.policy-num { color: var(--sky); font-weight: 800; flex: none; }
.policy-item .faq-body p, .policy-item .faq-body li { line-height: 1.7; }
.policy-item .faq-body p { margin: 0 0 var(--s-3); }
.policy-item .faq-body ul { margin: 0 0 var(--s-3); padding-left: 1.2em; }
.policy-item .faq-body a { color: var(--sky-ink); font-weight: 600; }
/* Privacy dropdowns: full width, shorter rows, no borders, text aligned to the far left */
.policy-list { max-width: none; gap: 0; }
.policy-item, .policy-item[open] { border: 0; border-radius: 0; box-shadow: none; background: none; }
.policy-item summary { padding: 10px 0; min-height: 0; }
.policy-item .faq-body { padding: 0 0 var(--s-4); }
.policy-intro { max-width: none; }
.policy-intro-title { margin: 0 0 var(--s-2); font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; line-height: 1.4; color: var(--ink); } .policy-intro { margin-top: 0; } /* privacy: plain heading over the opening paragraph, styled like the dropdown headings */
.policy-item summary .chev, .policy-item[open] summary .chev { background: none; width: 24px; height: 24px; } .policy-item summary .chev svg { width: 22px; height: 22px; } /* privacy: plain arrows, no circle */

/* Credit guide: same layout as the privacy policy, with plain (always open) section headings */
.policy-doc h2 { margin: var(--s-6) 0 var(--s-2); font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; line-height: 1.4; color: var(--ink); }
.policy-doc h2:first-of-type { margin-top: var(--s-5); }
.policy-doc p, .policy-doc li { color: var(--text-muted); line-height: 1.7; }
.policy-doc p { margin: 0 0 var(--s-3); }
.policy-doc ul, .policy-doc ol { margin: 0 0 var(--s-3); padding-left: 1.2em; }
.policy-doc a { color: var(--sky-ink); font-weight: 600; }
.policy-doc p strong { color: var(--ink); } /* sub-labels such as the AFCA contact heading */


/* ---------- Home: "We're not just brokers" value cycle (ring on desktop, numbered list on phones) ---------- */
.journey { background: var(--white); display: flex; align-items: center; }
.journey-grid { display: grid; gap: var(--s-7); align-items: center; width: 100%; }
.journey-title { margin-bottom: var(--s-4); font-size: clamp(2rem, 1.1rem + 2.2vw, 3.25rem); line-height: 1.08; max-width: 20ch; }
.journey-lead { margin: 0 0 var(--s-6); max-width: 52ch; color: var(--text-muted); }
.journey-ring { display: block; width: 100%; height: auto; overflow: visible; }
.journey-num { font: 500 12px var(--font-sans, inherit); letter-spacing: .12em; opacity: .75; }
.journey-label { font: 700 15px var(--font-sans, inherit); }
.journey-centre { font: 800 24px var(--font-sans, inherit); }
.journey-sub { font: 500 12px var(--font-sans, inherit); letter-spacing: .08em; }
.journey-seg { cursor: pointer; outline: none; transition: transform .35s var(--ease-out), opacity .35s, filter .35s; }
.journey-seg:focus-visible path { stroke: var(--ink); stroke-width: 3; }
.journey-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.journey-step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.journey-step-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; }
.journey-step-icon svg { width: 26px; height: 26px; }
.journey-step-num { margin: 0 0 2px; font-size: 0.75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sky-ink); }
.journey-step h3 { margin: 0 0 6px; font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.journey-step h3 .accent { color: var(--sky); }
.journey-step p { margin: 0 0 var(--s-2); color: var(--text-muted); line-height: 1.6; }
.journey-step-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--sky-ink); }
.journey-step-link svg { width: 16px; height: 16px; transition: transform var(--dur-fast); }
.journey-step-link:hover svg { transform: translateX(3px); }

/* Phones and small tablets: hide the ring, show all six stages as a numbered list */
@media (max-width: 899px) {
  .journey-visual { display: none; }
  .journey-step:not(:last-child) .journey-step-icon { position: relative; }
  .journey-step:not(:last-child) .journey-step-icon::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: calc(100% + var(--s-5) * 2); background: var(--frost, #e5effb); transform: translateX(-50%); z-index: -1; }
}
/* Desktop: ring on the left; the panel on the right shows only the stage being hovered or tapped */
@media (min-width: 900px) {
  .journey-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
  .journey-visual { max-width: min(600px, calc(100vh - var(--header-h) - 80px)); justify-self: center; width: 100%; }
  .journey-step { display: none; padding: var(--s-5); border-radius: var(--radius-lg); background: #e5effb; }
  .journey-step.is-active { display: grid; animation: journey-panel .35s var(--ease-out); }
  .journey.has-active .journey-seg:not(.is-active) { opacity: .45; }
  .journey-seg.is-active { transform: scale(1.04); filter: drop-shadow(0 10px 18px rgba(0, 2, 18, .25)); }
}
@keyframes journey-panel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Animate in: segments appear one after another when the section scrolls into view */
@media (prefers-reduced-motion: no-preference) {
  .js .journey:not(.is-in) .journey-seg { opacity: 0; transform: scale(.85); }
  .js .journey.is-in .journey-seg { transition-delay: var(--d), var(--d), 0s; }
  .js .journey.is-in.has-active .journey-seg { transition-delay: 0s; }
  .js .journey:not(.is-in) .journey-arrow { opacity: 0; }
  .journey-arrow { transition: opacity .6s .7s; }
  @media (max-width: 899px) {
    .js .journey:not(.is-in) .journey-step { opacity: 0; transform: translateY(14px); }
    .journey-step { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: var(--d); }
  }
}
@media (min-width: 900px) { .journey-visual { max-width: min(600px, calc(100vh - var(--header-h) - 120px)); } } @media (min-width: 900px) and (max-height: 820px) { .section.journey.screen-section { padding-top: calc(var(--header-h) + var(--s-3)); padding-bottom: var(--s-4); } } /* journey: fit one screen on short laptops */

/* Journey, clearer version: prompt, bigger ring labels, all six steps listed with the selected one expanded */
.journey-hint { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--s-4); padding: 6px 12px 6px 10px; border-radius: 999px; background: #e5effb; color: var(--sky-ink); font-size: 0.875rem; font-weight: 700; }
.journey-hint svg { width: 18px; height: 18px; }
.journey-hint .hint-mobile { display: none; }
.journey-label { font-size: 17px; font-weight: 800; }
.journey-num { font-size: 13px; font-weight: 700; opacity: .85; }
.journey-centre-big { font-size: 34px; font-weight: 800; }
.journey-centre-sm { font-size: 18px; font-weight: 700; }
@media (max-width: 899px) {
  .journey-hint .hint-desktop { display: none; } .journey-hint .hint-mobile { display: inline; }
}
@media (min-width: 900px) {
  .journey-lead { margin-bottom: var(--s-4); }
  .journey-steps { gap: 6px; }
  .journey-step, .journey-step.is-active { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); align-items: center; padding: 8px 12px; border-radius: 12px; background: none; cursor: pointer; animation: none; transition: background-color .25s; outline: none; }
  .journey-step:hover { background: #f2f7fd; }
  .journey-step:focus-visible { box-shadow: 0 0 0 2px var(--sky); }
  .journey-step .journey-step-icon { width: 40px; height: 40px; border-radius: 10px; }
  .journey-step .journey-step-icon svg { width: 20px; height: 20px; }
  .journey-step-num { display: none; }
  .journey-step h3 { margin: 0; font-size: 1.0625rem; }
  .journey-step p, .journey-step .journey-step-link { display: none; }
  .journey-step.is-active { align-items: start; padding: 14px 16px; background: #e5effb; }
  .journey-step.is-active .journey-step-icon { width: 48px; height: 48px; }
  .journey-step.is-active { grid-template-columns: 48px minmax(0, 1fr); }
  .journey-step.is-active h3 { margin: 4px 0 6px; font-size: 1.25rem; }
  .journey-step.is-active p { display: block; animation: journey-panel .35s var(--ease-out); }
  .journey-step.is-active .journey-step-link { display: inline-flex; }
  .journey.has-active .journey-seg:not(.is-active) { opacity: .62; }
  .journey-seg.is-active { transform: scale(1.05); }
}
@media (min-width: 900px) and (max-height: 820px) {
  .journey-title { font-size: clamp(1.75rem, 1rem + 1.8vw, 2.5rem); margin-bottom: var(--s-3); }
  .journey-lead { font-size: 1rem; margin-bottom: var(--s-3); }
  .journey-hint { margin-bottom: var(--s-3); }
  .journey-step.is-active { padding: 10px 14px; }
  .journey-step.is-active p { margin-bottom: 4px; font-size: 0.9375rem; line-height: 1.5; }
}
/* Journey: keep the six-step list compact so the section fits one screen */
@media (min-width: 900px) {
  .journey-title { font-size: clamp(1.75rem, 0.9rem + 1.7vw, 2.6rem); max-width: 22ch; margin-bottom: var(--s-3); }
  .journey-lead { font-size: 1rem; line-height: 1.6; margin-bottom: var(--s-3); }
  .journey-hint { margin-bottom: var(--s-3); }
  .journey-steps { gap: 2px; }
  .journey-step, .journey-step.is-active { padding: 6px 10px; grid-template-columns: 34px minmax(0, 1fr); }
  .journey-step .journey-step-icon { width: 34px; height: 34px; border-radius: 9px; }
  .journey-step .journey-step-icon svg { width: 18px; height: 18px; }
  .journey-step h3 { font-size: 1rem; }
  .journey-step.is-active { padding: 12px 14px; grid-template-columns: 44px minmax(0, 1fr); }
  .journey-step.is-active .journey-step-icon { width: 44px; height: 44px; }
  .journey-step.is-active h3 { margin: 2px 0 4px; font-size: 1.125rem; }
  .journey-step.is-active p { margin-bottom: 4px; font-size: 0.9375rem; line-height: 1.5; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .journey-title { font-size: clamp(1.6rem, 0.8rem + 1.5vw, 2.25rem); }
  .journey-lead { display: none; }
  .journey-step.is-active { padding: 10px 12px; }
}
@media (min-width: 900px) and (max-height: 720px) { .journey-step { padding-block: 4px; } .journey-hint { margin-bottom: var(--s-2); padding-block: 4px; } }
/* Journey: light-blue section background (selected step card turns white so it still stands out); bigger ring on the left */
.journey { background: #e5effb; }
.journey-hint { background: var(--white); }
@media (min-width: 900px) {
  .journey-step:hover { background: rgba(255, 255, 255, 0.6); }
  .journey-step.is-active { background: var(--white); box-shadow: 0 6px 20px rgba(0, 2, 18, 0.06); }
  .journey-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-7); }
  .journey-visual { max-width: min(720px, calc(100vh - var(--header-h) - 56px)); }
}
@media (min-width: 900px) { .journey-visual { max-width: min(720px, calc(100vh - var(--header-h) - 110px)); } } @media (min-width: 900px) and (max-height: 820px) { .journey-visual { max-width: min(720px, calc(100vh - var(--header-h) - 56px)); } }
.journey-sub { font-size: 11px; letter-spacing: .06em; } .journey-centre-sm { font-size: 17px; } /* journey centre text fits inside the navy circle */
.journey-centre-big { font-size: 30px; } /* "6 steps / one broker." in the ring centre */
.journey-centre.journey-centre-sm { font-size: 22px; font-weight: 800; } /* "of your loan." under "6 stages" */
@media (min-width: 900px) and (max-height: 820px) { .journey-lead { display: block; font-size: 0.9375rem; line-height: 1.55; margin-bottom: var(--s-3); } } /* the intro carries the holistic message, so keep it on short screens */
.journey .journey-title { margin-bottom: var(--s-5); } /* more space between "More than just a loan." and the intro */
/* "More than just a loan." at the same size as the Hello values ("Speed."), on one line.
   The ring column is sized to the ring so the text side gets the rest; the heading scales down only if its column is too narrow. */
.journey .journey-title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.75rem); line-height: 1.05; letter-spacing: -0.02em; max-width: none; }
@media (min-width: 900px) {
  .journey { --ring: min(720px, calc(100vh - var(--header-h) - 110px), 46vw); }
  .journey-grid { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-6); }
  .journey-visual { width: var(--ring); max-width: none; }
  .journey-copy { container-type: inline-size; }
  .journey .journey-title { white-space: nowrap; font-size: min(clamp(2rem, 1.3rem + 2.6vw, 3.75rem), 8.6cqi); }
}
@media (min-width: 900px) and (max-height: 820px) {
  .journey { --ring: min(720px, calc(100vh - var(--header-h) - 56px), 46vw); }
}
@media (max-width: 899px) { .journey .journey-title { font-size: min(clamp(2rem, 1.3rem + 2.6vw, 3.75rem), 8.4vw); white-space: nowrap; } }
@media (min-width: 900px) and (max-height: 720px) { .journey .journey-title { margin-bottom: var(--s-4); } .journey-lead { font-size: 0.875rem; line-height: 1.5; } } /* small laptops: a little tighter so it stays one screen */

/* Hello: Steven's photo between the intro and the values, standing on the bottom edge of the section */
.hello-photo { display: flex; justify-content: center; }
.hello-photo img { display: block; width: auto; height: auto; max-width: 280px; }
@media (min-width: 1024px) {
  .section.hello.screen-section { padding-bottom: 0; }
  .hello-grid { flex: 1; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s-6); align-items: center; }
  .hello-intro, .hello-col { padding-bottom: var(--s-8); }
  .hello-photo { align-self: end; }
  .hello-photo img { max-width: none; height: min(calc(100vh - var(--header-h) - 60px), 760px); }
  .hello-word { font-size: clamp(4.5rem, 1rem + 8vw, 9rem); }
  .hello-value { font-size: clamp(1.75rem, 0.8rem + 2.2vw, 3.25rem); }
}
@media (max-width: 1023px) {
  .hello-col { order: 2; }
  .hello-photo { order: 3; }
  /* No forced full-screen height here either, and no bottom padding — the photo should sit flush
     against the next section, not centred with dead space above and below it. */
  .section.hello.screen-section { min-height: 0; padding-bottom: 0; }
}
/* Hello three columns: narrower photo column and tighter text so the section stays one screen */
@media (min-width: 1024px) {
  .hello-photo img { height: auto; width: min(24vw, 420px, calc((100vh - var(--header-h) - 40px) * 0.667)); }
  .hello-grid { gap: var(--s-5); }
  .hello-intro, .hello-col { padding-bottom: var(--s-6); }
  .hello-text { margin-top: var(--s-4); font-size: 0.9375rem; line-height: 1.6; }
  .hello-verse { margin-top: var(--s-4); }
  .hello-values li { padding-block: var(--s-2); }
  .hello-value { font-size: clamp(1.6rem, 0.7rem + 2vw, 3rem); }
  .hello-value-desc { font-size: 0.875rem; line-height: 1.5; margin-top: 4px; }
  .hello-col .hello-ctas { margin-top: var(--s-4); }
  .hello-word { font-size: clamp(4rem, 0.5rem + 7.5vw, 8.5rem); }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .hello-value-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hello-verse { display: none; }
}
@media (min-width: 1024px) { .hello-photo img { width: min(30vw, 540px, calc((100vh - var(--header-h) - 10px) * 0.667)); } } /* taller photo in the Hello section */
@media (min-width: 1024px) and (max-height: 740px) { .hello-photo img { width: min(28vw, 540px, calc((100vh - var(--header-h) - 10px) * 0.667)); } }
/* Hello photo: taller, and nudged a little to the left */
@media (min-width: 1024px) {
  .hello-photo img { width: min(36vw, 600px, calc((100vh - var(--header-h)) * 0.667)); }
  .hello-photo { transform: translateX(-40px); }
}
@media (min-width: 1024px) and (max-height: 740px) { .hello-photo img { width: min(32vw, 600px, calc((100vh - var(--header-h)) * 0.667)); } }
@media (min-width: 1024px) {
  .hello-photo { transform: none; }
  .hello-grid { grid-template-columns: minmax(0, 0.82fr) auto minmax(0, 1.18fr); gap: var(--s-5); }
  .hello-photo img { width: min(34vw, 600px, calc((100vh - var(--header-h)) * 0.667)); }
}
@media (min-width: 1024px) and (max-height: 920px) { .hello-photo img { width: min(32vw, 600px, calc((100vh - var(--header-h)) * 0.667)); } }
@media (min-width: 1024px) and (max-height: 740px) { .hello-photo img { width: min(30vw, 600px, calc((100vh - var(--header-h)) * 0.667)); } }
@media (min-width: 1024px) { .hello-photo img { width: min(34vw, 600px, calc((100vh - var(--header-h) - 40px) * 0.667)); } }
@media (min-width: 1024px) and (max-height: 920px) { .hello-photo img { width: min(32vw, 600px, calc((100vh - var(--header-h) - 40px) * 0.667)); } }
@media (min-width: 1024px) and (max-height: 740px) { .hello-photo img { width: min(30vw, 600px, calc((100vh - var(--header-h) - 40px) * 0.667)); } }
@media (min-width: 1024px) { .hello-grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } } /* photo centred: equal text columns either side */
/* Hello values: more breathing room between Integrity / Service / Speed and the buttons */
@media (min-width: 1024px) {
  .hello-values li { padding-block: var(--s-4); }
  .hello-values li:first-child { padding-top: 0; }
  .hello-value-desc { margin-top: var(--s-2); }
  .hello-col .hello-ctas { margin-top: var(--s-6); }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .hello-values li { padding-block: var(--s-3); }
  .hello-col .hello-ctas { margin-top: var(--s-5); }
}

/* Journey without the step list: ring shows on phones too; clicking a segment opens its page */
@media (max-width: 899px) {
  .journey-visual { display: block; max-width: 520px; margin: 0 auto; width: 100%; }
}
@media (min-width: 900px) { .journey-copy { align-self: center; } }
.journey-lead { margin-bottom: 0; }
@media (max-width: 899px) { .journey-copy { order: -1; } } /* phones: heading and intro above the ring */
/* Journey on phones (option A): compact ring with no empty gap above the heading, and a tap prompt under the ring */
.journey-tap { display: none; }
@media (max-width: 899px) {
  .section.journey.screen-section, .journey { min-height: 0; padding-top: calc(var(--header-h) + var(--s-5)); padding-bottom: var(--s-7); }
  .journey-grid { gap: var(--s-5); }
  .journey .journey-title { margin-bottom: var(--s-3); }
  .journey-lead { font-size: 0.9375rem; line-height: 1.55; }
  .journey-visual { max-width: 420px; }
  .journey-tap { display: block; margin: var(--s-3) 0 0; text-align: center; font-size: 0.875rem; font-weight: 700; color: var(--sky-ink); }
}
/* Journey heading: "just a loan." on its own line on phones only */
.journey-br { display: none; }
@media (max-width: 899px) { .journey-br { display: inline; } .journey .journey-title { font-size: min(2.75rem, 11vw); } }
/* Journey: Home Upgraders family photo behind the section, under a pale blue wash so the text and ring stay readable */
.journey { background: linear-gradient(90deg, rgba(229, 239, 251, 0.92), rgba(229, 239, 251, 0.78)), url("../img/who-next-home.jpg") center 30% / cover no-repeat, #e5effb; }
@media (max-width: 899px) { .journey { background: linear-gradient(rgba(229, 239, 251, 0.86), rgba(229, 239, 251, 0.86)), url("../img/who-next-home.jpg") center / cover no-repeat, #e5effb; } }
/* Journey: the family photo is pinned to the viewport (fixed) and clipped to the section, so it stays still while the page scrolls.
   Same technique as .hero-backdrop; works on iOS, unlike background-attachment: fixed. */
.journey, .section.journey { position: relative; clip-path: inset(0); isolation: isolate; background: #e5effb; }
.journey::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: url("../img/who-next-home.jpg") center 30% / cover no-repeat; }
.journey::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(229, 239, 251, 0.92), rgba(229, 239, 251, 0.78)); }
@media (max-width: 899px) {
  .journey, .section.journey { background: #e5effb; }
  .journey::before { background-position: center; }
  .journey::after { background: rgba(229, 239, 251, 0.86); }
}
.home-faq { max-width: 760px; margin-inline: auto; } /* home FAQ: centred column under the heading */
/* "Book a free call" buttons on the home page (How we help, 7 steps card, Run your numbers): black on hover, no glow */
.calc-split-head .btn-primary:hover, .calc-split-head .btn-primary:focus-visible,
.process-dark .steps-seven .steps-cta .btn:hover, .process-dark .steps-seven .steps-cta .btn:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--white); box-shadow: none; }
/* Journey ring on phones: same auto-cycling highlight as desktop (one stage pops out, the others dim) */
@media (max-width: 899px) {
  .journey.has-active .journey-seg:not(.is-active) { opacity: .62; }
  .journey-seg.is-active { transform: scale(1.05); filter: drop-shadow(0 10px 18px rgba(0, 2, 18, .25)); }
}
.journey-seg { transition-duration: .6s, .6s, .6s; } /* journey highlight: slower, smoother change between stages */
/* Home FAQ section: teal background (#0a6f94) with white text */
.faq-home-section { background: #0a6f94; color: var(--white); }
.faq-home-section .faq-heading { color: var(--white); }
.faq-home-section .policy-item summary, .faq-home-section .policy-item summary .chev { color: var(--white); }
.faq-home-section .policy-item .faq-body { color: rgba(255, 255, 255, 0.85); }
.faq-home-section .link-arrow { color: var(--white); }

/* Home FAQ: questions on the left, enquiry form on the right */
.faq-split { display: grid; gap: var(--s-7); align-items: start; }
.faq-split .section-head { text-align: left; margin-inline: 0; }
.faq-split .home-faq { max-width: none; margin-inline: 0; }
.faq-split-more { margin: var(--s-5) 0 0; }
.home-form-card { padding: var(--s-6); color: var(--ink); }
.home-form-title { font-size: 1.75rem; margin: 0 0 var(--s-2); }
.home-form-card .muted { margin: 0 0 var(--s-4); }
.home-form-card .textarea { min-height: 96px; }
@media (min-width: 1024px) {
  .faq-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-8); }
}
@media (max-width: 599px) { .home-form-card { padding: var(--s-5); } }
/* Home contact form: same teal as the section, thin white borders, white text */
.home-form-card { background: transparent; border: 0.5px solid var(--white); box-shadow: none; color: var(--white); }
.home-form-card .home-form-title, .home-form-card label, .home-form-card legend { color: var(--white); }
.home-form-card .muted, .home-form-card .hint { color: rgba(255, 255, 255, 0.8); }
.home-form-card .input, .home-form-card .select, .home-form-card .textarea { background-color: transparent; border: 0.5px solid var(--white); color: var(--white); box-shadow: none; }
.home-form-card .input:focus, .home-form-card .select:focus, .home-form-card .textarea:focus { border-color: var(--white); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); outline: none; }
.home-form-card .select option { color: var(--ink); }
.home-form-card .checkbox a { color: var(--white); text-decoration: underline; }
.home-form-card .form-status { color: var(--white); }
.home-form-card .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.home-form-card .req { color: var(--white); } /* required-field stars readable on teal */
.home-form-card, .home-form-card:hover { border: 0; padding: 0; } /* home contact form: no outer outline (field borders kept); no inset now there is no box */
.home-form-dot { color: var(--ink); } /* "Send us a message." full stop in dark blue */
.home-form-card .home-form-title, .home-form-card .home-form-title .accent { color: var(--ink); } .home-form-card .home-form-title .home-form-dot { color: var(--white); } /* "Send us a message" dark blue, full stop white */
.home-form-card .home-form-title, .home-form-card .home-form-title .accent { color: var(--white); } .home-form-card .home-form-title .home-form-dot { color: var(--sky); } /* "Send us a message" white, full stop light blue */
/* "Send us a message." same size as "Got a question?" */
.home-form-card .home-form-title { font-size: clamp(2rem, 1rem + 2.2vw, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: var(--s-3); }
@media (min-width: 1024px) and (max-height: 820px) { .home-form-card .home-form-title { font-size: clamp(2rem, 1rem + 1.8vw, 2.75rem); } }

/* Home contact form: prompts sit inside the fields (labels kept for screen readers) */
.home-form-card .input::placeholder, .home-form-card .textarea::placeholder { color: rgba(255, 255, 255, 0.75); opacity: 1; }
.home-form-card .select:invalid { color: rgba(255, 255, 255, 0.75); }
.home-faq .policy-item summary { font-size: 0.9375rem; line-height: 1.5; } /* home FAQ questions: 15px (was 17px) */
.home-form-card .btn[type="submit"]:hover, .home-form-card .btn[type="submit"]:focus-visible { background: var(--white); border-color: var(--white); color: var(--ink); box-shadow: none; } /* home form Submit: white on hover */

/* Home FAQ on phones: 5 key questions, "Show all questions" reveals the other 7 */
.faq-show-all { display: none; }
@media (max-width: 767px) {
  .home-faq:not(.is-all) .faq-more { display: none; }
  .faq-show-all { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-4); padding: 10px 18px; border: 0.5px solid var(--white); border-radius: 999px; background: transparent; color: var(--white); font: inherit; font-size: 0.9375rem; font-weight: 700; cursor: pointer; }
  .faq-show-all svg { width: 18px; height: 18px; }
  .faq-show-all[hidden] { display: none; }
}
/* Home form thank-you / error message: no box, white text on the teal section */
.home-form-card .form-status, .home-form-card .form-status.is-error { background: none; border: 0; padding: 0; color: var(--white); }
.home-form-card .form-status h3, .home-form-card .form-status p, .home-form-card .form-status a { color: var(--white); }

/* Contact page: same form as the home page, on a teal panel */
.home-form-card.contact-form-teal { background: #0a6f94; padding: var(--s-6); border-radius: var(--radius-lg); }
@media (max-width: 599px) { .home-form-card.contact-form-teal { padding: var(--s-5); } }
.contact-form-teal .home-form-title { font-size: clamp(2rem, 1rem + 2.2vw, 3rem); }
/* Contact page: hero removed, whole section teal (#0a6f94); the form sits straight on it like the home page */
.contact-teal { background: #0a6f94; padding-top: calc(var(--header-h) + var(--s-7)); }
.contact-teal .home-form-card.contact-form-teal { background: none; padding: 0; border-radius: 0; }

/* Contact page "Get in touch": under the form, same teal as the page, icons without the circle */
.contact-touch { margin-top: var(--s-7); background: #0a6f94; border-color: #0a6f94; color: var(--white); box-shadow: none; }
.contact-touch a { color: var(--white); }
.contact-touch .contact-icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--white); }
.contact-touch .contact-icon svg { width: 28px; height: 28px; }
.contact-touch .small, .contact-touch .hours td, .contact-touch .hours th { color: rgba(255, 255, 255, 0.85); }
.contact-touch { padding: 0; border: 0; } /* lines up with the form above */
.card.dark.contact-touch .contact-list a, .card.dark.contact-touch a:not(.btn) { color: var(--white); } /* sky links are hard to read on teal */
/* Contact page, mobile: "Prefer to book a time?" above "Prefer to talk?", both below the form */
@media (max-width: 1023px) {
  #enquire .split > div:first-child { display: contents; }
  #enquire .home-form-card { order: 1; }
  #enquire .split > div:last-child { order: 2; }
  #enquire .contact-touch { order: 3; }
}
/* Contact page fits one screen on desktop: form on the left; booking card and call/email on the right; tighter fields */
@media (min-width: 1024px) {
  #enquire.contact-teal { min-height: 100vh; display: flex; align-items: center; padding-top: calc(var(--header-h) + var(--s-5)); padding-bottom: var(--s-5); }
  #enquire .split { width: 100%; grid-template-areas: "form book" "form touch"; grid-template-rows: auto 1fr; align-items: start; row-gap: var(--s-6); }
  #enquire .split > div:first-child { display: contents; }
  #enquire .home-form-card { grid-area: form; }
  #enquire .split > div:last-child { grid-area: book; }
  #enquire .contact-touch { grid-area: touch; margin-top: 0; }
  #enquire .home-form-title { margin-bottom: var(--s-2); }
  #enquire .home-form-card .muted { margin-bottom: var(--s-4); }
  #enquire .form-grid { row-gap: 14px; }
  #enquire .input, #enquire .select { min-height: 44px; height: 44px; padding-block: 8px; }
  #enquire .home-form-card .textarea { min-height: 72px; height: 72px; }
  #enquire .home-form-card .hint { display: none; }
  #enquire .btn[type="submit"] { min-height: 44px; padding-block: 10px; }
}
/* Contact form: more breathing room, scaled to screen height so it still fits one screen */
@media (min-width: 1024px) {
  #enquire .home-form-title { margin-bottom: clamp(8px, 1.6vh, 18px); }
  #enquire .home-form-card .muted { margin-bottom: clamp(16px, 3.2vh, 36px); }
  #enquire .form-grid { row-gap: clamp(16px, 2.8vh, 30px); column-gap: clamp(16px, 1.6vw, 28px); }
  #enquire .input, #enquire .select { height: clamp(44px, 5.6vh, 54px); }
  #enquire .home-form-card .textarea { height: clamp(72px, 11vh, 120px); }
}
.contact-touch .contact-list li > div > span { font-weight: 600; } /* Hours line matches the phone/email links */
/* Contact page "Prefer to talk?" heading above Call us */
.contact-touch-title { font-size: 1.5rem; color: var(--white); margin: 0 0 var(--s-2); }
.contact-touch-lead { color: rgba(255, 255, 255, 0.85); margin: 0 0 var(--s-5); }
/* Contact page right column on shorter laptops: tighter so it still fits one screen */
@media (min-width: 1024px) and (max-height: 860px) {
  #enquire .split { row-gap: var(--s-4); }
  #enquire .split > div:last-child .card { padding: var(--s-4) var(--s-5); }
  #enquire .split > div:last-child .card .icon-badge { width: 40px; height: 40px; margin-bottom: var(--s-2); }
  #enquire .split > div:last-child .card h2 { margin-bottom: 6px; }
  #enquire .split > div:last-child .card .btn { margin-top: var(--s-3) !important; }
  .contact-touch-title { font-size: 1.25rem; margin-bottom: 4px; }
  .contact-touch-lead { margin-bottom: var(--s-3); }
  .contact-touch .contact-list { gap: 12px; }
  .contact-touch .contact-list li { grid-template-columns: 40px 1fr; }
  .contact-touch .contact-icon { width: 40px; height: 40px; }
}
/* Contact page "Prefer to book a time?": teal like the page, white text, button styled like Submit (navy, white on hover) */
#enquire .contact-book, #enquire .split > div:last-child .card.contact-book { background: #0a6f94; border: 0; box-shadow: none; padding: 0; color: var(--white); }
.contact-book h2 { color: var(--white); }
.contact-book .muted { color: rgba(255, 255, 255, 0.85); }
.contact-book .btn:hover, .contact-book .btn:focus-visible { background: var(--white); border-color: var(--white); color: var(--ink); box-shadow: none; }
/* Contact page: white background; text, field borders and icons switch to navy so everything stays readable */
#enquire.contact-teal { background: var(--white); }
#enquire .home-form-card, #enquire .contact-touch, #enquire .contact-book,
#enquire .split > div:last-child .card.contact-book { background: var(--white); border-color: var(--white); color: var(--ink); }
#enquire .home-form-card .home-form-title, #enquire .home-form-card .home-form-title .accent,
#enquire .contact-touch-title, #enquire .contact-book h2, #enquire .home-form-card label, #enquire .home-form-card legend { color: var(--ink); }
#enquire .home-form-card .home-form-title .home-form-dot { color: var(--sky); }
#enquire .home-form-card .muted, #enquire .contact-touch-lead, #enquire .contact-book .muted, #enquire .contact-touch .small { color: var(--text-muted); }
#enquire .home-form-card .input, #enquire .home-form-card .select, #enquire .home-form-card .textarea { border: 0.5px solid var(--ink); color: var(--ink); }
#enquire .home-form-card .input:focus, #enquire .home-form-card .select:focus, #enquire .home-form-card .textarea:focus { border-color: var(--sky-ink); box-shadow: 0 0 0 2px rgba(25, 180, 231, 0.3); }
#enquire .home-form-card .input::placeholder, #enquire .home-form-card .textarea::placeholder, #enquire .home-form-card .select:invalid { color: var(--text-muted); }
#enquire .home-form-card .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
#enquire .home-form-card .req { color: var(--error); }
#enquire .home-form-card .checkbox a, #enquire .card.dark.contact-touch a:not(.btn) { color: var(--sky-ink); }
#enquire .contact-touch .contact-icon { color: var(--sky-ink); }
#enquire .home-form-card .form-status, #enquire .home-form-card .form-status h3 { color: var(--ink); }
#enquire .home-form-card .form-status p { color: var(--text-muted); }
#enquire .home-form-card .form-status a { color: var(--sky-ink); }
#enquire .home-form-card .form-status svg { color: var(--success); }
/* buttons stay navy; on a white page they turn sky blue on hover instead of white */
#enquire .home-form-card .btn[type="submit"]:hover, #enquire .home-form-card .btn[type="submit"]:focus-visible,
#enquire .contact-book .btn:hover, #enquire .contact-book .btn:focus-visible { background: var(--sky); border-color: var(--sky); color: var(--ink); box-shadow: none; }
#enquire .contact-touch .contact-list a { text-decoration: none; } /* contact page phone and email: no underline */
#enquire .contact-touch .contact-list li { align-items: center; } /* contact page: each label/value block centred on its icon */
/* Contact page: navy background (#000212); text, field borders and links back to white */
#enquire.contact-teal { background: var(--ink); }
#enquire .home-form-card, #enquire .contact-touch, #enquire .contact-book,
#enquire .split > div:last-child .card.contact-book { background: var(--ink); border-color: var(--ink); color: var(--white); }
#enquire .home-form-card .home-form-title, #enquire .home-form-card .home-form-title .accent,
#enquire .contact-touch-title, #enquire .contact-book h2, #enquire .home-form-card label, #enquire .home-form-card legend { color: var(--white); }
#enquire .home-form-card .home-form-title .home-form-dot { color: var(--sky); }
#enquire .home-form-card .muted, #enquire .contact-touch-lead, #enquire .contact-book .muted, #enquire .contact-touch .small { color: rgba(255, 255, 255, 0.75); }
#enquire .home-form-card .input, #enquire .home-form-card .select, #enquire .home-form-card .textarea { border: 0.5px solid var(--white); color: var(--white); }
#enquire .home-form-card .input:focus, #enquire .home-form-card .select:focus, #enquire .home-form-card .textarea:focus { border-color: var(--sky); box-shadow: 0 0 0 2px rgba(25, 180, 231, 0.35); }
#enquire .home-form-card .input::placeholder, #enquire .home-form-card .textarea::placeholder, #enquire .home-form-card .select:invalid { color: rgba(255, 255, 255, 0.7); }
#enquire .home-form-card .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
#enquire .home-form-card .req { color: var(--sky); }
#enquire .home-form-card .checkbox a, #enquire .card.dark.contact-touch a:not(.btn) { color: var(--white); }
#enquire .contact-touch .contact-icon { color: var(--sky); }
#enquire .home-form-card .form-status, #enquire .home-form-card .form-status h3, #enquire .home-form-card .form-status p, #enquire .home-form-card .form-status a { color: var(--white); }
#enquire .home-form-card .form-status svg { color: var(--sky); }
/* navy buttons would vanish on navy: sky blue, white on hover */
#enquire .home-form-card .btn[type="submit"], #enquire .contact-book .btn { background: var(--sky); border-color: var(--sky); color: var(--ink); }
#enquire .home-form-card .btn[type="submit"]:hover, #enquire .home-form-card .btn[type="submit"]:focus-visible,
#enquire .contact-book .btn:hover, #enquire .contact-book .btn:focus-visible { background: var(--white); border-color: var(--white); color: var(--ink); box-shadow: none; }
/* Contact page: pale brand blue background (#e5effb); navy text; white-filled fields; navy buttons, sky on hover */
#enquire.contact-teal { background: #e5effb; }
#enquire .home-form-card, #enquire .contact-touch, #enquire .contact-book,
#enquire .split > div:last-child .card.contact-book { background: #e5effb; border-color: #e5effb; color: var(--ink); }
#enquire .home-form-card .home-form-title, #enquire .home-form-card .home-form-title .accent,
#enquire .contact-touch-title, #enquire .contact-book h2, #enquire .home-form-card label, #enquire .home-form-card legend { color: var(--ink); }
#enquire .home-form-card .home-form-title .home-form-dot { color: var(--sky); }
#enquire .home-form-card .muted, #enquire .contact-touch-lead, #enquire .contact-book .muted, #enquire .contact-touch .small { color: var(--text-muted); }
#enquire .home-form-card .input, #enquire .home-form-card .select, #enquire .home-form-card .textarea { background-color: var(--white); border: 0.5px solid rgba(0, 2, 18, 0.35); color: var(--ink); }
#enquire .home-form-card .input:focus, #enquire .home-form-card .select:focus, #enquire .home-form-card .textarea:focus { border-color: var(--sky-ink); box-shadow: 0 0 0 2px rgba(25, 180, 231, 0.3); }
#enquire .home-form-card .input::placeholder, #enquire .home-form-card .textarea::placeholder, #enquire .home-form-card .select:invalid { color: var(--text-muted); }
#enquire .home-form-card .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
#enquire .home-form-card .req { color: var(--error); }
#enquire .home-form-card .checkbox a, #enquire .card.dark.contact-touch a:not(.btn) { color: var(--sky-ink); }
#enquire .contact-touch .contact-icon { color: var(--sky-ink); }
#enquire .home-form-card .form-status, #enquire .home-form-card .form-status h3 { color: var(--ink); }
#enquire .home-form-card .form-status p { color: var(--text-muted); }
#enquire .home-form-card .form-status a { color: var(--sky-ink); }
#enquire .home-form-card .form-status svg { color: var(--success); }
#enquire .contact-book .btn { background: var(--ink); border-color: var(--ink); color: var(--white); }
#enquire .contact-book .btn:hover, #enquire .contact-book .btn:focus-visible { background: var(--sky); border-color: var(--sky); color: var(--ink); box-shadow: none; }
#enquire .home-form-card .btn[type="submit"] { background: var(--sky); border-color: var(--sky); color: var(--ink); }
#enquire .home-form-card .btn[type="submit"]:hover, #enquire .home-form-card .btn[type="submit"]:focus-visible { background: var(--sky-ink); border-color: var(--sky-ink); color: var(--white); box-shadow: none; }
#enquire .contact-touch, #enquire .contact-touch strong, #enquire .contact-touch .contact-list li > div > span { color: var(--ink); }
#enquire .home-form-card .hint { color: var(--text-muted); }
/* Hello section (desktop): both text columns centred top-to-bottom in the visible area below the menu; photo unchanged */
@media (min-width: 1024px) {
  .hello-grid > .hello-intro, .hello-grid > .hello-col { padding-bottom: 0; align-self: center; margin-top: calc(var(--s-6) * -1); }
}
/* "More than just a loan." (desktop): heading and intro centred in their column, away from the wheel */
@media (min-width: 900px) {
  .journey-copy { text-align: center; }
  .journey .journey-title { margin-inline: auto; }
  .journey-lead { margin-inline: auto; }
}
.lenders .section-head h2 { margin-bottom: var(--s-6); } /* more space between "A loan for every client..." and the text under it */
/* Home FAQ + contact: deep midnight navy (#0a1430) instead of teal */
.faq-home-section { background: #0a1430; }
.faq-home-section .home-form-card .btn[type="submit"] { background: var(--sky); border-color: var(--sky); color: var(--ink); }
.faq-home-section .home-form-card .btn[type="submit"]:hover, .faq-home-section .home-form-card .btn[type="submit"]:focus-visible { background: var(--white); border-color: var(--white); color: var(--ink); box-shadow: none; }
.faq-home-section .home-form-card .home-form-title .home-form-dot { color: var(--sky); }

/* FAQ page: same layout and style as the home page FAQ + contact section, questions grouped by topic */
.faq-page .faq-cat { margin: var(--s-6) 0 var(--s-2); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky); }
.faq-page .section-head + .faq-cat { margin-top: 0; }
.faq-page .faq-body a { color: var(--white); text-decoration: underline; }
@media (min-width: 1024px) and (min-height: 800px) {
  .faq-page .faq-split-form { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
/* FAQ page: white background, navy text; topic headings in the site heading style (bold navy, sky full stop) */
.faq-home-section.faq-page { background: var(--white); color: var(--ink); }
.faq-page .faq-heading { color: var(--ink); }
.faq-page .faq-cat { margin: var(--s-7) 0 var(--s-3); font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; text-transform: none; color: var(--ink); }
.faq-page .section-head + .faq-cat { margin-top: var(--s-5); }
.faq-page .faq-cat .accent { color: var(--sky); }
.faq-page .policy-item summary, .faq-page .policy-item summary .chev { color: var(--ink); }
.faq-page .policy-item .faq-body { color: var(--text-muted); }
.faq-page .faq-body a { color: var(--sky-ink); }
.faq-page .home-form-card, .faq-page .home-form-card .home-form-title, .faq-page .home-form-card .home-form-title .accent, .faq-page .home-form-card label, .faq-page .home-form-card legend { color: var(--ink); }
.faq-page .home-form-card .home-form-title .home-form-dot { color: var(--sky); }
.faq-page .home-form-card .muted, .faq-page .home-form-card .hint { color: var(--text-muted); }
.faq-page .home-form-card .input, .faq-page .home-form-card .select, .faq-page .home-form-card .textarea { background-color: var(--white); border: 0.5px solid rgba(0, 2, 18, 0.35); color: var(--ink); }
.faq-page .home-form-card .input:focus, .faq-page .home-form-card .select:focus, .faq-page .home-form-card .textarea:focus { border-color: var(--sky-ink); box-shadow: 0 0 0 2px rgba(25, 180, 231, 0.3); }
.faq-page .home-form-card .input::placeholder, .faq-page .home-form-card .textarea::placeholder, .faq-page .home-form-card .select:invalid { color: var(--text-muted); }
.faq-page .home-form-card .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.faq-page .home-form-card .req { color: var(--error); }
.faq-page .home-form-card .checkbox a { color: var(--sky-ink); }
.faq-page .home-form-card .form-status, .faq-page .home-form-card .form-status h3 { color: var(--ink); }
.faq-page .home-form-card .form-status p { color: var(--text-muted); }
.faq-page .home-form-card .form-status a { color: var(--sky-ink); }
.faq-page .home-form-card .btn[type="submit"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.faq-page .home-form-card .btn[type="submit"]:hover, .faq-page .home-form-card .btn[type="submit"]:focus-visible { background: var(--sky); border-color: var(--sky); color: var(--ink); box-shadow: none; }
/* Contact page: same theme as the FAQ page (white background, navy text, white fields with a soft outline, site heading style) */
#enquire.contact-teal { background: var(--white); }
#enquire .home-form-card, #enquire .contact-touch, #enquire .contact-book,
#enquire .split > div:last-child .card.contact-book { background: var(--white); border-color: var(--white); }
#enquire .contact-touch-title, #enquire .contact-book .contact-touch-title { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
@media (min-width: 1024px) and (max-height: 860px) { #enquire .contact-touch-title, #enquire .contact-book .contact-touch-title { font-size: clamp(1.25rem, 0.9rem + 0.8vw, 1.6rem); } }
/* Journey wheel: bigger on desktop (less padding above/below, larger cap) and on phones (runs edge to edge) */
@media (min-width: 900px) {
  .section.journey.screen-section { padding-top: calc(var(--header-h) + var(--s-3)); padding-bottom: var(--s-3); }
  .journey, .section.journey { --ring: min(840px, calc(100vh - var(--header-h) - 48px), 52vw); }
}
@media (max-width: 899px) {
  .journey .journey-visual { max-width: 520px; width: calc(100% + 32px); margin-inline: -16px; justify-self: center; }
}

/* Where we help: same layout as How we help, white background; each state shown as a thin 1px black outline */
.where-help, .calc-home.process-dark.where-help { background: var(--white); color: var(--ink); }
.where-item { gap: var(--s-3); }
.where-shape { display: block; width: clamp(56px, 6vw, 88px); height: clamp(56px, 6vw, 88px); }
.where-shape path { fill: none; stroke: #000; stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
@media (max-width: 1023px) {
  .where-list .where-item { display: flex; flex-direction: row; align-items: center; gap: var(--s-4); }
  .where-list .where-shape { width: 48px; height: 48px; flex: none; }
}
/* Where we help: smaller state names, bigger outlines (sized to screen height on desktop so it stays one screen) */
@media (min-width: 1024px) {
  .where-help .where-list { row-gap: var(--s-4); }
  .where-help .where-item { gap: var(--s-2); }
  .where-help .where-shape { width: min(160px, calc((100vh - var(--header-h) - 240px) / 4)); height: min(160px, calc((100vh - var(--header-h) - 240px) / 4)); }
  .where-help .calc-item .calc-item-title, .how-split.where-help .calc-split .calc-item .calc-item-title { font-size: clamp(1.125rem, 0.6rem + 0.8vw, 1.5rem); }
}
@media (max-width: 1023px) {
  .where-list .where-shape { width: 72px; height: 72px; }
  .where-help .calc-item .calc-item-title { font-size: 1.125rem; }
}

/* Where we help: one 1px black outline of Australia with a pulsing sky-blue dot in each state and territory */
.where-map { display: flex; align-items: center; justify-content: center; min-width: 0; }
.where-australia { display: block; width: 100%; height: auto; max-height: calc(100vh - var(--header-h) - 96px); overflow: visible; }
.where-land { fill: none; stroke: #000; stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.where-core { fill: var(--sky); }
.where-pulse { fill: var(--sky); opacity: 0; transform-box: fill-box; transform-origin: center; }
.where-dot text { font: 800 22px/1 var(--font, inherit); fill: var(--ink); letter-spacing: 0.02em; }
@media (prefers-reduced-motion: no-preference) {
  .where-pulse { animation: where-pulse 2.4s var(--d, 0s) ease-out infinite; }
}
@keyframes where-pulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(3.4); opacity: 0; } }
@media (max-width: 1023px) { .where-map { order: 3; } .where-australia { max-height: none; } .where-dot text { font-size: 28px; } }

/* Where we help: Perth skyline video behind the section under a navy wash; text, map outline and labels switch to white */
.where-help, .calc-home.process-dark.where-help { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--white); }
.where-video { position: absolute; inset: 0; z-index: -2; background: var(--ink) url("../video/where-we-help-poster.jpg") center / cover no-repeat; }
.where-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.where-help::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(0, 2, 18, 0.86) 0%, rgba(0, 2, 18, 0.72) 45%, rgba(0, 2, 18, 0.6) 100%); }
@media (max-width: 1023px) { .where-help::after { background: rgba(0, 2, 18, 0.78); } }
.where-help .section-head h2 { color: var(--white); }
.where-help .section-head h2 .accent { color: var(--sky); }
.where-help .section-head .lead, .where-help .calc-split-note { color: rgba(255, 255, 255, 0.8); }
.where-help .where-land { stroke: rgba(255, 255, 255, 0.85); }
.where-help .where-dot text { fill: var(--white); }
.where-help .where-core, .where-help .where-pulse { fill: var(--sky); }
.where-help .btn-primary:hover, .where-help .btn-primary:focus-visible { background: var(--white); color: var(--ink); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .where-video video { display: none; } }

/* Where we help: white section again; the Perth video plays only inside the Australia outline */
.where-help, .calc-home.process-dark.where-help { background: var(--white); color: var(--ink); overflow: visible; }
.where-help::after { content: none; }
.where-help .section-head h2 { color: var(--ink); }
.where-help .section-head .lead, .where-help .calc-split-note { color: var(--text-muted); }
.where-help .btn-primary:hover, .where-help .btn-primary:focus-visible { background: var(--ink); color: var(--white); box-shadow: none; }
.where-map-inner { position: relative; width: min(100%, calc((100vh - var(--header-h) - 96px) * 1000 / 922)); aspect-ratio: var(--map-ratio, 1000 / 922); margin-inline: auto; }
.where-map-inner .where-australia { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; }
.where-map-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.78) saturate(1.05);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201000%20922%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M393.4%20135.6L402.9%20122.3L414.7%2098.4L421.9%2074.5L440.8%2063.9L478.7%2045.3L488.2%2047.9L535.5%2063.9L573.4%2055.9L573.4%2063.9L556.8%20103.7L547.4%20138.3L578.1%20162.2L606.6%20178.2L630.2%20191.4L651.6%20207.4L672.9%20202.1L677.6%20180.8L689.5%20138.3L691.8%2085.1L701.3%2055.9L713.1%2024.0L720.2%2032.0L736.8%2069.2L739.2%20106.4L758.1%20117.0L779.4%20138.3L781.8%20175.5L796.0%20207.4L803.1%20241.9L829.2%20255.2L860.0%20287.1L878.9%20332.3L909.7%20361.5L933.4%20377.5L952.3%20414.7L968.9%20396.1L964.2%20430.7L971.3%20457.2L976.0%20483.8L976.0%20499.8L961.8%20537.0L959.4%20574.2L950.0%20600.8L933.4%20614.0L921.5%20632.6L919.2%20643.3L912.1%20659.2L902.6%20680.5L893.1%20701.8L890.3%20736.3L876.5%20744.3L843.4%20745.6L819.7%20757.6L805.5%20773.5L803.1%20778.8L784.2%20765.5L770.0%20760.2L765.2%20757.6L748.7%20762.9L736.8%20772.2L710.8%20760.2L691.8%20760.2L677.6%20750.9L668.1%20749.6L649.2%20731.0L644.5%20712.4L627.9%20683.1L608.9%20687.1L618.4%20667.2L606.6%20648.6L601.8%20672.5L580.5%20675.2L594.7%20645.9L601.8%20616.7L582.9%20632.6L559.2%20659.2L549.7%20667.2L540.3%20656.6L516.6%20611.4L488.2%20595.4L445.5%20576.8L393.4%20582.1L346.1%20598.1L310.5%20603.4L277.4%20616.7L265.6%20640.6L225.3%20640.6L177.9%20643.3L132.9%20669.9L99.8%20669.9L64.3%20653.9L61.9%20632.6L76.1%20627.3L78.5%20587.5L64.3%20550.3L59.5%20515.7L42.9%20475.8L24.0%20425.3L33.5%20390.8L26.4%20350.9L40.6%20324.3L61.9%20313.7L109.3%20287.1L156.6%20271.2L204.0%20260.5L232.4%20215.4L249.0%20180.8L265.6%20175.5L284.5%20154.2L301.1%20127.7L322.4%20114.4L350.8%20111.7L372.1%20138.3Z%27%2F%3E%3Cpath%20d%3D%27M762.9%20821.4L779.4%20824.0L810.2%20832.0L850.5%20826.7L850.5%20858.6L843.4%20882.5L826.8%20887.8L817.3%20898.4L796.0%20898.4L781.8%20871.9L777.1%20858.6L765.2%20834.6Z%27%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201000%20922%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M393.4%20135.6L402.9%20122.3L414.7%2098.4L421.9%2074.5L440.8%2063.9L478.7%2045.3L488.2%2047.9L535.5%2063.9L573.4%2055.9L573.4%2063.9L556.8%20103.7L547.4%20138.3L578.1%20162.2L606.6%20178.2L630.2%20191.4L651.6%20207.4L672.9%20202.1L677.6%20180.8L689.5%20138.3L691.8%2085.1L701.3%2055.9L713.1%2024.0L720.2%2032.0L736.8%2069.2L739.2%20106.4L758.1%20117.0L779.4%20138.3L781.8%20175.5L796.0%20207.4L803.1%20241.9L829.2%20255.2L860.0%20287.1L878.9%20332.3L909.7%20361.5L933.4%20377.5L952.3%20414.7L968.9%20396.1L964.2%20430.7L971.3%20457.2L976.0%20483.8L976.0%20499.8L961.8%20537.0L959.4%20574.2L950.0%20600.8L933.4%20614.0L921.5%20632.6L919.2%20643.3L912.1%20659.2L902.6%20680.5L893.1%20701.8L890.3%20736.3L876.5%20744.3L843.4%20745.6L819.7%20757.6L805.5%20773.5L803.1%20778.8L784.2%20765.5L770.0%20760.2L765.2%20757.6L748.7%20762.9L736.8%20772.2L710.8%20760.2L691.8%20760.2L677.6%20750.9L668.1%20749.6L649.2%20731.0L644.5%20712.4L627.9%20683.1L608.9%20687.1L618.4%20667.2L606.6%20648.6L601.8%20672.5L580.5%20675.2L594.7%20645.9L601.8%20616.7L582.9%20632.6L559.2%20659.2L549.7%20667.2L540.3%20656.6L516.6%20611.4L488.2%20595.4L445.5%20576.8L393.4%20582.1L346.1%20598.1L310.5%20603.4L277.4%20616.7L265.6%20640.6L225.3%20640.6L177.9%20643.3L132.9%20669.9L99.8%20669.9L64.3%20653.9L61.9%20632.6L76.1%20627.3L78.5%20587.5L64.3%20550.3L59.5%20515.7L42.9%20475.8L24.0%20425.3L33.5%20390.8L26.4%20350.9L40.6%20324.3L61.9%20313.7L109.3%20287.1L156.6%20271.2L204.0%20260.5L232.4%20215.4L249.0%20180.8L265.6%20175.5L284.5%20154.2L301.1%20127.7L322.4%20114.4L350.8%20111.7L372.1%20138.3Z%27%2F%3E%3Cpath%20d%3D%27M762.9%20821.4L779.4%20824.0L810.2%20832.0L850.5%20826.7L850.5%20858.6L843.4%20882.5L826.8%20887.8L817.3%20898.4L796.0%20898.4L781.8%20871.9L777.1%20858.6L765.2%20834.6Z%27%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat; }
.where-help .where-land { stroke: #000; }
.where-help .where-dot text { fill: var(--white); stroke: rgba(0, 2, 18, 0.9); stroke-width: 5px; paint-order: stroke; stroke-linejoin: round; }
@media (max-width: 1023px) { .where-map-inner { width: 100%; } }

/* Where we help: black city names on the white space outside the map, linked to each dot by a thin line */
.where-help .where-dot text { fill: #000; stroke: none; }
.where-leader { stroke: #000; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.where-map { padding-inline: 1.5% 11%; } /* room for the east-coast labels (Brisbane, Sydney) beyond the coastline */
.where-map-inner { width: min(100%, calc((100vh - var(--header-h) - 96px) * 1000 / 922)); }
@media (max-width: 1023px) { .where-map { padding-inline: 4% 13%; } .where-map-inner { width: 100%; } }
.where-map-video { filter: none; } /* Sydney night footage is already dark; no extra dimming */

/* Where we help: state and territory borders inside the outline (thin, a little lighter than the coastline) */
.where-border { fill: none; stroke: rgba(0, 0, 0, 0.45); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

/* Where we help: states filled with the journey wheel colours; white borders like the gaps between wheel segments; white dots so they show on every colour */
.where-state { stroke: none; }
.where-sky { fill: #19b4e7; }
.where-teal { fill: #0a6f94; }
.where-navy { fill: #000212; }
.where-help .where-border { stroke: #fff; stroke-width: 1.5px; }
.where-help .where-core, .where-help .where-pulse { fill: #fff; }

/* Where we help, polished: softer blue fills (no coastline), navy dots, small spaced labels beside the coast, staggered entrance */
.where-help .where-land { stroke: none; }
.where-sky { fill: #bde8f8; }
.where-teal { fill: #8cc7dc; }
.where-navy { fill: #5a9cbb; }
.where-help .where-border { stroke: #fff; stroke-width: 1.5px; }
.where-help .where-core { fill: var(--ink); }
.where-help .where-pulse { fill: var(--ink); }
@keyframes where-pulse { 0% { transform: scale(1); opacity: 0.35; } 100% { transform: scale(3.2); opacity: 0; } }
.where-help .where-dot text { font-size: 17px; font-weight: 700; letter-spacing: 0.14em; fill: var(--ink); }
.where-leader { display: none; }
.where-map { padding-inline: 1% 8%; }
@media (max-width: 1023px) { .where-map { padding-inline: 2% 10%; } .where-help .where-dot text { font-size: 30px; letter-spacing: 0.1em; } }
@media (prefers-reduced-motion: no-preference) {
  .js .where-map .where-state { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); transform-box: fill-box; transform-origin: center; }
  .js .where-map:not(.is-in) .where-state { opacity: 0; transform: scale(.94); }
  .js .where-map .where-border, .js .where-map .where-dot { transition: opacity .5s ease-out .85s; }
  .js .where-map:not(.is-in) .where-border, .js .where-map:not(.is-in) .where-dot { opacity: 0; }
}
@media (max-width: 1023px) { .where-map { padding-inline: 2% 12%; } } /* phones: a little more room for the east-coast labels */
/* Contact page: Calendly calendar inline under "Prefer to book a time?" (page is now taller than one screen on desktop) */
.contact-calendly { min-width: 300px; height: 700px; margin-top: var(--s-4); border: 0.5px solid rgba(0, 2, 18, 0.2); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); }
@media (min-width: 1024px) {
  #enquire.contact-teal { min-height: 0; align-items: flex-start; padding-top: calc(var(--header-h) + var(--s-6)); padding-bottom: var(--s-8); }
  #enquire .split { grid-template-areas: "form book" "touch book"; grid-template-rows: auto 1fr; }
  #enquire .contact-touch { margin-top: var(--s-6); }
}
@media (max-width: 599px) { .contact-calendly { height: 760px; margin-inline: calc(var(--s-4) * -1); border-radius: 0; border-inline: 0; } }
.contact-calendly { border: 0; border-radius: 0; } /* no grey border around the calendar */
/* Contact page (desktop): everything fits one screen. Form + "Prefer to talk?" on the left; "Prefer to book a time?" with the calendar filling the right column's height */
@media (min-width: 1024px) {
  #enquire.contact-teal { min-height: 100vh; height: 100vh; align-items: stretch; padding-top: calc(var(--header-h) + var(--s-4)); padding-bottom: var(--s-4); }
  #enquire > .container { display: flex; }
  #enquire .split { height: 100%; grid-template-areas: "form book" "touch book"; grid-template-rows: auto minmax(0, 1fr); align-items: stretch; row-gap: var(--s-4); }
  #enquire .contact-book, #enquire .split > div:last-child { display: flex; flex-direction: column; min-height: 0; }
  #enquire .split > div:last-child .card.contact-book { flex: 1; padding: 0; }
  #enquire .contact-calendly { flex: 1; height: auto; min-height: 420px; margin-top: var(--s-3); }
  #enquire .contact-touch { margin-top: 0; align-self: end; }
  #enquire .contact-touch .contact-list { grid-template-columns: repeat(3, minmax(0, auto)); gap: var(--s-4); justify-content: start; }
  #enquire .contact-touch-lead { margin-bottom: var(--s-3); }
  /* tighter form so the left column fits */
  #enquire .home-form-title { margin-bottom: clamp(4px, 1vh, 12px); }
  #enquire .home-form-card .muted { margin-bottom: clamp(10px, 2vh, 24px); }
  #enquire .form-grid { row-gap: clamp(10px, 1.7vh, 20px); }
  #enquire .input, #enquire .select { height: clamp(40px, 4.8vh, 50px); min-height: 0; }
  #enquire .home-form-card .textarea { height: clamp(52px, 7vh, 96px); min-height: 0; }
}
@media (min-width: 1024px) {
  #enquire > .container.split { display: grid; }
  #enquire .split > div:last-child { grid-template-rows: minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  #enquire.contact-teal { height: auto; }
  #enquire .split { min-height: calc(100vh - var(--header-h) - var(--s-4) * 2); height: auto; }
  #enquire .split > div:last-child { align-self: stretch; }
  #enquire .contact-touch .contact-list li { grid-template-columns: 36px 1fr; gap: 10px; }
  #enquire .contact-touch .contact-icon { width: 36px; height: 36px; }
}
@media (min-width: 1024px) {
  #enquire .contact-touch .contact-list { grid-template-columns: auto auto; column-gap: var(--s-6); row-gap: 8px; }
  #enquire .contact-touch .contact-list li:nth-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) and (max-height: 860px) {
  #enquire.contact-teal { padding-top: calc(var(--header-h) + var(--s-3)); padding-bottom: var(--s-3); }
  #enquire .split { min-height: calc(100vh - var(--header-h) - var(--s-3) * 2); row-gap: var(--s-3); }
  #enquire .home-form-title { font-size: clamp(1.75rem, 0.6rem + 2.4vw, 2.5rem); }
  #enquire .form-grid { row-gap: 8px; }
  #enquire .input, #enquire .select { height: 38px; }
  #enquire .home-form-card .textarea { height: 44px; }
  #enquire .home-form-card .muted { margin-bottom: 10px; }
  #enquire .contact-touch-title { margin-bottom: 2px; }
  #enquire .contact-touch-lead { margin-bottom: 8px; font-size: 0.875rem; }
  #enquire .contact-touch .contact-list li { grid-template-columns: 30px 1fr; }
  #enquire .contact-touch .contact-icon { width: 30px; height: 30px; }
  #enquire .contact-touch .contact-list strong, #enquire .contact-touch .contact-list a, #enquire .contact-touch .contact-list li > div > span { font-size: 0.875rem; line-height: 1.35; }
}
/* "Prefer to talk?" tidy: three equal columns split by thin dividers; small grey labels, consistent navy values, matching icons */
#enquire .contact-touch .contact-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: var(--s-2); }
#enquire .contact-touch .contact-list li, #enquire .contact-touch .contact-list li:nth-child(3) { grid-column: auto; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: start; padding: 2px var(--s-4); border-left: 1px solid rgba(0, 2, 18, 0.12); }
#enquire .contact-touch .contact-list li:first-child { padding-left: 0; border-left: 0; }
#enquire .contact-touch .contact-icon { width: 22px; height: 22px; margin-top: 1px; color: var(--sky-ink); }
#enquire .contact-touch .contact-icon svg { width: 20px; height: 20px; }
#enquire .contact-touch .contact-list strong { display: block; margin-bottom: 2px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
#enquire .contact-touch .contact-list a, #enquire .card.dark.contact-touch .contact-list a:not(.btn), #enquire .contact-touch .contact-list li > div > span { font-size: 0.9375rem; font-weight: 700; line-height: 1.35; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
#enquire .contact-touch .contact-list a:hover { color: var(--sky-ink); }
@media (max-width: 599px) {
  #enquire .contact-touch .contact-list { grid-template-columns: 1fr; }
  #enquire .contact-touch .contact-list li, #enquire .contact-touch .contact-list li:nth-child(3) { padding: var(--s-3) 0; border-left: 0; border-top: 1px solid rgba(0, 2, 18, 0.12); }
  #enquire .contact-touch .contact-list li:first-child { border-top: 0; padding-top: 0; }
}
#enquire .contact-touch .contact-list { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
#enquire .contact-touch .contact-list li, #enquire .contact-touch .contact-list li:nth-child(3) { flex: 0 0 auto; padding: 0; border: 0; }
#enquire .contact-touch .contact-list li:nth-child(3) { flex: 1 1 200px; }
#enquire .contact-touch .contact-list a, #enquire .card.dark.contact-touch .contact-list a:not(.btn) { overflow-wrap: normal; white-space: nowrap; }
@media (max-width: 599px) {
  #enquire .contact-touch .contact-list { display: grid; gap: 0; }
  #enquire .contact-touch .contact-list li, #enquire .contact-touch .contact-list li:nth-child(3) { padding: var(--s-3) 0; border-top: 1px solid rgba(0, 2, 18, 0.12); }
  #enquire .contact-touch .contact-list li:first-child { border-top: 0; padding-top: 0; }
}
/* "Prefer to talk?" (desktop): heading and text on the left, the three contact details stacked on the right */
@media (min-width: 1024px) {
  #enquire .contact-touch { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-6); align-items: start; }
  #enquire .contact-touch .contact-touch-title { grid-column: 1; grid-row: 1; }
  #enquire .contact-touch .contact-touch-lead { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  #enquire .contact-touch .contact-list { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; margin-top: 4px; }
  #enquire .contact-touch .contact-list li, #enquire .contact-touch .contact-list li:nth-child(3) { flex: 0 0 auto; }
  #enquire .contact-touch .contact-list li > div > span { white-space: nowrap; }
}
@media (min-width: 1024px) {
  #enquire .contact-touch { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); }
  #enquire .contact-touch .contact-list li > div > span { white-space: normal; }
  #enquire .contact-touch .contact-touch-title { margin-bottom: 6px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  #enquire .contact-touch { display: block; }
  #enquire .contact-touch .contact-touch-lead { margin-bottom: var(--s-2); }
  #enquire .contact-touch .contact-list { flex-direction: row; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
  #enquire .contact-touch .contact-list li:nth-child(3) { flex: 1 1 200px; }
}
@media (min-width: 1200px) { #enquire .contact-touch { grid-template-rows: auto 1fr; } }
@media (min-width: 1200px) and (max-height: 760px) { #enquire .contact-touch .contact-list { gap: 4px; margin-top: 0; } #enquire .contact-touch .contact-list strong { margin-bottom: 0; } }
/* "Prefer to talk?" (desktop): heading and text first, contact details in a row underneath */
@media (min-width: 1024px) {
  #enquire .contact-touch { display: block; }
  #enquire .contact-touch .contact-touch-lead { margin-bottom: var(--s-3); }
  #enquire .contact-touch .contact-list { flex-direction: row; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: 0; }
  #enquire .contact-touch .contact-list li:nth-child(3) { flex: 1 1 200px; }
}
@media (min-width: 1024px) and (max-height: 860px) { #enquire .contact-touch .contact-touch-lead { margin-bottom: 8px; } }
@media (min-width: 1024px) and (max-height: 760px) { #enquire .contact-touch .contact-list { row-gap: 2px; } #enquire .contact-touch .contact-touch-lead { margin-bottom: 6px; line-height: 1.45; } #enquire .form-grid { row-gap: 6px; } #enquire .contact-touch .contact-list strong { margin-bottom: 0; } }
@media (min-width: 1024px) { #enquire .contact-touch .contact-touch-lead { white-space: nowrap; font-size: min(1rem, 1.25vw); } } /* "Prefer to talk?" text on one line on desktop */
@media (min-width: 1024px) { #enquire .contact-touch .contact-touch-lead { font-size: min(1rem, 1.2vw); } }
@media (min-width: 1024px) { #enquire .contact-touch { align-self: start; margin-top: clamp(var(--s-4), 4vh, var(--s-7)); } } /* "Prefer to talk?" sits just under the form instead of at the bottom of the screen */
@media (min-width: 1024px) and (max-height: 760px) { #enquire .contact-touch { margin-top: var(--s-3); } }
@media (min-width: 1024px) and (max-height: 800px) { #enquire .contact-touch { margin-top: 4px; } #enquire .contact-touch .contact-touch-title { margin-bottom: 0; } #enquire .contact-touch .contact-list { row-gap: 2px; } }

/* Contact forms: floating labels (style C). Label rests inside the field, floats to the top when focused or filled */
.home-form-card { --fh: 54px; }
.home-form-card .field.float { position: relative; }
.home-form-card .field.float > label { position: absolute; left: 15px; right: 40px; top: calc(var(--fh) / 2); transform: translateY(-50%); margin: 0; z-index: 1; pointer-events: none; font-size: 0.9375rem; font-weight: 400; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: top .15s ease, font-size .15s ease, color .15s ease, transform .15s ease; }
.home-form-card .field.float > label .req { color: inherit; }
.home-form-card .field.float .input, .home-form-card .field.float .select { height: var(--fh); min-height: 0; padding: 20px 14px 4px; border-radius: 10px; }
.home-form-card .field.float .textarea { padding: 24px 14px 8px; border-radius: 10px; }
.home-form-card .field.float:has(.textarea) > label { top: 14px; transform: none; }
/* floated */
.home-form-card .field.float:has(.input:focus) > label, .home-form-card .field.float:has(.input:not(:placeholder-shown)) > label,
.home-form-card .field.float:has(.textarea:focus) > label, .home-form-card .field.float:has(.textarea:not(:placeholder-shown)) > label,
.home-form-card .field.float:has(.select:focus) > label, .home-form-card .field.float:has(.select:valid) > label { top: 7px; transform: none; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; }
/* the dropdown shows its own "What can we help with?" until something is picked, then the label floats */
.home-form-card .field.float:has(.select:invalid:not(:focus)) > label { opacity: 0; }
.home-form-card .field.float .select:invalid:not(:focus) { padding-top: 12px; padding-bottom: 12px; }

/* light pages (Contact, FAQ): thin grey outline, light-blue when active */
.faq-page .home-form-card .field.float .input, .faq-page .home-form-card .field.float .select, .faq-page .home-form-card .field.float .textarea,
#enquire .home-form-card .field.float .input, #enquire .home-form-card .field.float .select, #enquire .home-form-card .field.float .textarea { background-color: var(--white); border: 1px solid #d5dde7; color: var(--ink); }
.faq-page .home-form-card .field.float > label, #enquire .home-form-card .field.float > label { color: #6b7385; }
.faq-page .home-form-card .field.float :is(.input, .select, .textarea):focus, #enquire .home-form-card .field.float :is(.input, .select, .textarea):focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(25, 180, 231, 0.18); outline: none; }
.faq-page .home-form-card .field.float:has(:focus) > label, #enquire .home-form-card .field.float:has(:focus) > label { color: var(--sky-ink); }

/* home page (dark navy section): white outline and labels, light-blue when active */
.faq-home-section:not(.faq-page) .home-form-card .field.float :is(.input, .select, .textarea) { background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.35); color: var(--white); }
.faq-home-section:not(.faq-page) .home-form-card .field.float > label { color: rgba(255, 255, 255, 0.72); }
.faq-home-section:not(.faq-page) .home-form-card .field.float :is(.input, .select, .textarea):focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(25, 180, 231, 0.25); outline: none; }
.faq-home-section:not(.faq-page) .home-form-card .field.float:has(:focus) > label { color: var(--sky); }

/* Contact page desktop: field height follows the screen-fit sizing */
@media (min-width: 1024px) { #enquire .home-form-card { --fh: clamp(44px, 5.4vh, 54px); } #enquire .home-form-card .field.float .input, #enquire .home-form-card .field.float .select { height: var(--fh); } }
@media (min-width: 1024px) and (max-height: 860px) { #enquire .home-form-card { --fh: 44px; } #enquire .home-form-card .field.float .input, #enquire .home-form-card .field.float .select { padding-top: 17px; padding-bottom: 3px; } }
@media (min-width: 1024px) { #enquire .home-form-card { --fh: clamp(42px, 4.8vh, 50px); } #enquire .home-form-card .field.float .textarea { padding-top: 22px; } } @media (min-width: 1024px) and (max-height: 860px) { #enquire .home-form-card { --fh: 42px; } }
@media (min-width: 1024px) and (max-height: 740px) { #enquire .home-form-card { --fh: 40px; } #enquire .home-form-card .field.float .input, #enquire .home-form-card .field.float .select { padding-top: 16px; padding-bottom: 2px; } #enquire .home-form-card .field.float > label { left: 13px; } #enquire .home-form-card .field.float .textarea { height: 40px; padding-top: 18px; } }
/* Floating labels: typed text always sits below the small label (beats the older #enquire field padding rules) */
.home-form-card .field.float > label { left: 14px; }
.home-form-card .field.float .input, .home-form-card .field.float .select,
#enquire .home-form-card .field.float .input, #enquire .home-form-card .field.float .select { padding: 21px 14px 5px; line-height: 1.2; }
.home-form-card .field.float .select:invalid:not(:focus), #enquire .home-form-card .field.float .select:invalid:not(:focus) { padding-top: 0; padding-bottom: 0; }
.home-form-card .field.float:has(.input:focus) > label, .home-form-card .field.float:has(.input:not(:placeholder-shown)) > label,
.home-form-card .field.float:has(.textarea:focus) > label, .home-form-card .field.float:has(.textarea:not(:placeholder-shown)) > label,
.home-form-card .field.float:has(.select:focus) > label, .home-form-card .field.float:has(.select:valid) > label { top: 6px; font-size: 0.6875rem; line-height: 1; }
.home-form-card .field.float .textarea, #enquire .home-form-card .field.float .textarea { padding: 22px 14px 6px; line-height: 1.35; }
@media (min-width: 1024px) and (max-height: 860px) {
  #enquire .home-form-card .field.float .input, #enquire .home-form-card .field.float .select { padding: 18px 13px 3px; }
  #enquire .home-form-card .field.float:has(:focus) > label, #enquire .home-form-card .field.float:has(.input:not(:placeholder-shown)) > label,
  #enquire .home-form-card .field.float:has(.textarea:not(:placeholder-shown)) > label, #enquire .home-form-card .field.float:has(.select:valid) > label { top: 5px; font-size: 0.625rem; }
  #enquire .home-form-card .field.float .textarea { padding-top: 18px; }
}
@media (min-width: 1024px) and (max-height: 740px) { #enquire .home-form-card .field.float .input, #enquire .home-form-card .field.float .select { padding: 17px 12px 2px; } }
@media (min-width: 1024px) {
  #enquire .home-form-card .field.float :is(.input, .select, .textarea) { font-size: 0.9375rem; }
  #enquire .home-form-card .field.float .input, #enquire .home-form-card .field.float .select { padding: 19px 14px 3px; }
  #enquire .home-form-card .field.float:has(:focus) > label, #enquire .home-form-card .field.float:has(.input:not(:placeholder-shown)) > label,
  #enquire .home-form-card .field.float:has(.textarea:not(:placeholder-shown)) > label, #enquire .home-form-card .field.float:has(.select:valid) > label { top: 5px; font-size: 0.625rem; }
  #enquire .home-form-card .field.float .select:invalid:not(:focus) { padding-top: 0; padding-bottom: 0; }
}
@media (min-width: 1024px) and (max-height: 860px) { #enquire .home-form-card .field.float .input, #enquire .home-form-card .field.float .select { padding: 17px 13px 2px; } }
@media (min-width: 1024px) and (max-height: 740px) { #enquire .home-form-card .field.float .textarea { padding: 17px 12px 2px; } }
#enquire .contact-touch .contact-list li:first-child a, #enquire .card.dark.contact-touch .contact-list li:first-child a:not(.btn) { font-size: 1.25rem; letter-spacing: 0.01em; } /* phone number a little bigger */
#enquire .contact-touch .contact-list li:first-child a, #enquire .card.dark.contact-touch .contact-list li:first-child a:not(.btn) { line-height: 1.1; } @media (min-width: 1024px) and (max-width: 1199px) { #enquire .contact-touch .contact-list li:first-child a, #enquire .card.dark.contact-touch .contact-list li:first-child a:not(.btn) { font-size: 1.0625rem; } #enquire .contact-touch .contact-list { column-gap: var(--s-4); } }
/* Blog page: same look as the Contact page (white page, navy text, light-blue accents, thin grey outlines) */
.page-hero.blog-top { background: var(--white); color: var(--ink); padding-block: calc(var(--header-h) + var(--s-6)) var(--s-5); }
.page-hero.blog-top::before { content: none; }
.page-hero.blog-top .breadcrumb, .page-hero.blog-top .breadcrumb a { color: var(--text-muted); }
.page-hero.blog-top .breadcrumb a:hover { color: var(--sky-ink); }
.page-hero.blog-top .eyebrow { color: var(--sky-ink); }
.page-hero.blog-top h1 { color: var(--ink); font-size: clamp(2rem, 1rem + 2.2vw, 3.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; max-width: 24ch; }
.page-hero.blog-top .lead { color: var(--text-muted); }
.blog-list { background: var(--white); padding-top: var(--s-5); }
.blog-list .post-card { background: var(--white); border: 1px solid #d5dde7; border-radius: 16px; box-shadow: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.blog-list .post-card:hover { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(25, 180, 231, 0.18); transform: none; }
.blog-list .post-thumb { background: #f1f5fa; color: var(--sky-ink); }
.blog-list .post-thumb::after { border-color: rgba(10, 111, 148, 0.18); }
.blog-list .post-meta .tag { padding: 0; background: none; border-radius: 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky-ink); }
.blog-list .post-meta { align-items: center; font-size: 0.8125rem; }
.blog-list .post-card h2 { color: var(--ink); font-weight: 800; letter-spacing: -0.01em; }
.blog-list .post-card .muted { color: var(--text-muted); }
.blog-list .link-arrow { color: var(--sky-ink); }
.blog-list > .container > p.muted a { color: var(--sky-ink); font-weight: 600; }
.page-hero.blog-top h1 .accent, .blog-list .post-card h2 .accent { color: var(--sky); }

/* Blog articles: same look as the Blog and Contact pages */
.article-top .article-meta { color: var(--text-muted); }
.article-top .lead { max-width: 62ch; }
.article-body .prose h2 { color: var(--ink); font-weight: 800; letter-spacing: -0.02em; }
.article-body .prose h2 .accent, .article-body .article-aside h2 .accent { color: var(--sky); }
.article-body .prose a { color: var(--sky-ink); }
.article-body .article-aside .card { background: var(--white); border: 1px solid #d5dde7; border-radius: 16px; box-shadow: none; color: var(--ink); }
.article-body .article-aside .card h2 { color: var(--ink); font-weight: 800; }
.article-body .article-aside .article-cta p { color: var(--text-muted); }
.article-body .article-aside .article-cta .btn { background: var(--ink); border-color: var(--ink); color: var(--white); }
.article-body .article-aside .article-cta .btn:hover, .article-body .article-aside .article-cta .btn:focus-visible { background: var(--sky); border-color: var(--sky); color: var(--ink); box-shadow: none; }
.article-body .article-aside .checklist a { color: var(--ink); font-weight: 600; }
.article-body .article-aside .checklist a:hover { color: var(--sky-ink); }
.article-body .disclaimer-box { border-top-color: #e3e9f1; }
.article-top .container.article-header { max-width: var(--container, 1280px); } /* article title block lines up with the page content on the left */
/* Free property report: half a screen tall (grows if step 2's form needs more room) */
.property-report, .hero-backdrop .property-report { min-height: 50vh; min-height: 50svh; display: flex; align-items: center; padding-top: var(--s-7); padding-bottom: var(--s-7); }
@media (max-width: 767px) { .property-report { padding-top: var(--s-7); } }
@media (min-width: 768px) and (max-height: 820px) { .property-report { padding-top: var(--s-6); padding-bottom: var(--s-6); } }
@media (min-width: 768px) and (max-height: 820px) { .property-report { padding-top: var(--s-5); padding-bottom: var(--s-5); } } @media (max-width: 767px) { .property-report { padding-top: var(--s-4); padding-bottom: var(--s-4); } }
@media (min-width: 768px) and (max-height: 820px) { .property-report { padding-top: 28px; padding-bottom: 28px; } } @media (max-width: 767px) { .property-report { padding-top: 20px; padding-bottom: 20px; } }
@media (min-width: 768px) and (max-height: 820px) { .hero-backdrop .property-report { padding-top: 28px; padding-bottom: 28px; } } @media (max-width: 767px) { .hero-backdrop .property-report { padding-top: 20px; padding-bottom: 20px; } }

/* Lender panel + 7 easy steps, desktop: content is shorter than one screen each, so forcing them to
   full height leaves a block of dead space between them — size to content instead, like mobile already does. */
@media (min-width: 1024px) {
  .section.lenders.screen-section, .section.process.screen-section {
    min-height: 0;
    padding-top: calc(var(--header-h) + var(--s-6));
    padding-bottom: var(--s-7);
  }
}

/* Who we help + How we help, desktop: same issue — content is shorter than one screen,
   so forcing full height leaves a block of dead space between them. Size to content instead. */
@media (min-width: 1024px) {
  #who-we-help, #loan-solutions {
    min-height: 0;
    padding-top: calc(var(--header-h) + var(--s-6));
    padding-bottom: var(--s-7);
  }
}
.property-report, .hero-backdrop .property-report { min-height: 60vh; min-height: 60svh; } /* free property report: 60% of the screen height */
#loan-solutions { position: relative; z-index: 1; margin-top: -2px; } /* covers the hairline where the hero wrapper's black background peeked out under "Who we help" */
@media (min-width: 1024px) and (max-width: 1199px) { #loan-solutions .calc-item p { font-size: 0.8125rem; line-height: 1.45; } #loan-solutions .calc-split .calc-list { row-gap: var(--s-4); } } /* How we help fits one screen on narrow laptops */
#who-we-help .service-tile { cursor: default; } #who-we-help .service-tile:hover, #who-we-help .service-tile:focus-visible { transform: none; } #who-we-help .service-tile:hover::before { transform: none; } /* "Who we help" cards are no longer links: no lift or zoom on hover */
#who-we-help .service-tile h3 { font-size: 1.25rem; } #who-we-help .service-tile-desc { font-size: 1.125rem; } @media (max-width: 767px) { #who-we-help .service-tile h3 { font-size: 1.5rem; } } /* Who we help cards: text 4px bigger (titles 20px desktop / 24px phone, descriptions 18px) */
@media (min-width: 1024px) and (max-width: 1299px) { #who-we-help .service-tile h3 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } #service-track { gap: 14px; } } /* long words like "Consolidators" hyphenate instead of spilling out of the card on narrower laptops */

/* New service pages: hero photos */
.calc-hero-media.media-svc-construction { background-image: url("../img/who-construction.jpg"); }
.calc-hero-media.media-svc-commercial { background-image: url("../img/service-commercial.jpg"); }

/* Services pages: "Ready when you are." photo section, then the disclaimer on its own */
.svc-disclaimer { padding-top: var(--s-5); border-top: 1px solid #e3e9f1; }
.svc-disclaimer .bt-disclaimer { margin: 0; }
/* "Ready when you are." section: half a screen tall on desktop (About + Services pages); photo scales to fit, still sitting on the bottom edge */
@media (min-width: 1024px) {
  .about-cta-section { height: 50vh; height: 50svh; min-height: 340px; padding-top: var(--s-5); padding-bottom: 0; display: flex; }
  .about-cta-section > .container { display: flex; width: 100%; }
  .cta-band.about-cta { width: 100%; height: 100%; padding-top: 0; padding-bottom: 0; grid-template-rows: minmax(0, 1fr); }
  .about-cta-photo { height: 100%; min-height: 0; align-items: flex-end; }
  .about-cta-photo img { height: 100%; width: auto; max-width: 100%; max-height: none; object-fit: contain; object-position: bottom; }
  .about-cta-body { padding-bottom: 0; }
}
#who-we-help .service-tile-desc { font-size: 0.875rem; } /* Who we help card text back to 14px (titles stay 20px / 24px) */
/* Services pages: Steven's photo in "Ready when you are." fills the section almost to the top */
@media (min-width: 768px) {
  .svc-cta.about-cta-section { padding-top: 12px; }
  .svc-cta .about-cta-photo img { max-width: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .svc-cta.about-cta-section { height: 50vh; height: 50svh; min-height: 380px; padding-bottom: 0; display: flex; }
  .svc-cta.about-cta-section > .container { display: flex; width: 100%; }
  .svc-cta .cta-band.about-cta { width: 100%; height: 100%; padding-block: 0; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr); gap: var(--s-5); }
  .svc-cta .about-cta-photo { order: 0; height: 100%; min-height: 0; align-items: flex-end; }
  .svc-cta .about-cta-photo img { height: 100%; width: auto; object-fit: contain; object-position: bottom; }
  .svc-cta .about-cta-body { align-self: center; }
}
@media (min-width: 768px) and (max-width: 1023px) { .svc-cta .about-cta-photo img { max-width: 100%; height: auto; max-height: 100%; } }
@media (min-width: 768px) and (max-width: 1023px) { .svc-cta .cta-band.about-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.calc-hero-media.media-svc-invest { background-image: url("../img/service-investment.jpg"); } /* same photo as the Property Investors card */ @media (min-width: 768px) { .calc-hero-media.media-svc-invest { background-image: url("../img/service-investment.jpg"); } }
@media (min-width: 1024px) { .hello-intro .hello-subtitle { margin-top: 28px; } .hello-intro .hello-subtitle + .hello-text { margin-top: 24px; line-height: 1.8; } .hello-intro .hello-verse { margin-top: 32px; } } /* Hello section (desktop): more breathing room between the lines */

/* Hello section (desktop): "Hello. / We're Kingdom Capital." level with "Integrity."; paragraph (and quote under it) centred in the space below */
@media (min-width: 1024px) {
  .hello-grid > .hello-intro { align-self: start; margin-top: var(--hello-top, 0px); height: var(--hello-h, auto); display: flex; flex-direction: column; padding-bottom: 0; }
  .hello-intro .hello-subtitle { margin-bottom: 24px; }
  .hello-intro .hello-subtitle + .hello-text { margin-top: auto; }
  .hello-intro .hello-verse { margin-bottom: auto; }
}
@media (min-width: 1024px) and (max-height: 820px) { .hello-intro .hello-subtitle + .hello-text { margin-bottom: auto; } }
@media (min-width: 900px) { .journey .journey-title { font-size: min(clamp(2rem, 1.3rem + 2.6vw, 3.75rem), 7cqi); } } /* "We do more than just loans." fits its column on one line */
@media (min-width: 900px) { .journey .journey-title { font-size: min(clamp(2rem, 1.3rem + 2.6vw, 3.75rem), 6.85cqi); } }
/* ===== Home Ownership page: segments (first home buyers / upgraders) and "Everything you need to know" ===== */
.ho-help { background: var(--white); }
.ho-segment { margin-top: var(--s-7); }
.ho-segment + .ho-segment { margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid #e3e9f1; }
.ho-segment-head { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); max-width: 62ch; }
.ho-segment-head .kc-heading { margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); }
.ho-segment-head p { margin: 0; color: var(--text-muted); font-size: 1.0625rem; line-height: 1.6; }
.ho-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@media (min-width: 640px) { .ho-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ho-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
.ho-card { background: var(--white); border: 1px solid #d5dde7; border-radius: 16px; padding: var(--s-5); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.ho-card:hover { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(25, 180, 231, 0.15); }
.ho-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #e5effb; color: var(--sky-ink); flex: none; }
.ho-icon svg { width: 22px; height: 22px; }
.ho-card h4 { margin: var(--s-3) 0 var(--s-2); font-size: 1.125rem; font-weight: 800; color: var(--ink); line-height: 1.25; }
.ho-card p { margin: 0; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; }
.ho-card a, .ho-know a:not(.btn) { color: var(--sky-ink); font-weight: 600; }
.ho-more { margin-top: var(--s-5); display: inline-flex; }

.ho-know { background: #f5f8fc; }
.ho-fee { display: grid; gap: var(--s-6); background: var(--ink); color: var(--white); border-radius: 20px; padding: var(--s-6); margin-top: var(--s-6); }
@media (min-width: 1024px) { .ho-fee { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; padding: var(--s-7); } }
.ho-fee .kc-heading { color: var(--white); font-size: clamp(1.5rem, 1rem + 1.2vw, 2.125rem); margin: 0 0 var(--s-3); }
.ho-fee p { color: rgba(255, 255, 255, 0.82); line-height: 1.7; margin: 0 0 var(--s-3); }
.ho-fee p:last-child { margin-bottom: 0; }
.ho-fee strong { color: var(--white); }
.ho-fee a:not(.btn) { color: var(--sky); }
.ho-fee-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.ho-fee-points li { display: flex; gap: var(--s-3); align-items: flex-start; color: rgba(255, 255, 255, 0.75); font-size: 0.9375rem; line-height: 1.45; }
.ho-fee-points strong { display: block; color: var(--white); font-size: 1rem; }
.ho-fee .ho-icon { background: rgba(25, 180, 231, 0.15); color: var(--sky); }

.ho-block { margin-top: var(--s-8); }
.ho-block-title { margin: 0 0 var(--s-2); font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); }
.ho-block-lead { margin: 0 0 var(--s-5); color: var(--text-muted); font-size: 1.0625rem; line-height: 1.6; max-width: 66ch; }
.ho-schemes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@media (min-width: 768px) { .ho-schemes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ho-schemes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
.ho-scheme { background: var(--white); border: 1px solid #d5dde7; border-radius: 16px; padding: var(--s-5); display: flex; flex-direction: column; }
.ho-tag { align-self: flex-start; margin: 0 0 var(--s-3); padding: 3px 10px; border-radius: 999px; background: #e5effb; color: var(--sky-ink); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.ho-scheme h4 { margin: 0 0 var(--s-2); font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.ho-scheme > p { margin: 0 0 var(--s-3); color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; }
.ho-scheme ul { margin: 0 0 var(--s-3); padding-left: 1.1em; color: var(--ink); font-size: 0.9375rem; line-height: 1.55; display: grid; gap: 6px; }
.ho-scheme li::marker { color: var(--sky); }
.ho-scheme .ho-note { margin: auto 0 0; padding-top: var(--s-3); border-top: 1px solid #e3e9f1; font-size: 0.8125rem; color: var(--text-muted); line-height: 1.5; }
.ho-small { margin: var(--s-4) 0 0; font-size: 0.8125rem; color: var(--text-muted); }
.ho-costs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--white); border: 1px solid #d5dde7; border-radius: 16px; overflow: hidden; }
@media (min-width: 768px) { .ho-costs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ho-cost { padding: var(--s-4) var(--s-5); border-bottom: 1px solid #e3e9f1; }
@media (min-width: 768px) { .ho-cost:nth-child(odd) { border-right: 1px solid #e3e9f1; } .ho-cost:nth-last-child(-n+2) { border-bottom: 0; } }
@media (max-width: 767px) { .ho-cost:last-child { border-bottom: 0; } }
.ho-cost h4 { margin: 0 0 4px; font-size: 1rem; font-weight: 800; color: var(--ink); }
.ho-cost p { margin: 0; font-size: 0.9375rem; color: var(--text-muted); line-height: 1.55; }
.ho-faq { max-width: none; background: var(--white); border: 1px solid #d5dde7; border-radius: 16px; padding: var(--s-2) var(--s-5); }
.ho-faq .policy-item + .policy-item { border-top: 1px solid #e3e9f1; }
.ho-faq .policy-item summary { font-size: 1rem; color: var(--ink); padding: 14px 0; }
.ho-faq .faq-body p { color: var(--text-muted); }
.ho-help .ho-segment:first-child { margin-top: 0; }
.ho-know .container > .ho-block:first-child { margin-top: 0; }

/* ===== Contact page rebuild: full-width dark "Book a discovery call" hero, enquiry form in its own white section below — each one screen tall ===== */
.contact-book-hero {
  background: var(--ink);
  min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  padding-top: calc(var(--header-h) + var(--s-6)); padding-bottom: var(--s-6);
}
.contact-book-split { width: 100%; display: grid; gap: var(--s-6); align-items: center; }
.contact-book-title { color: var(--white); margin: 0 0 var(--s-4); font-weight: 800; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.75rem); line-height: 1.02; letter-spacing: -0.02em; }
.contact-book-title .accent { color: var(--sky); }
.contact-book-lead { color: rgba(255, 255, 255, 0.78); font-size: 1.0625rem; line-height: 1.65; max-width: 46ch; margin: 0; }
.contact-book-widget { background: var(--white); border-radius: var(--radius-lg); padding: var(--s-5); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.contact-book-widget .contact-calendly { margin-top: 0; width: 100%; height: 760px; min-height: 760px; }
@media (min-width: 1024px) {
  .contact-book-split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-9); }
}
@media (max-width: 1023px) {
  .contact-book-hero { min-height: 0; padding-top: calc(var(--header-h) + var(--s-6)); padding-bottom: var(--s-6); }
  .contact-book-widget .contact-calendly { height: 760px; min-height: 0; }
}

/* Contact page: enquiry form section — same one-screen treatment, white background, two cards side by side */
#enquire.contact-teal {
  background: var(--white); color: var(--ink);
  min-height: 100vh; min-height: 100svh; height: auto; display: flex; align-items: center;
  padding-top: calc(var(--header-h) + var(--s-6)); padding-bottom: var(--s-6);
}
#enquire > .container.split { display: grid; width: 100%; }
#enquire .split { grid-template-areas: none; grid-template-rows: none; height: auto; min-height: 0; row-gap: var(--s-6); align-items: stretch; }
#enquire .split > div:first-child { display: block; grid-area: auto; }
#enquire .split > div:last-child { grid-area: auto; order: 0; align-self: stretch; }
#enquire .home-form-card {
  grid-area: auto; order: 0; display: flex; flex-direction: column;
  background: var(--white); border-color: var(--line); color: var(--ink);
  padding: var(--s-6); border-radius: var(--radius-lg);
}
#enquire .home-form-card .home-form-title, #enquire .home-form-card .home-form-title .accent,
#enquire .home-form-card label, #enquire .home-form-card legend { color: var(--ink); }
#enquire .home-form-card .home-form-title .home-form-dot { color: var(--sky); }
#enquire .home-form-card .muted { color: var(--text-muted); }
#enquire .home-form-card .input, #enquire .home-form-card .select, #enquire .home-form-card .textarea { border: 0.5px solid var(--ink); color: var(--ink); }
#enquire .home-form-card .input:focus, #enquire .home-form-card .select:focus, #enquire .home-form-card .textarea:focus { border-color: var(--sky-ink); box-shadow: 0 0 0 2px rgba(25, 180, 231, 0.3); }
#enquire .home-form-card .input::placeholder, #enquire .home-form-card .textarea::placeholder, #enquire .home-form-card .select:invalid { color: var(--text-muted); }
#enquire .home-form-card .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
#enquire .home-form-card .req { color: var(--error); }
#enquire .home-form-card .checkbox a { color: var(--sky-ink); }
#enquire .home-form-card .form-status, #enquire .home-form-card .form-status h3 { color: var(--ink); }
#enquire .home-form-card .form-status p { color: var(--text-muted); }
#enquire .home-form-card .form-status a { color: var(--sky-ink); }
#enquire .home-form-card .form-status svg { color: var(--success); }
#enquire .home-form-card .btn[type="submit"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
#enquire .home-form-card .btn[type="submit"]:hover, #enquire .home-form-card .btn[type="submit"]:focus-visible { background: var(--sky); border-color: var(--sky); color: var(--ink); box-shadow: none; }
#enquire .home-form-card .hint { color: var(--text-muted); }

#enquire .contact-touch { grid-area: auto; display: flex; flex-direction: column; justify-content: center; background: var(--white); border: 1px solid var(--line); color: var(--ink); padding: var(--s-6); margin-top: 0; align-self: stretch; }
#enquire .contact-touch-title { color: var(--ink); margin: 0 0 var(--s-3); font-weight: 800; font-size: clamp(2rem, 1rem + 2.2vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; }
#enquire .contact-touch-lead { color: var(--text-muted); }
#enquire .contact-touch .contact-icon { color: var(--sky-ink); }
#enquire .contact-touch strong { color: var(--ink); }
#enquire .contact-touch .contact-list a, #enquire .card.dark.contact-touch a:not(.btn) { color: var(--ink); }
#enquire .contact-touch .contact-list a:hover { color: var(--sky-ink); }
@media (min-width: 1024px) {
  #enquire .split { grid-template-columns: 1.05fr 1fr; }
  /* Compact the form so it fits one screen alongside "Prefer to talk?" at typical laptop heights */
  #enquire .home-form-title { margin-bottom: clamp(6px, 1.4vh, 14px); }
  #enquire .home-form-card .muted { margin-bottom: clamp(12px, 2.6vh, 28px); }
  #enquire .form-grid { row-gap: clamp(10px, 2vh, 20px); column-gap: clamp(14px, 1.4vw, 24px); }
  #enquire .input, #enquire .select { height: clamp(40px, 5vh, 50px); min-height: 0; padding-block: 8px; }
  #enquire .home-form-card .textarea { height: clamp(52px, 8vh, 96px); min-height: 0; }
  #enquire .btn[type="submit"] { min-height: 44px; padding-block: 10px; }
  #enquire .home-form-card .hint { display: none; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  #enquire.contact-teal { padding-top: calc(var(--header-h) + var(--s-4)); padding-bottom: var(--s-4); }
  .contact-book-hero { padding-top: calc(var(--header-h) + var(--s-4)); padding-bottom: var(--s-4); }
}

/* Contact page: keep the Calendly box under its ~650px breakpoint so it stays in the compact layout (no grey frame); the white panel hugs it */
.contact-book-widget { width: 100%; max-width: calc(640px + 2 * var(--s-5)); justify-self: end; }
.contact-book-widget .contact-calendly { max-width: 640px; }
@media (max-width: 1023px) { .contact-book-widget { justify-self: center; } }

/* Contact page: start the Calendly box at the calendar's own height (602px), so there's no grey even before (or without) Calendly reporting its height */
.contact-book-widget .contact-calendly { height: 602px; min-height: 0; }
@media (max-width: 1023px) { .contact-book-widget .contact-calendly { height: 602px; min-height: 0; } }

/* Contact page: "Book a discovery call" section fills exactly one screen on desktop, calendar centred in the space below the header */
@media (min-width: 1024px) {
  .contact-book-hero { height: 100vh; height: 100svh; min-height: 0; padding-top: var(--header-h); padding-bottom: 0; }
}
/* shorter laptop screens: thinner white border round the calendar so it fits with space above and below */
@media (min-width: 1024px) and (max-height: 820px) {
  .contact-book-widget { padding: var(--s-3); max-width: calc(640px + 2 * var(--s-3)); }
}
/* very short screens: let the section grow rather than cut the calendar off */
@media (min-width: 1024px) and (max-height: 700px) {
  .contact-book-hero { height: auto; min-height: 100vh; padding-top: calc(var(--header-h) + var(--s-3)); padding-bottom: var(--s-3); }
}

/* Contact page: "Discovery Call" details card above the calendar */
.book-details { padding: var(--s-2) var(--s-2) var(--s-4); }
.book-details-title { margin: 0 0 var(--s-3); font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1.2; letter-spacing: -0.01em; }
.book-details-list { list-style: none; margin: 0; padding: var(--s-3) var(--s-4); border: 1px solid #e3e9f1; border-radius: 12px; display: grid; gap: 10px; }
.book-details-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 0.9375rem; line-height: 1.5; color: #4a5568; }
.book-details-list li[hidden] { display: none; }
.book-details-list svg { width: 20px; height: 20px; margin-top: 1px; color: #4a5568; }
.book-details-list li:last-child { font-size: 0.875rem; line-height: 1.6; }
/* with the card added the panel is taller than some laptop screens: keep at least one screen, grow when needed */
@media (min-width: 1024px) {
  .contact-book-hero { height: auto; min-height: 100vh; min-height: 100svh; padding-top: calc(var(--header-h) + var(--s-4)); padding-bottom: var(--s-4); }
}

/* Contact page: Discovery Call card shrinks with the screen height so the section stays one screen tall on desktop */
@media (min-width: 1024px) {
  .contact-book-hero { height: 100vh; height: 100svh; min-height: 0; padding-top: var(--header-h); padding-bottom: 0; }
}
/* laptops: title, then 30 min / date / time zone on one line; description hidden */
@media (min-width: 1024px) and (max-height: 999px) {
  .contact-book-widget .book-details { padding: 0 0 var(--s-3); }
  .contact-book-widget .book-details-title { font-size: 1.25rem; margin: 0 0 6px; }
  .contact-book-widget .book-details-list { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 0; border: 0; border-radius: 0; }
  .contact-book-widget .book-details-list li { grid-template-columns: 16px auto; gap: 6px; align-items: center; font-size: 0.875rem; }
  .contact-book-widget .book-details-list svg { width: 16px; height: 16px; margin-top: 0; }
  .contact-book-widget .book-details-list li:last-child { display: none; }
}
/* shorter laptops: title, 30 min and date on a single line (Calendly shows the time zone itself) */
@media (min-width: 1024px) and (max-height: 820px) {
  .contact-book-widget { padding: 8px var(--s-3); }
  .contact-book-widget .book-details { display: flex; align-items: center; gap: 18px; padding: 4px 0 6px; }
  .contact-book-widget .book-details-title { font-size: 1.125rem; margin: 0; }
  .contact-book-widget .book-details-list li:nth-child(3) { display: none; }
}
/* very short screens: let the section grow rather than cut the calendar off */
@media (min-width: 1024px) and (max-height: 700px) {
  .contact-book-hero { height: auto; min-height: 100vh; padding-top: calc(var(--header-h) + var(--s-3)); padding-bottom: var(--s-3); }
}

/* Home page FAQ section: Contact Us form on the left, questions on the right (desktop); phones keep questions first */
@media (min-width: 1024px) {
  .faq-home-section .faq-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .faq-home-section .faq-split-main { order: 2; }
}

/* Contact page "Prefer to talk?": heading lines up with "Contact Us" (same top and size), light blue question mark, details stacked */
#enquire .contact-touch { justify-content: flex-start; }
#enquire .contact-touch .contact-touch-title { font-size: clamp(2rem, 1rem + 2.2vw, 3.5rem); line-height: 1.05; margin-top: 0; }
@media (min-width: 1024px) and (max-height: 820px) { #enquire .contact-touch .contact-touch-title { font-size: clamp(2rem, 1rem + 1.8vw, 2.75rem); } }
#enquire .contact-touch-title .accent { color: var(--sky); }
#enquire .contact-touch .contact-list { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--s-4); }
#enquire .contact-touch .contact-list li, #enquire .contact-touch .contact-list li:nth-child(3) { flex: 0 0 auto; padding: 0; border: 0; }
/* match "Contact Us" exactly: its size tops out at 3rem, and shorter laptop screens use a smaller size */
#enquire .contact-touch .contact-touch-title { font-size: clamp(2rem, 1rem + 2.2vw, 3rem); }
@media (min-width: 1024px) and (max-height: 860px) { #enquire .contact-touch .contact-touch-title { font-size: clamp(1.75rem, 0.6rem + 2.4vw, 2.5rem); } }

/* Contact page "Prefer to talk?" card: no border around it */
#enquire .contact-touch, #enquire .contact-touch:hover { border: 0; box-shadow: none; }

/* Contact page SUBMIT button: light blue (#19B4E7) with dark text; hover swaps to dark with white text */
#enquire .home-form-card .btn[type="submit"] { background: #19b4e7; border-color: #19b4e7; color: var(--ink); }
#enquire .home-form-card .btn[type="submit"]:hover, #enquire .home-form-card .btn[type="submit"]:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--white); box-shadow: none; }

/* Hello section: new photo, centred between the text columns, sitting on the bottom and reaching almost to the top of the section */
@media (min-width: 1024px) {
  .hello-photo { align-self: end; justify-content: center; transform: none; }
  .hello-photo img { width: auto; max-width: none; height: calc(100svh - var(--header-h) - var(--s-6)); }
}

/* Hello section cut-out photo: show it without the empty transparent space above the head and at the sides
   (file is untouched; the browser just frames the person), so the photo fills the section height */
.hello-photo img { aspect-ratio: 1134 / 1743; object-fit: cover; object-position: center bottom; }
@media (min-width: 1024px) {
  .hello-photo img { height: calc(100svh - var(--header-h) - var(--s-6)); width: auto; }
}

/* Hello photo: as tall as possible — fills the full height from just under the header to the bottom of the section */
@media (min-width: 1024px) {
  .hello-photo { margin-top: calc(var(--s-6) * -1); }
  .hello-photo img { height: calc(100svh - var(--header-h)); }
}

/* Hello photo (fix): enlarge the cut-out and clip the empty transparent strip above the head, so the person
   fills the full height from just under the header to the bottom of the section */
@media (min-width: 1024px) {
  .hello-photo { height: calc(100svh - var(--header-h)); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
  .hello-photo img { flex: none; aspect-ratio: auto; object-fit: fill; width: auto; height: calc((100svh - var(--header-h)) * 2000 / 1713); }
}

/* Hello section: right-hand values column starts near the top (less white space under the header); the left headings follow it via main.js */
@media (min-width: 1024px) {
  .hello-grid > .hello-col { align-self: start; margin-top: calc(var(--s-4) * -1); }
}

/* Hello section right column: even, uniform spacing — same gap under every heading, same gap between every block (including before the buttons) */
.hello-col .hello-values { display: grid; gap: var(--s-6); }
.hello-col .hello-values li { margin: 0; padding: 0; }
.hello-col .hello-value { display: block; margin: 0 0 8px; }
.hello-col .hello-value-desc { margin: 0; }
.hello-col .hello-ctas { margin-top: var(--s-6); }
/* shorter laptop screens: same even spacing, just tighter, so the section still fits one screen */
@media (min-width: 1024px) and (max-height: 860px) {
  .hello-col .hello-values { gap: var(--s-4); }
  .hello-col .hello-value { margin-bottom: 4px; }
  .hello-col .hello-ctas { margin-top: var(--s-4); }
}

/* "We do more than just loans." (desktop): even space above and below the wheel, measured from the very top of the section
   (the see-through header counts as space). Wheel sized so its top edge still clears the header by 24px. */
@media (min-width: 900px) {
  .section.journey.screen-section { padding-top: var(--s-3); padding-bottom: var(--s-3); }
  .journey, .section.journey { --ring: min(840px, calc((100vh - 2 * (var(--header-h) + 24px)) / 0.9145), 52vw); }
}

/* Home page "Contact Us" + "Got a question?" section: pale blue background (#E5EFFB), with text, field borders and buttons switched to dark so they read on it */
.faq-home-section:not(.faq-page) { background: #e5effb; color: var(--ink); }
.faq-home-section:not(.faq-page) .faq-heading { color: var(--ink); }
.faq-home-section:not(.faq-page) .policy-item summary, .faq-home-section:not(.faq-page) .policy-item summary .chev { color: var(--ink); }
.faq-home-section:not(.faq-page) .policy-item .faq-body { color: var(--text-muted); }
.faq-home-section:not(.faq-page) .link-arrow { color: var(--sky-ink); }
.faq-home-section:not(.faq-page) .faq-show-all { border-color: var(--ink); color: var(--ink); }
.faq-home-section:not(.faq-page) .home-form-card { color: var(--ink); }
.faq-home-section:not(.faq-page) .home-form-card .home-form-title, .faq-home-section:not(.faq-page) .home-form-card .home-form-title .accent,
.faq-home-section:not(.faq-page) .home-form-card label, .faq-home-section:not(.faq-page) .home-form-card legend { color: var(--ink); }
.faq-home-section:not(.faq-page) .home-form-card .muted, .faq-home-section:not(.faq-page) .home-form-card .hint { color: var(--text-muted); }
.faq-home-section:not(.faq-page) .home-form-card .req { color: var(--ink); }
.faq-home-section:not(.faq-page) .home-form-card .checkbox a { color: var(--sky-ink); }
.faq-home-section:not(.faq-page) .home-form-card .field.float :is(.input, .select, .textarea) { background-color: var(--white); border: 1px solid #c8d8ee; color: var(--ink); }
.faq-home-section:not(.faq-page) .home-form-card .field.float > label { color: #6b7385; }
.faq-home-section:not(.faq-page) .home-form-card .field.float:has(:focus) > label { color: var(--sky-ink); }
.faq-home-section:not(.faq-page) .home-form-card .field.float :is(.input, .select, .textarea):focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(25, 180, 231, 0.25); }
.faq-home-section:not(.faq-page) .home-form-card .input::placeholder, .faq-home-section:not(.faq-page) .home-form-card .textarea::placeholder { color: #7a8597; }
.faq-home-section:not(.faq-page) .home-form-card .select:invalid { color: #7a8597; }
.faq-home-section:not(.faq-page) .home-form-card .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.faq-home-section:not(.faq-page) .home-form-card .form-status, .faq-home-section:not(.faq-page) .home-form-card .form-status h3,
.faq-home-section:not(.faq-page) .home-form-card .form-status p { color: var(--ink); }
.faq-home-section:not(.faq-page) .home-form-card .form-status a { color: var(--sky-ink); }
.faq-home-section:not(.faq-page) .home-form-card .btn[type="submit"]:hover, .faq-home-section:not(.faq-page) .home-form-card .btn[type="submit"]:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--white); }
/* home Contact Us fields: same pale blue as the section (#E5EFFB) instead of white */
.faq-home-section:not(.faq-page) .home-form-card .field.float :is(.input, .select, .textarea) { background-color: #e5effb; }
/* home Contact Us fields: slightly darker outline so they stand out on the pale blue */
.faq-home-section:not(.faq-page) .home-form-card .field.float :is(.input, .select, .textarea) { border-color: #9fb3cf; }
.faq-home-section:not(.faq-page) .home-form-card .field.float :is(.input, .select, .textarea):focus { border-color: var(--sky); }

/* Loan Options pages: short note under the loan options (e.g. SMSF advice reminder) */
.svc-note { margin: var(--s-5) 0 0; max-width: 70ch; font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); }

/* Property in SMSF page: signing-documents photo */
.calc-hero-media.media-svc-smsf { background-image: url("../img/service-refinancing.jpg"); }

/* Calculator pages: input fields styled to match the contact page's form (thin grey outline, light-blue when active) */
.calc-form .input, .calc-form .select, .calc-form .textarea,
.offset-chart-inputs .input, .offset-chart-inputs .select, .offset-chart-inputs .textarea { background-color: var(--white); border: 1px solid #d5dde7; color: var(--ink); font-weight: 400; }
.calc-form .input:focus, .calc-form .select:focus, .calc-form .textarea:focus,
.offset-chart-inputs .input:focus, .offset-chart-inputs .select:focus, .offset-chart-inputs .textarea:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(25, 180, 231, 0.18); outline: none; }
.calc-form .input::placeholder, .calc-form .textarea::placeholder,
.offset-chart-inputs .input::placeholder, .offset-chart-inputs .textarea::placeholder { color: var(--text-muted); }

/* Borrowing power calculator: grouped into labelled sections, and some labels wrap to two lines — reserve that height on every field so inputs line up row by row regardless of which fields land next to each other */
#calc-borrowing .calc-form-section { grid-column: 1 / -1; margin: 0; padding-top: var(--s-6); border-top: 1px solid var(--line); font-size: 0.8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sky-ink); }
#calc-borrowing .calc-form-section:first-child { padding-top: 0; border-top: 0; }
@media (min-width: 640px) {
  #calc-borrowing .field label { min-height: 2.6em; display: flex; align-items: end; }
}

/* Offset calculator page: 30-year "interest saved" chart, example loan */
.offset-chart-section { padding-top: 0; }
.offset-chart-card { background: var(--white); border-radius: var(--radius-lg); padding-block: var(--s-6); }
@media (min-width: 768px) { .offset-chart-card { padding-block: var(--s-7); } }
.offset-chart-head { max-width: 70ch; margin-bottom: var(--s-5); }
.offset-chart-head .lead { margin: var(--s-3) 0 0; }
.offset-chart-inputs { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-5); margin-bottom: var(--s-6); padding-bottom: var(--s-6); border-bottom: 1px solid var(--line); }
.offset-chart-inputs .field { width: 240px; max-width: 100%; }
.offset-chart-inputs .field label { min-height: 2.6em; display: flex; align-items: end; }
@media (max-width: 479px) { .offset-chart-inputs .field label { min-height: 0; } }
.offset-chart-legend { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-bottom: var(--s-5); }
.offset-chart-legend-item { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9375rem; color: var(--ink); }
.offset-chart-swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.offset-chart-swatch-a { background: var(--ink); }
.offset-chart-swatch-b { background: var(--sky); }
.offset-chart-scroll { overflow-x: auto; }
.offset-chart { display: block; width: 100%; min-width: 700px; height: auto; font-family: inherit; }
.oc-grid line { stroke: var(--line); stroke-width: 1; }
.oc-axis-y text, .oc-axis-x text { font-size: 11px; fill: var(--text-muted); }
.oc-area { fill: rgba(25, 180, 231, 0.12); stroke: none; }
.oc-line-a { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.oc-line-b { fill: none; stroke: var(--sky); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.oc-hit { fill: transparent; cursor: pointer; }
.oc-marks, .oc-tip { opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out); }
.oc-marks line { stroke: #9fb3cf; stroke-width: 1; stroke-dasharray: 3 3; }
.oc-marks circle { fill: var(--ink); stroke: var(--white); stroke-width: 2; }
.oc-marks circle.oc-dot-b { fill: var(--sky); }
.oc-tip rect { fill: var(--ink); filter: drop-shadow(0 6px 16px rgba(0, 2, 18, 0.25)); }
.oc-tip text { fill: var(--white); font-size: 11px; }
.oc-tip-year { font-weight: 800; fill: var(--sky); }
.oc-tip-a { fill: rgba(255, 255, 255, 0.75); }
.oc-tip-b { fill: rgba(255, 255, 255, 0.75); }
.oc-tip-saved { font-weight: 700; fill: var(--sky); }
.offset-chart-table { margin-top: var(--s-6); border-top: 1px solid var(--line); padding-top: var(--s-5); }
.offset-chart-table summary { cursor: pointer; font-weight: 700; color: var(--sky-ink); }
.offset-chart-table-scroll { overflow-x: auto; margin-top: var(--s-4); }
.offset-chart-table table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 0.9375rem; }
.offset-chart-table th, .offset-chart-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.offset-chart-table th { color: var(--text-muted); font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; }
.offset-chart-card .calc-disclaimer, .offset-chart-card .calc-note { margin-top: var(--s-5); }
#oc-hit-1:hover ~ #oc-mark-1, #oc-hit-1:hover ~ #oc-tip-1 { opacity: 1; }
#oc-hit-2:hover ~ #oc-mark-2, #oc-hit-2:hover ~ #oc-tip-2 { opacity: 1; }
#oc-hit-3:hover ~ #oc-mark-3, #oc-hit-3:hover ~ #oc-tip-3 { opacity: 1; }
#oc-hit-4:hover ~ #oc-mark-4, #oc-hit-4:hover ~ #oc-tip-4 { opacity: 1; }
#oc-hit-5:hover ~ #oc-mark-5, #oc-hit-5:hover ~ #oc-tip-5 { opacity: 1; }
#oc-hit-6:hover ~ #oc-mark-6, #oc-hit-6:hover ~ #oc-tip-6 { opacity: 1; }
#oc-hit-7:hover ~ #oc-mark-7, #oc-hit-7:hover ~ #oc-tip-7 { opacity: 1; }
#oc-hit-8:hover ~ #oc-mark-8, #oc-hit-8:hover ~ #oc-tip-8 { opacity: 1; }
#oc-hit-9:hover ~ #oc-mark-9, #oc-hit-9:hover ~ #oc-tip-9 { opacity: 1; }
#oc-hit-10:hover ~ #oc-mark-10, #oc-hit-10:hover ~ #oc-tip-10 { opacity: 1; }
#oc-hit-11:hover ~ #oc-mark-11, #oc-hit-11:hover ~ #oc-tip-11 { opacity: 1; }
#oc-hit-12:hover ~ #oc-mark-12, #oc-hit-12:hover ~ #oc-tip-12 { opacity: 1; }
#oc-hit-13:hover ~ #oc-mark-13, #oc-hit-13:hover ~ #oc-tip-13 { opacity: 1; }
#oc-hit-14:hover ~ #oc-mark-14, #oc-hit-14:hover ~ #oc-tip-14 { opacity: 1; }
#oc-hit-15:hover ~ #oc-mark-15, #oc-hit-15:hover ~ #oc-tip-15 { opacity: 1; }
#oc-hit-16:hover ~ #oc-mark-16, #oc-hit-16:hover ~ #oc-tip-16 { opacity: 1; }
#oc-hit-17:hover ~ #oc-mark-17, #oc-hit-17:hover ~ #oc-tip-17 { opacity: 1; }
#oc-hit-18:hover ~ #oc-mark-18, #oc-hit-18:hover ~ #oc-tip-18 { opacity: 1; }
#oc-hit-19:hover ~ #oc-mark-19, #oc-hit-19:hover ~ #oc-tip-19 { opacity: 1; }
#oc-hit-20:hover ~ #oc-mark-20, #oc-hit-20:hover ~ #oc-tip-20 { opacity: 1; }
#oc-hit-21:hover ~ #oc-mark-21, #oc-hit-21:hover ~ #oc-tip-21 { opacity: 1; }
#oc-hit-22:hover ~ #oc-mark-22, #oc-hit-22:hover ~ #oc-tip-22 { opacity: 1; }
#oc-hit-23:hover ~ #oc-mark-23, #oc-hit-23:hover ~ #oc-tip-23 { opacity: 1; }
#oc-hit-24:hover ~ #oc-mark-24, #oc-hit-24:hover ~ #oc-tip-24 { opacity: 1; }
#oc-hit-25:hover ~ #oc-mark-25, #oc-hit-25:hover ~ #oc-tip-25 { opacity: 1; }
#oc-hit-26:hover ~ #oc-mark-26, #oc-hit-26:hover ~ #oc-tip-26 { opacity: 1; }
#oc-hit-27:hover ~ #oc-mark-27, #oc-hit-27:hover ~ #oc-tip-27 { opacity: 1; }
#oc-hit-28:hover ~ #oc-mark-28, #oc-hit-28:hover ~ #oc-tip-28 { opacity: 1; }
#oc-hit-29:hover ~ #oc-mark-29, #oc-hit-29:hover ~ #oc-tip-29 { opacity: 1; }
#oc-hit-30:hover ~ #oc-mark-30, #oc-hit-30:hover ~ #oc-tip-30 { opacity: 1; }