@charset "UTF-8";
/*  Solution Central X
    ------------------------------------------------------------------
    Hand-written CSS, deliberately. There is no build step: edit this
    file, save, reload.

    Colours are sampled from the supplied logo (#070B10 near-black,
    #023E47 deep teal, #1FE59B green) and extended with a warm paper
    neutral so the site does not read as a white/grey template. Every
    foreground/background pair used for text meets WCAG 2.2 AA.
    ------------------------------------------------------------------ */

:root {
  --ink:        #070b10;
  --ink-soft:   #131a20;
  --teal:       #023e47;
  --teal-mid:   #0a5461;
  --green:      #1fe59b;
  --green-br:   #3df0ad;
  --green-ink:  #076847;   /* green legible as text on light: 6.3:1 */

  --paper:      #f6f5f2;
  --bone:       #edeae3;
  --body:       #3e4b4e;   /* 8.3:1 on paper */
  --muted:      #5c6a6d;   /* 5.2:1 on paper */
  --line:       #dcd8cf;
  --line-str:   #c4bfb3;
  --danger:     #a11c16;

  --dim:        #9aa5a8;   /* on ink */
  --dim-teal:   #a9bdc0;   /* on teal */
  --line-dark:  #1e2a2e;

  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Archivo", var(--sans);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --shell: 84rem;
}

/* ---------- fonts ------------------------------------------------- */
/* Self-hosted, so the site makes no third-party requests at all.     */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ---------- base -------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* keeps anchored sections clear of the sticky header */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
img, svg { display: block; max-width: 100%; }
hr { border: 0; height: 1px; background: var(--line); margin: 0; }

a { color: inherit; }

::selection { background: var(--green); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-dark :focus-visible { outline-color: var(--green); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 60;
}
.skip-link:focus {
  left: 1rem; top: 0.75rem;
  background: var(--ink); color: var(--paper);
  padding: 0.625rem 1rem; font-size: 0.875rem; text-decoration: none;
}

/* ---------- layout ------------------------------------------------ */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 40rem)  { .shell { padding-inline: 2rem; } }
@media (min-width: 80rem)  { .shell { padding-inline: 3rem; } }

.section { padding-block: 4.5rem; }
.section--sm { padding-block: 3.5rem; }
.section--lg { padding-block: 5rem; }
@media (min-width: 40rem) {
  .section     { padding-block: 6rem; }
  .section--sm { padding-block: 4rem; }
  .section--lg { padding-block: 6.5rem; }
}
@media (min-width: 64rem) {
  .section--lg { padding-block: 8rem; }
}

.section--bone { background: var(--bone); }
.section--ink  { background: var(--ink);  color: var(--dim); }
.section--teal { background: var(--teal); color: var(--dim-teal); }
.anchor { scroll-margin-top: 5rem; }

.grid { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) {
  .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem; }
  .c5  { grid-column: span 5; }
  .c6  { grid-column: span 6; }
  .c7  { grid-column: span 7; }
  .c4-9 { grid-column: 9 / span 4; }
  .c6-7 { grid-column: 7 / span 6; }
  .c5-8 { grid-column: 8 / span 5; }
}

/* ---------- typography -------------------------------------------- */

.t-display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.98;
  font-size: clamp(2.6rem, 7.2vw, 5.5rem);
  color: var(--ink);
}
.t-h1 {
  font-family: var(--display); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.02;
  font-size: clamp(2.15rem, 5.2vw, 3.75rem);
}
.t-h2 {
  font-family: var(--display); font-weight: 600;
  letter-spacing: -0.026em; line-height: 1.06;
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
}
.t-h3 {
  font-family: var(--display); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.15;
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
}
.t-lead {
  font-size: clamp(1.05rem, 1.55vw, 1.3rem);
  line-height: 1.55;
  color: var(--body);
}

