/* ==========================================================================
   JPS Finwise — design system v2

   Clean, modern, minimal. Neutral surfaces, generous space, one accent.

   Why this is a rewrite: v1 built its neutrals as tints of the brand orange
   (hue 35-40 degrees, up to 85% saturation), which read yellow and dated on a
   screen. Every neutral here is a true grey at hue 240 with 0-6% saturation,
   so white reads as white. Orange now appears only at full strength as an
   accent, never as a background tint.
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Surfaces — neutral, no warm cast */
  --surface:        #FFFFFF;
  --surface-2:      #FAFAFA;
  --surface-3:      #F4F4F5;
  --surface-inset:  #EBEBEE;

  /* Ink — near-black, faintly cool, derived from the logo's black */
  --ink:            #111013;
  --ink-90:         #26252B;
  --ink-70:         #46454E;
  --ink-50:         #71707A;
  --ink-40:         #8E8D97;
  --ink-30:         #B4B3BC;

  --border:         #E6E6E9;
  --border-strong:  #D3D3D8;

  /* Brand. #F66F00 (hue 27) leads because it reads orange rather than gold;
     #E18200 is the logo's own value, kept for identity moments. */
  --accent:         #F66F00;
  --accent-hover:   #DD6200;
  --accent-logo:    #E18200;
  --accent-ink:     #A8500A;   /* the only orange safe as text: 5.1:1 on white */

  /* Status — desaturated so they never compete with the accent */
  --ok:    #17663A;  --ok-bg:    #ECF6F0;
  --warn:  #8A5A00;  --warn-bg:  #FBF3E6;
  --risk:  #A81F1F;  --risk-bg:  #FBEEEE;
  --info:  #24527E;  --info-bg:  #EEF3F9;

  /* Type */
  --display: 'Alegreya Sans', Optima, Candara, 'Segoe UI', sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-display: clamp(2.25rem, 6.2vw, 4rem);
  --fs-h2:      clamp(1.625rem, 3.8vw, 2.5rem);
  --fs-h3:      1.1875rem;
  --fs-lead:    clamp(1.0625rem, 2.1vw, 1.1875rem);
  --fs-body:    1rem;
  --fs-small:   0.9375rem;
  --fs-micro:   0.8125rem;
  --fs-label:   0.75rem;

  /* Space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 104px; --s-10: 140px;

  /* Radius — generous and consistent */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Shadows — layered and soft, never a hard drop */
  --shadow-xs: 0 1px 2px rgb(17 16 19 / 5%);
  --shadow-sm: 0 1px 3px rgb(17 16 19 / 6%), 0 1px 2px rgb(17 16 19 / 4%);
  --shadow-md: 0 4px 14px -2px rgb(17 16 19 / 8%), 0 2px 6px -2px rgb(17 16 19 / 5%);
  --shadow-lg: 0 18px 44px -12px rgb(17 16 19 / 15%), 0 4px 12px -4px rgb(17 16 19 / 8%);

  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --gutter: 20px;
  --wrap: min(1200px, 100% - var(--gutter) * 2);
  --bar-h: 64px;
}

@media (min-width: 640px)  { :root { --gutter: 28px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { flex: none; }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--ink); color: #fff; }

/* --- Utilities ----------------------------------------------------------- */

.wrap { width: var(--wrap); margin-inline: auto; }
.wrap-narrow { width: min(760px, 100% - var(--gutter) * 2); margin-inline: auto; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: var(--gutter); z-index: 200;
  background: var(--ink); color: #fff;
  padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 0; color: #fff; }

.tabular { font-variant-numeric: tabular-nums; }
.mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.text-center { text-align: center; }
.center-row { justify-content: center; }
.lead-centered { margin: var(--s-5) auto var(--s-6); }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- Type ---------------------------------------------------------------- */

h1, .display {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-50);
  max-width: 58ch;
  letter-spacing: -0.008em;
}

.prose p { max-width: 68ch; margin-bottom: var(--s-4); color: var(--ink-70); }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { margin: var(--s-7) 0 var(--s-4); }
.prose h3 { margin: var(--s-6) 0 var(--s-3); color: var(--ink); }
.prose ul { margin: 0 0 var(--s-4); padding: 0; list-style: none; max-width: 68ch; }
.prose ul li { position: relative; padding-left: var(--s-5); margin-bottom: var(--s-3); color: var(--ink-70); }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.prose a { color: var(--accent-ink); }

.muted { color: var(--ink-50); }
.micro { font-size: var(--fs-micro); color: var(--ink-50); }

/* Section label. A small pill rather than a rule — cleaner and more current. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 13px 6px 10px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  border: 1px solid var(--border);
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  color: var(--ink-70);
  margin-bottom: var(--s-5);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* --- Sections ------------------------------------------------------------ */

.section { padding: var(--s-8) 0; }
@media (min-width: 1024px) { .section { padding: var(--s-9) 0; } }

.section--sunk { background: var(--surface-2); }
.section--ink { background: var(--ink); color: #fff; }
.section--ink .lead { color: rgb(255 255 255 / 62%); }
.section--ink .eyebrow {
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 14%);
  color: rgb(255 255 255 / 78%);
}
.section--tight { padding: var(--s-7) 0 var(--s-6); }

.section-head { margin-bottom: var(--s-7); max-width: 62ch; }
.section-head p { color: var(--ink-50); margin-top: var(--s-4); font-size: var(--fs-lead); }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: -0.008em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn:active { transform: scale(.985); }

.btn-primary { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--ink-90); color: #fff; box-shadow: var(--shadow-md); }

/* Orange fills carry INK labels. White on this orange is 2.92:1 and fails. */
.btn-accent { background: var(--accent); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-accent:hover { background: var(--accent-hover); color: var(--ink); box-shadow: var(--shadow-md); }

.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-3); color: var(--ink); border-color: var(--ink-30); }

