/* ==========================================================================
   Stepwell Mortgages — stylesheet
   Design tokens: deep ink navy + muted sage + warm cream.
   System font stack only (no external font loading — see README).
   ========================================================================== */

:root {
  /* Colour tokens */
  --ink-900: #101c2c;
  --ink-800: #16233a;
  --ink-700: #223252;
  --sage-500: #7c9885;
  --sage-400: #97ae9e;
  --sage-100: #e7edea;
  --cream-100: #faf6ee;
  --cream-200: #f3ecdf;
  --paper: #fffdf8;
  --line: #e3dbc9;
  --warn-bg: #f7e9df;
  --warn-border: #b4653a;
  --warn-text: #6b3419;
  --focus: #2f6f52;

  /* Type */
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --max-width: 1180px;
  --radius: 10px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
}

/* Noren refinement: retains Stepwell's established teal identity while
   giving it a warmer, more confident professional setting. */
:root {
  --ink-900: #092632;
  --ink-800: #123b47;
  --ink-700: #315662;
  --sage-500: #3f8580;
  --sage-400: #72aaa2;
  --sage-100: #e4f0ed;
  --cream-100: #fbf7ef;
  --cream-200: #f3eadb;
  --paper: #fffefa;
  --line: #ddcfbc;
  --focus: #006b68;
  --copper: #c48355;
  --radius: 16px;
}

.brand-logo { background:#fff; border:1px solid rgba(9,38,50,.10); border-radius:12px; padding:.35rem .6rem; box-shadow:0 5px 18px rgba(9,38,50,.08); }
.brand-logo img { width:178px; height:auto; }
.footer-logo { display:inline-flex; background:#fff; border-radius:12px; padding:.4rem .65rem; margin-bottom:1rem; }
.footer-logo img { width:180px; height:auto; }
.site-header { background:rgba(251,247,239,.96); }
.hero { background:radial-gradient(circle at 82% 18%, rgba(114,170,162,.25), transparent 28%), linear-gradient(135deg,#fbf7ef 0%,#f5eee2 100%); }
.hero .container { align-items:center; }
.hero-copy { position:relative; z-index:2; }
.hero-copy h1 { font-size:clamp(2.6rem,5.3vw,4.65rem); max-width:12ch; letter-spacing:-.035em; }
.hero-copy .lede { max-width:58ch; }
.hero-figure { display:flex; justify-content:center; }
.photo-card { position:relative; width:min(100%,390px); padding:12px; background:#fff; border-radius:34px 34px 110px 34px; box-shadow:0 28px 65px rgba(9,38,50,.18); transform:rotate(1.5deg); }
.photo-card::before { content:""; position:absolute; inset:-16px 18px 20px -18px; border:1px solid var(--sage-400); border-radius:45px 45px 120px 45px; z-index:-1; }
.photo-card img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 28%; border-radius:24px 24px 96px 24px; }
.photo-card span { display:block; padding:.8rem .65rem .35rem; color:var(--ink-700); font-size:.84rem; letter-spacing:.04em; }
.appointment-strip { background:var(--ink-900); color:#fff; }
.appointment-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.appointment-grid div { padding:1.35rem 1.5rem; border-right:1px solid rgba(255,255,255,.17); }
.appointment-grid div:last-child { border-right:0; }
.appointment-grid strong,.appointment-grid span { display:block; }
.appointment-grid strong { font-family:var(--font-display); font-size:1.12rem; color:#fff; }
.appointment-grid span { color:#c9dad8; font-size:.86rem; }
.portrait-frame { padding:0; overflow:hidden; background:var(--sage-100); border:0; box-shadow:0 22px 50px rgba(9,38,50,.13); }
.portrait-frame img { width:100%; height:100%; min-height:420px; object-fit:cover; object-position:50% 24%; }
.portrait-tall img { min-height:600px; }
.fee-panel-section { padding-top:0; }
.fee-panel { display:grid; grid-template-columns:.75fr 1.25fr; gap:3rem; align-items:center; padding:2.3rem 2.5rem; border-radius:24px; background:linear-gradient(120deg,var(--sage-100),#fff); border:1px solid rgba(63,133,128,.22); }
.fee-panel h2,.fee-panel p { margin-bottom:0; }
.card { box-shadow:0 10px 30px rgba(9,38,50,.07); }
.btn-primary { background:var(--ink-900); }
.eyebrow { color:#2b746f; }
@media (max-width: 760px) {
  .brand-logo img { width:148px; }
  .hero { padding-top:3.4rem; }
  .hero .container { display:flex; flex-direction:column; }
  .hero-copy { order:1; }
  .hero-figure { order:2; margin-top:2.4rem; }
  .hero-copy h1 { max-width:15ch; font-size:clamp(2.45rem,12vw,3.45rem); }
  .photo-card { width:min(88vw,360px); transform:none; }
  .appointment-grid { grid-template-columns:1fr; padding:.35rem 1.5rem; }
  .appointment-grid div { border-right:0; border-bottom:1px solid rgba(255,255,255,.17); padding:1rem 0; }
  .appointment-grid div:last-child { border-bottom:0; }
  .fee-panel { grid-template-columns:1fr; gap:.5rem; padding:1.7rem; }
  .portrait-tall img { min-height:480px; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { scroll-padding-top: 112px; }
main section[id] { scroll-margin-top: 112px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--cream-100);
  color: var(--ink-900);
  line-height: 1.6;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

img { max-width: 100%; display: block; }
a { color: var(--ink-800); }
a:not(.btn) { text-decoration-color: var(--sage-500); text-underline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink-900);
  line-height: 1.15;
  margin: 0 0 0.6em;
  font-weight: 400;
}
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; max-width: 62ch; }

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

/* Focus visibility — never remove */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ---------------- Header ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 238, 0.94);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
}
.wordmark {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink-900);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  letter-spacing: -0.01em;
}
.wordmark .mark { width: 30px; height: 30px; flex: none; }
.wordmark strong { font-weight: 400; }
.wordmark span.sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-500);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.primary-nav ul {
  list-style: none;
  display: flex;
  gap: 1.8rem;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  text-decoration: none;
  color: var(--ink-700);
  font-size: 0.98rem;
  padding: 0.4em 0.1em;
  border-bottom: 2px solid transparent;
}
.primary-nav a[aria-current="page"] {
  border-bottom-color: var(--sage-500);
  color: var(--ink-900);
}
.primary-nav a:hover { border-bottom-color: var(--sage-400); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.75em 1.35em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary { background: var(--ink-900); color: #fff; }
.btn-primary:hover { background: var(--ink-700); box-shadow: 0 6px 18px rgba(16,28,44,0.22); }
.btn-secondary { background: transparent; border-color: var(--ink-800); color: var(--ink-900); }
.btn-secondary:hover { background: var(--ink-900); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink-800); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--sage-500); }
.btn-block { width: 100%; justify-content: center; }

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.menu-toggle .menu-icon, .menu-toggle::before, .menu-toggle::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink-900);
  position: relative;
}
.menu-toggle::before { transform: translateY(-6px); }
.menu-toggle::after { transform: translateY(4px); }

@media (max-width: 880px) {
  .site-header .container { flex-wrap: wrap; }
  .primary-nav {
    width: 100%;
    order: 4;
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-2) 0 0;
  }
  .primary-nav ul {
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--line);
  }
  .primary-nav li { border-bottom: 1px solid var(--line); }
  .primary-nav a { display: block; padding: 1em 0.2em; }
  .primary-nav .nav-cta { margin-top: var(--space-2); }
  .js .menu-toggle { display: inline-flex; }
  .js .primary-nav {
    position: fixed;
    inset: 78px 0 0 0;
    width: auto;
    order: initial;
    background: var(--cream-100);
    padding: var(--space-3) 1.5rem;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
  }
  .js .primary-nav.is-open { transform: translateX(0); }
  .js .primary-nav .nav-cta { margin-top: var(--space-3); }
  .header-call { display: none; }
}

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  padding: var(--space-6) 0 var(--space-5);
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-5);
  align-items: center;
}
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-500);
  margin-bottom: 1em;
}
.hero p.lede { font-size: 1.15rem; color: var(--ink-700); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: var(--space-3); }
.hero-figure { position: relative; }
.steps-motif { width: 100%; height: auto; }