/* Mono eyebrow: the register of a drawing sheet or a job reference. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow .num { color: var(--green-ink); }
.eyebrow .rule { display: block; height: 1px; width: 1.5rem; background: var(--line-str); flex: none; }
.on-dark .eyebrow, .eyebrow--dark { color: var(--dim); }
.on-dark .eyebrow .num, .eyebrow--dark .num { color: var(--green); }
.on-dark .eyebrow .rule, .eyebrow--dark .rule { background: rgba(246,245,242,0.25); }

.prose p { font-size: 1.0625rem; line-height: 1.7; max-width: 68ch; }
.prose p + p { margin-top: 1.15rem; }

.text-ink   { color: var(--ink); }
.text-paper { color: var(--paper); }
.text-dim   { color: var(--dim); }
.text-muted { color: var(--muted); }
.mono       { font-family: var(--mono); }

/* ---------- buttons ----------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.625rem;
  font: inherit; font-weight: 500;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
  padding: 0.625rem 1.25rem;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.btn--lg { padding: 0.875rem 1.75rem; min-height: 3.25rem; font-size: 1rem; }

.btn--primary { background: var(--green); color: var(--ink); border-color: var(--green); }
.btn--primary:hover { background: var(--green-br); border-color: var(--green-br); }

.btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-str); }
.btn--secondary:hover { border-color: var(--ink); background: var(--bone); }

.btn--dark-ghost { background: transparent; color: var(--paper); border-color: rgba(246,245,242,.35); }
.btn--dark-ghost:hover { border-color: var(--paper); background: rgba(246,245,242,.08); }

.chev { width: .75rem; height: .75rem; flex: none; }
.btn .chev { transition: transform .2s; }

/* ---------- header ------------------------------------------------ */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s;
}
.site-header.is-scrolled {
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 var(--line), 0 8px 24px -20px rgba(7,11,16,.45);
}
.header-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: 4.5rem;
}
@media (min-width: 64rem) { .header-bar { height: 5rem; } }

.logo img { width: 150px; height: auto; }
@media (min-width: 40rem) { .logo img { width: 176px; } }
@media (min-width: 64rem) { .logo img { width: 190px; } }
.logo { display: inline-flex; transition: opacity .2s; }
.logo:hover { opacity: .8; }

.nav-desktop { display: none; align-items: center; gap: .25rem; }
.nav-desktop a {
  padding: .5rem .75rem; font-size: .9375rem; color: var(--body);
  text-decoration: none; white-space: nowrap; transition: color .15s;
}
.nav-desktop a:hover { color: var(--ink); }

.header-actions { display: none; align-items: center; gap: .75rem; }
.header-phone {
  font-family: var(--mono); font-size: .8125rem; color: var(--body);
  text-decoration: none; padding: .25rem; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 1.5rem;
  transition: color .15s;
}
.header-phone:hover { color: var(--ink); }
.header-divider { width: 1px; height: 1.25rem; background: var(--line); }

@media (min-width: 64rem) {
  .nav-desktop, .header-actions { display: flex; }
  .header-mobile { display: none !important; }
}

.header-mobile { display: flex; align-items: center; gap: .5rem; }
.icon-btn {
  width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-str); background: transparent; color: var(--ink);
  cursor: pointer; transition: background-color .15s;
}
.icon-btn:hover { background: var(--bone); }

.burger { position: relative; display: block; width: 1.25rem; height: .75rem; }
.burger span {
  position: absolute; left: 0; display: block; height: 2px; width: 1.25rem;
  background: currentColor; transition: transform .2s, opacity .2s, top .2s;
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: .375rem; }
.burger span:nth-child(3) { top: .75rem; }
[aria-expanded="true"] .burger span:nth-child(1) { top: .375rem; transform: rotate(45deg); }
[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .burger span:nth-child(3) { top: .375rem; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 4.5rem 0 0 0; z-index: 40;
  background: var(--paper); overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: 4rem;
}
.mobile-menu[hidden] { display: none; }
@media (min-width: 64rem) { .mobile-menu { display: none !important; } }
.mobile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding-top: 1.5rem; }
.mobile-nav { margin-top: 2rem; border-top: 1px solid var(--line); }
.mobile-nav a {
  display: block; padding: 1rem 0; border-bottom: 1px solid var(--line);
  font-family: var(--display); font-size: 1.125rem; font-weight: 500;
  color: var(--ink); text-decoration: none;
}
.mobile-call {
  display: flex; align-items: center; gap: .75rem; margin-top: 2rem;
  min-height: 2.75rem; color: var(--ink); text-decoration: none;
}
body.menu-open { overflow: hidden; }