.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--surface-3); }

.section--ink .btn-secondary {
  background: rgb(255 255 255 / 6%);
  color: #fff;
  border-color: rgb(255 255 255 / 18%);
}
.section--ink .btn-secondary:hover { background: rgb(255 255 255 / 12%); color: #fff; }

.btn-lg { min-height: 56px; padding-inline: var(--s-6); font-size: var(--fs-body); }
.btn-sm { min-height: 40px; padding-inline: var(--s-4); font-size: var(--fs-micro); }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.link-action {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; font-size: var(--fs-small);
  color: var(--ink); text-decoration: none;
}
.link-action svg { transition: transform var(--dur-base) var(--ease-out); color: var(--accent); }
.link-action:hover { color: var(--accent-ink); }
.link-action:hover svg { transform: translateX(4px); }

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgb(255 255 255 / 82%);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--border); box-shadow: var(--shadow-xs); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  min-height: 68px;
}
@media (min-width: 1024px) { .header-inner { min-height: 80px; } }

.logo { display: block; flex: none; }
.logo img { width: 132px; height: auto; }
@media (min-width: 1024px) { .logo img { width: 152px; } }

.nav-desktop { display: none; }
@media (min-width: 1024px) {
  .nav-desktop {
    display: flex; align-items: center; gap: 2px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    padding: 5px;
    border-radius: var(--r-full);
  }
  .nav-desktop a, .nav-dropdown > button {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px var(--s-4);
    border-radius: var(--r-full);
    color: var(--ink-70);
    text-decoration: none;
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: -0.005em;
    background: none; border: 0; cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .nav-desktop a:hover, .nav-dropdown > button:hover { color: var(--ink); background: var(--surface); }
  .nav-desktop a[aria-current="page"] {
    background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs);
  }
}

.header-actions { display: none; }
@media (min-width: 1024px) { .header-actions { display: flex; align-items: center; gap: var(--s-2); } }

.header-phone {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; font-size: var(--fs-micro);
  color: var(--ink); text-decoration: none;
  font-variant-numeric: tabular-nums;
  padding: 10px var(--s-4);
  border-radius: var(--r-full);
}
.header-phone svg { color: var(--accent); }
.header-phone:hover { background: var(--surface-3); color: var(--ink); }

