@charset "UTF-8";
/* ==========================================================================
   ScholarCraft Consultancy Services
   Design system and site styles.

   Palette is taken directly from the logo:
     navy  #02274F   teal  #027C86   gold  #C18B34
   Surfaces are warm white and ice, never dark-heavy. Motion is restrained and
   always respects prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Fonts */

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/sourceserif-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/sourceserif-latin-ext.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------- 2. Tokens */

:root {
  /* brand */
  --navy:        #02274F;
  --navy-700:    #0A3A6B;
  --navy-500:    #2B5382;
  --navy-300:    #6C87A8;
  --teal:        #027C86;
  --teal-700:    #01646D;
  --teal-500:    #2E98A0;
  --teal-100:    #D9EDEF;
  --teal-050:    #EFF7F8;
  --gold:        #C18B34;
  --gold-600:    #A8752A;
  --gold-100:    #F6EBD8;
  --gold-050:    #FBF6EC;

  /* surfaces — warm white through cool ice */
  --paper:       #FDFCFA;
  --surface:     #FFFFFF;
  --ice:         #F3F7F8;
  --ice-deep:    #E8F0F2;
  --mist:        #EDF2F4;

  /* ink */
  --ink:         #02274F;
  --ink-body:    #3B4E66;
  --ink-muted:   #6A7C93;
  /* Was #8E9CAF, which measured 2.79:1 on white — below the 4.5:1 that
     normal-size body text needs. This is 4.62:1. */
  --ink-faint:   #6E7F94;
  --on-dark:     #F2F6F8;
  --on-dark-mut: #A9C0D4;

  /* lines */
  --line:        #E1E9ED;
  --line-strong: #C9D6DD;

  /* state */
  --success:     #1F7A5C;
  --success-bg:  #E6F4EE;
  --warn:        #9A6A12;
  --warn-bg:     #FBF1DC;
  --danger:      #A62F34;
  --danger-bg:   #FAEAEA;
  --info:        #1E5F87;
  --info-bg:     #E5F0F6;

  /* radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* elevation — soft, cool-tinted, never heavy */
  --sh-xs: 0 1px 2px rgba(2, 39, 79, .05);
  --sh-sm: 0 2px 8px rgba(2, 39, 79, .06);
  --sh-md: 0 8px 24px -8px rgba(2, 39, 79, .12), 0 2px 6px rgba(2, 39, 79, .05);
  --sh-lg: 0 20px 48px -16px rgba(2, 39, 79, .18), 0 4px 12px rgba(2, 39, 79, .06);
  --sh-xl: 0 36px 80px -28px rgba(2, 39, 79, .26), 0 8px 20px rgba(2, 39, 79, .07);
  --sh-teal: 0 14px 34px -12px rgba(2, 124, 134, .35);

  /* type */
  --ff-serif: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --ff-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --ff-mono: 'SFMono-Regular', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;

  /* fluid scale */
  --fs-xs:   clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem);
  --fs-sm:   clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --fs-base: clamp(0.9375rem, 0.91rem + 0.14vw, 1.0625rem);
  --fs-md:   clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --fs-lg:   clamp(1.1875rem, 1.10rem + 0.42vw, 1.4375rem);
  --fs-xl:   clamp(1.375rem, 1.23rem + 0.72vw, 1.875rem);
  --fs-2xl:  clamp(1.625rem, 1.36rem + 1.32vw, 2.5rem);
  --fs-3xl:  clamp(1.9375rem, 1.48rem + 2.28vw, 3.25rem);
  --fs-4xl:  clamp(2.25rem, 1.53rem + 3.60vw, 4.25rem);

  /* rhythm */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.75rem;  --sp-8: 3.5rem;
  --sp-9: 4.5rem;   --sp-10: 6rem;    --sp-11: 8rem;

  --section-y: clamp(3.5rem, 2.2rem + 5.6vw, 7rem);
  --gutter:    clamp(1.125rem, 0.7rem + 1.8vw, 2.5rem);
  --wrap:      1240px;
  --wrap-wide: 1440px;
  --wrap-text: 44rem;

  /* motion */
  --ease-out:  cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 160ms;
  --t-mid:  280ms;
  --t-slow: 560ms;

  --header-h: 76px;
  color-scheme: light;
}

@media (max-width: 899px) {
  :root { --header-h: 64px; }
}

/* ---------------------------------------------------------------- 3. Reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.25rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  font-feature-settings: 'kern' 1, 'liga' 1, 'cv11' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video, canvas, picture { display: block; max-width: 100%; }
img, video { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; }
p, ul, ol, dl, figure, table, pre { margin: 0 0 1.15em; }
:where(h1, h2, h3, h4, h5, h6) + * { margin-top: 0; }
li + li { margin-top: .3em; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--sp-7) 0;
}

/* Visible, branded focus ring that never disappears for keyboard users. */
:focus-visible {
  outline: 3px solid var(--teal-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--teal-100); color: var(--navy); }

/* ----------------------------------------------------------- 4. Typography */

h1, h2, h3, h4, .serif {
  font-family: var(--ff-serif);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 32;
  text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); font-variation-settings: 'opsz' 60; }
h2 { font-size: var(--fs-2xl); font-variation-settings: 'opsz' 44; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); line-height: 1.25; }
h5, h6 {
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

p { text-wrap: pretty; }

a {
  color: var(--teal-700);
  text-decoration-color: color-mix(in srgb, var(--teal-700) 35%, transparent);
  text-underline-offset: .18em;
  text-decoration-thickness: from-font;
  transition: color var(--t-fast) var(--ease-out),
              text-decoration-color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--navy); text-decoration-color: currentColor; }

strong, b { font-weight: 650; color: var(--ink); }

small { font-size: var(--fs-sm); }

code, kbd, samp {
  font-family: var(--ff-mono);
  font-size: .88em;
  background: var(--mist);
  padding: .12em .38em;
  border-radius: var(--r-xs);
  color: var(--navy-700);
}

blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-5);
  border-left: 3px solid var(--gold);
  font-family: var(--ff-serif);
  font-size: var(--fs-md);
  color: var(--ink);
}

/* --------------------------------------------------------------- 5. Layout */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: var(--wrap-wide); }
.wrap--text { max-width: var(--wrap-text); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem); }
.section--paper { background: var(--paper); }
.section--ice   { background: var(--ice); }
.section--mist  { background: var(--mist); }
.section--white { background: var(--surface); }

/* Deep navy band, used sparingly for contrast moments. */
.section--navy {
  background:
    radial-gradient(ellipse 80% 60% at 12% 0%, rgba(2, 124, 134, .30), transparent 62%),
    radial-gradient(ellipse 70% 60% at 92% 100%, rgba(193, 139, 52, .16), transparent 60%),
    linear-gradient(168deg, #02274F 0%, #01305F 48%, #021F40 100%);
  color: var(--on-dark);
}
.section--navy :is(h1, h2, h3, h4) { color: #fff; }
.section--navy p, .section--navy li { color: var(--on-dark-mut); }
.section--navy a { color: var(--teal-100); }
.section--navy a:hover { color: #fff; }
.section--navy h5, .section--navy h6 { color: var(--teal-100); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left  { grid-template-columns: 1.15fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.15fr; }
  .split--flip > :first-child { order: 2; }
}

.center { text-align: center; }
.center .section-head { margin-inline: auto; }

.section-head { max-width: 46rem; margin-bottom: var(--sp-7); }
.section-head p { font-size: var(--fs-md); color: var(--ink-muted); margin-bottom: 0; }
.section-head h2 { margin-bottom: var(--sp-3); }

/* Small capitalised label above a heading. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: var(--sp-3);
}
.eyebrow::before {
  content: '';
  width: 1.6rem;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--teal));
  border-radius: 2px;
}
.section--navy .eyebrow { color: var(--teal-100); }
.center .eyebrow::before { display: none; }

.lede {
  font-size: var(--fs-md);
  color: var(--ink-muted);
  max-width: 40rem;
}

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

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 999;
  background: var(--navy);
  color: #fff;
  padding: .7rem 1.1rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); color: #fff; }

/* -------------------------------------------------------------- 6. Buttons */

.btn {
  --btn-bg: var(--navy);
  --btn-fg: #fff;
  --btn-bd: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .78em 1.5em;
  min-height: 46px;
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .008em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.btn:active { transform: translateY(0); box-shadow: var(--sh-xs); }
.btn[disabled], .btn.is-busy { opacity: .55; pointer-events: none; }

.btn--primary { --btn-bg: var(--teal); --btn-bd: var(--teal); }
.btn--primary:hover { --btn-bg: var(--teal-700); --btn-bd: var(--teal-700); box-shadow: var(--sh-teal); }

.btn--gold { --btn-bg: var(--gold); --btn-bd: var(--gold); --btn-fg: #2A1D06; }
.btn--gold:hover { --btn-bg: var(--gold-600); --btn-bd: var(--gold-600); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--navy); --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-bd: var(--teal); --btn-fg: var(--teal-700); background: var(--teal-050); }

.btn--on-dark { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.4); }
.btn--on-dark:hover { --btn-bg: rgba(255,255,255,.12); --btn-bd: rgba(255,255,255,.7); }

.btn--solid-light { --btn-bg: #fff; --btn-fg: var(--navy); --btn-bd: #fff; }

/* Irreversible actions only — deleting an enquiry, emptying a conversation.
   Deliberately the one red control on the site, so it never has to compete
   for attention with anything ordinary. */
.btn--danger { --btn-bg: #A62D33; --btn-bd: #A62D33; --btn-fg: #fff; }
.btn--danger:hover { --btn-bg: #8B242A; --btn-bd: #8B242A; }
.btn--danger-ghost { --btn-bg: transparent; --btn-fg: #A62D33; --btn-bd: #EFC9CB; }
.btn--danger-ghost:hover { --btn-bg: #FDF6F6; --btn-bd: #A62D33; }

.btn--lg { padding: .95em 1.9em; font-size: var(--fs-base); min-height: 54px; }
.btn--sm { padding: .55em 1.05em; min-height: 38px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn--arrow svg { transition: transform var(--t-mid) var(--ease-out); }
.btn--arrow:hover svg { transform: translateX(3px); }

/* Quiet inline "read more" style link */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--teal-700);
}
.link-more::after {
  content: '→';
  transition: transform var(--t-mid) var(--ease-out);
}
.link-more:hover::after { transform: translateX(4px); }

/* ---------------------------------------------------------------- 7. Chips */

.pill {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .3em .8em;
  border-radius: var(--r-pill);
  background: var(--teal-050);
  border: 1px solid var(--teal-100);
  color: var(--teal-700);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.pill--gold  { background: var(--gold-050); border-color: var(--gold-100); color: var(--gold-600); }
.pill--navy  { background: #EAF0F6; border-color: #D6E1EC; color: var(--navy-700); }
.pill--plain { background: var(--surface); border-color: var(--line); color: var(--ink-muted); }
.section--navy .pill {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.2);
  color: var(--teal-100);
}

.pill-list { display: flex; flex-wrap: wrap; gap: .45rem; }

/* Status chips used across the dashboards */
.status {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .25em .7em;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 650;
  line-height: 1.6;
  white-space: nowrap;
}
.status::before {
  content: '';
  width: .45em; height: .45em;
  border-radius: 50%;
  background: currentColor;
}
.status--new       { background: var(--info-bg);    color: var(--info); }
.status--progress  { background: var(--warn-bg);    color: var(--warn); }
.status--done      { background: var(--success-bg); color: var(--success); }
.status--closed    { background: var(--mist);       color: var(--ink-muted); }
.status--cancelled { background: var(--danger-bg);  color: var(--danger); }

/* --------------------------------------------------------------- 8. Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-mid) var(--ease-out),
              background-color var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  box-shadow: 0 1px 20px rgba(2, 39, 79, .05);
}

.header-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: var(--header-h);
  /* Positioning context for the mega panel, which spans the whole bar. */
  position: relative;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  transition: transform var(--t-mid) var(--ease-out);
}
.brand:hover { transform: translateY(-1px); }
.brand img {
  height: clamp(34px, 3.1vw, 44px);
  width: auto;
}

.nav-primary { display: none; }

@media (min-width: 1080px) {
  .nav-primary {
    display: flex;
    align-items: center;
    gap: .1rem;
    margin-inline: auto;
  }
}

.nav-item { position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .55rem .72rem;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
}
.nav-link:hover,
.nav-item.is-open > .nav-link { color: var(--teal-700); background: var(--teal-050); }
.nav-link[aria-current="page"] { color: var(--teal-700); }
.nav-link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: .72rem; right: .72rem;
  bottom: .18rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}
.nav-caret {
  width: .62em; height: .62em;
  transition: transform var(--t-mid) var(--ease-out);
  opacity: .65;
}
.nav-item.is-open .nav-caret { transform: rotate(180deg); }

/* Dropdown panels: open on hover, stay open across the gap, close on delay. */
.nav-panel {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 19rem;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out),
              visibility 0s linear var(--t-mid);
}
/* Invisible bridge so the cursor can travel from the link into the panel. */
.nav-panel::before {
  content: '';
  position: absolute;
  inset: -14px -14px auto -14px;
  height: 20px;
}
.nav-item.is-open > .nav-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
/* The mega panel spans the header bar rather than centring on its trigger,
   so it can never overflow the viewport on a narrow desktop window. The
   trigger goes position:static so the panel resolves against .header-bar. */
.nav-item--mega { position: static; }

.nav-panel--mega {
  left: 0;
  right: 0;
  width: auto;
  min-width: 0;
  padding: var(--sp-6);
  transform: translateY(8px);
}
.nav-item.is-open > .nav-panel--mega { transform: translateY(0); }

.nav-panel-list { display: grid; gap: .15rem; }
.nav-panel-link {
  display: block;
  padding: .55rem .7rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink);
  transition: background-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.nav-panel-link:hover { background: var(--teal-050); transform: translateX(3px); color: var(--ink); }
.nav-panel-link strong { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.nav-panel-link span { display: block; font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.45; }

.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-6);
}
@media (min-width: 1400px) { .mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mega-col-head {
  display: block;
  font-family: var(--ff-serif);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: .4rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--line);
  transition: color var(--t-fast) var(--ease-out);
}
.mega-col-head:hover { color: var(--teal-700); }
.mega-col-head em {
  display: block;
  font-family: var(--ff-sans);
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-faint);
  margin-top: .18rem;
  letter-spacing: 0;
}
.mega-links { display: grid; gap: .08rem; }
.mega-links a {
  padding: .3rem .45rem;
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  color: var(--ink-body);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.mega-links a:hover { background: var(--teal-050); color: var(--teal-700); }
.mega-links .is-more { color: var(--teal-700); font-weight: 600; }

.mega-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(120deg, var(--teal-050), var(--gold-050));
  border-radius: var(--r-md);
}
.mega-foot p { margin: 0; font-size: var(--fs-sm); }
.mega-foot strong { display: block; color: var(--ink); font-family: var(--ff-serif); font-size: var(--fs-md); }

.header-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
  flex: none;
}
@media (min-width: 1080px) { .header-actions { margin-left: 0; } }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  color: var(--ink);
  border: 1px solid transparent;
  transition: background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--teal-050); color: var(--teal-700); border-color: var(--teal-100); }