/* ---------- hero -------------------------------------------------- */

.hero { border-bottom: 1px solid var(--line); }
.hero-inner { padding-block: 4rem; }
@media (min-width: 40rem) { .hero-inner { padding-block: 6rem; } }
@media (min-width: 64rem) { .hero-inner { padding-block: 7rem; } }

.hero-actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 2.25rem; }
@media (min-width: 40rem) { .hero-actions { flex-direction: row; } }

.facts {
  margin-top: 4rem; border-top: 1px solid var(--line);
  display: grid; gap: 0;
}
@media (min-width: 40rem) { .facts { grid-template-columns: repeat(3, 1fr); margin-top: 5rem; } }
.facts > div { padding-top: 1.5rem; }
@media (min-width: 40rem) { .facts > div { padding-right: 2rem; } }
.facts dt { margin-bottom: .625rem; }
.facts dd { max-width: 30ch; font-size: .9375rem; line-height: 1.6; color: var(--ink); }

/* ---------- specialism panels ------------------------------------- */

.split { display: grid; }
@media (min-width: 64rem) { .split { grid-template-columns: 1fr 1fr; } }

.panel {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 4rem 1.5rem;
}
@media (min-width: 40rem) { .panel { padding: 5rem 2.5rem; } }
@media (min-width: 64rem) { .panel { padding: 6rem 3.5rem; } }
@media (min-width: 80rem) { .panel { padding: 6rem 5rem; } }

.panel--ink  { background: var(--ink); }
.panel--teal { background: var(--teal); }

.panel-mark {
  position: absolute; z-index: -1; top: -15%; height: 130%; width: auto;
  color: rgba(246,245,242,.045); pointer-events: none;
}
.panel-mark--r { right: -4rem; }
.panel-mark--l { left: -4rem; transform: scaleX(-1); }

.panel h3 { max-width: 14ch; color: var(--paper); }
@media (min-width: 64rem) { .panel h3 { min-height: 3.4em; } }
.panel-line { margin-top: 1.5rem; max-width: 44ch; font-size: 1.0625rem; line-height: 1.6; color: var(--dim); }
@media (min-width: 64rem) { .panel-line { min-height: 3.4em; } }
.panel-label { margin-top: 3rem; margin-bottom: 1.25rem; }

.disc-list { display: grid; column-gap: 2rem; }
@media (min-width: 40rem) { .disc-list { grid-template-columns: 1fr 1fr; } }
.disc-list li {
  display: flex; align-items: baseline; gap: .75rem;
  padding-block: .625rem; border-bottom: 1px solid rgba(246,245,242,.15);
  font-size: .9375rem; color: var(--paper);
}
.disc-list .num { font-family: var(--mono); font-size: .625rem; letter-spacing: .1em; color: var(--green); }

/* ---------- editorial lists --------------------------------------- */

.steps { border-top: 1px solid var(--line); }
.steps > li { border-bottom: 1px solid var(--line); }
.step { display: grid; gap: .5rem; padding-block: 1.75rem; }
@media (min-width: 40rem) {
  .step { grid-template-columns: repeat(12, minmax(0,1fr)); gap: 1.5rem; padding-block: 2rem; }
  .step .step-num  { grid-column: span 1; }
  .step .step-name { grid-column: span 3; }
  .step .step-body { grid-column: span 8; }
}
.step-num { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; color: var(--green-ink); }
.step-body { max-width: 62ch; font-size: 1.0625rem; line-height: 1.65; color: var(--body); }