.nav-dropdown { position: relative; }
.nav-dropdown > button svg { transition: transform var(--dur-fast) var(--ease); }
.nav-dropdown[data-open="true"] > button { background: var(--surface); color: var(--ink); }
.nav-dropdown[data-open="true"] > button svg { transform: rotate(180deg); }
.nav-dropdown-panel {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 300px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--s-2);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast);
}
.nav-dropdown[data-open="true"] .nav-dropdown-panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-dropdown-panel a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.nav-dropdown-panel a:hover { background: var(--surface-3); }
.dd-icon {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  color: var(--ink-70);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-dropdown-panel a:hover .dd-icon { background: var(--ink); color: #fff; }

/* --- Mobile drawer ------------------------------------------------------- */

.menu-toggle {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  cursor: pointer;
}
@media (min-width: 1024px) { .menu-toggle { display: none; } }

.drawer-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgb(17 16 19 / 42%);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}
.drawer-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; inset: var(--s-3) var(--s-3) var(--s-3) auto;
  z-index: 100;
  width: min(400px, calc(100vw - var(--s-3) * 2));
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  transform: translateX(calc(100% + var(--s-5)));
  transition: transform var(--dur-slow) var(--ease-out);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.drawer[data-open="true"] { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
  flex: none;
}
.drawer-close {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  background: var(--surface-3); border: 0;
  border-radius: var(--r-full); cursor: pointer;
}
.drawer-nav { padding: var(--s-3) var(--s-4); flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.drawer-nav > a, .drawer-nav button.drawer-expand {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  border: 0; border-radius: var(--r-sm);
  background: none;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}
.drawer-nav > a:hover, .drawer-expand:hover { background: var(--surface-3); }
.drawer-expand svg { transition: transform var(--dur-fast) var(--ease); color: var(--ink-40); }
.drawer-expand[aria-expanded="true"] svg { transform: rotate(180deg); }

.drawer-sub { display: none; padding: var(--s-1) 0 var(--s-3); }
.drawer-sub[data-open="true"] { display: block; }
.drawer-sub a {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 50px;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-70);
  text-decoration: none;
}
.drawer-sub a:hover { background: var(--surface-3); color: var(--ink); }
.drawer-sub .dd-icon { width: 30px; height: 30px; }

.drawer-actions {
  padding: var(--s-4) var(--s-5) var(--s-4);
  border-top: 1px solid var(--border);
  display: grid; gap: var(--s-2);
  flex: none;
}
.drawer-contact {
  padding: 0 var(--s-5) var(--s-5);
  font-size: var(--fs-micro);
  color: var(--ink-50);
  line-height: 1.7;
  flex: none;
}
.drawer-contact a { color: var(--ink); font-weight: 600; text-decoration: none; }

body[data-drawer-open="true"] { overflow: hidden; }

/* --- Mobile action bar --------------------------------------------------- */
/* A floating pill rather than a full-width bar: lighter, more current, and it
   keeps Call / WhatsApp / Enquire one thumb-move away on every page. */

.action-bar {
  position: fixed; left: var(--s-3); right: var(--s-3);
  bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
  z-index: 60;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 5px;
  background: rgb(255 255 255 / 88%);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-lg);
}
.action-bar a {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  min-height: 52px;
  border-radius: var(--r-full);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-70);
  text-decoration: none;
}
.action-bar a:active { background: var(--surface-3); }
.action-bar .action-primary { background: var(--accent); color: var(--ink); }
.action-bar .action-primary:active { background: var(--accent-hover); }

@media (min-width: 1024px) { .action-bar { display: none; } }
body:not(.no-bottom-bar) { padding-bottom: calc(var(--bar-h) + var(--s-5) + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { body { padding-bottom: 0 !important; } }

/* --- Hero ---------------------------------------------------------------- */

.hero { padding: var(--s-7) 0 var(--s-8); }
@media (min-width: 1024px) { .hero { padding: var(--s-8) 0 var(--s-9); } }

.hero-grid { display: grid; gap: var(--s-6); }
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-8); align-items: center; }
}

.hero h1 { margin-bottom: var(--s-5); }
.hero .lead { margin-bottom: var(--s-6); }

/* Factual proof points only. No invented statistics. */
.hero-trust { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.hero-trust li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px 8px 11px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--ink-70);
}
.hero-trust svg { color: var(--accent); }

/* --- Media frames -------------------------------------------------------- */

.frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: var(--shadow-md);
}
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame--tall   { aspect-ratio: 4 / 5; }
.frame--wide   { aspect-ratio: 3 / 2; }
.frame--square { aspect-ratio: 1; }

/* A caption card floating over the hero image — carries a real fact, not
   decoration. */
.frame-note {
  position: absolute;
  left: var(--s-4); right: var(--s-4); bottom: var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.frame-note .fn-icon {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border-radius: var(--r-xs);
  background: var(--accent); color: var(--ink);
}
.frame-note strong { display: block; font-size: var(--fs-small); font-weight: 600; letter-spacing: -0.01em; }
.frame-note span { font-size: var(--fs-micro); color: var(--ink-50); }

/* --- Cards --------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-5);
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease-out);
}
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: inherit;
}

/* --- Service tiles ------------------------------------------------------- */

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

.tile {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease-out);
}
.tile:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  color: inherit;
}
@media (min-width: 640px) { .tile { padding: var(--s-6); } }

/* A primary service is marked by a filled icon rather than a coloured stripe:
   quieter, and it still carries meaning. */
.tile-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--ink);
  margin-bottom: var(--s-5);
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.tile[data-primary="true"] .tile-icon { background: var(--accent); color: var(--ink); }
.tile:hover .tile-icon { background: var(--ink); color: #fff; }
.tile[data-primary="true"]:hover .tile-icon { background: var(--accent-hover); color: var(--ink); }
.tile-icon svg { width: 21px; height: 21px; }

.tile h3 { margin-bottom: var(--s-2); }
.tile p { font-size: var(--fs-small); color: var(--ink-50); line-height: 1.55; flex: 1; }
.tile .link-action { margin-top: var(--s-5); }

.tile-badge {
  position: absolute; top: var(--s-5); right: var(--s-5);
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  border: 1px solid var(--border);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-50);
}

