/* ============================================================
   MAW WEBSITE — SHARED SITE CSS
   ============================================================
   Every page on the site includes this stylesheet.
   Page-specific layouts (hero, audit grid, pillar stack, etc.)
   live in inline <style> blocks per page.

   Brand DNA — do not change without explicit instruction.
   ============================================================ */

:root {
  /* Palette — brand constants, do not theme */
  --navy:        #1B355A;
  --navy-deep:   #152a47;
  --purple:      #5B316C;
  --rasp:        #A03A55;
  --orange:      #D87421;
  --yellow:      #FAB522;

  /* Ink + surfaces — light theme defaults; overridden by [data-theme="dark"] */
  --ink:         #1B355A;
  --ink-mute:    #5B6B82;
  --paper:       #FFFFFF;        /* was #FBFAF7 (cream) — white per Imraan, 28/09/2026 */
  --paper-2:     #FFFFFF;        /* was #F4F0E9 (cream band) — flattened to white per request */
  --surface:     #FFFFFF;        /* card / elevated surface */
  --surface-2:   #FFFFFF;        /* nested elevated surface (was #FBFAF7 cream) */

  /* Full-width section background. Was a white-to-cream gradient (23/08/2026);
     flattened to white with the rest of the cream on 28/09/2026 (Imraan's call).
     Kept as a gradient VALUE (not a colour) so every `background: var(--paper-grad)`
     still parses; the dark theme keeps its own gradient below.
     Rule of thumb still holds: full-width bands take --paper-grad, controls,
     chips and body take --paper. */
  --paper-grad:  linear-gradient(#FFFFFF, #FFFFFF);
  --rule:        rgba(27,53,90,0.12);
  --shadow-card: rgba(27,53,90,0.10);
  --nav-bg:      #1B355A;
  --nav-bg-solid: rgba(21, 42, 71, 0.96);

  /* Layout */
  --max:         1200px;

  /* Z-index scale — use these, never ad-hoc values */
  --z-base:   10;   /* decorative hero background */
  --z-raised: 20;   /* hero copy above background */
  --z-menu:   40;   /* mobile nav panel */
  --z-nav:    50;   /* sticky nav bar */
  --z-skip:   60;   /* skip link */

  /* Contrast-safe accent for small text on light surfaces */
  --accent-ink: #9F5516;   /* AA-safe orange for small text on light (~5.3:1 on paper) */
  --purple-ink: var(--purple);   /* text-safe purple; re-points lighter in dark theme */
  --rasp-ink:   var(--rasp);     /* text-safe raspberry; re-points lighter in dark theme */

  /* Easing */
  --ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-pop:    cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* DARK THEME — opt-in via <html data-theme="dark"> */
:root[data-theme="dark"] {
  --ink:         #F1ECE0;
  --ink-mute:    #93A8BC;
  --paper:       #0E1A2E;
  --paper-2:     #142442;
  --surface:     #1C3454;
  --surface-2:   #243F66;
  /* Same lift, dark tokens, same seam tail at 92%. A white-and-cream gradient
     cannot survive a dark surface, so the roles swap rather than the colours
     inverting. */
  --paper-grad:  linear-gradient(168deg,
                   #0E1A2E 0%,
                   #0E1A2E 44%,
                   #11203C 70%,
                   #16274A 92%,
                   #101D33 100%);
  --rule:        rgba(255,255,255,0.12);
  --shadow-card: rgba(0,0,0,0.45);
  --nav-bg:      #091422;
  --nav-bg-solid: rgba(9, 20, 34, 0.96);
  --accent-ink: #E59A4A;   /* brighter orange for small text on dark surfaces */
  --purple-ink: #B58DC2;   /* AA-safe purple for text/accents on dark surfaces (~4.5:1) */
  --rasp-ink:   #D98BA0;   /* AA-safe raspberry for text/accents on dark surfaces (~4.9:1) */
}

/* Smooth theme transition for everything that depends on these tokens */
html { transition: background-color 0.4s var(--ease, ease); }
body,
section,
nav.top,
footer,
.value-card,
.compliance-block,
.av-card,
.cyear-lane,
.cymark,
.cyband,
.dlnode,
.t-card,
.process-flow,
.svc-card,
.pillar,
.theme-toggle {
  transition: background-color 0.4s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Raleway', sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  font-weight: 400;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

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

section { padding: 90px 0; position: relative; }

/* Typography */
h1, h2, h3, h4 {
  font-family: 'Oswald', sans-serif;
  color: var(--navy);
  letter-spacing: -0.005em;
  line-height: 1.08;
}
h1 { font-size: 64px; font-weight: 700; letter-spacing: -0.015em; }
h2 { font-size: 42px; font-weight: 600; margin-bottom: 18px; }
h3 { font-size: 24px; font-weight: 600; }
h4 { font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
p  { margin-bottom: 1em; }

.eyebrow {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rasp-ink);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--orange);
}

.rule { height: 1px; background: var(--orange); width: 80px; margin: 24px 0; }


/* ============================================================
   NAV
   ============================================================ */

nav.top {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.25s ease;
}

nav.top .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

nav.top img {
  height: 74px;
  width: auto; /* the width/height attrs reserve space pre-load (CLS); CSS height + auto width keeps the true ratio */
  display: block;
  transition: height 0.25s ease;
}

nav.top ul {
  display: flex;
  list-style: none;
  gap: 34px;
  align-items: center;
}

nav.top ul a {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.25s ease;
  position: relative;
}
nav.top ul a:hover { color: var(--orange); }
nav.top ul a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease);
}
nav.top ul a:not(.btn):hover::after,
nav.top ul a:not(.btn).is-active::after { transform: scaleX(1); }
nav.top ul a:not(.btn).is-active { color: #fff; }
nav.top ul a.btn { transition: background 0.2s ease, transform 0.2s ease; min-height: 44px; }

/* Scrolled state */
nav.top.scrolled {
  background: rgba(21, 42, 71, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 28px rgba(0,0,0,0.18);
}
nav.top.scrolled .container { padding-top: 10px; padding-bottom: 10px; }
nav.top.scrolled img { height: 64px; }


/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease-pop), background 0.2s ease;
  border: none;
  position: relative;
  overflow: hidden;
}
@media (hover: hover) { .btn:hover { transform: translateY(-1px); } }
/* press feedback: quick scale-down on press, springs back out via --ease-pop */
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.06s, 0.2s; }