.on-dark .steps, .on-dark .steps > li { border-color: rgba(246,245,242,.15); }
.on-dark .step-num { color: var(--green); }
.on-dark .step-body { color: var(--dim); }

.def-list { border-top: 1px solid var(--line); }
.def-list > div { border-bottom: 1px solid var(--line); padding-block: 1.75rem; }
.def-list dt { color: var(--ink); }
.def-list dd { margin-top: .625rem; max-width: 58ch; font-size: 1.0625rem; line-height: 1.65; color: var(--body); }

.on-dark .def-list, .on-dark .def-list > li, .on-dark .def-list > div { border-color: rgba(246,245,242,.15); }
.on-dark .def-list h3 { color: var(--paper); }
.on-dark .def-list p  { color: var(--dim); }

.rule-list { border-top: 1px solid rgba(246,245,242,.15); }
.rule-list > li { border-bottom: 1px solid rgba(246,245,242,.15); padding-block: 1.75rem; }
.rule-list h3 { color: var(--paper); }
.rule-list p { margin-top: .625rem; max-width: 58ch; font-size: 1.0625rem; line-height: 1.65; color: var(--dim); }

/* ---------- forms -------------------------------------------------- */

.form { position: relative; }
.form fieldset { border: 0; padding: 0; margin: 0; }

/* One rule for vertical rhythm, applied to direct children only, so fields
   sharing a row are never pushed out of alignment with each other. */
.form fieldset > * + * { margin-top: 1.75rem; }

.form-row { display: grid; gap: 1.5rem; }
@media (min-width: 40rem) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
.form-row > .field { margin-top: 0; }

.label {
  display: block; margin-bottom: .5rem;
  font-size: .875rem; font-weight: 500; color: var(--ink);
}
.label .req { color: var(--green-ink); margin-left: .125rem; }
.label .opt { color: var(--muted); font-weight: 400; margin-left: .375rem; }

.control {
  width: 100%; display: block;
  padding: .75rem .875rem;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-str);
  border-radius: 2px;
  transition: border-color .15s;
}
.control::placeholder { color: rgba(92,106,109,.7); }
.control:hover { border-color: var(--muted); }
.control:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
textarea.control { resize: vertical; min-height: 7rem; }

.select-wrap { position: relative; }
select.control { appearance: none; padding-right: 2.5rem; }
.select-wrap .chev-down {
  position: absolute; right: .875rem; top: 50%; transform: translateY(-50%);
  width: .75rem; height: .75rem; color: var(--muted); pointer-events: none;
}

.field--error .control { border-color: var(--danger); }
.field--error .control:focus-visible { outline-color: var(--danger); }

.hint { margin-top: .5rem; font-size: .8125rem; line-height: 1.55; color: var(--muted); }
.error {
  margin-top: .5rem; display: flex; align-items: flex-start; gap: .375rem;
  font-size: .875rem; color: var(--danger);
}
.error svg { width: .875rem; height: .875rem; flex: none; margin-top: .1875rem; }

.check { display: flex; align-items: flex-start; gap: .75rem; }
.check input[type="checkbox"] {
  appearance: none; flex: none; margin-top: .125rem;
  width: 1.5rem; height: 1.5rem;
  border: 1px solid var(--line-str); border-radius: 2px;
  background: var(--paper); cursor: pointer;
}
.check input[type="checkbox"]:hover { border-color: var(--muted); }
.check input[type="checkbox"]:checked {
  background: var(--ink); border-color: var(--ink);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231FE59B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m3.5 8.3 3 3 6-6.5'/%3E%3C/svg%3E");
  background-size: 16px 16px; background-position: center; background-repeat: no-repeat;
}
.check label { font-size: .9375rem; line-height: 1.6; color: var(--body); cursor: pointer; }
.check + .check { margin-top: 1.25rem; }

.form-divider { border-top: 1px solid var(--line); padding-top: 1.75rem; margin-top: 1.75rem; }