.icon-btn svg { width: 20px; height: 20px; }

.header-actions .btn { display: none; }
@media (min-width: 1240px) { .header-actions .btn.is-desktop { display: inline-flex; } }
@media (min-width: 1400px) { .header-actions .btn.is-wide { display: inline-flex; } }

.nav-toggle { display: inline-flex; }
@media (min-width: 1080px) { .nav-toggle { display: none; } }

.nav-toggle-bars { display: block; width: 20px; height: 14px; position: relative; }
.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-fast) linear;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 6px; }
.nav-toggle-bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------- 9. Mobile drawer */

.nav-drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 115;
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out),
              visibility 0s linear var(--t-mid);
}
.nav-drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
@media (min-width: 1080px) { .nav-drawer { display: none; } }

.nav-drawer-inner { padding: var(--sp-5) var(--gutter) var(--sp-10); }

.drawer-search { margin-bottom: var(--sp-5); }

.acc-item { border-bottom: 1px solid var(--line); }
.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding: 1rem .25rem;
  font-family: var(--ff-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
}
.acc-head .acc-icon {
  flex: none;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--teal-700);
  transition: transform var(--t-mid) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
}
.acc-item.is-open .acc-icon { transform: rotate(45deg); background: var(--teal-050); }
.acc-icon svg { width: 14px; height: 14px; }

.acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-mid) var(--ease-out);
}
.acc-item.is-open .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }
.acc-body ul { list-style: none; margin: 0; padding: 0 0 1rem; }
.acc-body li + li { margin-top: 0; }
.acc-body a {
  display: block;
  padding: .6rem .25rem .6rem 1rem;
  border-left: 2px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-body);
  text-decoration: none;
}
.acc-body a:hover { border-left-color: var(--teal); color: var(--teal-700); }
.acc-body .acc-group-title {
  display: block;
  padding: .85rem .25rem .3rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 0;
}

.drawer-actions { display: grid; gap: .6rem; margin-top: var(--sp-6); }
.drawer-meta {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.drawer-meta a { display: inline-flex; align-items: center; gap: .5em; }

/* -------------------------------------------------------------- 10. Search */

.search-field { position: relative; }
.search-field input {
  width: 100%;
  padding: .85rem 1rem .85rem 2.85rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.search-field input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-050);
}
.search-field .search-icon {
  position: absolute;
  left: 1rem; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--ink-faint);
  pointer-events: none;
}

/* Blurred example service names shown before typing. */
.search-hints {
  margin-top: .7rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  transition: filter var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out);
  filter: blur(3.4px);
  opacity: .55;
  user-select: none;
}
.search-hints.is-revealed { filter: blur(0); opacity: 1; user-select: auto; }
.search-hints .pill { cursor: pointer; }
.search-hints-label {
  width: 100%;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin-bottom: .1rem;
  filter: none;
}

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: clamp(3rem, 10vh, 7rem) var(--gutter) var(--sp-6);
  background: color-mix(in srgb, var(--navy) 34%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-mid) var(--ease-out), visibility 0s linear var(--t-mid);
}
.search-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.search-panel {
  width: min(48rem, 100%);
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  padding: var(--sp-6);
  transform: translateY(-14px) scale(.98);
  transition: transform var(--t-mid) var(--ease-out);
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
}
.search-overlay.is-open .search-panel { transform: none; }
.search-results { margin-top: var(--sp-5); display: grid; gap: .2rem; }
.search-result {
  display: block;
  padding: .7rem .85rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink);
  border: 1px solid transparent;
}
.search-result:hover, .search-result.is-active {
  background: var(--teal-050);
  border-color: var(--teal-100);
  color: var(--ink);
}
.search-result strong { display: block; font-size: var(--fs-sm); font-weight: 600; }
.search-result span { display: block; font-size: var(--fs-xs); color: var(--ink-muted); }
.search-result .search-kind {
  float: right;
  font-size: var(--fs-xs);
  color: var(--teal-700);
  font-weight: 600;
}

/* ---------------------------------------------------------------- 11. Hero */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1rem + 7vw, 6rem) clamp(3rem, 1.5rem + 7vw, 6.5rem);
  background:
    radial-gradient(ellipse 62% 52% at 78% 8%,  rgba(2, 124, 134, .14), transparent 62%),
    radial-gradient(ellipse 52% 48% at 8% 92%,  rgba(193, 139, 52, .13), transparent 60%),
    linear-gradient(178deg, #FFFFFF 0%, var(--paper) 34%, var(--ice) 100%);
}

/* Soft, slow-drifting light — adds depth without noise. */
.hero-aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .5;
  pointer-events: none;
  will-change: transform;
}
.hero-aura--teal {
  width: 38rem; height: 38rem;
  top: -14rem; right: -10rem;
  background: radial-gradient(circle, rgba(2, 124, 134, .40), transparent 68%);
  animation: drift-a 26s var(--ease-in-out) infinite alternate;
}
.hero-aura--gold {
  width: 30rem; height: 30rem;
  bottom: -12rem; left: -8rem;
  background: radial-gradient(circle, rgba(193, 139, 52, .34), transparent 68%);
  animation: drift-b 32s var(--ease-in-out) infinite alternate;
}
@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3.5rem, 2.5rem, 0) scale(1.1); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3rem, -2rem, 0) scale(1.12); }
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(2.5rem, 1rem + 6vw, 5rem);
  align-items: center;
}
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: 1.02fr .98fr; }
}

.hero-copy { max-width: 36rem; }
.hero h1 {
  font-size: var(--fs-4xl);
  font-variation-settings: 'opsz' 60;
  letter-spacing: -0.025em;
  margin-bottom: var(--sp-4);
}
.hero h1 .accent {
  background: linear-gradient(104deg, var(--teal) 6%, var(--navy-700) 58%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: var(--fs-md);
  color: var(--ink-muted);
  max-width: 34rem;
  margin-bottom: var(--sp-6);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: var(--sp-6); }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.hero-trust div { font-size: var(--fs-xs); color: var(--ink-muted); }
.hero-trust strong {
  display: block;
  font-family: var(--ff-serif);
  font-size: var(--fs-lg);
  color: var(--ink);
  line-height: 1.2;
}

/* The 3D logo stage: a perspective scene with floating parallax cards. */
.hero-stage {
  position: relative;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  min-height: clamp(19rem, 44vw, 30rem);
  display: grid;
  place-items: center;
}
.hero-stage-inner {
  position: relative;
  transform-style: preserve-3d;
  width: min(100%, 30rem);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  transition: transform 600ms var(--ease-soft);
  will-change: transform;
}

.hero-disc {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    conic-gradient(from 210deg, rgba(2,124,134,.16), rgba(193,139,52,.14), rgba(2,39,79,.12), rgba(2,124,134,.16));
  filter: blur(2px);
  transform: translateZ(-90px);
  animation: spin-slow 48s linear infinite;
}
@keyframes spin-slow { to { transform: translateZ(-90px) rotate(360deg); } }

.hero-ring {
  position: absolute;
  border: 1px solid rgba(2, 124, 134, .22);
  border-radius: 50%;
  pointer-events: none;
}
.hero-ring--1 { inset: 2%;  transform: translateZ(-40px) rotateX(62deg); }
.hero-ring--2 { inset: 14%; transform: translateZ(-10px) rotateX(62deg) rotateZ(30deg); border-color: rgba(193,139,52,.24); }

.hero-logo {
  position: relative;
  z-index: 4;
  width: min(72%, 21rem);
  transform: translateZ(70px);
  filter: drop-shadow(0 26px 44px rgba(2, 39, 79, .22));
  animation: hero-bob 7s var(--ease-in-out) infinite alternate;
}
@keyframes hero-bob {
  from { transform: translateZ(70px) translateY(-6px); }
  to   { transform: translateZ(70px) translateY(8px); }
}

.hero-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .62rem .9rem;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: card-float 9s var(--ease-in-out) infinite alternate;
}
.hero-card i {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--teal-050);
  color: var(--teal-700);
  font-style: normal;
}
.hero-card i svg { width: 15px; height: 15px; }
.hero-card--1 { top: 6%;  left: -4%;  transform: translateZ(130px); animation-delay: -1s; }
.hero-card--2 { top: 36%; right: -8%; transform: translateZ(100px); animation-delay: -4s; }
.hero-card--3 { bottom: 8%; left: 2%; transform: translateZ(150px); animation-delay: -2.5s; }
.hero-card--4 { bottom: 26%; right: -2%; transform: translateZ(60px); animation-delay: -6s; }
@keyframes card-float {
  from { translate: 0 -7px; }
  to   { translate: 0 9px; }
}
@media (max-width: 640px) {
  .hero-card--2, .hero-card--4 { display: none; }
  .hero-card--1 { left: -2%; }
}