.btn-primary    { background: var(--orange); color: #fff; }
.btn-primary:hover { background: #bf6618; }
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
@media (hover: hover) { .btn-primary:hover::before { transform: translateX(100%); } }

.btn-secondary  { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-secondary:hover { background: var(--navy); color: #fff; }

.btn-on-dark    { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.6); }
.btn-on-dark:hover { background: #fff; color: var(--navy); border-color: #fff; }


/* ============================================================
   MOBILE NAV — hamburger + slide-down panel
   ============================================================ */

.nav-toggle {
  display: none;               /* shown only at <=960px */
  background: transparent;
  border: 0;
  padding: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle__bars {
  display: block;
  position: relative;
  width: 24px;
  height: 16px;
}
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease), top 0.25s var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 7px; }
.nav-toggle__bars span:nth-child(3) { top: 14px; }
nav.top.menu-open .nav-toggle__bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
nav.top.menu-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
nav.top.menu-open .nav-toggle__bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }


/* ============================================================
   NAV — Services dropdown (single-source generated contents)
   ============================================================ */
nav.top li.has-submenu { position: relative; }
nav.top .submenu-toggle {
  font-family: 'Oswald', sans-serif;
  font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  background: transparent; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
nav.top .submenu-toggle::after {
  content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px);
  transition: transform 0.25s var(--ease);
}
nav.top .submenu-toggle:hover { color: var(--orange); }
nav.top li.has-submenu[data-open="true"] .submenu-toggle::after { transform: rotate(225deg) translateY(2px); }

nav.top .submenu {
  display: block;          /* override the flex inherited from `nav.top ul` so items stack vertically */
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 250px; max-height: 76vh; overflow-y: auto; z-index: var(--z-nav);
  list-style: none; margin: 0; padding: 8px 0;
  background: var(--nav-bg-solid); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px; box-shadow: 0 18px 40px rgba(0,0,0,0.30);
  opacity: 0; transform: translateY(-8px); visibility: hidden;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
}
nav.top li.has-submenu:hover .submenu,
nav.top li.has-submenu[data-open="true"] .submenu {
  opacity: 1; transform: translateY(0); visibility: visible; transition-delay: 0s;
}
nav.top .submenu li { width: 100%; }
nav.top .submenu a {
  display: block; padding: 9px 20px; white-space: nowrap;
  font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.82); text-decoration: none; text-transform: none;
}
nav.top .submenu a::after { display: none; }
nav.top .submenu a:hover { color: var(--orange); background: rgba(255,255,255,0.04); }

/* Mobile: submenu becomes an indented expandable group inside the panel */
@media (max-width: 960px) {
  nav.top .submenu-toggle { width: 100%; justify-content: space-between; padding: 14px 4px; min-height: 44px; }
  nav.top .submenu {
    position: static; min-width: 0; border: 0; box-shadow: none; background: transparent;
    padding: 0 0 8px 14px; opacity: 1; transform: none; visibility: visible; transition: none;
    display: none;
  }
  nav.top li.has-submenu[data-open="true"] .submenu { display: block; }
  nav.top .submenu a { padding: 12px 4px; min-height: 44px; }
}


/* ============================================================
   PROOF STRIP — re-used on most pages
   ============================================================ */

.proof-strip {
  background:
    radial-gradient(120% 150% at 95% -25%, rgba(216,116,33,0.12), transparent 55%),
    linear-gradient(120deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding: 36px 0;
}
.proof-strip .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: center;
}
.pstat {
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--orange);
  padding-left: 18px;
  transition: transform 0.3s ease;
}
/* Cascaded reveal for proof strip — overrides the global reveal-stagger
   delays so each stat appears clearly one after the other (matches the
   per-stat count-up staggering in site.js). */
.proof-strip .reveal-stagger.reveal--in > .pstat { transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.proof-strip .reveal-stagger.reveal--in > .pstat:nth-child(1) { transition-delay: 0s; }
.proof-strip .reveal-stagger.reveal--in > .pstat:nth-child(2) { transition-delay: 0.12s; }
.proof-strip .reveal-stagger.reveal--in > .pstat:nth-child(3) { transition-delay: 0.24s; }
.proof-strip .reveal-stagger.reveal--in > .pstat:nth-child(4) { transition-delay: 0.36s; }
.pstat:first-child { border-left: none; padding-left: 0; }
@media (hover: hover) { .pstat:hover { transform: translateY(-2px); } }
.pstat .n {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: 42px;
  line-height: 1;
  transition: color 0.3s ease;
}
.pstat .n em { color: var(--orange); font-style: normal; }
.pstat:hover .n em { color: var(--yellow); }
.pstat .l {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 6px;
}


/* ============================================================
   FAQ ACCORDION — re-used across service pages
   ============================================================ */

.faq h2 { max-width: 680px; margin-bottom: 48px; }
.faq-list { max-width: 920px; }
details.q {
  border-bottom: 1px solid var(--rule);
  padding: 24px 0;
  transition: background 0.25s ease;
}
details.q[open] summary::after { transform: rotate(45deg); }
details.q summary {
  list-style: none;
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  transition: color 0.25s ease;
}
details.q summary:hover { color: var(--orange); }
details.q summary::-webkit-details-marker { display: none; }
details.q summary::after {
  content: "+";
  color: var(--orange);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  transition: transform 0.35s var(--ease), color 0.25s ease;
}
details.q .ans {
  padding-top: 14px;
  font-size: 18px;
  color: var(--ink);
  line-height: 1.65;
  max-width: 840px;
  animation: faq-in 0.3s var(--ease);
}
@keyframes faq-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
/* Smooth height on open/close where the browser supports animating to
   height:auto (Chrome/Edge today). Elsewhere the answer still fades in
   and the height snaps, exactly as before. */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  details.q { interpolate-size: allow-keywords; }
  details.q::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.3s var(--ease), content-visibility 0.3s allow-discrete;
  }
  details.q[open]::details-content { height: auto; }
}


/* ============================================================
   TESTIMONIAL CARDS — re-used across service pages
   ============================================================ */

.testimonials {
  background:
    radial-gradient(70% 95% at 100% 0%, rgba(216,116,33,0.05), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(91,49,108,0.05), transparent 60%),
    var(--paper-2);
}
.testimonials h2 { max-width: 680px; margin-bottom: 48px; }
.t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.t-card {
  background: #fff;
  padding: 36px 32px;
  border-radius: 3px;
  border-left: 3px solid var(--orange);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease), box-shadow 0.35s ease;
}
.t-card:nth-child(2) { border-left-color: var(--rasp); }
.t-card:nth-child(3) { border-left-color: var(--purple); }
@media (hover: hover) { .t-card:hover { transform: translateY(-5px); box-shadow: 0 14px 36px rgba(27,53,90,0.12); } }
.t-card .mark {
  font-family: 'Oswald', sans-serif;
  font-size: 48px;
  color: var(--orange);
  line-height: 0.5;
  margin-bottom: 14px;
  font-weight: 700;
  transition: transform 0.4s var(--ease-pop);
}
@media (hover: hover) { .t-card:hover .mark { transform: translateY(-3px); } }
.t-card:nth-child(2) .mark { color: var(--rasp); }
.t-card:nth-child(3) .mark { color: var(--purple); }
.t-card .body { font-size: 17px; line-height: 1.65; color: var(--ink); margin-bottom: 22px; flex: 1; }
.t-card .attrib {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  color: var(--navy);
  letter-spacing: 0.06em;
  font-weight: 500;
  line-height: 1.4;
}
.t-card .attrib span {
  color: var(--ink-mute);
  font-weight: 400;
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 4px;
}