.form-alert {
  border-left: 2px solid var(--danger);
  background: rgba(161,28,22,.05);
  padding: .875rem 1rem;
  font-size: .9375rem; color: var(--danger);
}

.form-submit { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 1.75rem; }
@media (min-width: 40rem) { .form-submit { flex-direction: row; align-items: center; } }
.form-note { font-size: .8125rem; line-height: 1.55; color: var(--muted); }

.honeypot { position: absolute; left: -9999px; top: 0; width: 0; height: 0; overflow: hidden; }

/* ---------- success panel ------------------------------------------ */

.success {
  border-left: 2px solid var(--green);
  background: var(--bone);
  padding: 2.5rem 1.5rem;
}
@media (min-width: 40rem) { .success { padding: 3rem 2.5rem; } }
.success .eyebrow { color: var(--green-ink); margin-bottom: 1.25rem; }
.success .prose { margin-top: 1.5rem; }

/* ---------- links -------------------------------------------------- */

.link-underline {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--line-str); text-underline-offset: 4px;
}
.link-underline:hover { text-decoration-color: var(--ink); }
.on-dark .link-underline { color: var(--paper); text-decoration-color: rgba(246,245,242,.4); }
.on-dark .link-underline:hover { text-decoration-color: var(--green); }

.phone-lg {
  font-family: var(--mono); font-size: 1.5rem; color: var(--ink);
  text-decoration: none; transition: color .15s;
  display: inline-flex; align-items: center; min-height: 2.75rem;
}
.phone-lg:hover { color: var(--green-ink); }
.on-dark .phone-lg { color: var(--paper); }
.on-dark .phone-lg:hover { color: var(--green); }

/* ---------- footer -------------------------------------------------- */

.site-footer { background: var(--ink); color: var(--dim); }
.footer-top { padding-block: 4rem; }
@media (min-width: 40rem) { .footer-top { padding-block: 5rem; } }
.footer-grid { display: grid; gap: 3rem; }
@media (min-width: 64rem) {
  .footer-grid { grid-template-columns: repeat(12, minmax(0,1fr)); gap: 2rem; }
  .footer-brand { grid-column: span 5; }
  .footer-nav   { grid-column: span 3; }
  .footer-cover { grid-column: span 4; }
}
.footer-brand img { width: 176px; height: auto; }
.footer-brand p { margin-top: 1.5rem; max-width: 34ch; font-size: .9375rem; line-height: 1.6; }
.footer-dl { margin-top: 2rem; display: grid; gap: 1rem; font-size: .9375rem; }
.footer-dl dt { margin-bottom: .375rem; }
.footer-dl dd { color: var(--paper); }
.footer-dl dd .phone-lg { min-height: 2rem; }
.footer-dl .sub { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--dim); }
.footer-nav h2, .footer-cover h2 { color: var(--paper); margin-bottom: 1.25rem; }
.footer-nav a {
  display: block; padding-block: .25rem; font-size: .875rem; line-height: 1.4;
  color: var(--dim); text-decoration: none; transition: color .15s;
}
.footer-nav a:hover { color: var(--paper); }
.footer-cover .group + .group { margin-top: 1.25rem; }
.footer-cover .group p:first-child { font-size: .875rem; font-weight: 500; color: var(--paper); margin-bottom: .375rem; }
.footer-cover .group p:last-child { font-size: .8125rem; line-height: 1.6; color: var(--dim); }
.footer-social { margin-top: 2rem; display: flex; gap: 1.25rem; }
.footer-social a { font-size: .9375rem; color: var(--paper); text-decoration: underline; text-decoration-color: rgba(246,245,242,.3); text-underline-offset: 4px; }
.footer-social a:hover { color: var(--green); text-decoration-color: var(--green); }