/* --- Steps --------------------------------------------------------------- */

.steps { display: grid; gap: var(--s-3); }
@media (min-width: 760px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps--3 { grid-template-columns: repeat(3, 1fr); } }

.step {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.section--ink .step { background: rgb(255 255 255 / 4%); border-color: rgb(255 255 255 / 10%); }
.section--ink .step p { color: rgb(255 255 255 / 58%); }
.section--ink .step h3 { color: #fff; }

.step-n {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-4);
}
.section--ink .step-n { background: var(--accent); color: var(--ink); }
.step h3 { margin-bottom: var(--s-2); }
.step p { color: var(--ink-50); font-size: var(--fs-small); }

/* --- Router cards -------------------------------------------------------- */

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

.router-card {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: 84px;
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none; color: var(--ink);
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease-out);
}
.router-card:hover {
  border-color: var(--border-strong); box-shadow: var(--shadow-md);
  transform: translateY(-2px); color: var(--ink);
}
.rc-icon {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--ink);
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.router-card:hover .rc-icon { background: var(--accent); color: var(--ink); }
.rc-text { flex: 1; min-width: 0; }
.rc-text strong { display: block; font-size: var(--fs-small); font-weight: 600; letter-spacing: -0.01em; }
.rc-text span { font-size: var(--fs-micro); color: var(--ink-50); }
.router-card > svg:last-child { color: var(--ink-30); }
.router-card:hover > svg:last-child { color: var(--accent); }

/* --- Info blocks --------------------------------------------------------- */

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

.info-block {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.info-block h3 { margin-bottom: var(--s-2); }
.info-block p { font-size: var(--fs-small); color: var(--ink-50); }
.info-icon {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--ink);
  margin-bottom: var(--s-4);
}

.split { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .split { grid-template-columns: repeat(2, 1fr); gap: var(--s-8); } }

.checklist { display: grid; gap: var(--s-3); }
.checklist li {
  display: flex; gap: var(--s-3);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-70);
}
.checklist svg { flex: none; color: var(--accent); margin-top: 4px; }

/* --- FAQ ----------------------------------------------------------------- */