.risk-strip {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-text);
  border-radius: var(--radius);
  padding: 0.9em 1.2em;
  font-size: 0.92rem;
  margin-top: var(--space-4);
  display: flex;
  gap: 0.7em;
  align-items: flex-start;
}
.risk-strip strong { display: block; }
.risk-strip svg { flex: none; margin-top: 0.15em; }

/* ---------------- Sections ---------------- */
section { padding: var(--space-5) 0; }
.section-cream { background: var(--cream-100); }
.section-paper { background: var(--paper); }
.section-ink { background: var(--ink-900); color: var(--cream-100); }
.section-ink h2, .section-ink h3 { color: #fff; }
.section-ink p { color: #d8ddd4; }
.section-head { max-width: 640px; margin-bottom: var(--space-4); }
.section-head .eyebrow { color: var(--sage-400); }

/* Trust stats */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.stat .num { font-family: var(--font-display); font-size: 2.1rem; color: var(--ink-900); display: block; }
.stat .label { font-size: 0.88rem; color: var(--ink-700); }
.confirm-note {
  font-size: 0.78rem;
  color: var(--sage-500);
  margin-top: var(--space-2);
}

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16,28,44,0.08); }
.card .icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--sage-100);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-2);
}
.card h3 { margin-bottom: 0.4em; }
.card p { font-size: 0.96rem; color: var(--ink-700); flex-grow: 1; }
.card .card-link {
  margin-top: 1em;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

/* About / split */
.split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-5);
  align-items: center;
}
.portrait-frame {
  aspect-ratio: 4 / 5;
  background: var(--sage-100);
  border-radius: var(--radius);
  border: 1px dashed var(--sage-500);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  color: var(--ink-700);
  font-size: 0.9rem;
}

/* Process */
.process-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.process-list li {
  border-top: 2px solid var(--sage-500);
  padding-top: var(--space-2);
}
.process-list .step-index {
  font-family: var(--font-display);
  color: var(--sage-500);
  font-size: 1.1rem;
  display: block;
  margin-bottom: 0.3em;
}

/* Testimonials */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.testimonial {
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  font-size: 0.9rem;
  color: var(--ink-700);
  font-style: italic;
}