/* ============================================================
   FINAL CTA — closing band, used on every page
   ============================================================ */

.final-cta {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(216,116,33,0.15), transparent 60%);
  pointer-events: none;
}
.final-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 6% 112%, rgba(160,58,85,0.20), transparent 60%);
  pointer-events: none;
}
.final-cta h2 {
  color: #fff;
  font-size: 48px;
  max-width: 760px;
  margin: 0 auto 18px;
  position: relative;
}
.final-cta .lede {
  color: rgba(255,255,255,0.78);
  font-size: 19px;
  max-width: 620px;
  margin: 0 auto 40px;
  position: relative;
}
.final-cta .row {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
}
/* "What happens on the call" line under the closing buttons (item 4) */
.final-cta .call-note {
  position: relative;
  max-width: 620px;
  margin: 28px auto 0;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  text-wrap: pretty;
}
.final-cta .call-note strong { color: #fff; font-weight: 600; }
.final-cta .call-note + .call-note { margin-top: 12px; }


/* ============================================================
   FOOTER
   ============================================================ */

footer {
  background:
    radial-gradient(85% 130% at 100% -10%, rgba(91,49,108,0.16), transparent 55%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 65%);
  color: rgba(255,255,255,0.6);
  padding: 64px 0 32px;
  font-size: 16px;
}
footer .container {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
}
footer img { height: 56px; width: auto; margin-bottom: 18px; }
footer .col .col-label {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-weight: 500;
}
footer .col p  { line-height: 1.7; font-size: 15.5px; }
footer .col a  { color: rgba(255,255,255,0.75); text-decoration: none; }
footer .col a:hover { color: var(--orange); }
footer .bottom {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  margin-top: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
footer .disclaimer {
  grid-column: 1 / -1;
  padding-top: 24px;
  font-size: 13px;
  color: rgba(255,255,255,0.62);
  line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,0.06);
}


/* ============================================================
   MOTION — primitives + reveal animations
   ============================================================ */

@keyframes maw-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes maw-slide-right {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes dot-pop {
  0%   { opacity: 0; transform: scale(0.2); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes arrow-glide {
  0%, 100% { transform: translateX(0); opacity: 0.85; }
  50%      { transform: translateX(6px); opacity: 1; }
}
@keyframes nav-drop {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* nav-drop is kept for reference but no longer runs on load: the nav is on
   every page view, so an entrance there made each navigation feel slower. */

/* Scroll-triggered reveal — JS adds .reveal--in when in viewport */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  will-change: opacity, transform;
}
.reveal.reveal--in { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.reveal-stagger.reveal--in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.reveal--in > *:nth-child(1)  { transition-delay: 0.03s; }
.reveal-stagger.reveal--in > *:nth-child(2)  { transition-delay: 0.07s; }
.reveal-stagger.reveal--in > *:nth-child(3)  { transition-delay: 0.11s; }
.reveal-stagger.reveal--in > *:nth-child(4)  { transition-delay: 0.15s; }
.reveal-stagger.reveal--in > *:nth-child(5)  { transition-delay: 0.19s; }
.reveal-stagger.reveal--in > *:nth-child(6)  { transition-delay: 0.23s; }
.reveal-stagger.reveal--in > *:nth-child(7)  { transition-delay: 0.27s; }
.reveal-stagger.reveal--in > *:nth-child(8)  { transition-delay: 0.31s; }
.reveal-stagger.reveal--in > *:nth-child(9)  { transition-delay: 0.35s; }
.reveal-stagger.reveal--in > *:nth-child(10) { transition-delay: 0.39s; }
.reveal-stagger.reveal--in > *:nth-child(11) { transition-delay: 0.40s; }
.reveal-stagger.reveal--in > *:nth-child(12) { transition-delay: 0.40s; }


/* ============================================================
   RESPONSIVE — mobile breakpoint for shared components
   ============================================================ */

@media (max-width: 960px) {
  h1 { font-size: 46px; }
  h2 { font-size: 32px; }
  .proof-strip .container { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .t-grid { grid-template-columns: 1fr; }
  footer .container { grid-template-columns: 1fr; }
  .nav-toggle { display: inline-flex; }

  nav.top ul {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-menu);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--nav-bg);
    padding: 8px 32px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 18px 30px rgba(0,0,0,0.28);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), visibility 0s var(--ease) 0.3s;
  }
  nav.top.menu-open ul {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), visibility 0s;
  }
  nav.top ul li { width: 100%; }
  nav.top ul a:not(.btn) {
    display: block;
    padding: 14px 4px;
    min-height: 44px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  nav.top ul a:not(.btn)::after { display: none; }
  nav.top ul a.btn {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 14px;
  }
  nav.top ul .theme-toggle-li { margin-top: 14px; align-self: flex-start; }
}


/* ============================================================
   ACCESSIBILITY — focus ring + skip link
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Remove the default ring only where focus-visible takes over */
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: 8px;
  top: -56px;
  z-index: var(--z-skip);
  background: var(--navy);
  color: #fff;
  padding: 10px 18px;
  border-radius: 4px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 8px; }


/* ============================================================
   PREFERS-REDUCED-MOTION — disable animations
   ============================================================ */

@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;
  }
  .reveal,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
  nav.top .submenu { transition-delay: 0s !important; }
}


/* ============================================================
   THEME TOGGLE BUTTON — auto-injected into nav by site.js
   ============================================================ */

.theme-toggle {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.85);
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: transform 0.35s var(--ease), color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  position: relative;
  overflow: hidden;
}
.theme-toggle:hover {
  color: var(--orange);
  border-color: var(--orange);
  transform: rotate(20deg);
}
.theme-toggle svg {
  width: 16px; height: 16px;
  transition: opacity 0.3s ease, transform 0.45s var(--ease-pop);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
[data-theme="light"] .theme-toggle .icon-sun { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-90deg); }
[data-theme="light"] .theme-toggle .icon-moon { opacity: 1; }
[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(90deg); }


/* ============================================================
   DARK THEME OVERRIDES
   ============================================================
   The :root[data-theme="dark"] block above re-points the token
   variables. The rules below cover places that use hard-coded
   colours (mostly #fff on cards and headings that lock to navy).
   ============================================================ */

[data-theme="dark"] body { background: var(--paper); color: var(--ink); }

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 { color: var(--ink); }

[data-theme="dark"] .article .a-body blockquote { color: var(--ink); }