/* ---------------------------------------------------------------- 12. Card */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: var(--teal-100);
}
.card-body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.card-body > :last-child { margin-bottom: 0; }
.card h3 { font-size: var(--fs-lg); margin-bottom: .5rem; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a::after { content: ''; position: absolute; inset: 0; }
.card p { font-size: var(--fs-sm); color: var(--ink-muted); }
.card-foot {
  margin-top: auto;
  padding-top: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--mist);
}
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-soft);
}
.card:hover .card-media img { transform: scale(1.045); }
.card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(2, 39, 79, .16));
  pointer-events: none;
}

.card-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
  background: linear-gradient(140deg, var(--teal-050), var(--teal-100));
  color: var(--teal-700);
  border: 1px solid var(--teal-100);
}
.card-icon svg { width: 22px; height: 22px; }
.card--gold .card-icon {
  background: linear-gradient(140deg, var(--gold-050), var(--gold-100));
  color: var(--gold-600);
  border-color: var(--gold-100);
}

/* Numbered process cards */
.card--step .card-body { padding-top: var(--sp-6); }
.step-number {
  position: absolute;
  top: var(--sp-4); right: var(--sp-5);
  font-family: var(--ff-serif);
  font-size: 3rem;
  line-height: 1;
  color: var(--ice-deep);
  font-weight: 700;
  pointer-events: none;
}

/* Card that tilts toward the pointer in 3D. */
.tilt {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 420ms var(--ease-soft), box-shadow var(--t-mid) var(--ease-out);
}
.tilt > * { transform: translateZ(18px); }

/* -------------------------------------------------------- 13. Figure/media */

.figure-3d {
  position: relative;
  perspective: 1200px;
}
.figure-3d img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  transform: rotateY(-6deg) rotateX(2deg);
  transition: transform 700ms var(--ease-soft);
}
.figure-3d:hover img { transform: rotateY(-2deg) rotateX(0deg) translateZ(12px); }
.figure-3d--flip img { transform: rotateY(6deg) rotateX(2deg); }
.figure-3d--flip:hover img { transform: rotateY(2deg) rotateX(0deg) translateZ(12px); }
.figure-3d figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

.figure-plain img {
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
}

/* Blur-up placeholder while the real illustration loads. */
.img-holder {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.img-holder > img {
  opacity: 0;
  transition: opacity 520ms var(--ease-out);
}
.img-holder > img.is-loaded { opacity: 1; }

/* Gentle parallax drift, driven by JS scroll progress. */
.parallax { will-change: transform; }

/* ------------------------------------------------- 14. Cinematic video band
   The clip plays itself on a forward/reverse loop. The section is an ordinary
   block with its own height — nothing is pinned and no scroll is intercepted,
   so the reader passes through it exactly like any other section. */

.scene {
  position: relative;
  background: var(--navy);
  overflow: hidden;
}

.scene__stage {
  position: relative;
  height: clamp(26rem, 76vh, 44rem);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #011B38;
}
.scene--short .scene__stage { height: clamp(23rem, 66vh, 38rem); }
.scene__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
.scene__video.is-ready { opacity: 1; }
.scene__poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.scene__scrim {
  position: absolute;
  inset: 0;
  /* See .vbg__scrim--dark: the middle needs the most help, because that is
     where the caption sits and where the footage is busiest. */
  background:
    radial-gradient(110% 70% at 50% 52%, rgba(1, 20, 42, .62) 0%, rgba(1, 20, 42, .36) 58%, rgba(1, 20, 42, .08) 100%),
    linear-gradient(180deg, rgba(1, 22, 45, .72) 0%, rgba(1, 22, 45, .44) 40%, rgba(1, 22, 45, .86) 100%);
}
.scene__content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  color: #fff;
  text-align: center;
}
.scene__content h2,
.scene__title {
  text-shadow: 0 1px 2px rgba(1, 20, 42, .55), 0 2px 14px rgba(1, 20, 42, .40);
  color: #fff;
  font-size: var(--fs-3xl);
  max-width: 22ch;
  margin-inline: auto;
  text-shadow: 0 2px 24px rgba(1, 20, 40, .55);
}
.scene__content p {
  text-shadow: 0 1px 2px rgba(1, 20, 42, .5), 0 2px 10px rgba(1, 20, 42, .35);
  color: rgba(255, 255, 255, .92);
  font-size: var(--fs-md);
  max-width: 46ch;
  margin-inline: auto;
  text-shadow: 0 1px 16px rgba(1, 20, 40, .5);
}
.scene__caption { max-width: 46rem; margin-inline: auto; }

/* Captions cross-fade on a timer. Leaving is quick and arriving is delayed, so
   two captions are never legible at the same moment. */
.scene__step {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-inline: var(--gutter);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  pointer-events: none;
}
.scene__step.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 520ms var(--ease-out) 180ms, transform 640ms var(--ease-soft) 180ms;
}

/* On a phone the WhatsApp and back-to-top buttons own the bottom-right
   corner, so captions are inset to keep clear of them. */
@media (max-width: 700px) {
  .scene__step { padding-inline: var(--sp-5); padding-bottom: 4.5rem; }
  .scene__content p { max-width: 34ch; }
  .scene__dots { bottom: 1rem; }
}

/* Small dots showing which caption is up, and letting the reader jump. */
.scene__dots {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 3.5vh, 2.25rem);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: .45rem;
}
.scene__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .34);
  transition: width var(--t-mid) var(--ease-out), background-color var(--t-mid) var(--ease-out);
}
.scene__dot:hover { background: rgba(255, 255, 255, .6); }
.scene__dot.is-active { width: 24px; background: var(--teal-500); }

/* ------------------------------------------------------------ 15. Carousel */

.rail {
  position: relative;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16.5rem, 20rem);
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block: .5rem 1.25rem;
  cursor: grab;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.rail__track.is-dragging * { pointer-events: none; }
.rail__track > * { scroll-snap-align: start; }
@media (min-width: 720px) {
  .rail__track { grid-auto-columns: minmax(19rem, 22rem); }
}

.rail__nav {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  margin-bottom: var(--sp-4);
}
.rail__btn {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  color: var(--navy);
  background: var(--surface);
  transition: all var(--t-fast) var(--ease-out);
}
.rail__btn:hover:not(:disabled) {
  border-color: var(--teal);
  color: var(--teal-700);
  background: var(--teal-050);
  transform: translateY(-2px);
}
.rail__btn:disabled { opacity: .32; cursor: default; }
.rail__btn svg { width: 17px; height: 17px; }

.rail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.rail__dots { display: flex; gap: .35rem; justify-content: center; margin-top: var(--sp-3); }
.rail__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: all var(--t-fast) var(--ease-out);
}
.rail__dot.is-active { background: var(--teal); width: 22px; border-radius: var(--r-pill); }

/* --------------------------------------------------------------- 16. Forms */

.form { display: grid; gap: var(--sp-5); }
.form-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.form-row { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .4rem; }
.field--full { grid-column: 1 / -1; }

.field label,
.field > .field-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
.field .req { color: var(--danger); margin-left: .15em; }
.field .hint { font-size: var(--fs-xs); color: var(--ink-faint); line-height: 1.5; }

.input, .select, .textarea {
  width: 100%;
  padding: .72rem .9rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.5;
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.textarea { min-height: 8.5rem; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-050);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--mist);
  color: var(--ink-faint);
  cursor: not-allowed;
}

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236A7C93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 12px;
  padding-right: 2.4rem;
}

.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: var(--danger); background: #FFFCFC; }
.field-error {
  font-size: var(--fs-xs);
  color: var(--danger);
  font-weight: 550;
  display: flex;
  align-items: flex-start;
  gap: .35em;
}
.field-error svg { width: 14px; height: 14px; flex: none; margin-top: .18em; }

/* Checkbox / radio */
.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  align-items: start;
  font-size: var(--fs-sm);
  cursor: pointer;
  line-height: 1.55;
}
.check input[type="checkbox"],
.check input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  margin: .14rem 0 0;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-xs);
  background: var(--surface);
  display: grid;
  place-items: center;
  flex: none;
  transition: all var(--t-fast) var(--ease-out);
}
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { background: var(--teal); border-color: var(--teal); }
.check input[type="checkbox"]:checked::after {
  content: '';
  width: 11px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.check input[type="radio"]:checked::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
}
.check span { color: var(--ink-body); }

/* Larger tappable option cards, used for "I am a…" style choices */
.option-grid {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
}
.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--ink);
  transition: all var(--t-fast) var(--ease-out);
}
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option:hover { border-color: var(--teal-500); background: var(--teal-050); }
.option:has(input:checked) {
  border-color: var(--teal);
  background: var(--teal-050);
  box-shadow: 0 0 0 3px var(--teal-050);
}
.option:has(input:focus-visible) { outline: 3px solid var(--teal-500); outline-offset: 2px; }
.option .option-tick {
  width: 18px; height: 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  transition: all var(--t-fast) var(--ease-out);
}
.option:has(input:checked) .option-tick { border-color: var(--teal); background: var(--teal); }
.option:has(input:checked) .option-tick::after {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
}

/* File drop zone */
.dropzone {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  background: var(--ice);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.dropzone:hover, .dropzone.is-over {
  border-color: var(--teal);
  background: var(--teal-050);
}
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone svg { width: 30px; height: 30px; color: var(--teal); margin-inline: auto; }
.dropzone strong { display: block; margin-top: .5rem; font-size: var(--fs-sm); color: var(--ink); }
.dropzone span { display: block; font-size: var(--fs-xs); color: var(--ink-faint); }

.file-list { display: grid; gap: .4rem; margin-top: .7rem; }
.file-chip {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
}
.file-chip svg { width: 16px; height: 16px; color: var(--teal-700); flex: none; }
.file-chip .file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip .file-size { color: var(--ink-faint); flex: none; }

/* A conditional block that only appears for certain answers */
.conditional {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-mid) var(--ease-out),
              opacity var(--t-mid) var(--ease-out);
  opacity: 0;
}
.conditional > div { overflow: hidden; }
.conditional.is-shown { grid-template-rows: 1fr; opacity: 1; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding-top: var(--sp-2);
}

/* Highlighted "having trouble?" WhatsApp strip under every major form */
.form-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(118deg, var(--gold-050) 0%, var(--teal-050) 100%);
  border: 1px solid var(--gold-100);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.form-help img { width: 26px; height: 26px; flex: none; }
.form-help p { margin: 0; flex: 1; min-width: 12rem; color: var(--ink); }
.form-help strong { color: var(--ink); }

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
  box-shadow: var(--sh-md);
}

fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-5); }
legend {
  padding: 0;
  font-family: var(--ff-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .3rem;
}
.fieldset-note { font-size: var(--fs-xs); color: var(--ink-faint); margin-bottom: var(--sp-4); }

/* --------------------------------------------------------------- 17. Alerts */

.alert {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .9rem 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}
.alert svg { width: 18px; height: 18px; flex: none; margin-top: .15rem; }
.alert p:last-child { margin-bottom: 0; }
.alert--success { background: var(--success-bg); border-color: #BFE3D4; color: #14543F; }
.alert--error   { background: var(--danger-bg);  border-color: #EFC9CB; color: #7E2327; }
.alert--warning { background: var(--warn-bg);    border-color: #EBD7A8; color: #6F4C0B; }
.alert--info    { background: var(--info-bg);    border-color: #C6DEEC; color: #16455F; }

.flash-stack {
  position: fixed;
  top: calc(var(--header-h) + .75rem);
  right: var(--gutter);
  z-index: 150;
  width: min(24rem, calc(100vw - 2 * var(--gutter)));
  display: grid;
  gap: .5rem;
  pointer-events: none;
}
.flash-stack .alert {
  pointer-events: auto;
  box-shadow: var(--sh-lg);
  margin: 0;
  animation: flash-in 420ms var(--ease-out) both;
}
@keyframes flash-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- 18. Accordion */

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-bottom: .6rem;
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.faq-item.is-open { border-color: var(--teal-100); box-shadow: var(--sh-sm); }
.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: 1.05rem 1.25rem;
  text-align: left;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
  font-family: var(--ff-serif);
}
.faq-q:hover { color: var(--teal-700); }
.faq-mark {
  flex: none;
  width: 24px; height: 24px;
  position: relative;
  margin-top: .1rem;
}
.faq-mark::before, .faq-mark::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  background: var(--teal);
  border-radius: 2px;
  transition: transform var(--t-mid) var(--ease-out);
}
.faq-mark::before { width: 13px; height: 2px; transform: translate(-50%, -50%); }
.faq-mark::after  { width: 2px; height: 13px; transform: translate(-50%, -50%); }
.faq-item.is-open .faq-mark::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-mid) var(--ease-out);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a-inner { padding: 0 1.25rem 1.15rem; font-size: var(--fs-sm); color: var(--ink-body); }
.faq-a-inner > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------ 19. Tables & prose */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: 0; }
th, td { padding: .78rem 1rem; text-align: left; vertical-align: top; }
thead th {
  background: var(--ice);
  color: var(--ink);
  font-weight: 650;
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
tbody tr + tr { border-top: 1px solid var(--line); }
tbody tr:hover { background: var(--ice); }

.prose { max-width: var(--wrap-text); }
.prose h2 { margin-top: var(--sp-8); font-size: var(--fs-2xl); }
.prose h3 { margin-top: var(--sp-6); font-size: var(--fs-lg); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--teal); }
.prose .lede { font-size: var(--fs-md); color: var(--ink-muted); }
.prose img { border-radius: var(--r-md); margin-block: var(--sp-6); }
.prose figure { margin: var(--sp-6) 0; }
.prose .table-wrap { margin-block: var(--sp-6); }

.callout {
  display: flex;
  gap: .9rem;
  padding: 1.1rem 1.3rem;
  margin-block: var(--sp-6);
  background: var(--teal-050);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-sm);
}
.callout svg { width: 20px; height: 20px; color: var(--teal-700); flex: none; margin-top: .1rem; }
.callout p:last-child { margin-bottom: 0; }
.callout--gold { background: var(--gold-050); border-left-color: var(--gold); }
.callout--gold svg { color: var(--gold-600); }

pre {
  background: #071C33;
  color: #DCE7F2;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-md);
  overflow-x: auto;
  font-family: var(--ff-mono);
  font-size: .8125rem;
  line-height: 1.7;
  -webkit-overflow-scrolling: touch;
  tab-size: 2;
}
pre code { background: none; padding: 0; color: inherit; font-size: inherit; }

/* ---------------------------------------------------------- 20. Breadcrumbs */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .5rem;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin-bottom: var(--sp-4);
  padding: 0;
  list-style: none;
}
.crumbs li { display: flex; align-items: center; gap: .5rem; margin: 0; }
.crumbs li + li::before { content: '/'; color: var(--line-strong); }
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--teal-700); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 550; }

/* ---------------------------------------------------------- 21. Page header */

.page-head {
  position: relative;
  padding-block: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem) clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  background:
    radial-gradient(ellipse 60% 70% at 88% 0%, rgba(2, 124, 134, .11), transparent 62%),
    radial-gradient(ellipse 40% 60% at 0% 100%, rgba(193, 139, 52, .09), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--ice));
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-head h1 { margin-bottom: var(--sp-3); }
.page-head .lede { margin-bottom: 0; }
.page-head-grid {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}
@media (min-width: 900px) {
  .page-head-grid { grid-template-columns: 1.25fr .75fr; }
}
.page-head-media img { border-radius: var(--r-lg); box-shadow: var(--sh-lg); }

/* ---------------------------------------------------------------- 22. Stats */

.stat-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.stat {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: center;
}
.stat dt {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  letter-spacing: .04em;
  margin-top: .3rem;
}
.stat dd {
  margin: 0;
  font-family: var(--ff-serif);
  font-size: var(--fs-2xl);
  font-weight: 650;
  color: var(--ink);
  line-height: 1.1;
}
.section--navy .stat {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
.section--navy .stat dd { color: #fff; }
.section--navy .stat dt { color: var(--on-dark-mut); }

/* -------------------------------------------------------------- 23. Reviews */

.stars { display: inline-flex; gap: .1rem; color: var(--gold); }
.stars svg { width: 16px; height: 16px; }
.stars .is-empty { color: var(--line-strong); }

.review {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  height: 100%;
}
.review blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  color: var(--ink-body);
  line-height: 1.68;
}
.review-meta {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}
.review-meta strong { display: block; color: var(--ink); font-size: var(--fs-sm); }
.review-verified {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  color: var(--success);
  font-weight: 600;
}
.review-verified svg { width: 13px; height: 13px; }

/* ---------------------------------------------------- 24. Achievements */

.achievement {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.achievement figure { margin: 0; }
.achievement img { width: 100%; border-bottom: 1px solid var(--line); }
.achievement figcaption { padding: var(--sp-4) var(--sp-5); }
.achievement figcaption p { font-size: var(--fs-xs); color: var(--ink-faint); margin-bottom: 0; }
.evidence-label {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--teal-700);
  background: var(--teal-050);
  border: 1px solid var(--teal-100);
  border-radius: var(--r-pill);
  padding: .2em .7em;
  margin-bottom: .5rem;
}

.placeholder-slot {
  display: grid;
  place-items: center;
  gap: .5rem;
  min-height: 13rem;
  padding: var(--sp-6);
  text-align: center;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: repeating-linear-gradient(
    -45deg, var(--ice), var(--ice) 10px, var(--mist) 10px, var(--mist) 20px);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}
.placeholder-slot svg { width: 30px; height: 30px; color: var(--ink-faint); }
.placeholder-slot strong { color: var(--ink); }

/* ---------------------------------- 25. Floating dock — see section 30g */

/* --------------------------------------------------------------- 26. Footer */

.site-footer {
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%, rgba(2, 124, 134, .22), transparent 60%),
    radial-gradient(ellipse 60% 50% at 95% 100%, rgba(193, 139, 52, .13), transparent 58%),
    linear-gradient(172deg, #02274F 0%, #01305F 52%, #021F40 100%);
  background-color: #02274F;
  color: var(--on-dark-mut);
  padding-block: var(--sp-9) var(--sp-5);
  font-size: var(--fs-sm);
}
.footer-top {
  display: grid;
  gap: var(--sp-7);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (min-width: 900px) {
  .footer-top { grid-template-columns: 1.35fr 2.65fr; gap: var(--sp-8); }
}

/* The logo sits on an ivory plaque so the original artwork is never altered. */
.footer-plaque {
  display: inline-flex;
  padding: .85rem 1.1rem;
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.5);
  margin-bottom: var(--sp-4);
}
.footer-plaque img { height: 62px; width: auto; }

.footer-blurb { max-width: 26rem; color: var(--on-dark-mut); }

.footer-contact { display: grid; gap: .55rem; margin-top: var(--sp-5); }
.footer-contact a, .footer-contact span {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--on-dark-mut);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.footer-contact a:hover { color: #fff; }
.footer-contact svg { width: 16px; height: 16px; flex: none; color: var(--teal-500); }

.footer-social { display: flex; gap: .5rem; margin-top: var(--sp-5); }
.footer-social a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.footer-social a:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.3); }
.footer-social img { width: 22px; height: 22px; }

.footer-cols {
  display: grid;
  gap: var(--sp-6) var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
}
.footer-cols h3 {
  font-family: var(--ff-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--sp-3);
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer-cols li { margin: 0; }
.footer-cols a { color: var(--on-dark-mut); text-decoration: none; font-size: var(--fs-sm); }
.footer-cols a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--on-dark-mut);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.footer-legal a { color: var(--on-dark-mut); text-decoration: none; }
.footer-legal a:hover { color: #fff; text-decoration: underline; }

.footer-integrity {
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.footer-integrity strong { color: #fff; }

/* ------------------------------------------------------------- 27. CTA band */

.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(2rem, 1.2rem + 3.6vw, 3.75rem);
  background:
    radial-gradient(ellipse 60% 80% at 90% 10%, rgba(2, 124, 134, .34), transparent 62%),
    radial-gradient(ellipse 50% 70% at 6% 96%, rgba(193, 139, 52, .22), transparent 60%),
    linear-gradient(150deg, #02274F, #01345F 55%, #021E3E);
  color: #fff;
  box-shadow: var(--sh-xl);
}
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { color: rgba(255,255,255,.86); max-width: 44ch; }
.cta-band .cluster { margin-top: var(--sp-5); }
.cta-band::after {
  content: '';
  position: absolute;
  right: -6rem; top: -6rem;
  width: 22rem; height: 22rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  pointer-events: none;
}

/* ------------------------------------------------------ 28. Reveal on scroll */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 680ms var(--ease-out), transform 780ms var(--ease-soft);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translate3d(-26px, 0, 0); }
[data-reveal="right"] { transform: translate3d(26px, 0, 0); }
[data-reveal="scale"] { transform: scale(.955); }
[data-reveal="tilt"]  { transform: perspective(900px) rotateX(7deg) translate3d(0, 24px, 0); }
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered children */
[data-reveal-group] > * {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 620ms var(--ease-out), transform 720ms var(--ease-soft);
}
[data-reveal-group].is-visible > * { opacity: 1; transform: none; }
[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 70ms; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 140ms; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 210ms; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 280ms; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 350ms; }
[data-reveal-group].is-visible > *:nth-child(n+7) { transition-delay: 420ms; }

/* ------------------------------------------------------------ 29. Utilities */

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.full { grid-column: 1 / -1; }
.nowrap { white-space: nowrap; }
.list-clean { list-style: none; padding: 0; margin: 0; }

.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.check-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  align-items: start;
  font-size: var(--fs-sm);
  margin: 0;
}
.check-list li::before {
  content: '';
  width: 19px; height: 19px;
  margin-top: .16rem;
  border-radius: 50%;
  background: var(--teal-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23027C86' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.5 5.5 10.5 11.5 3.5'/%3E%3C/svg%3E") center / 11px no-repeat;
  border: 1px solid var(--teal-100);
  flex: none;
}
.section--navy .check-list li::before {
  background-color: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
}

.x-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.x-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  align-items: start;
  font-size: var(--fs-sm);
  margin: 0;
}
.x-list li::before {
  content: '';
  width: 19px; height: 19px;
  margin-top: .16rem;
  border-radius: 50%;
  background: var(--danger-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23A62F34' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 4l6 6M10 4l-6 6'/%3E%3C/svg%3E") center / 10px no-repeat;
  border: 1px solid #EFC9CB;
  flex: none;
}

/* ----------------------------------------------------------- 30. Pagination */

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  margin-top: var(--sp-7);
}
.pager a, .pager span {
  display: grid;
  place-items: center;
  min-width: 40px; height: 40px;
  padding-inline: .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-body);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: all var(--t-fast) var(--ease-out);
}
.pager a:hover { border-color: var(--teal); color: var(--teal-700); background: var(--teal-050); }
.pager [aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.pager .is-disabled { opacity: .4; pointer-events: none; }

/* ------------------------------------------------------------ 31. Empty state */

.empty {
  display: grid;
  place-items: center;
  gap: .6rem;
  padding: var(--sp-9) var(--sp-5);
  text-align: center;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.empty svg { width: 40px; height: 40px; color: var(--line-strong); }
.empty strong { font-family: var(--ff-serif); font-size: var(--fs-lg); color: var(--ink); }

/* ---------------------------------------------------- 32. Motion preferences */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
  .hero-logo, .hero-card, .hero-disc, .hero-aura { animation: none !important; }
  /* No video playback at all: the poster stays, and every caption is shown
     stacked as ordinary text. */
  .scene__stage { height: auto !important; min-height: 0; }
  .scene__poster { position: static; height: auto; }
  .scene__video { display: none; }
  .scene__step {
    position: static;
    opacity: 1;
    transform: none;
    padding-block: var(--sp-6);
  }
  .scene__dots { display: none; }
  .tilt { transform: none !important; }
}

/* -------------------------------------------------------------- 33. Print */

@media print {
  .site-header, .site-footer, .fab-dock, .preloader, .flash-stack, .rail__nav,
  .nav-drawer, .search-overlay, .cta-band { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .scene { height: auto; }
  .scene__stage { position: static; height: auto; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .8em; color: #555; }
  .section { padding-block: 1rem; }
}

/* ------------------------------------------------- 35. Draft note on forms */

.draft-note {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--ice);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
}
.draft-note-icon {
  flex: none;
  color: var(--teal-700);
  display: grid;
  place-items: center;
  margin-top: .1rem;
}
.draft-note p { margin: 0; flex: 1; min-width: 12rem; color: var(--ink-muted); line-height: 1.55; }
.draft-note [data-draft-status] {
  display: block;
  color: var(--success);
  font-weight: 650;
}
.draft-note [data-draft-status]:empty { display: none; }
.draft-note-help { color: var(--ink-faint); }
.draft-note > .btn { margin-left: auto; align-self: center; flex: none; }

/* ------------------------------------------------------ 36. Back to top */

.to-top {
  position: fixed;
  /* The contact dock owns the bottom-right corner, so this takes the left. */
  left: clamp(.9rem, 2vw, 1.6rem);
  right: auto;
  bottom: clamp(.9rem, 2vw, 1.6rem);
  z-index: 129;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--line-strong);
  box-shadow: var(--sh-md);
  color: var(--navy);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out),
              visibility 0s linear var(--t-mid),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.to-top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.to-top:hover { border-color: var(--teal); color: var(--teal-700); }
.to-top svg { width: 19px; height: 19px; }

/* ------------------------------------------- 37. Article reading progress */

.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 125;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transition: width 90ms linear;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
  .read-progress { transition: none; }
}