/* CTA band */
.cta-band {
  background: var(--ink-900);
  color: var(--cream-100);
  border-radius: 18px;
  padding: var(--space-5);
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #d8ddd4; margin: 0 auto 1.6em; }
.cta-band .hero-actions { justify-content: center; }

/* Footer */
.site-footer {
  background: var(--ink-900);
  color: #cfd6cc;
  padding: var(--space-5) 0 var(--space-3);
  font-size: 0.9rem;
}
.site-footer a { color: #eef1ec; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer-grid h4 {
  font-family: var(--font-body);
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.9em;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.5em; }
.footer-warning {
  font-size: 0.78rem;
  color: #b7c0b1;
  margin-top: var(--space-3);
}
.footer-warning strong { color: #eee2d6; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.7em;
  padding-top: var(--space-3);
  font-size: 0.8rem;
  color: #9ba79a;
}

/* Page hero (inner pages) */
.page-hero { padding: var(--space-5) 0 var(--space-4); }
.page-hero .eyebrow { color: var(--sage-500); }
.page-hero p.lede { max-width: 60ch; color: var(--ink-700); font-size: 1.05rem; }

/* Legal pages */
.legal-body h2 { margin-top: 2em; font-size: 1.35rem; }
.legal-body h3 { font-size: 1.05rem; margin-top: 1.4em; }
.legal-body ul { max-width: 68ch; }
.legal-body { max-width: 74ch; }
.legal-toc {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}
.legal-toc h2 { font-size: 1rem; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; }
.legal-toc ol { padding-left: 1.2em; }

/* Warning callouts */
.warning-block {
  background: var(--warn-bg);
  border-left: 4px solid var(--warn-border);
  color: var(--warn-text);
  padding: 1em 1.2em;
  border-radius: 6px;
  margin: 1.5em 0;
  font-weight: 600;
}
.warning-block.small { font-weight: 400; font-size: 0.92rem; }

/* Forms */
.contact-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-5);
  align-items: start;
}
form.enquiry-form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.form-row { margin-bottom: var(--space-3); }
.form-row label { display: block; font-weight: 600; margin-bottom: 0.4em; font-size: 0.94rem; }
.form-row .hint { display: block; font-weight: 400; font-size: 0.82rem; color: var(--ink-700); margin-top: 0.3em; }
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75em 0.9em;
  border: 1px solid #c9c1ab;
  border-radius: 8px;
  background: #fff;
  color: var(--ink-900);
}
textarea { min-height: 130px; resize: vertical; }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 1em 1.1em; margin: 0; }
legend { font-weight: 600; padding: 0 0.4em; font-size: 0.94rem; }
.radio-row, .checkbox-row { display: flex; align-items: flex-start; gap: 0.6em; margin-bottom: 0.6em; font-size: 0.94rem; }
.radio-row input, .checkbox-row input { margin-top: 0.3em; }
.checkbox-row label { font-weight: 400; }
.hp-field { position: absolute; left: -9999px; top: -9999px; }
.contact-aside .card { margin-bottom: var(--space-3); }
noscript .noscript-note {
  display: block;
  background: var(--warn-bg);
  border-radius: 8px;
  padding: 1em;
  margin-bottom: var(--space-3);
  font-size: 0.9rem;
}

/* Regulatory badges row */
.badge-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: var(--space-2); }
.badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4em 0.9em;
  font-size: 0.8rem;
  color: var(--ink-700);
  background: var(--paper);
}

/* 404 */
.error-page { text-align: center; padding: var(--space-6) 0; }
.error-page .code { font-family: var(--font-display); font-size: 5rem; color: var(--sage-500); margin: 0; }