/* Cards & elevated surfaces — solid surface, dark theme */
[data-theme="dark"] .value-card,
[data-theme="dark"] .compliance-block,
[data-theme="dark"] .av-card,
[data-theme="dark"] .t-card,
[data-theme="dark"] .process-flow,
[data-theme="dark"] .svc-card,
[data-theme="dark"] .pillar,
[data-theme="dark"] .yml-callout,
[data-theme="dark"] .stub,
[data-theme="dark"] .arch-flow,
[data-theme="dark"] .p-row,
[data-theme="dark"] .flagship .pill,
[data-theme="dark"] .details .left .upgrade {
  background: var(--surface);
  border-color: var(--rule);
  color: var(--ink);
}

/* Section backgrounds that hardcode paper-2 are fine (token shifts).
   These ensure the non-token backgrounds also shift. */
[data-theme="dark"] .hero,
[data-theme="dark"] .added-value,
[data-theme="dark"] .overview,
[data-theme="dark"] .process,
[data-theme="dark"] .faq,
[data-theme="dark"] .services { background: var(--paper-grad); }

[data-theme="dark"] .details,
[data-theme="dark"] .exclusions,
[data-theme="dark"] .testimonials {
  background:
    radial-gradient(70% 95% at 100% 0%, rgba(216,116,33,0.08), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(91,49,108,0.10), transparent 60%),
    var(--paper-2);
}

/* Headings & body bits that explicitly use --navy */
[data-theme="dark"] .value-card h3,
[data-theme="dark"] .av-card h3,
[data-theme="dark"] .compliance-block ul li strong,
[data-theme="dark"] .exclusions .right ul li strong,
[data-theme="dark"] .details .left .upgrade strong,
[data-theme="dark"] .process-step .step-title,
[data-theme="dark"] .t-card .attrib,
[data-theme="dark"] .flagship .pill,
[data-theme="dark"] .svc-card,
[data-theme="dark"] .svc-card h3,
[data-theme="dark"] .svc-card p,
[data-theme="dark"] .p-row,
[data-theme="dark"] details.q summary { color: var(--ink); }

/* Rotator second word (purple) needs a brighter variant on dark surface */
[data-theme="dark"] .rotator .word--2 { color: #B58DC2; }

/* Compliance-block accents that use --purple / --navy disappear on dark
   surfaces (--navy is identical to dark theme --surface). Override only
   in dark mode so light mode keeps the brand-pure palette. */
[data-theme="dark"] .compliance-block:nth-child(3) h3 { color: #B58DC2; }
[data-theme="dark"] .compliance-block:nth-child(3)::before { background: #B58DC2; }
[data-theme="dark"] .compliance-block:nth-child(4) h3 { color: #C8A2BD; }
[data-theme="dark"] .compliance-block:nth-child(4)::before { background: #C8A2BD; }

/* Secondary button on light bg needs to flip when bg is dark */
[data-theme="dark"] .btn-secondary { color: var(--ink); border-color: var(--ink); }
[data-theme="dark"] .btn-secondary:hover { background: var(--ink); color: var(--paper); }

/* Nav background swap */
[data-theme="dark"] nav.top { background: var(--nav-bg); }
[data-theme="dark"] nav.top.scrolled { background: var(--nav-bg-solid); }

/* Proof strip is already dark navy &mdash; bump it a touch deeper in dark theme */
[data-theme="dark"] .proof-strip {
  background:
    radial-gradient(120% 150% at 95% -25%, rgba(216,116,33,0.10), transparent 55%),
    linear-gradient(120deg, #0E1B2E 0%, #08111d 100%);
}

/* Footer is already dark — slight tone shift */
[data-theme="dark"] footer {
  background:
    radial-gradient(85% 130% at 100% -10%, rgba(91,49,108,0.20), transparent 55%),
    linear-gradient(165deg, #0a1322 0%, #060E1B 70%);
}


/* ============================================================
   AMBIENT MICRO-MOTION — slow background breathing on hero glows
   ============================================================ */

@keyframes glow-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.08); opacity: 0.78; }
}

@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(216,116,33,0.32); }
  50%      { box-shadow: 0 8px 34px rgba(216,116,33,0.55); }
}

/* Closing-band button: ONE beat when the band first scrolls into view
   (site.js adds .cta-beat to [data-cta-beat]). Replaces the endless pulse. */
@keyframes cta-beat {
  0%   { transform: translateY(0);    box-shadow: 0 4px 18px rgba(216,116,33,0.32); }
  45%  { transform: translateY(-3px); box-shadow: 0 10px 34px rgba(216,116,33,0.55); }
  100% { transform: translateY(0);    box-shadow: 0 4px 18px rgba(216,116,33,0.32); }
}
.btn.cta-beat { animation: cta-beat 0.9s var(--ease) 0.35s 1; }


/* ============================================================
   MID-PAGE CTA — one-line booking prompt placed after a page's
   strongest persuasive section (service pages)
   ============================================================ */

.mid-cta { padding: 0; margin: 8px 0; }
.mid-cta .container {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-top: 26px; padding-bottom: 26px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.mid-cta p { margin: 0; max-width: 680px; font-size: 18px; line-height: 1.5; color: var(--ink-mute); }
.mid-cta p strong { display: block; color: var(--ink); font-size: 19px; line-height: 1.35; margin-bottom: 2px; }
.mid-cta .btn { flex: 0 0 auto; }
.mid-cta p a.mid-cta-link { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (max-width: 720px) {
  .mid-cta .container { flex-direction: column; align-items: flex-start; gap: 16px; padding-left: 20px; padding-right: 20px; }
  .mid-cta .btn { width: 100%; justify-content: center; text-align: center; }
}


/* ============================================================
   MOBILE BOOKING BAR — injected by site.js on pages with a
   #book band, or on the homepage (no band) from the hero's enquiry
   button; phones only. Shown once the hero has scrolled away,
   hidden again over the #book band, the enquiry form and the footer.
   ============================================================ */

.book-bar { display: none; }
@media (max-width: 720px) {
  .book-bar {
    display: flex; gap: 10px; align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: calc(var(--z-menu) - 1);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--navy) 96%, transparent);
    border-top: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 -8px 24px rgba(10,20,40,0.18);
    transform: translateY(110%);
    transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 240ms;
    visibility: hidden;
  }
  .book-bar.is-shown {
    transform: translateY(0);
    visibility: visible;
    transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s;
  }
  .book-bar .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .book-bar .btn-primary { flex: 1 1 auto; padding: 10px 16px; font-size: 14px; }
  .book-bar .btn-on-dark { flex: 0 0 auto; padding: 10px 18px; font-size: 14px; }
  body:has(nav.top.menu-open) .book-bar { visibility: hidden; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .book-bar { transform: none; opacity: 0; transition: opacity 160ms ease, visibility 0s linear 160ms; }
  .book-bar.is-shown { opacity: 1; transition: opacity 160ms ease, visibility 0s; }
}


/* ============================================================
   HERO WORD ROTATOR — used on ATBC hero and reusable elsewhere
   ============================================================ */

.rotator {
  display: inline-grid;
  position: relative;
  vertical-align: bottom;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.rotator .word {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  transform: translateY(28px);
  white-space: nowrap;
  /* no will-change: one-shot entrance on tiny text spans — the browser
     promotes during the animation; a standing hint would hold layers forever */
}
/* whole swap lands in about 2.2 s (was about 6 s); phones skip straight to the last word */
.rotator .word--1 { color: var(--rasp);   animation: word-cycle 0.95s var(--ease) 0.15s forwards; }
.rotator .word--2 { color: var(--purple); animation: word-cycle 0.95s var(--ease) 0.95s forwards; }
.rotator .word--3 { color: var(--orange); animation: word-settle 0.6s var(--ease) 1.75s forwards; }
@media (max-width: 720px) {
  .rotator .word--1, .rotator .word--2 { display: none; }
  .rotator .word--3 { animation: none; opacity: 1; transform: none; }
}

@keyframes word-cycle {
  0%   { opacity: 0; transform: translateY(28px); }
  14%  { opacity: 1; transform: translateY(0); }
  78%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-28px); }
}
@keyframes word-settle {
  0%   { opacity: 0; transform: translateY(28px) scale(0.94); }
  55%  { opacity: 1; transform: translateY(-3px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .rotator .word { animation: none !important; opacity: 0; transform: none; }
  .rotator .word--3 { opacity: 1; }
}


/* ============================================================
   ARTICLE — blog post reading layout (used by /blog/<slug>/)
   ============================================================ */
.article { padding: 64px 0 80px; }
.article .container { max-width: 760px; }
.article .back { font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); text-decoration: none; }
.article .a-tag { display: inline-block; margin: 18px 0 10px; font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rasp); }
.article h1 { font-size: 44px; line-height: 1.08; margin-bottom: 16px; }
.article .a-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--ink-mute); font-size: 16px; margin-bottom: 28px; }
.article .a-hero { height: 320px; border-radius: 6px; margin-bottom: 36px; background: linear-gradient(135deg, var(--navy), var(--purple)); }
.article .a-hero-img { display: block; width: 100%; height: auto; border-radius: 6px; margin-bottom: 36px; }
.article .a-body { font-size: 18px; line-height: 1.75; color: var(--ink); }
.article .a-body figure { margin: 36px 0; }
.article .a-body figure img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--rule); }
.article .a-body figcaption { margin-top: 10px; font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); text-align: center; }