.faq { display: grid; gap: var(--s-2); }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease);
}
.faq details[open] { border-color: var(--border-strong); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: -0.012em;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 26px; height: 26px;
  border-radius: var(--r-full);
  background: var(--surface-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23111013' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform var(--dur-base) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-body { padding: 0 var(--s-5) var(--s-5); color: var(--ink-50); font-size: var(--fs-small); max-width: 70ch; }
.faq .faq-body p + p { margin-top: var(--s-3); }

/* --- Forms --------------------------------------------------------------- */

.field { margin-bottom: var(--s-5); }
.field label { display: block; font-weight: 600; font-size: var(--fs-small); margin-bottom: var(--s-2); }
.field .help { font-size: var(--fs-micro); color: var(--ink-50); margin-bottom: var(--s-3); }

.input, select.input, textarea.input {
  display: block; width: 100%;
  min-height: 54px;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input:focus {
  border-color: var(--ink);
  outline: none;
  box-shadow: 0 0 0 4px rgb(246 111 0 / 14%);
}
.input::placeholder { color: var(--ink-30); }
textarea.input { min-height: 124px; resize: vertical; line-height: 1.6; }
.input[aria-invalid="true"] { border-color: var(--risk); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgb(168 31 31 / 12%); }

.field-error {
  display: flex; align-items: flex-start; gap: var(--s-2);
  margin-top: var(--s-2);
  font-size: var(--fs-micro); font-weight: 500; color: var(--risk);
}
.field-error svg { flex: none; margin-top: 2px; }

.input-prefix { display: flex; }
.input-prefix .prefix {
  display: flex; align-items: center;
  padding: 0 var(--s-4);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  font-weight: 600; color: var(--ink-50);
  font-variant-numeric: tabular-nums;
}
.input-prefix .input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.choice-grid { display: grid; gap: var(--s-2); }
@media (min-width: 560px) { .choice-grid { grid-template-columns: repeat(2, 1fr); } }
.choice-grid--3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.choice {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 68px;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice .choice-mark {
  flex: none;
  width: 22px; height: 22px;
  border: 2px solid var(--border-strong);
  border-radius: var(--r-full);
  display: grid; place-items: center;
  transition: border-color var(--dur-fast) var(--ease);
}
.choice .choice-mark::after {
  content: ""; width: 10px; height: 10px;
  border-radius: var(--r-full); background: var(--accent);
  transform: scale(0); transition: transform var(--dur-fast) var(--ease-out);
}
.choice:hover { border-color: var(--ink-30); }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.choice:has(input:checked) .choice-mark { border-color: var(--accent); }
.choice:has(input:checked) .choice-mark::after { transform: scale(1); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.choice-label { font-weight: 600; font-size: var(--fs-small); }
.choice-label small { display: block; font-weight: 400; color: var(--ink-50); font-size: var(--fs-micro); margin-top: 2px; }

.checkbox { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; font-size: var(--fs-small); line-height: 1.55; }
.checkbox input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); }

/* Honeypot: hidden from sight AND from assistive technology, so no real
   person can fill it in. */
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.error-summary {
  padding: var(--s-4) var(--s-5);
  background: var(--risk-bg);
  border: 1px solid rgb(168 31 31 / 22%);
  border-radius: var(--r-md);
  margin-bottom: var(--s-6);
}
.error-summary h2 { font-family: var(--sans); font-size: var(--fs-small); color: var(--risk); margin-bottom: var(--s-2); }
.error-summary ul { list-style: none; padding: 0; margin: 0; }
.error-summary li { font-size: var(--fs-micro); color: var(--risk); margin-bottom: 3px; }

/* --- Progress ------------------------------------------------------------ */

.progress { margin-bottom: var(--s-6); }
.progress-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--fs-micro); font-weight: 600; color: var(--ink-50);
  margin-bottom: var(--s-2);
}
.progress-track { height: 4px; background: var(--surface-inset); border-radius: var(--r-full); overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: var(--r-full); transition: width var(--dur-base) var(--ease-out); }

/* --- Calculator ---------------------------------------------------------- */

.calc {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.calc-grid { display: grid; }
@media (min-width: 860px) { .calc-grid { grid-template-columns: 1.05fr 0.95fr; } }

.calc-inputs { padding: var(--s-5); }
@media (min-width: 700px) { .calc-inputs { padding: var(--s-6); } }

.calc-out { padding: var(--s-5); background: var(--ink); color: #fff; }
@media (min-width: 700px) { .calc-out { padding: var(--s-6); } }

.slider-field { margin-bottom: var(--s-6); }
.slider-field:last-child { margin-bottom: 0; }
.slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.slider-head label { font-weight: 600; font-size: var(--fs-small); }
.slider-value {
  font-family: var(--sans);
  font-weight: 700; font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  padding: 4px 11px;
  background: var(--surface-3);
  border-radius: var(--r-xs);
}

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 5px; background: var(--surface-inset); border-radius: var(--r-full); }
input[type="range"]::-moz-range-track { height: 5px; background: var(--surface-inset); border-radius: var(--r-full); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -9.5px;
  background: var(--ink); border: 4px solid #fff;
  border-radius: var(--r-full); box-shadow: var(--shadow-md);
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--ink); border: 4px solid #fff;
  border-radius: var(--r-full); box-shadow: var(--shadow-md);
}
input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.calc-result { padding-bottom: var(--s-5); margin-bottom: var(--s-5); border-bottom: 1px solid rgb(255 255 255 / 12%); }
.calc-result .label {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgb(255 255 255 / 55%); margin-bottom: var(--s-3);
}
.calc-emi {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 3.25rem);
  line-height: 1; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.calc-breakdown { display: grid; gap: var(--s-3); }
.calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); font-size: var(--fs-small); }
.calc-row dt { color: rgb(255 255 255 / 55%); }
.calc-row dd { font-weight: 600; font-variant-numeric: tabular-nums; margin: 0; color: #fff; }
.calc-note {
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid rgb(255 255 255 / 12%);
  font-size: var(--fs-micro); color: rgb(255 255 255 / 50%); line-height: 1.55;
}

/* --- Disclosure ---------------------------------------------------------- */

.disclosure {
  display: flex; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--surface-3);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  color: var(--ink-50);
  line-height: 1.55;
}
.disclosure svg { flex: none; color: var(--accent); margin-top: 2px; }

/* --- Breadcrumbs --------------------------------------------------------- */

.breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  font-size: var(--fs-micro); color: var(--ink-50);
  padding: var(--s-5) 0 0;
}
.breadcrumbs a { color: var(--ink-50); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs span[aria-current] { color: var(--ink); font-weight: 500; }
.breadcrumbs .sep { color: var(--ink-30); }

/* --- Loan page ----------------------------------------------------------- */

.loan-head { display: grid; gap: var(--s-6); }
@media (min-width: 940px) { .loan-head { grid-template-columns: 1.1fr 0.9fr; gap: var(--s-8); align-items: center; } }

.loan-aside {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.loan-aside-head {
  font-family: var(--sans); font-size: var(--fs-small); font-weight: 600;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
}
.loan-aside-list { margin: 0; padding: 0; }
.loan-aside-list > div { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
.loan-aside-list dt {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-40); margin-bottom: var(--s-1);
}
.loan-aside-list dd { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-70); }
.loan-aside-foot {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--ink);
  color: #fff; text-decoration: none;
  font-size: var(--fs-micro);
}
.loan-aside-foot:hover { background: var(--ink-90); color: #fff; }
.loan-aside-foot strong { display: block; color: #fff; font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.loan-aside-foot em { font-style: normal; color: rgb(255 255 255 / 55%); }
.loan-aside-foot svg { color: var(--accent); }

.considerations { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.considerations li {
  display: grid; grid-template-columns: 30px 1fr; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-70);
}
.considerations-n {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r-full);
  background: var(--ink); color: #fff;
  font-size: 0.6875rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- Contact ------------------------------------------------------------- */

.contact-actions { display: grid; gap: var(--s-2); }
.contact-action {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none; color: var(--ink);
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease-out);
}
.contact-action:hover {
  color: var(--ink); border-color: var(--border-strong);
  box-shadow: var(--shadow-md); transform: translateY(-2px);
}
.contact-action-icon {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-sm);
  background: var(--surface-3); color: var(--ink);
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.contact-action:hover .contact-action-icon { background: var(--accent); color: var(--ink); }
.contact-action-text strong { display: block; font-size: var(--fs-small); font-weight: 600; letter-spacing: -0.01em; }
.contact-action-text span { font-size: var(--fs-micro); color: var(--ink-50); }

.copy-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  padding: 0 var(--s-4);
  min-height: 42px;
  font-size: var(--fs-micro); font-weight: 600;
  cursor: pointer;
}
.copy-btn:hover { background: var(--surface-3); }

.footer-col-head {
  font-family: var(--sans); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-40); margin-bottom: var(--s-3);
}
.address-block address { font-style: normal; line-height: 1.7; color: var(--ink-70); }

/* --- Enquiry form -------------------------------------------------------- */

.apply-page { padding-bottom: var(--s-9); }
.apply-title { font-size: clamp(1.875rem, 6vw, 2.75rem); }

.apply-escape {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin: var(--s-5) 0 var(--s-6);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-3);
  border-radius: var(--r-md);
  font-size: var(--fs-micro);
  color: var(--ink-50);
}
.apply-escape > span { margin-right: auto; padding-left: var(--s-2); }
.apply-escape a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 0 var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-weight: 600; color: var(--ink); text-decoration: none;
}
.apply-escape a:hover { border-color: var(--ink); color: var(--ink); }
.apply-escape svg { color: var(--accent); }

.apply-form { margin-top: var(--s-5); }
.step-panel { border: 0; padding: 0; margin: 0 0 var(--s-6); min-width: 0; }
.step-legend {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 2rem);
  line-height: 1.12; letter-spacing: -0.025em;
  margin-bottom: var(--s-4); padding: 0;
}
.step-legend:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.step-help { color: var(--ink-50); font-size: var(--fs-small); margin-bottom: var(--s-5); }
.field-legend { font-weight: 600; font-size: var(--fs-small); margin-bottom: var(--s-3); padding: 0; }
fieldset.field { border: 0; padding: 0; margin: 0 0 var(--s-5); min-width: 0; }
.optional { font-weight: 400; color: var(--ink-40); font-size: var(--fs-micro); }

.amount-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  min-height: 46px; padding: 0 var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  font-weight: 600; font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--ink-30); }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }

.consent-field { padding: var(--s-4); background: var(--surface-3); border-radius: var(--r-md); }

.step-nav { display: flex; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--border); }
.step-nav .btn { flex: 1; }

/* --- Thank you ----------------------------------------------------------- */

.thanks { padding: var(--s-8) 0 var(--s-9); }
.thanks-mark {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: var(--r-full);
  background: var(--ok-bg); color: var(--ok);
  margin-bottom: var(--s-5);
}
.thanks-ref {
  display: inline-flex; align-items: baseline; gap: var(--s-3);
  margin: var(--s-5) 0;
  padding: var(--s-4) var(--s-5);
  background: var(--surface-3);
  border-radius: var(--r-md);
}
.thanks-ref span { font-size: var(--fs-micro); color: var(--ink-50); }
.thanks-ref strong { font-family: var(--sans); font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* --- QR landing ---------------------------------------------------------- */

.visit { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: var(--s-7) 0; }
.visit-head { text-align: center; margin-bottom: var(--s-6); }
.visit-head img { width: 200px; margin: 0 auto var(--s-4); }
.visit-actions { display: grid; gap: var(--s-2); }
.visit-action {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: 68px;
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-weight: 600; font-size: var(--fs-small);
  text-decoration: none; color: var(--ink);
}
.visit-action:hover { border-color: var(--ink); color: var(--ink); }
.visit-action--primary { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.visit-action--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--ink); }
.va-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border-radius: var(--r-sm);
  background: var(--surface-3);
}
.visit-action--primary .va-icon { background: rgb(17 16 19 / 12%); }