.footer-bottom { border-top: 1px solid var(--line-dark); }
.footer-bottom .inner {
  display: flex; flex-direction: column; gap: 1.25rem;
  padding-block: 1.75rem; font-size: .8125rem;
}
@media (min-width: 40rem) {
  .footer-bottom .inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer-bottom a { text-decoration: none; padding-block: .25rem; display: inline-block; transition: color .15s; }
.footer-bottom a:hover { color: var(--paper); }
.footer-reg { margin-left: .5rem; color: var(--dim); }

/* ---------- legal pages -------------------------------------------- */

.legal-gap {
  color: var(--danger);
  border-bottom: 1px dashed rgba(161,28,22,.6);
}
.legal-toc { border-left: 1px solid var(--line); padding-left: 1rem; }
.legal-toc a {
  display: flex; gap: .625rem; padding-block: .25rem;
  font-size: .875rem; line-height: 1.4; color: var(--body); text-decoration: none;
}
.legal-toc a:hover { color: var(--ink); }
.legal-toc .num { font-family: var(--mono); font-size: .625rem; color: var(--muted); }
@media (min-width: 64rem) { .legal-toc-wrap { position: sticky; top: 7rem; align-self: start; } }

.legal-section { border-top: 1px solid var(--line); padding-top: 2.25rem; scroll-margin-top: 7rem; }
.legal-section + .legal-section { margin-top: 3rem; }
.legal-section .eyebrow { color: var(--green-ink); margin-bottom: .75rem; }
.legal-section .prose { margin-top: 1.5rem; }
.legal-list { margin-top: 1rem; display: grid; gap: .625rem; }
.legal-list li { display: flex; gap: .75rem; color: var(--body); font-size: 1.0625rem; line-height: 1.65; }
.legal-list .dot { flex: none; width: .375rem; height: .375rem; margin-top: .625rem; background: var(--green-ink); }
.legal-list span:last-child { max-width: 68ch; }
.legal-foot {
  margin-top: 3.5rem; border-top: 1px solid var(--line); padding-top: 1.75rem;
  font-size: .875rem; line-height: 1.65; color: var(--muted);
}

/* ---------- misc ---------------------------------------------------- */

.card-outline { border: 1px solid var(--line); padding: 2.5rem 1.5rem; }
@media (min-width: 40rem) { .card-outline { padding: 3.5rem 3rem; } }

.mt-1 { margin-top: .5rem; }  .mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 1.75rem; }
.mt-5 { margin-top: 2.25rem; } .mt-6 { margin-top: 3rem; }
.mt-7 { margin-top: 3.5rem; }
.mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 1.75rem; }
.maxw-40 { max-width: 40ch; } .maxw-46 { max-width: 46ch; }
.maxw-52 { max-width: 52ch; } .maxw-62 { max-width: 62ch; }
.stack-actions { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 40rem) { .stack-actions { flex-direction: row; } }

.aside-block { border-top: 1px solid var(--line); padding-top: 1.75rem; }
.aside-block + .aside-block { margin-top: 2.5rem; }
.aside-block h2 { margin-bottom: 1.25rem; }
.numbered { display: grid; gap: 1.5rem; }
.numbered li { display: flex; gap: 1rem; }
.numbered .n { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; color: var(--green-ink); margin-top: .25rem; }
.numbered h3 { font-family: var(--sans); font-size: .9375rem; font-weight: 500; color: var(--ink); letter-spacing: 0; }
.numbered p { margin-top: .375rem; font-size: .9375rem; line-height: 1.6; color: var(--body); }

/* ---------- motion --------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(12px); }
.js .reveal { transition: opacity .5s cubic-bezier(.2,.6,.2,1), transform .5s cubic-bezier(.2,.6,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
/* Without JavaScript nothing is ever left hidden. */
html:not(.js) .reveal { opacity: 1; transform: none; }

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