/* Hand-built article diagrams — inline SVG, theme-aware via tokens */
.article .a-body figure.diagram { margin: 36px 0; padding: 22px 20px 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 1px 3px var(--shadow-card); }
.article .a-body figure.diagram svg { display: block; width: 100%; height: auto; }
.article .a-body figure.diagram svg text { fill: var(--ink); font-family: 'Raleway', sans-serif; }
.article .a-body figure.diagram svg .dg-h { font-family: 'Oswald', sans-serif; }
.article .a-body figure.diagram svg .dg-mute { fill: var(--ink-mute); }
.article .a-body figure.diagram svg .dg-grid { stroke: var(--rule); fill: none; }
.article .a-body figure.diagram svg .dg-axis { stroke: var(--ink-mute); fill: none; }
.article .a-body figure.diagram svg .dg-panel { fill: var(--surface-2); stroke: var(--rule); }

/* Comparison table (eight-asset grid) */
.article .a-body figure.compare { margin: 36px 0; }
.article .a-body .compare-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 8px; -webkit-overflow-scrolling: touch; }
.article .a-body table.cmp { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 17px; line-height: 1.5; }
.article .a-body table.cmp caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.article .a-body table.cmp th, .article .a-body table.cmp td { text-align: left; padding: 12px 14px; vertical-align: top; border-bottom: 1px solid var(--rule); }
.article .a-body table.cmp thead th { font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; border-bottom: 0; }
.article .a-body table.cmp thead th.c-asset { background: var(--navy); }
.article .a-body table.cmp thead th.c-trap { background: var(--rasp); }
.article .a-body table.cmp thead th.c-fix { background: var(--orange); }
.article .a-body table.cmp tbody th { font-family: 'Oswald', sans-serif; font-weight: 600; color: var(--ink); }
.article .a-body table.cmp tbody tr:nth-child(even) { background: var(--surface-2); }
.article .a-body table.cmp tbody tr:last-child th, .article .a-body table.cmp tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 600px) { .article .a-body table.cmp { font-size: 16px; } }
.article .a-body h2 { font-size: 28px; margin: 40px 0 12px; }
.article .a-body h3 { font-size: 21px; margin: 28px 0 10px; }
.article .a-body p, .article .a-body ul, .article .a-body ol { margin-bottom: 1.1em; }
.article .a-body ul, .article .a-body ol { padding-left: 1.3em; }
.article .a-body blockquote { border-left: 3px solid var(--orange); padding: 6px 0 6px 20px; margin: 24px 0; color: var(--navy); font-size: 19px; }
.article .a-author { display: flex; gap: 16px; align-items: center; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--rule); }
.article .a-author .a-dot { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--orange), var(--rasp)); flex: 0 0 auto; }
@media (max-width: 960px) { .article h1 { font-size: 32px; } .article .a-body { font-size: 17px; } }


/* ============================================================
   PREMIUM LAYER — site-wide polish (vanilla, brand-locked)
   Scroll-progress bar, brand scrollbar, gradient text, live
   status dot. Used across the site to lift the premium feel.
   ============================================================ */

/* Scroll-progress bar — thin sliver at the very top, fills with page scroll */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  z-index: var(--z-skip);
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--orange), var(--rasp) 60%, var(--purple));
  will-change: transform;
  pointer-events: none;
}

/* Custom brand scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--orange) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--orange);
  border-radius: 8px;
  border: 3px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--orange); }

/* Accent numerals / words. Was gradient text; solid highlight colour from the
   design series (04/11/2026), see .gradient-text in that block. */
.gradient-text { color: var(--hl, #C25617); }

/* Live status dot — pulsing presence indicator (footer) */
.status-line {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange); position: relative; flex-shrink: 0;
}
.status-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--orange);
  animation: status-ping 2.6s var(--ease) infinite;
}
@keyframes status-ping {
  0%        { transform: scale(1);   opacity: 0.55; }
  70%, 100% { transform: scale(2.7); opacity: 0; }
}

/* Eyebrow dash sweep — the orange dash draws in when the eyebrow reveals */
.eyebrow::before { transform-origin: left center; }
.eyebrow.reveal.reveal--in::before { animation: eyebrow-sweep 0.7s var(--ease) 0.1s both; }
@keyframes eyebrow-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Arrow-nudge — "Learn more →" style CTAs glide on card hover */
.svc-card .more,
.bp-card .bp-more,
.article .back { display: inline-block; transition: transform 0.3s var(--ease); }
@media (hover: hover) { .svc-card:hover .more,
.bp-card:hover .bp-more,
.article .back:hover { transform: translateX(5px); } }
@media (hover: hover) { .article .back:hover { transform: translateX(-5px); } } /* back-link nudges the way it points */