@media print {
  .to-top, .read-progress, .draft-note { display: none !important; }
}

/* ------------------------------------------------- 34. Forced colors (a11y) */

@media (forced-colors: active) {
  .btn, .card, .input, .select, .textarea { border: 1px solid ButtonBorder; }
  .hero-aura, .hero-disc, .card-media::after, .scene__scrim { display: none; }
}

/* ==========================================================================
   30. Motion layer
   Ambient video backdrops, the cinematic bands, the preloader, the 3D logo,
   the services mega panel, the login/sign-up panel and the floating dock.

   Everything here is decoration: each block is written so that the page is
   complete and legible if the clip never loads, the model never mounts or
   JavaScript never runs at all.
   ========================================================================== */

/* ------------------------------------------------ 30a. Ambient video layer */

.vbg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.vbg__poster,
.vbg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--vbg-opacity, .5);
}
.vbg__video {
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
.vbg__video.is-ready { opacity: var(--vbg-opacity, .5); }
.vbg.is-still .vbg__video { display: none; }

.vbg__scrim { position: absolute; inset: 0; }
.vbg__scrim--dark {
  /* Two layers on purpose. The linear pass darkens top and bottom; the radial
     pass sits under the middle, which is where captions land and where the old
     single gradient was at its weakest. The clips are mostly navy already, so
     white type needs the backdrop pushed well below the text, not just tinted. */
  background:
    radial-gradient(115% 75% at 50% 50%, rgba(1, 20, 42, .58) 0%, rgba(1, 20, 42, .34) 55%, rgba(1, 20, 42, 0) 100%),
    linear-gradient(180deg, rgba(1, 22, 45, .80) 0%, rgba(1, 22, 45, .58) 45%, rgba(1, 22, 45, .88) 100%);
}
.vbg__scrim--light {
  background:
    linear-gradient(180deg, rgba(253, 252, 250, .93) 0%, rgba(253, 252, 250, .80) 42%, rgba(253, 252, 250, .96) 100%);
}

/* Sections that host a backdrop need a stacking context of their own. */
.section--tools,
.section--network,
.section--reviews,
.section--cta,
.hero--cinematic,
.hero--error,
.page-head--cinematic,
.auth-page,
.site-footer,
.media-card__frame { position: relative; isolation: isolate; }

/* ------------------------------------------------------ 30b. Cinematic band */

.scene__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene__fallback img { object-fit: cover; }

.scene--left .scene__caption { margin-inline: 0; text-align: left; }

/* The band's own entrance.
 *
 * This replaces a per-frame transform that used to slide the caption for the
 * whole time the band was on screen. A caption is the one thing on the page
 * the reader is actually trying to read, so it now arrives once and is then
 * perfectly still.
 *
 * `is-armed` is added by site.js, never by the markup: without JavaScript
 * there is no hidden state to be stuck in. */
.scene.is-armed .scene__caption {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
}
.scene.is-armed .scene__dots { opacity: 0; }

.scene.is-entered .scene__caption {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease-out) 120ms,
              transform 760ms var(--ease-soft) 120ms;
}
.scene.is-entered .scene__dots {
  opacity: 1;
  transition: opacity 500ms var(--ease-out) 480ms;
}

/* The scrim deepens as the band arrives, so the type resolves out of the
   footage rather than simply appearing on top of it. Colour only — it costs
   nothing and moves nothing. */
.scene.is-armed .scene__scrim { opacity: .35; }
.scene.is-entered .scene__scrim {
  opacity: 1;
  transition: opacity 900ms var(--ease-out);
}

/* --------------------------------------------------------- 30c. Preloader */

html.is-preloading,
html.is-preloading body { overflow: hidden; }

.preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  gap: 1.5rem;
  align-content: center;
  background:
    radial-gradient(120% 90% at 50% 40%, #0A3A6B 0%, #02274F 58%, #011B37 100%);
  transition: opacity 520ms var(--ease-out), visibility 520ms;
}
.preloader.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader__stage {
  position: relative;
  width: min(46vw, 320px);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
}
.preloader__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .95;
}
/* The mark carries the wait on its own if the clip never arrives. */
.preloader__mark {
  width: 74px;
  height: auto;
  opacity: .96;
  animation: preload-pulse 1.6s var(--ease-in-out) infinite alternate;
}
.preloader__video ~ picture .preloader__mark,
.preloader__video + .preloader__mark { opacity: 0; }
.preloader__stage picture { display: contents; }

@keyframes preload-pulse {
  from { transform: scale(.94); opacity: .55; }
  to   { transform: scale(1);   opacity: 1; }
}

.preloader__bar {
  display: block;
  width: min(40vw, 180px);
  height: 2px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
}
.preloader__bar i {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: inherit;
  background: var(--teal-500);
  animation: preload-slide 1.15s var(--ease-in-out) infinite;
}
@keyframes preload-slide {
  from { transform: translateX(-110%); }
  to   { transform: translateX(320%); }
}

/* ------------------------------------------------------- 30d. 3D hero logo */

.hero-logo3d {
  position: relative;
  width: min(60vw, 340px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}
.hero-logo3d .hero-logo {
  position: relative;
  z-index: 1;
  transition: opacity 700ms var(--ease-out);
}

/* The animated stand-in, swapped in by initLogo3D when the 3D model has been
   ruled out. The file is square where the still lockup is not, so it is sized
   to fill the same stage the model would have — otherwise the logo visibly
   changes size depending on which of the three a visitor happens to get. */
.hero-logo3d .hero-logo--anim {
  width: 100%;
  height: auto;
  /* It arrives after the still logo has already been painted, so it fades in
     rather than replacing it in one frame. */
  animation: hero-bob 7s var(--ease-in-out) infinite alternate,
             anim-logo-in 520ms var(--ease-out) both;
}
@keyframes anim-logo-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero-logo3d.is-3d .hero-logo { opacity: 0; pointer-events: none; }

.hero-model {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: transparent;
  --poster-color: transparent;
  --progress-bar-color: transparent;
  --progress-mask: transparent;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
  /* Vertical swipes must keep scrolling the page, never tumble the model. */
  touch-action: pan-y;
}
.hero-logo3d.is-3d .hero-model { opacity: 1; }

/* ------------------------------------------- 30e. Services mega navigation */

.nav-panel--mega { padding: 1.4rem 1.5rem 1.25rem; }

.mega-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
@media (max-width: 1180px) {
  .mega-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mega-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: .9rem;
  padding: .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.nav-item.is-open .mega-card {
  animation: mega-in 420ms var(--ease-soft) backwards;
  animation-delay: calc(var(--i, 0) * 38ms);
}
@keyframes mega-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}

.mega-card:hover,
.mega-card:focus-visible {
  border-color: var(--teal-500);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}

.mega-card__media {
  display: block;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--ice);
  aspect-ratio: 16 / 11;
}
.mega-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--ease-out);
}
.mega-card:hover .mega-card__media img { transform: scale(1.06); }

.mega-card__body { min-width: 0; display: grid; gap: .3rem; align-content: start; }

.mega-card__head { display: flex; align-items: center; gap: .45rem; }
.mega-card__head strong {
  font-family: var(--ff-serif);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.mega-card__icon {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: 0 0 26px;
  border-radius: 8px;
  background: var(--teal-050);
  color: var(--teal-700);
}
.mega-card__icon svg { width: 15px; height: 15px; }

.mega-card__body em {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  line-height: 1.4;
}

.mega-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: .15rem;
}
.mega-card__chips > span {
  font-size: 11px;
  line-height: 1;
  padding: .3rem .45rem;
  border-radius: var(--r-pill);
  background: var(--ice);
  color: var(--ink-muted);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mega-card__chips .is-more { background: none; color: var(--teal-700); font-weight: 600; }

.mega-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .35rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--teal-700);
}
.mega-card__cta svg { transition: transform var(--t-fast) var(--ease-out); }
.mega-card:hover .mega-card__cta svg { transform: translateX(3px); }

.mega-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.mega-foot p { margin: 0; font-size: var(--fs-sm); max-width: 40ch; }
.mega-foot strong {
  display: block;
  color: var(--ink);
  font-family: var(--ff-serif);
  font-size: var(--fs-md);
}
.mega-foot__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Drawer equivalent: one row per discipline, then the full list.
   Scoped under .acc-body so it outranks the plain link styling that the
   accordion applies to every anchor inside it. */