/* --- Footer -------------------------------------------------------------- */
/* Light, because the supplied logo becomes illegible on a dark ground and the
   artwork may not be altered. The dark band is the CTA section above. */

.site-footer { background: var(--surface-2); border-top: 1px solid var(--border); padding: var(--s-8) 0 0; }
.footer-grid { display: grid; gap: var(--s-6); }
@media (min-width: 700px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s-7); } }

.footer-brand img { width: 172px; margin-bottom: var(--s-4); }
.footer-brand p { font-size: var(--fs-small); color: var(--ink-50); max-width: 36ch; }

.footer-col h2 {
  font-family: var(--sans); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-40); margin-bottom: var(--s-4);
}
.footer-col ul { display: grid; gap: var(--s-3); }
.footer-col a { font-size: var(--fs-small); color: var(--ink-70); text-decoration: none; }
.footer-col a:hover { color: var(--ink); }
.footer-col address { font-style: normal; font-size: var(--fs-small); color: var(--ink-50); line-height: 1.7; }
.footer-col address a { display: inline-block; font-weight: 600; color: var(--ink); }

.footer-legal {
  margin-top: var(--s-7); padding: var(--s-5) 0;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  justify-content: space-between; align-items: center;
  font-size: var(--fs-micro); color: var(--ink-50);
}
.footer-legal nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer-legal a { color: var(--ink-50); text-decoration: none; }
.footer-legal a:hover { color: var(--ink); }
.footer-disclaimer {
  padding: 0 0 var(--s-7);
  font-size: var(--fs-micro); color: var(--ink-40);
  line-height: 1.6; max-width: 92ch;
}

/* --- Flash --------------------------------------------------------------- */

.flash {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  margin-bottom: var(--s-5);
  font-size: var(--fs-small);
}
.flash svg { flex: none; margin-top: 2px; }
.flash-ok    { background: var(--ok-bg);   color: var(--ok); }
.flash-error { background: var(--risk-bg); color: var(--risk); }
.flash-info  { background: var(--info-bg); color: var(--info); }

/* --- Error pages --------------------------------------------------------- */