/* Services dropdown — items cascade in (desktop only; mobile panel is static) */
@media (min-width: 961px) {
  nav.top .submenu li {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }
  nav.top li.has-submenu:hover .submenu li,
  nav.top li.has-submenu[data-open="true"] .submenu li { opacity: 1; transform: none; }
  nav.top li.has-submenu:hover .submenu li:nth-child(1),  nav.top li.has-submenu[data-open="true"] .submenu li:nth-child(1)  { transition-delay: 0.02s; }
  nav.top li.has-submenu:hover .submenu li:nth-child(2),  nav.top li.has-submenu[data-open="true"] .submenu li:nth-child(2)  { transition-delay: 0.05s; }
  nav.top li.has-submenu:hover .submenu li:nth-child(3),  nav.top li.has-submenu[data-open="true"] .submenu li:nth-child(3)  { transition-delay: 0.08s; }
  nav.top li.has-submenu:hover .submenu li:nth-child(4),  nav.top li.has-submenu[data-open="true"] .submenu li:nth-child(4)  { transition-delay: 0.11s; }
  nav.top li.has-submenu:hover .submenu li:nth-child(5),  nav.top li.has-submenu[data-open="true"] .submenu li:nth-child(5)  { transition-delay: 0.14s; }
  nav.top li.has-submenu:hover .submenu li:nth-child(6),  nav.top li.has-submenu[data-open="true"] .submenu li:nth-child(6)  { transition-delay: 0.17s; }
  nav.top li.has-submenu:hover .submenu li:nth-child(7),  nav.top li.has-submenu[data-open="true"] .submenu li:nth-child(7)  { transition-delay: 0.20s; }
  nav.top li.has-submenu:hover .submenu li:nth-child(8),  nav.top li.has-submenu[data-open="true"] .submenu li:nth-child(8)  { transition-delay: 0.23s; }
  nav.top li.has-submenu:hover .submenu li:nth-child(9),  nav.top li.has-submenu[data-open="true"] .submenu li:nth-child(9)  { transition-delay: 0.26s; }
  nav.top li.has-submenu:hover .submenu li:nth-child(10), nav.top li.has-submenu[data-open="true"] .submenu li:nth-child(10) { transition-delay: 0.29s; }
  nav.top li.has-submenu:hover .submenu li:nth-child(11), nav.top li.has-submenu[data-open="true"] .submenu li:nth-child(11) { transition-delay: 0.32s; }
}


/* ============================================================
   AUDIENCE (11/10/2026): medical practitioners or business owners.
   [data-aud-only] blocks show only for the chosen audience; the
   choice is set on <html data-aud> by shared/site.js.
   ============================================================ */
html:not([data-aud="medical"]) [data-aud-only="medical"],
html:not([data-aud="business"]) [data-aud-only="business"] { display: none !important; }
/* 05/11/2026: [data-aud-hide] shows only while NO audience is chosen
   (the full catalogue); [data-aud-show] only once one is (the
   "Show all services" switch). */
html[data-aud] [data-aud-hide] { display: none !important; }
html:not([data-aud]) [data-aud-show] { display: none !important; }
.aud-link {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px;
}
.aud-link:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 2px; }
.svc-others { margin: 26px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font-size: 16px; }
.svc-others span { color: var(--ink-mute); font-weight: 600; margin-right: 4px; }
.svc-others a {
  display: inline-block; padding: 7px 14px; border: 1px solid var(--line, rgba(27,53,90,0.18));
  border-radius: 999px; color: var(--ink); text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease;
}
.svc-others a:hover, .svc-others a:focus-visible { border-color: var(--orange); color: var(--accent-ink); }
.svc-switch { margin: 30px 0 0; font-size: 17px; }
/* 05/11/2026: an audience card scrolls to its shortlist, clear of the sticky menu bar */
.svc-aud { scroll-margin-top: calc(var(--nav-h, 96px) + 24px); }
/* the homepage services band is navy in both themes */
.services .svc-others span { color: rgba(255,255,255,0.62); }
.services .svc-others a { color: rgba(255,255,255,0.88); border-color: rgba(255,255,255,0.24); }
.services .svc-others a:hover, .services .svc-others a:focus-visible { color: #fff; border-color: var(--orange); }
.services .aud-link { color: #E59A4A; }

.audience { padding: 72px 0; border-bottom: 1px solid var(--rule); }
.audience h2 { margin-bottom: 28px; }
.aud-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.aud-card {
  display: flex; flex-direction: column; gap: 10px;
  text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
  padding: 26px 28px; box-shadow: 0 6px 20px var(--shadow-card);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
@media (hover: hover) { .aud-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px var(--shadow-card); } }
.aud-card:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.aud-card[aria-pressed="true"] { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange), 0 14px 34px var(--shadow-card); }
.aud-k { font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: 0.01em; }
.aud-msg { color: var(--ink-mute); font-size: 18px; line-height: 1.55; }
.aud-go { color: var(--accent-ink); font-weight: 600; font-size: 16px; margin-top: auto; padding-top: 6px; }
.aud-status { margin: 22px 0 0; color: var(--ink-mute); font-size: 17px; }
.aud-status a, .aud-note a { color: var(--accent-ink); }
.aud-now { color: var(--ink); font-weight: 600; }
.aud-now:empty { display: none; }

.aud-callout {
  display: block; margin: 18px 0 0; padding: 18px 22px; color: var(--ink); text-decoration: none;
  background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--orange);
  border-radius: 10px; box-shadow: 0 6px 20px var(--shadow-card);
}
.aud-callout .ac-tag { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 6px; }
.aud-callout strong { display: block; font-size: 17px; }
.aud-callout .ac-body { display: block; color: var(--ink-mute); font-size: 17px; margin-top: 4px; }
.aud-note { margin-top: 14px; font-size: 17px; color: var(--ink-mute); }

@media (max-width: 700px) {
  .audience { padding: 56px 0; }
  .aud-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .aud-card { transition: none; }
  .aud-card:hover { transform: none; }
}


/* ============================================================
   DESIGN SERIES (04/11/2026, approved by Imraan)
   One type scale, one vertical rhythm, one accent rule, the
   credentials strip, the "who you'll speak to" block and the
   page sub-nav. Everything here uses existing brand colours:
   #C25617 is the site's own hero highlight, #E59A4A / #D98BA0 /
   #BC97C8 are the existing on-dark text variants.
   Selectors are deliberately one step more specific than the
   per-page inline rules they replace.
   ============================================================ */