.drawer-cats { display: grid; gap: .3rem; padding-bottom: 1rem; }
.acc-body .drawer-cat {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: .6rem;
  padding: .6rem .5rem;
  border-left: 0;
  border-radius: var(--r-sm);
  color: var(--ink);
  text-decoration: none;
}
.acc-body .drawer-cat:hover { background: var(--teal-050); border-left-color: transparent; }
.drawer-cat__icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--teal-050);
  color: var(--teal-700);
}
.drawer-cat strong { display: block; font-size: var(--fs-sm); font-weight: 600; }
.drawer-cat em { font-style: normal; font-size: var(--fs-xs); color: var(--ink-muted); }

/* ---------------------------------------------- 30f. Login / sign-up panel */

.auth-page {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  background: var(--paper);
}
.auth-page__inner { position: relative; z-index: 2; }
.auth-shell { max-width: 33rem; margin-inline: auto; }
.auth-intro { text-align: center; margin-bottom: 1.5rem; }
.auth-intro h1 { font-size: var(--fs-xl); margin-bottom: .35rem; }

.auth-card { padding: clamp(1.25rem, 1rem + 1vw, 2rem); }

.auth-providers { display: grid; gap: .5rem; }
.provider-btn {
  justify-content: flex-start;
  gap: .7rem;
  font-weight: 600;
}
.provider-btn__mark {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  flex: 0 0 22px;
}
.provider-btn--apple .provider-btn__mark { color: var(--ink); }

.auth-or {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.25rem 0 1rem;
}
.auth-or span { flex: 1; height: 1px; background: var(--line); }
.auth-or em {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  white-space: nowrap;
}

.auth-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem;
  padding: .25rem;
  border-radius: var(--r-pill);
  background: var(--ice);
  margin-bottom: 1.35rem;
}
.auth-tab {
  padding: .6rem .75rem;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
}
.auth-tab.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
.auth-tabs__ink { display: none; }

.auth-panel__title { font-size: var(--fs-lg); margin-bottom: 1rem; }

/* Without JavaScript both panels simply stack, each fully usable. */
.auth-panel + .auth-panel { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }

.js-ready .auth-panel { display: none; }
.js-ready .auth-panel.is-active { display: block; animation: auth-in 360ms var(--ease-soft); }
.js-ready .auth-panel + .auth-panel { margin-top: 0; padding-top: 0; border-top: 0; }

@keyframes auth-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}

.auth-switch { text-align: center; margin: 1.25rem 0 0; }
.link-btn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--teal-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.link-btn:hover { color: var(--teal); }

.auth-perks { margin-top: 1.5rem; font-size: var(--fs-sm); }
.auth-guest { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }

/* ------------------------------------------------ 30g. Floating contact dock */

.fab-dock {
  position: fixed;
  right: clamp(.75rem, 2vw, 1.5rem);
  bottom: clamp(.75rem, 2vw, 1.5rem);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .55rem;
  transition: transform var(--t-mid) var(--ease-out);
}

.fab {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem;
  border-radius: var(--r-pill);
  text-decoration: none;
  color: #fff;
  box-shadow: var(--sh-lg);
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.fab:hover,
.fab:focus-visible { transform: translateY(-2px); box-shadow: var(--sh-xl); }

.fab__icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}
.fab__icon img { width: 30px; height: 30px; border-radius: 50%; display: block; }

.fab__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  padding-right: .55rem;
  max-width: 12rem;
  overflow: hidden;
  transition: max-width var(--t-mid) var(--ease-out),
              opacity var(--t-fast) var(--ease-out),
              padding-right var(--t-mid) var(--ease-out);
}

.fab--mail { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-700) 100%); }
.fab--wa   { background: #25D366; color: #07351B; }
.fab--wa .fab__icon { background: rgba(255, 255, 255, .9); }

.fab--tiny {
  padding: .35rem;
  background: var(--surface);
  color: var(--ink-muted);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}
.fab--tiny .fab__icon {
  width: 28px; height: 28px; flex-basis: 28px;
  background: var(--ice);
}
.fab--tiny .fab__label { font-size: var(--fs-xs); font-weight: 500; }

/* The dock introduces itself with both labels open, then folds down to icons
   so it is never sitting on top of the page for long. Pointing at it — or
   tabbing into it — always opens it again. */
.fab-dock.is-compact .fab__label,
.fab-dock:not(.is-lifted) .fab--tiny .fab__label {
  max-width: 0;
  opacity: 0;
  padding-right: 0;
}
.fab-dock:hover .fab__label,
.fab-dock:focus-within .fab__label {
  max-width: 12rem;
  opacity: 1;
  padding-right: .55rem;
}

@media (max-width: 700px) {
  .fab__label { max-width: 0; opacity: 0; padding-right: 0; }
  .fab-dock { gap: .45rem; }
  /* Two actions is the right number for a phone corner. The plain-mailto
     shortcut is a desktop convenience; the enquiry button above it reaches the
     same inbox and captures the deadline and files as well. */
  .fab--tiny { display: none; }
}

/* ----------------------------------------------- 30h. Media trio and rails */

.media-trio { align-items: start; }

.media-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.media-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }

.media-card__frame {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--navy);
  overflow: hidden;
}
.media-card__frame .vbg { position: absolute; }
.media-card { position: relative; }
.media-card__body { padding: 1.15rem 1.25rem 1.35rem; }
/* One link, whole-card hit area. */
.stretch-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.media-card__body .link-more { position: relative; z-index: 2; }
.media-card__body h3 { font-size: var(--fs-md); margin-bottom: .4rem; }
.media-card__body p { font-size: var(--fs-sm); margin-bottom: .75rem; }

/* Rail edges: a soft mask so a card clipped by the container edge reads as
   "there is more this way" rather than as text running off the page. */
.rail::before,
.rail::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(1rem, 3vw, 2.5rem);
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity var(--t-mid) var(--ease-out);
}
.rail::before {
  left: 0;
  background: linear-gradient(90deg, var(--rail-fade, var(--ice)) 0%, transparent 100%);
}
.rail::after {
  right: 0;
  background: linear-gradient(270deg, var(--rail-fade, var(--ice)) 0%, transparent 100%);
}
.rail.is-start::before { opacity: 0; }
.rail.is-end::after { opacity: 0; }

.section--paper .rail { --rail-fade: var(--paper); }
.section--white .rail { --rail-fade: var(--surface); }
.section--mist  .rail { --rail-fade: var(--mist); }

/* Cards snap to the page gutter rather than to the very edge of the track, so
   a snapped card is never half under the fade. */
.rail__track {
  scroll-padding-inline-start: 0;
  padding-inline: 2px;
}
.rail__track > * {
  /* The card lift here is written per frame by JS, so transform must not be
     transitioned — the base .card rule transitions it for its hover effect,
     and that would fight the drift on every single frame. Shadow and border
     keep their transition, which is what the hover state actually reads as;
     the hover translate never applied inside a rail anyway, because an inline
     transform always beats a stylesheet :hover rule. */
  transition-property: box-shadow, border-color;
  will-change: transform;
}

/* The card body must never clip its own text: heights equalise instead. */
.rail__track > .card { height: 100%; }
.rail__track > .card .card-body { display: flex; flex-direction: column; }
.rail__track > .card .card-foot { margin-top: auto; }

/* ------------------------------------------ 30i. Cinematic page headers */