.spinner { width: 1rem; height: 1rem; flex: none; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- utilities used in place of inline styles -----------------
   The Content-Security-Policy is `style-src 'self'`, which blocks inline
   style attributes. Keeping these as classes means the policy stays
   strict rather than needing 'unsafe-inline'.                           */

.body-17      { font-size: 1.0625rem; line-height: 1.65; }
.body-15      { font-size: .9375rem;  line-height: 1.6; }
.on-dim       { color: var(--dim); }
.fs-19        { font-size: 1.125rem; }
.fs-28        { font-size: 1.75rem; }
.icon-18      { width: 1.125rem; height: 1.125rem; }
.items-center { align-items: center; }
.one-col      { grid-template-columns: 1fr; }
.order-1      { order: 1; }
.order-2      { order: 2; }
.flush        { padding-block: 0; }

/* Suggested-links rows on the 404 page. */
.row-link {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1rem; text-decoration: none;
}

/* Staggered entrance. Applied by index, so no inline delay is needed. */
.reveal-d1 { transition-delay: 60ms; }
.reveal-d2 { transition-delay: 120ms; }
.reveal-d3 { transition-delay: 180ms; }

/* Professional refresh: crisp surfaces, deep teal and restrained mint accents. */
:root {
  --ink: #092d33; --ink-soft: #123b42; --teal: #064b52;
  --paper: #ffffff; --bone: #f2f6f6;
  --body: #40565a; --muted: #536a6e;
  --line: #dce6e7; --line-str: #b6c9cc;
  --dim: #bed0d2; --line-dark: #2b4d53; --shell: 82rem;
}
body { overflow-x: clip; }
.grid > *, .hero-layout > *, .split > * { min-width: 0; }
a, .phone-lg { overflow-wrap: anywhere; }
.btn { border-radius: 6px; font-weight: 600; white-space: normal; }
.btn--primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn--primary:hover { background: #08383f; border-color: #08383f; }
.on-dark .btn--primary { background: var(--green); border-color: var(--green); color: #092d33; }
.on-dark .btn--primary:hover { background: var(--green-br); border-color: var(--green-br); }
.eyebrow { font-family: var(--sans); font-size: .8125rem; letter-spacing: .1em; font-weight: 600; }
.eyebrow .num { font-size: .8125rem; }
.t-h2 { line-height: 1.16; }
.t-h3 { line-height: 1.3; }
.site-header { background: #fff; }
.header-bar { gap: 1rem; }
.header-phone { font-family: var(--sans); font-size: .875rem; }
.nav-desktop a { font-size: .875rem; font-weight: 500; padding-inline: .55rem; }
.nav-desktop a:hover { color: var(--green-ink); }
.hero { background: #092d33; border: 0; }
.hero-inner { padding-block: 4rem 0; }
.hero-layout { display: grid; gap: 3rem; align-items: center; }
.hero .t-display { color: #fff; font-size: clamp(2.75rem, 5.6vw, 4.7rem); line-height: 1.08; letter-spacing: -.045em; }
.hero .t-display span { color: #6de7bb; }
.hero-copy > .t-lead { color: #d0dfe0; margin-top: 1.75rem; max-width: 47ch; font-size: 1.125rem; line-height: 1.7; }
.hero .eyebrow { color: #bed0d2; }
.hero .hero-actions { margin-top: 2rem; }
.hero-markets { border: 1px solid #3b6267; border-radius: 12px; padding: 1.75rem; background: #113d44; }
.hero-markets > .eyebrow { margin-bottom: 1.5rem; }
.market-link { display: block; text-decoration: none; padding-block: 1.5rem; border-top: 1px solid #3b6267; transition: color .2s; }
.market-link:last-child { padding-bottom: .25rem; }
.market-index { display: block; font-size: .8125rem; color: #a9c5ca; }
.market-link strong { display: block; font-family: var(--display); font-weight: 500; letter-spacing: -.035em; font-size: clamp(1.6rem, 2.5vw, 2.1rem); margin: .65rem 0; color: #fff; }
.market-bottom { display: flex; gap: 1rem; justify-content: space-between; align-items: center; color: #bed0d2; font-size: .9375rem; }
.market-bottom > span { font-size: 1.5rem; color: #6de7bb; }
.market-link:hover strong { color: #6de7bb; }
.hero .facts { margin-top: 3.5rem; border-color: #3b6267; padding-bottom: 1.75rem; gap: 1.25rem; }
.hero .facts > div { padding-top: 1.75rem; }
.hero .facts dt { color: #a9c5ca; font-size: .75rem; margin-bottom: .35rem; }
.hero .facts dd { color: #fff; max-width: none; font-size: .9375rem; }
#what-we-do { padding-bottom: 3.5rem; }
#what-we-do .prose p { font-size: 1.0625rem; line-height: 1.75; }
#specialisms { max-width: var(--shell); margin-inline: auto; padding: 0 1.25rem 5rem; }
#specialisms .split { gap: 1.5rem; }
.panel { border-radius: 12px; padding: 2rem; }
.panel h3 { font-size: clamp(1.8rem,3.1vw,2.55rem); line-height: 1.15; min-height: 0; max-width: 18ch; }
.panel-line { min-height: 0; margin-top: 1rem; color: #cfdddd; }
.panel-mark { display: none; }
.panel-label { margin-top: 2rem; }
.disc-list { column-gap: 1.5rem; }
.disc-list li { font-size: .9375rem; padding-block: .8rem; }
.disc-list .num { font-size: .75rem; }
.steps { display: grid; gap: 1.25rem; border: 0; }
.steps > li { border: 1px solid var(--line); border-radius: 10px; padding: 1.75rem; background: #fff; }
.step { display: flex; flex-direction: column; gap: 1rem; padding: 0; }
.step-num { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: #e2f5ed; font-size: .8125rem; letter-spacing: 0; }
.step-name { font-size: 1.4rem; }
.step-body { font-size: 1rem; line-height: 1.7; }
#candidates .aside-block { padding: 1.5rem; background: var(--bone); border: 1px solid var(--line); border-radius: 8px; }
.def-list > div { padding-block: 1.5rem; }
.def-list dd { font-size: 1rem; line-height: 1.75; }
#enquiry .form { padding: 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px -25px #244b4f55; }
.control { border-radius: 5px; min-height: 3rem; }
.label { font-weight: 600; }
.hint, .form-note, .footer-dl .sub, .footer-cover .group p:last-child, .footer-bottom .inner { font-size: .875rem; }
.form-submit { flex-wrap: wrap; }
.form-alert, .success { border-radius: 6px; }
#privacy .t-h3 { font-size: 1.125rem; }
#privacy .def-list dd { color: var(--muted); }
.site-footer { border-top: 1px solid #2b4d53; }
.footer-brand img { width: 215px; }
.footer-nav a { min-height: 2rem; }
.footer-cover .group p:last-child { line-height: 1.85; }
@media (min-width: 40rem) {
  .hero-inner { padding-top: 5rem; }
  #specialisms { padding-inline: 2rem; }
  .panel { padding: 2.5rem; }
  .steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #enquiry .form { padding: 2.5rem; }
}
@media (min-width: 64rem) {
  .hero-layout { grid-template-columns: 1.35fr 1fr; gap: 4rem; }
  .hero-inner { padding-top: 5.5rem; }
  .section--lg { padding-block: 6rem; }
  .hero-markets { padding: 2rem; }
  .panel h3 { min-height: 2.3em; }
  .panel-line { min-height: 3.2em; }
  .steps { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .steps > li { padding: 1.5rem; }
  #candidates .c5 { grid-column: 1 / span 5; grid-row: 1; }
  #candidates .c6 { grid-column: 7 / span 6; grid-row: 1; }
}
@media (min-width: 80rem) { #specialisms { padding-inline: 3rem; } }
@media (min-width: 64rem) and (max-width: 74rem) { .header-phone, .header-divider { display: none; } }
@media (max-width: 39.99rem) {
  .hero .t-display { font-size: clamp(2.15rem,8.8vw,3.4rem); }
  .hero .facts { gap: 0; margin-top: 2rem; }
  .hero .facts > div { padding-top: 1rem; }
  .hero-markets { padding: 1.5rem; }
  .phone-lg { font-size: 1.25rem; }
  .disc-list { grid-template-columns: 1fr; }
}