:root {
  --btn-primary-bg:    #C25617;   /* white text 4.53:1 (AA) */
  --btn-primary-hover: #A8530F;   /* white text 5.37:1 */
  --hl:                #C25617;   /* the one highlight-word colour */
  --on-dark-orange:    #E59A4A;   /* small orange text on navy, 5.3:1 */
  --on-dark-rasp:      #D98BA0;   /* small raspberry text on navy, 4.8:1 */
  --on-dark-purple:    #BC97C8;   /* small purple text on navy, 4.9:1 */
  --fs-h1: clamp(40px, 5vw, 64px);
  --fs-h2: clamp(30px, 3.4vw, 42px);
  --fs-h3: clamp(20px, 2vw, 24px);
  --section-y: 96px;
  --band-y:    64px;
}
:root[data-theme="dark"] { --hl: #E59A4A; }
@media (max-width: 760px) { :root { --section-y: 64px; --band-y: 48px; } }

/* ---------- D6 type scale ---------- */
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
main .hero h1,
main .res-hero h1 { font-size: var(--fs-h1); }
main .flagship h2,
main .exclusions .left h2 { font-size: var(--fs-h2); }
main .final-cta h2 { font-size: clamp(32px, 3.8vw, 48px); }

/* ---------- D9 one vertical rhythm ---------- */
section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
main .final-cta { padding-top: var(--section-y); padding-bottom: var(--section-y); }

/* ---------- D3 primary button ---------- */
.btn-primary { background: var(--btn-primary-bg); color: #fff; }
.btn-primary:hover { background: var(--btn-primary-hover); }
nav.top ul a.btn,
nav.top ul a.btn:hover { color: #fff; }
nav.top .nav-cta { min-height: 44px; }

/* ---------- D8 one accent rule ---------- */
main .hero h1 .accent,
main .hero h1 .hl,
main .res-hero h1 .hl,
main .flagship h2 .accent { color: var(--hl); }
.gradient-text {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--hl);
}
::-webkit-scrollbar-thumb { background: var(--orange); }
/* Ghost numerals on the service cards: quieter at rest and on hover */
main .svc-card::before { opacity: 0.03; }
@media (hover: hover) { main .svc-card:hover::before { opacity: 0.15; } }

/* ---------- D4 small accent text that sits on navy ---------- */
main .svc-card[data-fam="core"] { --accent-text: var(--on-dark-orange); }
main .svc-card[data-fam="tax"]  { --accent-text: var(--on-dark-rasp); }
main .svc-card[data-fam="auto"] { --accent-text: var(--yellow); }
main .svc-card .more,
main .svc-card .num { color: var(--accent-text, var(--on-dark-orange)); }
main .svc-flagship .sf-tag,
main .svc-flagship .more,
main .svc-card--feature .start-here { color: var(--on-dark-orange); }
main .flagship .pill .num { color: var(--accent-ink); }
main .pg--statutory dt { color: var(--on-dark-purple); }

/* ---------- D7 service-page heroes: left aligned, readable measure ---------- */
body.svc-page main .hero .container { text-align: left; max-width: var(--max); }
body.svc-page main .hero h1 { max-width: 980px; }
body.svc-page main .hero .rotator .word--3 { color: var(--hl); }

/* ---------- D7 homepage hero: three-line headline on a clear field ---------- */
body.home-page main .hero .hero-copy { max-width: 900px; }
body.home-page main .hero h1 { font-size: clamp(40px, 4.1vw, 58px); line-height: 1.04; }
body.home-page main .hero p.lede { max-width: 600px; }
@media (min-width: 961px) {
  body.home-page main .hero .bp {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 40%, rgba(0,0,0,0.35) 60%, #000 84%);
            mask-image: linear-gradient(to right, transparent 0%, transparent 40%, rgba(0,0,0,0.35) 60%, #000 84%);
  }
}
body.svc-page main .hero .eyebrow,
body.svc-page main .hero .cta-row { justify-content: flex-start; }
body.svc-page main .hero p.lede,
body.svc-page main .hero .lede {
  max-width: 62ch;
  margin-left: 0;
  margin-right: 0;
}

/* ---------- D11 tap targets ---------- */
.theme-toggle { width: 44px; height: 44px; }
details.q summary { min-height: 48px; }

/* ---------- D2 footer ---------- */
footer .bottom { color: rgba(255,255,255,0.65); flex-wrap: wrap; gap: 10px 24px; }
footer .bottom a { color: rgba(255,255,255,0.72); text-decoration: none; }
footer .bottom a:hover { color: var(--on-dark-orange); }
@media (max-width: 760px) {
  footer .bottom { flex-direction: column; align-items: flex-start; gap: 4px; }
  footer .col a,
  footer .bottom a { display: inline-block; padding: 14px 0; }
  footer .col a + br { display: none; }
  footer .col a { display: block; padding: 11px 0; }
}

/* ---------- D1 credentials strip ---------- */
.trust-strip {
  padding: 28px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.trust-strip .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 36px;
  flex-wrap: wrap;
}
.trust-strip .ts-label {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}
.trust-strip ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px 36px;
  flex-wrap: wrap;
  margin: 0;
}
.trust-strip li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 14px;
  border-left: 2px solid var(--orange);
}
.trust-strip li strong {
  font-family: 'Oswald', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.2;
}
.trust-strip li span {
  font-size: 14.5px;
  color: var(--ink-mute);
  line-height: 1.35;
}
.trust-strip li.ts-badge { border-left: 0; padding-left: 0; }
.trust-strip .ts-badge img {
  display: block;
  height: 44px;
  width: auto;
  border-radius: 6px;
  background: #fff;
}
:root[data-theme="dark"] .trust-strip .ts-badge img { box-shadow: 0 0 0 4px #fff; }
@media (max-width: 760px) {
  .trust-strip { padding: 24px 0; }
  .trust-strip ul { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 16px 20px; width: 100%; }
  .trust-strip li.ts-reg { grid-column: 1 / -1; order: 3; }
  .trust-strip li.ts-badge { grid-column: 1 / -1; order: 4; align-items: flex-start; }
}

/* Compact strip inside the closing .final-cta band (navy in both themes) */
.trust-strip--compact {
  position: relative;
  max-width: 820px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 16px;
  color: rgba(255,255,255,0.78);
  line-height: 1.5;
}
.trust-strip--compact span { display: inline-flex; align-items: center; }
.trust-strip--compact strong { color: #fff; font-weight: 600; margin-right: 6px; }
.trust-strip--compact a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.4);
  text-underline-offset: 4px;
  padding: 12px 0;
}
.trust-strip--compact a:hover { color: var(--on-dark-orange); text-decoration-color: currentColor; }
.trust-strip--compact span + span::before {
  content: "";
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--orange);
  margin-right: 22px;
}
@media (max-width: 600px) {
  .trust-strip--compact { flex-direction: column; align-items: center; gap: 0; }
  .trust-strip--compact span + span::before { display: none; }
}