.page-head--cinematic {
  padding-block: clamp(3.5rem, 2.5rem + 6vw, 7rem);
  background: var(--navy);
  color: var(--on-dark);
  overflow: hidden;
}
.page-head--cinematic .page-head__inner { position: relative; z-index: 2; }
.page-head--cinematic h1 { color: #fff; }
.page-head--cinematic .lede { color: rgba(255, 255, 255, .88); }
.page-head--cinematic .eyebrow { color: var(--teal-100); }
.page-head__copy { max-width: 46rem; }

/* Breadcrumbs on a dark hero. These used to be written as `.breadcrumbs`,
   which is a class the partial has never emitted — it renders `.crumbs` — so
   the rules did nothing and "Home / Services" kept the dark `--ink-muted` it
   is given for light pages, on top of a navy video. */
.page-head--cinematic .crumbs { color: var(--on-dark-mut); }
.page-head--cinematic .crumbs a { color: var(--on-dark-mut); }
.page-head--cinematic .crumbs a:hover { color: #fff; }
.page-head--cinematic .crumbs li + li::before { color: rgba(255, 255, 255, .45); }
.page-head--cinematic .crumbs [aria-current] { color: #fff; }

/* Ghost buttons default to navy-on-transparent, which is invisible here.
   Repainting the button's own custom properties keeps every other part of
   the button — sizing, radius, icon, focus ring — exactly as it is. */
.page-head--cinematic .btn--ghost {
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .45);
}
.page-head--cinematic .btn--ghost:hover {
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .12);
}
.page-head--cinematic .btn--ghost svg { color: currentColor; }

.hero--cinematic { overflow: hidden; }
.hero--cinematic .wrap { position: relative; z-index: 2; }

.section--tools .pill--dark {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  color: var(--on-dark);
}

/* ------------------------------------------------------ 30j. Search backdrop */

.vbg--search { border-radius: 0; }
.search-overlay .search-panel { position: relative; z-index: 2; }

/* ------------------------------------------------- 30k. Extra reveal styles */

[data-reveal="up"]   { transform: translate3d(0, 34px, 0); }
[data-reveal="down"] { transform: translate3d(0, -26px, 0); }
[data-reveal="rise"] { transform: translate3d(0, 26px, 0) scale(.985); }
[data-reveal="blur"] { filter: blur(8px); transform: translate3d(0, 16px, 0); }
[data-reveal="blur"].is-visible { filter: none; }

/* Once an element has arrived, drop the hint so it cannot cost anything on a
   long page or blur text on a fractional pixel. */
[data-reveal].is-visible,
[data-reveal-group].is-visible > * { will-change: auto; }

@media (max-width: 700px) {
  /* Sideways entrances turn into upward ones on a narrow screen, where a
     horizontal slide can briefly widen the document. */
  [data-reveal="left"],
  [data-reveal="right"] { transform: translate3d(0, 24px, 0); }
}

/* ================================================== 30n. Camera on the film
   A slow move laid over the footage itself, chosen per clip in
   Content/videos.php from how that clip's frame is composed. See the notes
   there for why a given clip gets a given move.

   Both moves are pure `transform` on an element that is already composited,
   so neither costs layout or paint — they run on the compositor beside the
   video's own decode rather than competing with it.

   The numbers are deliberately small. A zoom crops: at 1.055 a 1920-wide clip
   loses about 50px off each side, which is invisible on quiet edges and
   obvious on busy ones, and that single fact is what decides which clip gets
   which move.
   ========================================================================== */

@keyframes film-breathe {
  from { transform: scale(1); }
  to   { transform: scale(1.055); }
}

/* A zoom in and back out, for ever. `alternate` is what returns it, so the
   loop has no seam — there is no jump back to the start. 27s is slow enough
   that the movement is felt rather than watched. */
.scene--fx-breathe .scene__video,
.scene--fx-breathe .scene__poster,
.vbg--fx-breathe .vbg__video,
.vbg--fx-breathe .vbg__poster {
  animation: film-breathe 27s var(--ease-in-out) infinite alternate;
  will-change: transform;
}

/* One slow zoom out as the band arrives, and then completely still. Written
   as a transition rather than an animation so it cannot repeat: `is-entered`
   is added once and never removed. */
.scene--fx-settle .scene__video,
.scene--fx-settle .scene__poster {
  transform: scale(1.055);
  transition: transform 2600ms var(--ease-out);
}
.scene--fx-settle.is-entered .scene__video,
.scene--fx-settle.is-entered .scene__poster {
  transform: scale(1);
}
/* A backdrop has no entrance of its own to hang this on, so it simply rests
   at its starting scale. */
.vbg--fx-settle .vbg__video,
.vbg--fx-settle .vbg__poster { transform: scale(1.03); }

@media (max-width: 700px) {
  /* A phone crops the clip heavily already, to fill a tall frame from a wide
     source. Another 5.5% on top starts losing the subject itself, and the
     compositing is the most expensive thing on the page at that size. */
  .scene--fx-breathe .scene__video,
  .scene--fx-breathe .scene__poster,
  .vbg--fx-breathe .vbg__video,
  .vbg--fx-breathe .vbg__poster { animation: none; }
  .scene--fx-settle .scene__video,
  .scene--fx-settle .scene__poster { transform: none; transition: none; }
}

/* ================================================ 30m. Section characters
   Each section takes one of six entrances, in turn, so that no two adjacent
   sections arrive the same way. site.js writes data-motion; see MOTION_CYCLE.

   Rules every character obeys, because the reader is here to read:

     - Nothing travels more than 26px, and nothing enters from off-screen. An
       element that flies in from the edge drags the eye across the whole
       viewport to follow it, and on a wide screen it is a long way to drag.
     - Nothing lasts longer than 700ms, so a section is finished arriving
       before it can be read rather than during.
     - Every character only sets the *starting* state. `.is-visible` lands in
       exactly the same place for all six, which is why they can be swapped
       around freely and why nothing can be left stranded mid-animation.
     - Each character pairs its own `.is-visible` reset, which is one level
       more specific than its starting rule, so the reset always wins.
   ========================================================================== */

/* -- lift: a plain rise. The reference the others are variations on. ------- */
[data-motion="lift"] [data-reveal],
[data-motion="lift"] [data-reveal-group] > * {
  transform: translate3d(0, 22px, 0);
}
[data-motion="lift"] [data-reveal].is-visible,
[data-motion="lift"] [data-reveal-group].is-visible > *:nth-child(n) {
  transform: none;
}

/* -- focus: comes into focus rather than into place. Best on image-led
      sections, where a blur reads as a lens settling.
      The blur is small and brief: it is expensive to composite over a large
      area, and heavy blur on type looks like a rendering fault. ------------ */
[data-motion="focus"] [data-reveal],
[data-motion="focus"] [data-reveal-group] > * {
  filter: blur(6px);
  transform: translate3d(0, 12px, 0);
  transition-property: opacity, transform, filter;
  transition-duration: 560ms, 620ms, 560ms;
}
[data-motion="focus"] [data-reveal].is-visible,
[data-motion="focus"] [data-reveal-group].is-visible > *:nth-child(n) {
  filter: none;
  transform: none;
}

/* -- settle: grows the last few percent into place. Suits cards and panels,
      which read as objects arriving rather than text being set. ------------ */
[data-motion="settle"] [data-reveal],
[data-motion="settle"] [data-reveal-group] > * {
  transform: translate3d(0, 14px, 0) scale(.965);
  transform-origin: 50% 80%;
}
[data-motion="settle"] [data-reveal].is-visible,
[data-motion="settle"] [data-reveal-group].is-visible > *:nth-child(n) {
  transform: none;
}

/* -- sweep: uncovered from the bottom edge, as if the section were being
      drawn. The clip travels no distance at all, so it is the calmest of the
      six and the safest over long copy.

      Every inset here is negative except the one doing the work. A clip-path
      of inset(0) is not "no clipping" — it is a clip exactly on the border
      box, which cuts off anything drawn outside it: a card's shadow, a hover
      lift, a focus ring. So the box is clipped 15% *outside* itself on the
      three idle sides, and finishes 15% outside on all four, which leaves a
      region nothing can reach. clip-path has no `none` it can transition to,
      so this is how a wipe ends without leaving damage behind. -------------- */
[data-motion="sweep"] [data-reveal],
[data-motion="sweep"] [data-reveal-group] > * {
  clip-path: inset(-15% -15% 32% -15%);
  transform: translate3d(0, 10px, 0);
  transition-property: opacity, transform, clip-path;
  transition-duration: 600ms, 660ms, 700ms;
}
[data-motion="sweep"] [data-reveal].is-visible,
[data-motion="sweep"] [data-reveal-group].is-visible > *:nth-child(n) {
  clip-path: inset(-15% -15% -15% -15%);
  transform: none;
}

/* -- unfold: tips up from its own bottom edge, a few degrees only. Reads as
      depth without ever looking like a 3D effect. ------------------------- */
[data-motion="unfold"] [data-reveal],
[data-motion="unfold"] [data-reveal-group] > * {
  transform: perspective(1100px) rotateX(5deg) translate3d(0, 16px, 0);
  transform-origin: 50% 100%;
}
[data-motion="unfold"] [data-reveal].is-visible,
[data-motion="unfold"] [data-reveal-group].is-visible > *:nth-child(n) {
  transform: none;
}

/* -- drift: a short sideways settle. Alternating the side down the section
      gives it a rhythm; keeping it to 18px keeps it from ever reading as a
      slide. Horizontal movement is the one that can widen the document, so it
      is dropped entirely on narrow screens further down. ------------------- */
[data-motion="drift"] [data-reveal],
[data-motion="drift"] [data-reveal-group] > * {
  transform: translate3d(-18px, 8px, 0);
}
[data-motion="drift"] [data-reveal]:nth-child(even),
[data-motion="drift"] [data-reveal-group] > *:nth-child(even) {
  transform: translate3d(18px, 8px, 0);
}
[data-motion="drift"] [data-reveal].is-visible,
[data-motion="drift"] [data-reveal-group].is-visible > *:nth-child(n) {
  transform: none;
}

/* A two-column split keeps its own left/right entrance whatever character the
   section has: those two columns arriving from their own sides is the one
   place where the direction carries meaning. */
[data-motion] [data-reveal="left"]  { transform: translate3d(-26px, 0, 0); }
[data-motion] [data-reveal="right"] { transform: translate3d(26px, 0, 0); }
[data-motion] [data-reveal="left"].is-visible,
[data-motion] [data-reveal="right"].is-visible { transform: none; }

@media (max-width: 760px) {
  /* Sideways movement of any kind is dropped on a phone: there is no room for
     it, and a transform that starts off the left edge can widen the document
     and produce a horizontal scrollbar for the length of the animation. */
  [data-motion="drift"] [data-reveal],
  [data-motion="drift"] [data-reveal-group] > *,
  [data-motion="drift"] [data-reveal]:nth-child(even),
  [data-motion="drift"] [data-reveal-group] > *:nth-child(even),
  [data-motion] [data-reveal="left"],
  [data-motion] [data-reveal="right"] {
    transform: translate3d(0, 20px, 0);
  }
  /* Blur costs real time to composite on a phone GPU over a full-width block. */
  [data-motion="focus"] [data-reveal],
  [data-motion="focus"] [data-reveal-group] > * { filter: none; }
}

/* ---------------------------------------------------- 30l. Reduced motion */

@media (prefers-reduced-motion: reduce) {
  /* Every character, in one line: no start state, so nothing to animate. */
  [data-motion] [data-reveal],
  [data-motion] [data-reveal-group] > * {
    filter: none !important;
    clip-path: none !important;
  }
  .preloader { display: none !important; }
  html.is-preloading, html.is-preloading body { overflow: auto; }
  .vbg__video { display: none; }
  /* The 3D logo deliberately stays. Reduced motion asks not to be moved, not
     to be shown less, and the script drops the model's rotation under this
     preference instead — see initLogo3D(). Hiding it here was half of the
     reason the model was invisible on any Windows machine with "Animation
     effects" switched off. */
  .mega-card, .rail__track > * { animation: none !important; transition: none !important; }
  .preloader__mark, .preloader__bar i { animation: none !important; }

  /* The camera moves over the footage, in both directions. The poster frame
     is included: under this preference the video is hidden and the poster is
     what remains, so leaving it zooming would be the only motion on the page. */
  .scene__video, .scene__poster,
  .vbg__video, .vbg__poster {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }

  /* The band's own entrance. The caption must end up visible whether or not
     the observer ever fired, so this overrides the armed state rather than
     relying on it being lifted. */
  .scene.is-armed .scene__caption,
  .scene.is-armed .scene__dots,
  .scene.is-armed .scene__scrim {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   31. Pricing, the estimator, the integrity check and the "start here" routes
   ========================================================================== */

/* ------------------------------------------------------------ 31a. Prices */

.price-from {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin: .35rem 0 .5rem;
}
.price-from span {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.price-from strong {
  font-family: var(--ff-serif);
  font-size: var(--fs-lg);
  color: var(--navy);
  font-weight: 600;
}

/* ---------------------------------------------------------- 31b. Estimator */

.estimator__out:empty { display: none; }
.estimator__out {
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-md);
  background: var(--teal-050);
  border: 1px solid var(--teal-100);
}
.estimator__label {
  margin: 0 0 .2rem;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--teal-700);
  font-weight: 700;
}
.estimator__range {
  margin: 0;
  font-family: var(--ff-serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.15;
}
.estimator__alt {
  margin: .3rem 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}
.estimator__flag {
  margin: .6rem 0 0;
  font-size: var(--fs-xs);
  color: var(--warn);
}
.estimator__flag.is-good { color: var(--success); }
.estimator__soft {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-body);
}

/* --------------------------------------------------- 31c. Integrity check */

.integrity-intro { margin-bottom: var(--sp-6); }

.integrity-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: var(--sp-6);
}
.chip {
  padding: .45rem .85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.chip:hover { border-color: var(--teal); color: var(--teal-700); }
.chip.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.integrity-list { display: grid; gap: .85rem; }

.integrity-case {
  padding: 1.2rem 1.35rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  border-left-width: 4px;
  background: var(--surface);
}
.integrity-case[hidden] { display: none; }
.integrity-case.is-yes        { border-left-color: var(--success); }
.integrity-case.is-conditions { border-left-color: var(--warn); }
.integrity-case.is-no         { border-left-color: var(--danger); }

.integrity-case__q {
  font-size: var(--fs-md);
  margin: 0 0 .5rem;
  color: var(--ink);
}
.integrity-case__verdict {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0 0 .5rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.is-yes        .integrity-case__verdict { color: var(--success); }
.is-conditions .integrity-case__verdict { color: var(--warn); }
.is-no         .integrity-case__verdict { color: var(--danger); }
.integrity-case__a { font-size: var(--fs-sm); color: var(--ink-body); }

/* ------------------------------------------------------- 31d. Start here */

.start-here {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.start-route {
  display: grid;
  gap: .4rem;
  padding: 1.25rem 1.35rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.start-route:hover {
  transform: translateY(-3px);
  border-color: var(--teal-500);
  box-shadow: var(--sh-md);
}
.start-route__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--teal-050);
  color: var(--teal-700);
  margin-bottom: .3rem;
}
.start-route strong {
  font-family: var(--ff-serif);
  font-size: var(--fs-md);
  color: var(--ink);
}
.start-route span { font-size: var(--fs-sm); color: var(--ink-muted); }
.start-route em {
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--teal-700);
}

/* ------------------------------------------- 31e. Evidence note (no results) */

.evidence-note {
  display: flex;
  gap: .85rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--r-lg);
  border: 1px dashed var(--line-strong);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}
.evidence-note svg { flex: none; color: var(--teal-700); }

/* ------------------------------------------------- 31f. Two-step enquiry */

/* Without JavaScript every step is simply visible, one after another, and the
   form submits exactly as it always did. The stepping is an enhancement. */
.js-ready .form-step { display: none; }
.js-ready .form-step.is-active { display: block; animation: auth-in 320ms var(--ease-soft); }

.form-steps {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: var(--sp-5);
}
.form-steps__dot {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-faint);
}
.form-steps__dot i {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  font-style: normal;
  font-size: 12px;
}
.form-steps__dot.is-active { color: var(--ink); }
.form-steps__dot.is-active i {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.form-steps__dot.is-done i {
  background: var(--teal-050);
  border-color: var(--teal-500);
  color: var(--teal-700);
}
.form-steps__line {
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}
.form-step__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: var(--sp-5);
}