.error-page { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; padding: var(--s-8) 0; }
.error-code {
  font-family: var(--display); font-weight: 700;
  font-size: 4rem; line-height: 1;
  color: var(--accent); margin-bottom: var(--s-4);
  font-variant-numeric: tabular-nums; letter-spacing: -0.04em;
}
.error-ref {
  display: inline-block; margin-top: var(--s-4);
  padding: var(--s-2) var(--s-4);
  background: var(--surface-3); border-radius: var(--r-sm);
  font-size: var(--fs-micro);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- Motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); }
  .reveal.is-visible {
    opacity: 1; transform: none;
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

/* --- Mobile refinements -------------------------------------------------- */

@media (max-width: 559px) {
  .hero { padding-top: var(--s-5); }
  .hero .btn-row .btn { flex: 1 1 100%; }
  .section-head { margin-bottom: var(--s-5); }
  .apply-escape > span { flex: 1 1 100%; margin-bottom: var(--s-2); }
  .apply-escape a { flex: 1; justify-content: center; }
  .frame-note { left: var(--s-3); right: var(--s-3); bottom: var(--s-3); }
}

/* --- Print --------------------------------------------------------------- */

@media print {
  .site-header, .action-bar, .drawer, .drawer-backdrop, .btn-row, .site-footer { display: none !important; }
  body { padding: 0 !important; background: #fff; }
  .section { padding: 12pt 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* --- Hero panel ----------------------------------------------------------
   A dark brand card carrying original geometry from the logo's vocabulary,
   with the five services listed on it. Both the page's main visual and its
   main entry point. */

.hero-panel {
  position: relative;
  background: var(--ink);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.motif { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.motif--hero { opacity: 1; }
.hero-panel-inner { position: relative; z-index: 1; padding: var(--s-5); }
@media (min-width: 640px) { .hero-panel-inner { padding: var(--s-6); } }

.hero-panel-head { margin-bottom: var(--s-5); }
.hero-panel-head span {
  display: block;
  font-family: var(--sans);
  font-size: 1.0625rem; font-weight: 600;
  letter-spacing: -0.015em; color: #fff;
}
.hero-panel-head small {
  display: block; margin-top: 4px;
  font-size: var(--fs-micro); font-weight: 400;
  color: rgb(255 255 255 / 52%);
}

.hero-panel-list { display: grid; gap: 4px; }
.hero-panel-list a {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 54px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: #fff; text-decoration: none;
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(255 255 255 / 7%);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.hero-panel-list a:hover {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 16%);
  color: #fff;
}
.hp-icon {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-xs);
  background: rgb(255 255 255 / 8%);
  color: #fff;
}
.hero-panel-list a[data-primary="true"] .hp-icon { background: var(--accent); color: var(--ink); }
.hp-icon svg { width: 17px; height: 17px; }
.hp-name { flex: 1; font-weight: 600; font-size: var(--fs-small); letter-spacing: -0.01em; }
.hero-panel-list a > svg:last-child { color: rgb(255 255 255 / 35%); }
.hero-panel-list a:hover > svg:last-child { color: var(--accent); }

.hero-panel-foot {
  display: flex; align-items: flex-start; gap: var(--s-3);
  margin-top: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-sm);
  background: rgb(246 111 0 / 12%);
  border: 1px solid rgb(246 111 0 / 22%);
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: rgb(255 255 255 / 62%);
  text-decoration: none;
}
.hero-panel-foot:hover { background: rgb(246 111 0 / 18%); color: rgb(255 255 255 / 75%); }
.hero-panel-foot strong { color: #fff; display: block; }
.hero-panel-foot svg { color: var(--accent); margin-top: 1px; }

/* A step card that closes the row with a link rather than another number. */
.step--cta { background: var(--accent) !important; border-color: var(--accent) !important; }
.step--cta h3, .step--cta p { color: var(--ink) !important; }
.step--cta p { opacity: .72; }
.step--cta .link-action { color: var(--ink); }
.step--cta .link-action svg { color: var(--ink); }

/* --- Service page motif -------------------------------------------------- */

.motif--service {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: var(--ink);
  opacity: .5;
}
.service-hero-art {
  position: relative;
  aspect-ratio: 8 / 5;
  border-radius: var(--r-lg);
  background: var(--surface-3);
  border: 1px solid var(--border);
  overflow: hidden;
}

/* --- Photography drop-in -------------------------------------------------
   When the business supplies real photographs of the booth, the team or
   customers, they slot straight into these frames and replace the geometry.
   Real photos of the actual business always beat stock. */

.photo-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-3); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }

/* --- Redesign corrections ------------------------------------------------ */

/* The hero panel subtitle was too faint to read. */
.hero-panel-head small { color: rgb(255 255 255 / 62%); font-size: var(--fs-micro); }

/* Five services in a three-column grid leave a hole. On wide screens the
   last two stretch to fill the row instead. */
@media (min-width: 1100px) {
  .tiles { grid-template-columns: repeat(6, 1fr); }
  .tiles > .tile { grid-column: span 2; }
  .tiles > .tile:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
  .tiles > .tile:nth-child(5):nth-last-child(1) { grid-column: 4 / span 2; }
}

/* The dark hero card needs a touch of separation from the page on light. */
.hero-panel { border: 1px solid rgb(255 255 255 / 8%); }
.hero-panel-head small { line-height: 1.45; }

/* On the enquiry form the form IS the action, so the bar would duplicate it
   and steal thumb space. The QR page is a single screen of actions already. */
body.no-bottom-bar .action-bar { display: none; }

/* --- Tap target sizing (WCAG 2.2 AA, 2.5.8) ------------------------------
   Inline links inside running prose are exempt, but anything that reads as a
   navigation control or a button gets a comfortable target on touch. */

@media (max-width: 1023px) {
  .footer-col ul a,
  .footer-col address a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-col ul { gap: 0; }

  .footer-legal nav a { display: inline-flex; align-items: center; min-height: 44px; }

  .breadcrumbs a { display: inline-flex; align-items: center; min-height: 40px; }

  .link-action { min-height: 44px; }

  .apply-escape a { min-height: 44px; }
}

.visit-title {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-2);
}

/* The phone and email in the mobile menu are real tap targets, not prose. */
.drawer-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* A 28px slider strip is fiddly to grab on a phone. Widening the input makes
   the whole row draggable while the visible track stays thin. */
input[type="range"] { height: 44px; }
input[type="range"]::-webkit-slider-thumb { margin-top: -9.5px; }

/* --- Header at intermediate widths ---------------------------------------
   Between the drawer breakpoint and a comfortable desktop the nav pill, the
   phone number and the CTA compete for the same row, and "How It Works"
   wraps onto two lines. Tighten everything through that band rather than
   letting items break. */

@media (min-width: 1024px) and (max-width: 1279px) {
  .nav-desktop { padding: 4px; }
  .nav-desktop a, .nav-dropdown > button {
    padding: 8px var(--s-3);
    font-size: 0.78125rem;
    white-space: nowrap;
  }
  .header-phone { padding: 8px var(--s-2); font-size: 0.78125rem; }
  .logo img { width: 132px; }
  .header-actions .btn-sm { padding-inline: var(--s-4); }
}

/* Below 1180px the phone number in the header is redundant — it is in the
   nav drawer, the footer, and on every page. Drop it before it forces a wrap. */
@media (max-width: 1119px) {
  .header-phone { display: none; }
}

/* Nav labels must never break mid-item. */
.nav-desktop a, .nav-dropdown > button { white-space: nowrap; }