/* ---------- D10 page sub-nav (the page's own anchor links) ---------- */
.page-subnav {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  z-index: calc(var(--z-nav) - 1);
}
.page-subnav .container {
  display: flex;
  align-items: center;
  gap: 4px 28px;
  min-height: 44px;
  overflow-x: auto;
  scrollbar-width: none;
}
.page-subnav .container::-webkit-scrollbar { display: none; }
.page-subnav .ps-label {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
  margin: 0;
}
.page-subnav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.page-subnav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s var(--ease);
}
.page-subnav a:hover { color: var(--accent-ink); }
.page-subnav a:hover::after,
.page-subnav a.is-active::after { transform: scaleX(1); }
@media (min-width: 901px) {
  .page-subnav { position: sticky; top: var(--nav-h, 90px); }
  html { scroll-padding-top: calc(var(--nav-h, 90px) + 56px); }
}
@media (max-width: 900px) {
  .page-subnav .ps-label { display: none; }
  .page-subnav .container { gap: 8px; padding-top: 6px; padding-bottom: 6px; }
  .page-subnav a {
    padding: 0 14px;
    border: 1px solid var(--rule);
    border-radius: 22px;
    font-size: 12px;
  }
  .page-subnav a::after { display: none; }
  .page-subnav a.is-active { border-color: var(--orange); }
}

/* ---------- D5 who you'll speak to ---------- */
.who-block { padding-top: var(--band-y); padding-bottom: var(--band-y); background: var(--paper); }
.who-block .container {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px 48px;
  align-items: center;
  max-width: 980px;
}
.who-block .wb-mark {
  width: 132px; height: 132px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 3px var(--orange);
}
.who-block .wb-mark img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.who-block h2 { margin-bottom: 6px; }
.who-block .wb-role {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 16px;
}
.who-block p.wb-body { font-size: 17px; line-height: 1.65; max-width: 62ch; margin-bottom: 18px; }
.who-block .wb-facts {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  margin: 0;
  font-size: 17px;
  color: var(--ink-mute);
}
.who-block .wb-facts li::before { content: "\2713"; color: var(--orange); margin-right: 8px; font-weight: 700; }
@media (max-width: 700px) {
  .who-block .container { grid-template-columns: 1fr; }
  .who-block .wb-mark { width: 96px; height: 96px; font-size: 30px; }
}

/* ---------- Proof strip: three sourced numbers, CA(SA) moved to the strip ---------- */
.proof-strip .container { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) {
  .proof-strip .container { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 520px) {
  .pstat { padding-left: 12px; }
  .pstat .n { font-size: 32px; }
  .pstat .l { font-size: 11px; letter-spacing: 0.1em; }
}

/* Q2 source line under the stats strip (approved 05/11/2026): the figures are
   estimates, so the page says so in plain words. */
.proof-strip .ps-source {
  max-width: var(--max); margin: 16px auto 0; padding: 0 32px;
  font-family: "Raleway", sans-serif; font-size: 14.5px; line-height: 1.5;
  color: rgba(255,255,255,0.65);
}
/* Strips whose container carries the padding (inline padding:0 on the section). */
.proof-strip[style*="padding:0"] .ps-source { margin-top: -20px; padding-bottom: 24px; }
/* Company Registration keeps a fourth tile (CA(SA)): four across, two by two on phones. */
.proof-strip .container:has(> .pstat:nth-of-type(4)) { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
  .proof-strip .container:has(> .pstat:nth-of-type(4)) { grid-template-columns: repeat(2, 1fr); }
  .proof-strip .container:has(> .pstat:nth-of-type(4)) > .pstat:nth-of-type(3) { border-left: none; padding-left: 0; }
}


/* ============================================================
   Enquiry form
   ============================================================
   Markup: shared/partials/enquiry.html, written into any page by the
   <!-- maw:enquiry --> markers. Behaviour: shared/enquiry.js.
   A closing navy band like .final-cta, with the form on a card so the
   fields read the same in the light and the dark theme. */

.enquiry {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.enquiry::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(216,116,33,0.15), transparent 60%);
  pointer-events: none;
}
.enquiry::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 6% 112%, rgba(160,58,85,0.20), transparent 60%);
  pointer-events: none;
}
.enquiry .container { position: relative; z-index: 1; max-width: 784px; }

.enquiry-head { text-align: center; margin-bottom: 36px; }
.enquiry-head .eyebrow { justify-content: center; color: var(--on-dark-orange); }
.enquiry-head h2 { color: #fff; margin-bottom: 14px; }
.enquiry-lede { color: rgba(255,255,255,0.78); font-size: 19px; max-width: 560px; margin: 0 auto; }

.enquiry-noscript {
  max-width: 640px;
  margin: 0 auto;
  padding: 14px 18px;
  border-left: 3px solid var(--orange);
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.enquiry-noscript a { color: #fff; text-decoration: underline; }

.enquiry-form {
  position: relative;               /* anchors the off-screen honeypot */
  padding: 36px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}
/* display below would otherwise beat the [hidden] attribute the script toggles */
.enquiry-form[hidden],
.enquiry-fields[hidden] { display: none; }

.enquiry-fields { display: grid; gap: 20px; }
.enquiry-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.enquiry-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.enquiry-field label { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.enquiry-field input,
.enquiry-field textarea {
  width: 100%;
  max-width: 100%;
  padding: 11px 13px;
  font-family: 'Raleway', sans-serif;
  font-size: 17px;                  /* 16px or more stops iOS zooming into the field */
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink-mute); /* --rule is too faint to mark a field edge (3:1) */
  border-radius: 6px;
  transition: border-color 0.16s var(--ease);
}
.enquiry-field textarea { min-height: 150px; resize: vertical; }
.enquiry-field input:focus-visible,
.enquiry-field textarea:focus-visible { border-color: var(--orange); border-radius: 6px; }

/* Honeypot: off-screen, not display:none, so a bot that skips hidden fields still fills it.
   Its wrapper is aria-hidden and the input has tabindex -1, so nobody else reaches it. */
.enquiry-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.enquiry-check { display: flex; align-items: flex-start; gap: 12px; }
.enquiry-check input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  accent-color: var(--orange);
  cursor: pointer;
}
.enquiry-check label { font-size: 16px; line-height: 1.55; color: var(--ink); cursor: pointer; }

.enquiry-privacy { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-mute); }
.enquiry-privacy a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; }

.enquiry-fields .btn { justify-self: start; min-height: 48px; }
.enquiry-fields .btn[disabled] { opacity: 0.6; cursor: not-allowed; pointer-events: none; }

.enquiry-status { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); }
.enquiry-status:not(:empty) { margin-top: 20px; padding-left: 16px; border-left: 4px solid var(--orange); }
.enquiry-status.is-success { margin-top: 0; font-size: 19px; }
.enquiry-status.is-error { border-left-color: var(--rasp); }
.enquiry-status a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; }
.enquiry-status:focus { outline: none; }   /* focus is parked here after a send; it is not a control */

@media (max-width: 720px) {
  .enquiry-form { padding: 24px 18px; }
  .enquiry-row { grid-template-columns: 1fr; }
  .enquiry-fields .btn { justify-self: stretch; justify-content: center; }
}