@media (prefers-reduced-motion: reduce) {
  .js-ready .form-step.is-active { animation: none; }
  .start-route:hover { transform: none; }
}

/* --------------------------------------------- 31g. Service fact strip */

.service-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
}
.service-fact {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  min-width: 14rem;
  flex: 1;
}
.service-fact svg { flex: none; color: var(--teal-700); margin-top: .15rem; }
.service-fact strong {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink);
  font-weight: 650;
}
.service-fact span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  line-height: 1.45;
}

/* A quiet second line under the hero buttons. */
.hero-aside {
  margin: 1rem 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.hero-aside a { color: var(--teal-700); font-weight: 600; }

/* ----------------------------------------------- 31h. What happens next */

.next-steps {
  margin-top: var(--sp-7);
  padding: 1.5rem 1.75rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
.next-steps__head { font-size: var(--fs-md); margin-bottom: 1rem; }
.next-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.next-steps__list li {
  position: relative;
  padding: 0 0 1.15rem 1.9rem;
  border-left: 2px solid var(--line);
  margin-left: .4rem;
}
.next-steps__list li:last-child { padding-bottom: 0; border-left-color: transparent; }
.next-steps__list li::before {
  content: '';
  position: absolute;
  left: -7px; top: .35rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px var(--surface);
}
.next-steps__when {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--teal-700);
  margin-bottom: .15rem;
}
.next-steps__what { display: block; font-size: var(--fs-sm); color: var(--ink-body); }

/* ------------------------------------------- 31i. Compact header on forms */

/* A full-height cinematic header pushes a form off the screen. On form pages
   the header is short, so the first thing below the fold is the first field. */
.page-head--compact {
  padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
}
.page-head--compact h1 { font-size: var(--fs-2xl); }
.page-head--compact .lede { font-size: var(--fs-base); max-width: 46rem; }
.page-head--compact .vbg__poster,
.page-head--compact .vbg__video { object-position: center 40%; }

/* Landing on #enquiry must not tuck the legend under the sticky header. */
#enquiry { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* --------------------------------------------- 31j. Published results */

.results-grid {
  display: grid;
  gap: var(--sp-5);
}
.result-card {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.result-card__shot {
  position: relative;
  display: block;
  background: var(--ice);
  border-bottom: 1px solid var(--line);
  max-height: 17rem;
  overflow: hidden;
}
.result-card__shot img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: top center;
}
.result-card__zoom {
  position: absolute;
  right: .6rem; bottom: .6rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(2, 39, 79, .86);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.result-card__body { padding: 1.1rem 1.3rem 1.3rem; }
.result-card__body h3 { font-size: var(--fs-md); margin: .5rem 0 .15rem; }
.result-card__level {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  margin: 0 0 .8rem;
}
.result-card__note {
  margin: .85rem 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  line-height: 1.5;
}

.result-marks {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.result-marks th,
.result-marks td {
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.result-marks tr:last-child th,
.result-marks tr:last-child td { border-bottom: 0; }
.result-marks th { font-weight: 500; color: var(--ink-body); padding-right: 1rem; }
.result-marks td {
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  color: var(--teal-700);
  font-variant-numeric: tabular-nums;
}

.results-caveat {
  display: flex;
  gap: .6rem;
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  line-height: 1.55;
}
.results-caveat svg { flex: none; margin-top: .15rem; color: var(--ink-faint); }

/* ------------------------------------------- 31k. Rich dropdown panels
   Who We Help, Resources, Partners, About and Contact use the same grammar as
   Services: grouped, titled, with a picture on the entries that lead. */

.nav-panel--rich { padding: 1.3rem 1.5rem 1.15rem; min-width: min(60rem, 88vw); }

.rich-groups {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 1.4rem 1.75rem;
}
@media (max-width: 1180px) {
  .rich-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-panel--rich { min-width: min(44rem, 88vw); }
}

.rich-group { min-width: 0; }
.rich-group__title {
  margin: 0 0 .5rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-faint);
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--line);
}

.rich-link {
  display: grid;
  grid-template-columns: 1fr;
  gap: .1rem;
  padding: .5rem .55rem;
  border-radius: var(--r-sm);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.nav-item.is-open .rich-link {
  animation: mega-in 380ms var(--ease-soft) backwards;
  animation-delay: calc(var(--i, 0) * 22ms);
}
.rich-link:hover,
.rich-link:focus-visible { background: var(--teal-050); transform: translateX(2px); }

.rich-link--pic { grid-template-columns: 68px 1fr; gap: .65rem; align-items: center; }
.rich-link__media {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ice);
  aspect-ratio: 16 / 11;
}
.rich-link__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--ease-out);
}
.rich-link:hover .rich-link__media img { transform: scale(1.07); }

.rich-link__body { min-width: 0; }
.rich-link__body strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.rich-link__body span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  line-height: 1.45;
}

.nav-panel--rich .mega-foot { margin-top: 1.1rem; padding-top: .9rem; }


/* ------------------------------------------- 31l. Below-the-fold rendering

   The homepage is long. Telling the browser it may skip layout and paint for
   sections it cannot see removes a large amount of main-thread work on first
   load, which is what "minimise main-thread work" is asking for.

   contain-intrinsic-size gives each skipped section a placeholder height, so
   the scrollbar does not jump around as sections are rendered on approach. */

.section,
.scene {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* The hero and the header are always visible, so they must never be skipped —
   and skipping the first section would delay the largest contentful paint. */
.hero,
.site-header,
.page-head {
  content-visibility: visible;
}

@media print {
  .section, .scene { content-visibility: visible; }
}


/* ==========================================================================
   32. Text reveals
   Type needs less travel than a card. A paragraph that slides a long way
   reads as unstable, and the eye starts following the motion instead of the
   words — so this is a short lift and a fade, and it is over quickly.
   ========================================================================== */

[data-reveal="text"] {
  transform: translate3d(0, 16px, 0);
  transition-duration: 520ms, 600ms;
}

/* Children of a text block step in behind it, in reading order. The steps are
   tighter than the card grid's: a heading and its paragraph belong together,
   and a long gap between them reads as a stutter rather than a sequence. */
[data-reveal="text"][data-reveal-group] > * {
  transform: translate3d(0, 12px, 0);
  transition-duration: 480ms, 560ms;
}
[data-reveal="text"][data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 40ms; }
[data-reveal="text"][data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 95ms; }
[data-reveal="text"][data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 150ms; }
[data-reveal="text"][data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 205ms; }
[data-reveal="text"][data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 255ms; }
/* Anything past the fifth arrives together. On a long article the alternative
   is the last paragraph waiting two seconds for its turn. */
[data-reveal="text"][data-reveal-group].is-visible > *:nth-child(n+6) { transition-delay: 300ms; }

/* A heading carries slightly more of the movement than the copy under it, so
   the block has a clear top rather than arriving as one flat slab. */
[data-reveal="text"][data-reveal-group] > :is(h1, h2, h3) {
  transform: translate3d(0, 20px, 0);
}

/* Nothing below is allowed to leave text invisible or mid-animation. */
[data-reveal="text"].is-visible,
[data-reveal="text"][data-reveal-group].is-visible > * {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal="text"],
  [data-reveal="text"][data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   33. Audience cards and centred section heads
   ========================================================================== */

/* A heading block that is centred needs its measure centred too, or the text
   sits centred inside a left-aligned column and reads as slightly off. */
.section-head--centred {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: var(--sp-6);
}
.section-head--centred .eyebrow { justify-content: center; }
.section-head--centred p {
  margin-inline: auto;
  max-width: 40rem;
  color: var(--ink-body);
}

.audience-grid { align-items: stretch; }

.audience-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.audience-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ice);
  border-bottom: 1px solid var(--line);
}
.audience-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.audience-card:hover .audience-card__media img { transform: scale(1.05); }

/* The icon overlaps the picture edge, which ties the two halves together and
   stops the body looking like a caption that fell off. */
.audience-card .card-icon {
  margin-top: -34px;
  position: relative;
  z-index: 2;
  background: var(--surface);
  box-shadow: var(--sh-sm);
  border: 1px solid var(--line);
}

.audience-card .card-body { display: flex; flex-direction: column; flex: 1; }
.audience-card .card-foot { margin-top: auto; }

/* Readability: the body copy was running at the muted tone used for captions,
   which is too light for a sentence someone is meant to read. */
.audience-card .card-body p {
  color: var(--ink-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.audience-card h3 { font-size: var(--fs-md); margin-bottom: .4rem; }
.audience-card h3 a { color: var(--ink); text-decoration: none; }
.audience-card:hover h3 a { color: var(--teal-700); }

@media (prefers-reduced-motion: reduce) {
  .audience-card__media img { transition: none; }
  .audience-card:hover .audience-card__media img { transform: none; }
}

/* --------------------------------------------- 34. Phone sign-in */

.provider-btn--phone .provider-btn__mark { color: var(--teal-700); }

/* The code field is read back digit by digit, so it gets the spacing and the
   tabular figures to match — six characters that line up are far easier to
   check against a text message than six that do not. */
.otp-input {
  font-family: var(--ff-mono);
  font-size: var(--fs-xl);
  letter-spacing: .5em;
  text-align: center;
  text-indent: .5em;      /* re-centres against the trailing letter-space */
  font-variant-numeric: tabular-nums;
}
.otp-input::placeholder { letter-spacing: .35em; opacity: .35; }

/* ------------------------------------------------- counter-offer panel ---
   Revealed by "Propose a different price" on a quote. It starts hidden via
   the `hidden` attribute, so without JavaScript the field is simply visible
   and the proposal still sends. */
.counter-offer {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--teal-100, #D9EDEF);
  border-left: 3px solid var(--teal-700, #027C86);
  border-radius: 0 10px 10px 0;
  background: var(--teal-050, #EFF7F8);
}
.counter-offer .hint { color: var(--ink-muted); }

/* ------------------------------------------------------- money field ---
   An amount and its currency read as one answer, so they sit on one line.
   The amount takes the room; the currency stays just wide enough to read. */
.money-row {
  display: flex;
  gap: .5rem;
  align-items: stretch;
}
.money-row .input { flex: 1 1 auto; min-width: 0; }
.money-row .select { flex: 0 0 auto; width: auto; max-width: 13rem; }

@media (max-width: 26rem) {
  .money-row { flex-direction: column; }
  .money-row .select { max-width: none; width: 100%; }
}

/* ------------------------------------------- 34. Account-required panel */
/* Stands in for a form when nobody is signed in. Sized and coloured like a
   .form-card so the page's rhythm does not change when it swaps in. */

.account-required {
  text-align: center;
  padding: clamp(1.75rem, 1rem + 3vw, 2.75rem);
}

.account-required__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--teal-050);
  border: 1px solid var(--teal-100);
  color: var(--teal-700);
}

.account-required__title {
  font-size: var(--fs-lg);
  margin: 0 0 .5rem;
}

.account-required__lede {
  max-width: 34rem;
  margin: 0 auto 1.25rem;
  color: var(--ink-muted);
}

/* The list reads as a centred block rather than a centred ragged column:
   the <ul> is centred, the items inside it stay left-aligned so the ticks
   line up under one another. */
.account-required__perks {
  display: inline-grid;
  gap: .5rem;
  text-align: left;
  margin: 0 auto 1.5rem;
}

.account-required__actions { justify-content: center; }

.account-required__foot {
  max-width: 30rem;
  margin: 1rem auto 0;
}