/* Responsive */
@media (max-width: 980px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-figure { order: -1; max-width: 380px; margin: 0 auto; }
  .split { grid-template-columns: 1fr; }
  .split .portrait-frame { max-width: 320px; margin: 0 auto; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .process-list { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .card-grid { grid-template-columns: 1fr; }
  .process-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  section { padding: var(--space-4) 0; }
  .hero { padding: var(--space-4) 0 var(--space-4); }
  .cta-band { padding: var(--space-4) var(--space-2); }
}

/* Final responsive ordering: the message always appears before the photograph. */
@media (max-width: 980px) {
  .hero-copy { order: 1; }
  .hero-figure { order: 2; margin: 2.4rem auto 0; }
}

/* ========================================================================== 
   VERSION 3 — dark premium direction following owner review
   ========================================================================== */
:root {
  --ink-900:#071f1c;
  --ink-800:#0b2b27;
  --ink-700:#476660;
  --sage-500:#52a89d;
  --sage-400:#78c1b6;
  --sage-100:#dcebe6;
  --cream-100:#e9e5da;
  --cream-200:#d8d2c3;
  --paper:#f7f4ec;
  --line:#bda66f;
  --copper:#d0aa58;
  --max-width:1260px;
  --font-display:"Iowan Old Style","Baskerville","Times New Roman",serif;
}

html { background:var(--ink-900); }
body { background:var(--ink-900); color:#e9eee9; opacity:1; transform:none; transition:opacity .38s ease,transform .38s ease; }
body.page-ready { opacity:1; transform:none; animation:page-arrive .38s ease both; }
body.page-leaving { opacity:0; transform:translateX(-16px); }
@keyframes page-arrive { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:none; } }
h1,h2,h3,h4 { color:#f6f1e7; }
p { color:#b9c9c2; }
a { color:#d7bd7b; }
.container { padding-left:2rem; padding-right:2rem; }

.site-header { background:rgba(7,31,28,.97); border-top:6px solid var(--copper); border-bottom:1px solid rgba(208,170,88,.22); backdrop-filter:blur(14px); }
.site-header .container { min-height:88px; }
.brand-logo { background:#f9f8f3; border:0; border-radius:8px; padding:.35rem .75rem; box-shadow:none; }
.brand-logo img { width:165px; }
.primary-nav { gap:1.3rem; }
.primary-nav ul { gap:1.8rem; }
.primary-nav a { color:#b8c9c2; font-size:.88rem; text-transform:uppercase; letter-spacing:.07em; font-weight:650; }
.primary-nav a:hover,.primary-nav a[aria-current="page"] { color:#fff; border-bottom-color:var(--copper); }
.btn { min-height:50px; padding:.85rem 1.55rem; border-radius:999px; justify-content:center; font-weight:750; letter-spacing:.035em; line-height:1; }
.btn-primary,.primary-nav .btn-primary,.site-header .nav-cta { background:var(--copper); border-color:var(--copper); color:#09231f !important; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.btn-primary:hover,.primary-nav .btn-primary:hover { background:#e1c276; color:#071f1c !important; transform:translateY(-2px); }
.btn-secondary,.btn-ghost,.header-call { border-color:rgba(215,189,123,.62); color:#f5eee0 !important; background:transparent; }
.header-call { min-width:170px; }

.hero { min-height:calc(100vh - 94px); display:flex; align-items:center; padding:5rem 0 4rem; background:radial-gradient(circle at 73% 42%,rgba(67,132,117,.23),transparent 27%),linear-gradient(115deg,#071f1c 0%,#0a2925 58%,#0d332d 100%); }
.hero .container { width:100%; grid-template-columns:minmax(0,1.18fr) minmax(320px,.72fr); gap:clamp(4rem,8vw,9rem); }
.hero-copy h1 { color:#f7f2e8; font-size:clamp(3.5rem,5.4vw,5.4rem); line-height:.98; max-width:11ch; }
.hero-copy .lede { color:#c4d2cc; font-size:1.13rem; line-height:1.75; max-width:56ch; }
.eyebrow { color:#d0aa58; font-weight:750; letter-spacing:.16em; }
.hero-actions { gap:.9rem; }
.hero-actions .btn { min-width:176px; }
.risk-strip { background:rgba(5,18,16,.45); border-color:rgba(208,170,88,.45); color:#e8d8b3; max-width:590px; }
.risk-strip strong { color:#e8d8b3; }
.photo-card { width:min(100%,330px); padding:0; background:transparent; border-radius:160px 160px 16px 16px; box-shadow:0 28px 70px rgba(0,0,0,.42); transform:none; overflow:hidden; border:1px solid rgba(208,170,88,.48); }
.photo-card::before,.photo-card span { display:none; }
.photo-card img { aspect-ratio:3/4; border-radius:0; object-position:50% 25%; }
.appointment-strip { background:#061b18; border-top:1px solid rgba(208,170,88,.25); border-bottom:1px solid rgba(208,170,88,.25); }
.appointment-grid strong { color:#f3ead6; }
.appointment-grid span { color:#93aaa3; }

.section-paper,.section-cream { background:var(--ink-800); }
.section-paper:nth-of-type(even),.section-cream:nth-of-type(even) { background:#0d312c; }
.section-ink { background:#051815; }
.section-head h2 { max-width:20ch; }
.card,form.enquiry-form,.legal-toc { background:rgba(255,255,255,.035); border-color:rgba(208,170,88,.28); color:#e9eee9; box-shadow:none; }
.card h3,.card p,.card a { position:relative; }
.card p { color:#aebfb8; }
.stat { border-color:rgba(208,170,88,.24); }
.stat .num { color:#d9bb70; }
.stat .label { color:#aabcb5; }
.portrait-frame { width:min(100%,360px); border-radius:12px; box-shadow:0 20px 55px rgba(0,0,0,.32); border:1px solid rgba(208,170,88,.42); }
.portrait-frame img,.portrait-tall img { min-height:0; aspect-ratio:4/5; object-fit:cover; object-position:50% 22%; }
.fee-panel { background:linear-gradient(120deg,rgba(208,170,88,.12),rgba(255,255,255,.03)); border-color:rgba(208,170,88,.3); }

.page-hero { padding:4.2rem 0 3rem; background:#092622; }
.page-hero h1 { max-width:19ch; font-size:clamp(2.9rem,5vw,4.6rem); }
.page-hero p.lede { color:#b7c8c1; font-size:1.08rem; }
.about-intro { min-height:calc(100vh - 94px); display:flex; align-items:center; padding:4rem 0; background:linear-gradient(120deg,#071f1c,#0d332d); }
.about-intro .split { grid-template-columns:360px minmax(0,1fr); gap:clamp(3rem,7vw,7rem); align-items:center; }
.about-copy h1 { font-size:clamp(3.1rem,5vw,5rem); max-width:13ch; margin-bottom:.25em; }
.about-copy .lede { color:#d6c28d; font-size:1.15rem; max-width:55ch; }
.about-copy h2 { font-size:1.75rem; margin-top:1.1rem; }
.about-copy p { max-width:68ch; }

.contact-page .page-hero { padding-bottom:2.5rem; }
.contact-page .section-cream { padding-top:3rem; background:linear-gradient(120deg,#071f1c,#0d302b); }
.contact-layout { grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); gap:2.5rem; }
form.enquiry-form { padding:2.2rem; }
.form-row label,legend { color:#e9eee9; }
input[type="text"],input[type="email"],input[type="tel"],textarea,select,fieldset { background:rgba(255,255,255,.045); border-color:rgba(208,170,88,.34); color:#fff; }
input:focus,textarea:focus { border-color:var(--copper); }
.hint { color:#9fb2aa !important; }

@media (max-width:980px) {
  .site-header .container { min-height:76px; }
  .hero { min-height:auto; }
  .hero .container { grid-template-columns:1fr; gap:2.5rem; }
  .hero-copy h1 { font-size:clamp(3rem,10vw,4.6rem); }
  .hero-figure { margin-top:1rem; }
  .photo-card { width:min(72vw,300px); }
  .about-intro { min-height:auto; }
  .about-intro .split { grid-template-columns:280px 1fr; gap:2.5rem; }
  .portrait-frame { max-width:none !important; }
}
@media (max-width:720px) {
  .container { padding-left:1.25rem; padding-right:1.25rem; }
  .about-intro .split,.contact-layout { grid-template-columns:1fr; }
  .about-intro .portrait-frame { width:min(78vw,280px); margin:0 auto; }
  .about-copy h1 { font-size:clamp(2.7rem,12vw,3.7rem); }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-actions .btn { width:100%; }
  .page-hero h1 { font-size:clamp(2.6rem,12vw,3.6rem); }
}

/* Final polish: contrast, visible controls and restrained interactive depth. */
.about-intro .about-copy h1 { color:#f5f4ef; }
.about-intro .about-copy p { color:#d2dfe5; }
.about-intro .about-copy .lede { color:#9ed2d6; }

.section-paper .btn-secondary,.section-cream .btn-secondary {
  color:var(--stepwell-deep) !important;
  border-color:var(--stepwell-teal);
  background:transparent;
}
.section-paper .btn-secondary:hover,.section-cream .btn-secondary:hover {
  color:#fff !important;
  background:var(--stepwell-teal);
  border-color:var(--stepwell-teal);
}

.stat,.process-list li {
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
.stat:hover,.stat:focus-within {
  transform:translateY(-7px);
  border-color:var(--stepwell-aqua);
  background:var(--stepwell-white);
  box-shadow:0 16px 30px rgba(7,26,48,.10);
}
.process-list li {
  border:1px solid transparent;
  border-top:2px solid var(--stepwell-teal);
  border-radius:12px;
  padding:1.25rem 1.15rem;
}
.process-list li:hover,.process-list li:focus-within {
  transform:translateY(-7px);
  border-color:#b8d0d3;
  border-top-color:var(--stepwell-teal);
  background:rgba(250,249,245,.78);
  box-shadow:0 16px 30px rgba(7,26,48,.09);
}
.home-page .portrait-frame { transition:transform .24s ease,box-shadow .24s ease; }
.home-page .portrait-frame:hover { transform:translateY(-6px); box-shadow:0 25px 55px rgba(7,26,48,.16); }

@media (prefers-reduced-motion:reduce) {
  .stat,.process-list li,.home-page .portrait-frame { transform:none !important; }
}

/* Mobile navigation: explicit contrast so the control and drawer cannot
   inherit desktop colours that make them appear blank. */
@media (max-width:880px) {
  .site-header .container { flex-wrap:nowrap; }
  .menu-toggle {
    display:inline-flex;
    position:relative;
    flex-direction:column;
    gap:5px;
    border-color:rgba(127,192,196,.75);
    background:rgba(255,255,255,.035);
    z-index:202;
  }
  .menu-toggle .menu-icon,
  .menu-toggle::before,
  .menu-toggle::after {
    position:static;
    width:20px;
    height:2px;
    margin:0;
    transform:none;
    background:#d9f0f1;
    border-radius:2px;
  }
  .menu-toggle[aria-expanded="true"] .menu-icon { display:none; }
  .menu-toggle[aria-expanded="true"]::before { position:absolute; transform:rotate(45deg); }
  .menu-toggle[aria-expanded="true"]::after { position:absolute; transform:rotate(-45deg); }
  .js .primary-nav {
    inset:93px 0 0;
    z-index:200;
    background:#0a2340 !important;
    padding:1.5rem 1.25rem 2rem;
    border-top:1px solid rgba(127,192,196,.25);
  }
  .js .primary-nav ul { border-top:0; }
  .js .primary-nav li { border-bottom:1px solid rgba(127,192,196,.2); }
  .js .primary-nav a:not(.btn) {
    color:#f3f6f6;
    font-size:1rem;
    padding:1.15rem .25rem;
  }
  .js .primary-nav a[aria-current="page"] { color:#8ed0d4; }
  .js .primary-nav .nav-cta {
    display:flex;
    margin-top:1.5rem;
    min-height:48px;
    color:#fff !important;
  }
}

@supports (view-transition-name: none) {
  @view-transition { navigation:auto; }
  ::view-transition-old(root) { animation:.24s ease both fade-out; }
  ::view-transition-new(root) { animation:.38s ease both fade-in; }
  @keyframes fade-out { to { opacity:0; transform:translateX(-12px); } }
  @keyframes fade-in { from { opacity:0; transform:translateX(12px); } }
}

/* ========================================================================== 
   VERSION 4 — distinct Stepwell blue identity
   ========================================================================== */
:root {
  --stepwell-navy:#0a2340;
  --stepwell-deep:#071a30;
  --stepwell-blue:#315f86;
  --stepwell-mid:#547b9a;
  --stepwell-teal:#16818b;
  --stepwell-aqua:#7fc0c4;
  --stepwell-mist:#e6ebeb;
  --stepwell-ivory:#f3f1ea;
  --stepwell-white:#faf9f5;
  --stepwell-line:#c9d3d5;
  --ink-900:var(--stepwell-deep);
  --ink-800:var(--stepwell-navy);
  --ink-700:#486174;
  --sage-500:var(--stepwell-teal);
  --sage-400:var(--stepwell-aqua);
  --sage-100:#dcebec;
  --cream-100:var(--stepwell-mist);
  --cream-200:#d8e0e2;
  --paper:var(--stepwell-ivory);
  --line:var(--stepwell-line);
  --copper:var(--stepwell-teal);
}

html,body { background:var(--stepwell-deep); }
.site-header { background:rgba(7,26,48,.97); border-top:5px solid var(--stepwell-teal); border-bottom-color:rgba(127,192,196,.24); }
.primary-nav a { color:#b9c9d4; }
.primary-nav a:hover,.primary-nav a[aria-current="page"] { color:#fff; border-bottom-color:var(--stepwell-aqua); }
.brand-logo { background:var(--stepwell-white); }

.btn,.primary-nav .btn { min-height:44px; padding:.72rem 1.25rem; font-size:.76rem; letter-spacing:.085em; text-transform:uppercase; white-space:nowrap; }
.primary-nav .nav-cta,.site-header .nav-cta { min-height:42px; padding:.65rem 1.05rem; font-size:.69rem; letter-spacing:.075em; background:var(--stepwell-teal); border-color:var(--stepwell-teal); color:#fff !important; box-shadow:none; }
.btn-primary,.primary-nav .btn-primary { background:var(--stepwell-teal); border-color:var(--stepwell-teal); color:#fff !important; box-shadow:0 8px 22px rgba(4,34,58,.18); }
.btn-primary:hover,.primary-nav .btn-primary:hover { background:#1e96a0; color:#fff !important; }
.btn-secondary,.btn-ghost,.header-call { border-color:rgba(127,192,196,.62); color:#eaf3f4 !important; }
.header-call { min-width:166px; }

.hero { background:radial-gradient(circle at 77% 45%,rgba(65,118,157,.34),transparent 27%),linear-gradient(112deg,#071a30 0%,#0a2b4b 58%,#123c5b 100%); }
.hero-copy h1 { color:#f4f3ed; }
.hero-copy .lede { color:#c4d2da; }
.eyebrow { color:var(--stepwell-aqua); }
.risk-strip { border-color:rgba(127,192,196,.4); background:rgba(3,15,29,.42); }
.risk-strip strong,.risk-strip { color:#dbe7eb; }
.photo-card { border-color:rgba(127,192,196,.55); border-radius:24px 24px 90px 24px; }
.appointment-strip { background:#102f50; border-color:rgba(127,192,196,.25); }
.appointment-grid strong { color:#f3f4f0; }
.appointment-grid span { color:#b2c7d2; }

.section-paper,.section-paper:nth-of-type(even) { background:var(--stepwell-ivory); color:var(--stepwell-deep); }
.section-cream,.section-cream:nth-of-type(even) { background:var(--stepwell-mist); color:var(--stepwell-deep); }
.section-paper h1,.section-paper h2,.section-paper h3,.section-paper h4,
.section-cream h1,.section-cream h2,.section-cream h3,.section-cream h4 { color:var(--stepwell-deep); }
.section-paper p,.section-cream p { color:#425b6c; }
.section-ink { background:var(--stepwell-deep); }
.section-head .eyebrow,.page-hero .eyebrow { color:var(--stepwell-teal); }
.card,form.enquiry-form,.legal-toc { background:rgba(250,249,245,.78); border-color:#c5d2d5; color:var(--stepwell-deep); box-shadow:0 10px 28px rgba(7,26,48,.055); }
.card h3 { color:var(--stepwell-deep); }
.card p { color:#526b79; }
.stat { border-color:#c6d1d2; }
.stat .num { color:var(--stepwell-blue); }
.stat .label { color:#526a78; }
.fee-panel { background:linear-gradient(120deg,#d7e5e7,rgba(250,249,245,.85)); border-color:#bfd0d3; }

.page-hero { background:var(--stepwell-ivory); }
.page-hero h1 { color:var(--stepwell-deep); }
.page-hero p.lede { color:#4f6877; }

.about-intro { min-height:calc(100vh - 93px); padding:3.2rem 0; background:linear-gradient(120deg,#0a2340,#123b5c); }
.about-intro .split { grid-template-columns:330px minmax(0,1fr); gap:clamp(3rem,6vw,6rem); align-items:start; }
.about-intro .portrait-frame { width:330px; margin-top:.1rem; background:#d9e5e5; padding:10px; border:0; border-radius:16px; box-shadow:0 18px 45px rgba(3,15,29,.3); }
.about-intro .portrait-frame img { aspect-ratio:4/5; border-radius:9px; }
.about-intro .portrait-frame img,.home-page .portrait-frame img,.photo-card img { object-position:50% 35%; }
.about-copy { padding-top:0; }
.about-copy h1 { font-size:clamp(2.8rem,4.2vw,4.25rem); line-height:1.02; max-width:none; margin:.25rem 0 .3rem; }
.about-copy .lede { color:#a9d3d7; font-size:1.04rem; margin-bottom:.8rem; max-width:72ch; }
.about-copy h2 { color:#f5f4ed; font-size:1.5rem; margin:.7rem 0 .3rem; }
.about-copy p { color:#c1d0d8; max-width:76ch; font-size:.96rem; line-height:1.58; margin-bottom:.65rem; }
.about-copy .btn { margin-top:.15rem; }

.contact-page .page-hero { background:var(--stepwell-ivory); }
.contact-page .section-cream { background:linear-gradient(120deg,#071a30,#0c3151); }
.contact-page .section-cream h1,.contact-page .section-cream h2,.contact-page .section-cream h3,.contact-page .section-cream h4,
.contact-page .section-cream label,.contact-page .section-cream legend { color:#f4f4ef; }
.contact-page .section-cream p { color:#b9cad3; }
.contact-page form.enquiry-form,.contact-page .card { background:rgba(255,255,255,.045); border-color:rgba(127,192,196,.27); color:#fff; box-shadow:none; }
.contact-page .card h3 { color:#f4f4ef; }
.contact-page input[type="text"],.contact-page input[type="email"],.contact-page input[type="tel"],.contact-page textarea,.contact-page fieldset { background:rgba(255,255,255,.055); border-color:rgba(127,192,196,.32); color:#fff; }
.contact-page input:focus,.contact-page textarea:focus { border-color:var(--stepwell-aqua); }
.contact-location-card { background:linear-gradient(145deg,rgba(31,143,153,.14),rgba(255,255,255,.035)) !important; }
.contact-location-card .eyebrow { color:#87d3d6; }
.contact-location-card h3 { margin:.35rem 0 .65rem; }
.contact-location-list { margin:.9rem 0 0; padding:0; list-style:none; }
.contact-location-list li { position:relative; padding:.46rem 0 .46rem 1.25rem; color:#c3d4dc; border-top:1px solid rgba(127,192,196,.18); }
.contact-location-list li::before { content:""; position:absolute; left:.05rem; top:1rem; width:6px; height:6px; border-radius:50%; background:var(--stepwell-aqua); }

.site-footer { background:#061729; }
.footer-grid { border-color:rgba(127,192,196,.18); }

@media (max-width:1100px) {
  .primary-nav ul { gap:1.1rem; }
  .primary-nav .nav-cta { display:none; }
}
@media (max-width:980px) {
  .about-intro .split { grid-template-columns:280px 1fr; gap:2.5rem; }
  .about-intro .portrait-frame { width:280px; }
  .about-copy h1 { font-size:clamp(2.7rem,6vw,3.7rem); }
}
@media (max-width:720px) {
  .about-intro .split { grid-template-columns:1fr; }
  .about-intro .portrait-frame { width:min(76vw,270px); margin:0 auto; }
  .about-copy h1 { font-size:clamp(2.55rem,11vw,3.45rem); }
  .primary-nav .nav-cta { display:flex; }
}

/* Homepage story carousel: a calm, editorial crossfade rather than a
   fast-moving promotional slider. It pauses whenever a visitor interacts. */
@media (min-width:981px) {
  .home-page .hero .container {
    grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);
    gap:clamp(3rem,5vw,6rem);
  }
}
.home-carousel {
  position:relative;
  width:min(100%,480px);
  margin-inline:auto;
  border-radius:28px 28px 108px 28px;
  box-shadow:0 34px 82px rgba(2,16,31,.48);
}
.home-carousel__viewport {
  position:relative;
  overflow:hidden;
  aspect-ratio:4/5;
  border:1px solid rgba(142,208,212,.65);
  border-radius:28px 28px 108px 28px;
  background:#123b5c;
}
.home-carousel__slide {
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  visibility:hidden;
  transform:scale(1.035);
  transition:opacity .9s ease,visibility .9s ease,transform 5.8s ease;
}
.home-carousel__slide.is-active {
  opacity:1;
  visibility:visible;
  transform:scale(1);
}
.home-carousel__slide::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(3,18,35,.68) 0,rgba(3,18,35,.05) 32%,transparent 54%);
  pointer-events:none;
}
.home-carousel__slide img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.home-carousel__slide:nth-child(1) img { object-position:50% 48%; }
.home-carousel__slide:nth-child(2) img { object-position:50% 52%; }
.home-carousel__slide:nth-child(3) img { object-position:50% 48%; }
.home-carousel__slide:nth-child(4) img { object-position:50% 50%; }
.home-carousel__slide:nth-child(5) img { object-position:50% 52%; }
.home-carousel__slide:nth-child(6) img { object-position:50% 52%; }
.home-carousel__slide:nth-child(7) img { object-position:50% 42%; }
.home-carousel__slide:nth-child(8) img { object-position:48% 50%; }
.home-carousel__slide figcaption {
  position:absolute;
  left:1.25rem;
  right:1.25rem;
  bottom:1.35rem;
  z-index:1;
  color:#fff;
  font-family:var(--font-heading);
  font-size:1.28rem;
  letter-spacing:.01em;
  text-shadow:0 2px 18px rgba(0,0,0,.42);
}
.home-carousel__slide figcaption span {
  display:block;
  margin-bottom:.16rem;
  color:#9ad5d7;
  font-family:var(--font-body);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.16em;
}
.home-carousel__caption--protection {
  max-width:12.5rem;
  line-height:1.08;
}
.home-carousel__caption--protection strong {
  color:inherit;
  font:inherit;
  font-weight:400;
  letter-spacing:inherit;
}

.home-carousel__controls {
  position:absolute;
  right:1.25rem;
  bottom:1.35rem;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:auto;
  padding:.58rem .72rem;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(4,23,40,.52);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
}
.home-carousel__dots { display:flex; flex:1; justify-content:center; gap:.42rem; }
.home-carousel__dots button {
  position:relative;
  overflow:hidden;
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.48);
  cursor:pointer;
  transition:width .3s ease,background .3s ease;
}
.home-carousel__dots button.is-active { width:30px; background:rgba(255,255,255,.44); }
.home-carousel__dots button.is-active::after {
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  transform-origin:left;
  animation:carousel-progress 4.4s linear both;
}
.home-carousel.is-paused .home-carousel__dots button.is-active::after { animation-play-state:paused; }
@keyframes carousel-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }

@media (max-width:980px) {
  .home-carousel { width:min(88vw,430px); }
}
@media (max-width:520px) {
  .home-carousel { width:min(91vw,380px); }
  .home-carousel__slide figcaption { left:1rem; bottom:.8rem; font-size:1.08rem; }
  .home-carousel__controls { right:.85rem; bottom:.85rem; }
  .home-carousel__caption--protection { max-width:10.5rem; line-height:1.08; }
}
@media (prefers-reduced-motion:reduce) {
  .home-carousel__slide { transition:none; transform:none; }
  .home-carousel__dots button.is-active::after { animation:none; transform:scaleX(1); }
}

/* A continuous, low-key summary of the journeys Lynsey can help with. */
.journey-ticker {
  overflow:hidden;
  color:#c4d6de;
  background:#071e36;
  border-bottom:1px solid rgba(127,192,196,.22);
}
.journey-ticker__track {
  display:flex;
  width:max-content;
  will-change:transform;
  animation:journey-scroll 36s linear infinite;
}
.journey-ticker:hover .journey-ticker__track { animation-play-state:paused; }
.journey-ticker__group {
  display:flex;
  flex-shrink:0;
  align-items:center;
  min-width:max-content;
  padding:.9rem 0;
}
.journey-ticker__group span {
  display:flex;
  align-items:center;
  gap:2.2rem;
  padding-left:2.2rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  white-space:nowrap;
}
.journey-ticker__group span::before {
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  border:1px solid #5fc0c6;
  transform:rotate(45deg);
}
@keyframes journey-scroll { to { transform:translateX(-50%); } }

/* Progressive scroll movement: subtle enough for a regulated professional
   site, with no content hidden unless JavaScript has successfully started. */
.motion-ready .reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .72s cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms),
             transform .72s cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms);
}
.motion-ready .reveal.is-visible { opacity:1; transform:none; }
.motion-ready .split > .reveal:first-child,
.motion-ready .contact-layout > .reveal:first-child,
.motion-ready .legal-layout > .reveal:first-child { transform:translateX(-22px); }
.motion-ready .split > .reveal:last-child,
.motion-ready .contact-layout > .reveal:last-child,
.motion-ready .legal-layout > .reveal:last-child { transform:translateX(22px); }
.motion-ready .split > .reveal.is-visible,
.motion-ready .contact-layout > .reveal.is-visible,
.motion-ready .legal-layout > .reveal.is-visible { transform:none; }

.stat,.process-list li,.appointment-grid > div {
  transition:transform .28s ease,border-color .28s ease,background-color .28s ease,box-shadow .28s ease;
}
.stat:hover,.process-list li:hover {
  transform:translateY(-4px);
  border-color:rgba(31,143,153,.48);
  box-shadow:0 16px 34px rgba(6,23,41,.09);
}
.appointment-grid > div:hover { background:rgba(127,192,196,.06); }

@media (max-width:640px) {
  .journey-ticker__group { padding:.78rem 0; }
  .journey-ticker__group span { gap:1.6rem; padding-left:1.6rem; font-size:.66rem; }
}
@media (prefers-reduced-motion:reduce) {
  .journey-ticker__track { width:100%; animation:none; }
  .journey-ticker__group { width:100%; flex-wrap:wrap; justify-content:center; row-gap:.35rem; }
  .journey-ticker__group[aria-hidden="true"] { display:none; }
  .motion-ready .reveal,.motion-ready .reveal.is-visible { opacity:1; transform:none; transition:none; }
  .stat,.process-list li,.appointment-grid > div { transition:none; }
}

/* Homepage compliance and location — deliberately separated from the opening
   sales message while remaining clear and prominent for review. */
.homepage-risk {
  color:#dce9ec;
  background:#061b31;
  border-top:1px solid rgba(127,192,196,.24);
  border-bottom:1px solid rgba(127,192,196,.24);
}
.homepage-risk__inner {
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.85rem;
  padding-top:1rem;
  padding-bottom:1rem;
  text-align:center;
}
.homepage-risk__inner svg { flex:0 0 auto; color:#79c8cc; }
.homepage-risk__inner p { margin:0; color:#dce9ec; font-size:.79rem; line-height:1.5; letter-spacing:.035em; }

.location-section { padding-top:clamp(4rem,7vw,6.5rem); padding-bottom:clamp(4rem,7vw,6.5rem); }
.location-panel {
  display:grid;
  grid-template-columns:72px minmax(0,1fr) minmax(290px,.72fr);
  gap:clamp(1.5rem,4vw,4.5rem);
  align-items:center;
  padding:clamp(2rem,4vw,3.5rem);
  border:1px solid #c1d2d6;
  border-radius:26px;
  background:linear-gradient(125deg,rgba(220,235,237,.74),rgba(250,249,245,.92));
  box-shadow:0 20px 55px rgba(7,26,48,.08);
}
.location-mark {
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--stepwell-teal);
  background:#f7f8f4;
  border:1px solid rgba(31,143,153,.24);
  box-shadow:0 12px 28px rgba(7,26,48,.08);
}
.location-copy h2 { margin:.25rem 0 .65rem; max-width:16ch; font-size:clamp(2.1rem,3.7vw,3.45rem); }
.location-copy p { max-width:62ch; margin:0; }
.location-details { margin:0; border-left:1px solid #b8cdd1; padding-left:clamp(1.5rem,3vw,2.75rem); }
.location-details div { padding:.78rem 0; border-bottom:1px solid rgba(148,174,180,.45); }
.location-details div:last-child { border-bottom:0; }
.location-details dt { color:#607987; font-size:.69rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.location-details dd { margin:.18rem 0 0; color:var(--stepwell-deep); font-family:var(--font-heading); font-size:1.15rem; }

@media (max-width:900px) {
  .location-panel { grid-template-columns:64px 1fr; }
  .location-mark { width:64px; height:64px; }
  .location-details { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); border-left:0; border-top:1px solid #b8cdd1; padding:1rem 0 0; }
  .location-details div { border-bottom:0; padding:.6rem 1rem; border-right:1px solid rgba(148,174,180,.45); }
  .location-details div:first-child { padding-left:0; }
  .location-details div:last-child { border-right:0; }
}
@media (max-width:560px) {
  .homepage-risk__inner { align-items:flex-start; justify-content:flex-start; text-align:left; }
  .homepage-risk__inner p { font-size:.72rem; }
  .location-panel { grid-template-columns:1fr; padding:1.6rem; border-radius:20px; }
  .location-mark { width:58px; height:58px; }
  .location-details { grid-column:auto; grid-template-columns:1fr; padding-top:.65rem; }
  .location-details div,.location-details div:first-child { padding:.72rem 0; border-right:0; border-bottom:1px solid rgba(148,174,180,.45); }
  .location-details div:last-child { border-bottom:0; }
}

/* ---------------- Wordmark lockup (icon + real text, replaces the old
   flattened logo image so the name is never trapped inside a small raster) ---------------- */
.brand-logo { gap:.4rem; padding:.32rem .65rem .32rem .5rem; }
.wordmark .wordmark-icon { width:36px; height:auto; flex:none; }
.wordmark .wordmark-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1;
  color: var(--stepwell-navy);
  letter-spacing: -0.01em;
}
.wordmark .wordmark-sub {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.6rem;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--stepwell-teal);
  align-self: center;
  margin-left: -0.15rem;
}
.footer-logo .wordmark-icon { width:34px; }
.footer-logo .wordmark-name { font-size: 1.2rem; }
.footer-logo .wordmark-sub { font-size: 0.56rem; }

@media (max-width: 760px) {
  .wordmark .wordmark-icon { width:38px; }
  .wordmark .wordmark-name { font-size: 1.28rem; }
  .wordmark .wordmark-sub { font-size: 0.58rem; letter-spacing: 0.1em; }
}
@media (max-width: 400px) {
  .wordmark .wordmark-icon { width:34px; }
  .wordmark .wordmark-name { font-size: 1.12rem; }
  .wordmark .wordmark-sub { display:none; }
}
