/* ==========================================================================
   Montserrat, self-hosted.

   Was loaded from Google Fonts. That cost a DNS lookup, a TLS handshake and a
   render-blocking stylesheet on a third-party origin before a single letter
   could be drawn: 230ms on PageSpeed, the largest single blocker on the page.
   It also meant every visitor's IP address was handed to Google, which the
   privacy notice had to disclose.

   Subset to Google's own "latin" unicode-range so nothing is lost, two weights,
   23.8 KB total against the 35.5 KB Google was serving. font-display: swap so
   text is readable in the fallback while the file arrives rather than invisible.

   If these files are ever replaced, rename them. They are referenced from
   inside this stylesheet, so the build's ?v= hashing does not reach them.
   ========================================================================== */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-600.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/montserrat-700.woff2") format("woff2");
}

/* ==========================================================================
   Border Asset Reliability
   Built by True North 54. Single stylesheet, no framework, no build step.
   ========================================================================== */

:root {
  /* Brand */
  --navy:        #0A1E36;   /* exact brand navy from the logo files */
  --navy-mid:    #11294A;
  /* One brand orange, taken from the logo. Used for everything you SEE as
     orange: button fills, rules, borders, icons, the header stripe. Against
     white it is 3.42:1, which clears the 3:1 WCAG asks of a non-text graphic. */
  --orange:        #EB5E0E;
  /* Hover for orange fills. Lighter, not darker, because the text sitting on
     them is navy: going lighter pushes contrast up instead of down. */
  --orange-fill-hv:#F2751F;

  /* The exception. #EB5E0E as TEXT on a light background is 3.42:1 and fails
     the 4.5:1 AA needs for body-size text, so small orange text uses this
     darker one (5.46:1). Only for orange text on white or --surface. Never
     for fills, borders or icons: those get --orange. */
  --orange-text:   #B4470A;
  --orange-text-hv:#963B08;

  /* Neutrals */
  --ink:     #16202E;
  --muted:   #5A6B7F;
  --line:    #DDE4EB;
  --bg:      #FFFFFF;
  --surface: #F5F7F9;
  --on-navy: #C9D4E0;

  /* Type */
  --font-head: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spacing scale */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;

  --radius: 6px;
  --shadow: 0 1px 2px rgba(11,30,54,.06), 0 8px 24px rgba(11,30,54,.08);
  --container: 1140px;
}

/* --------------------------------------------------------- reset + base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 112px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; color: var(--navy); margin: 0 0 var(--s-4); letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); }
h3 { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem); }
p  { margin: 0 0 var(--s-4); text-wrap: pretty; }
p:last-child, ul:last-child { margin-bottom: 0; }
a { color: var(--orange-text); text-underline-offset: 3px; }
a:hover { color: var(--orange-text-hv); }
strong { font-weight: 650; color: var(--navy); }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 999;
  background: var(--orange); color: var(--navy); padding: var(--s-3) var(--s-5);
  border-radius: var(--radius); font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--s-4); color: var(--navy); }

/* --------------------------------------------------------- layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-5); }
.section { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section--tight { padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.section--surface { background: var(--surface); border-block: 1px solid var(--line); }
.measure { max-width: 48rem; }
/* Constrain the prose for readability, not the headings. A 62ch limit measured
   at body size is far too narrow for a 34px heading and makes it wrap early. */
.measure > p { max-width: 34rem; }

.eyebrow {
  font-family: var(--font-head); font-weight: 700; font-size: .8125rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--orange-text);
  margin: 0 0 var(--s-3);
}
.eyebrow--on-navy { color: var(--orange); }
.lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--muted); text-wrap: pretty; }

/* --------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .75rem 1.6rem;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  text-decoration: none; border-radius: var(--radius); border: 2px solid transparent;
  cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* Brand orange fill with a navy label. White on #EB5E0E is only 3.42:1;
   navy on it is 4.90:1, so the button can wear the real brand colour and
   still pass AA.

   Hover inverts to navy with orange text, which is the same 4.90:1 the other
   way round. The orange border is doing real work, not decoration: this
   button also sits on the navy hero, the navy band and the navy header, and
   a navy fill on a navy background is 1.0:1. Without the outline the button
   would vanish on hover on three of the places it appears. */
.btn--primary {
  background: var(--orange); color: var(--navy); border-color: var(--orange);
}
.btn--primary:hover {
  background: var(--navy); color: var(--orange); border-color: var(--orange);
}
.btn--outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn--on-navy { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.btn--on-navy:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy); border-bottom: 3px solid var(--orange);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 96px; position: relative; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
/* Fixed sizes, not a clamp. Ian's note: the logo was the only thing on the
   page that resized continuously as you dragged the window, which reads as a
   fault rather than a feature. One size for desktop, one for narrow. */
.brand img { width: 190px; height: auto; }

.nav-toggle {
  display: none; background: none; border: 2px solid rgba(255,255,255,.4);
  border-radius: var(--radius); color: #fff; min-height: 44px; min-width: 44px;
  align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle svg { display: block; }

.nav ul { list-style: none; display: flex; align-items: center; gap: var(--s-2); margin: 0; padding: 0; }
.nav a {
  display: block; padding: .6rem .85rem; text-decoration: none; color: #fff;
  font-family: var(--font-head); font-weight: 600; font-size: .9375rem;
  border-radius: var(--radius); border-bottom: 3px solid transparent;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav a[aria-current="page"] { border-bottom-color: var(--orange); color: #fff; }
.nav .nav__cta { margin-left: var(--s-3); }
.nav .nav__cta a { background: var(--orange); color: var(--navy); border-bottom-color: transparent; }
/* Same invert as .btn--primary. The 2px orange inset keeps the button visible
   against the navy header once the fill goes navy. */
.nav .nav__cta a:hover {
  background: var(--navy); color: var(--orange); box-shadow: inset 0 0 0 2px var(--orange);
}

@media (max-width: 880px) {
  .site-header__inner { min-height: 78px; }
  .brand img { width: 150px; }
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; inset: 100% 0 auto; background: var(--navy-mid);
    padding: var(--s-3) var(--s-5) var(--s-5); box-shadow: 0 12px 24px rgba(0,0,0,.25);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .18s ease, transform .26s cubic-bezier(.2,.7,.3,1), visibility 0s .26s;
  }
  .nav.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
    transition: opacity .18s ease, transform .26s cubic-bezier(.2,.7,.3,1), visibility 0s;
  }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { padding: .9rem .25rem; border-bottom: 1px solid rgba(255,255,255,.12); border-radius: 0; }
  .nav a[aria-current="page"] { color: var(--orange); }
  .nav .nav__cta { margin: var(--s-4) 0 0; }
  .nav .nav__cta a { text-align: center; border-radius: var(--radius); border-bottom: 0; }
}

/* --------------------------------------------------------- hero */
.hero { background: var(--navy); color: #fff; }
.hero__inner { padding-block: clamp(3.5rem, 2.5rem + 5vw, 6rem); }
.hero__inner > * { max-width: 46rem; }
.hero h1 { color: #fff; margin-bottom: var(--s-5); }
.hero p { color: var(--on-navy); font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); }
.hero .rule { width: 76px; height: 4px; background: var(--orange); margin: 0 0 var(--s-5); border: 0; }
.hero--compact .hero__inner { padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); }

/* --------------------------------------------------------- stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-5); }
.stat__value { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.375rem, 1.2rem + 1vw, 1.75rem); color: var(--navy); line-height: 1.15; margin-bottom: var(--s-2); }
.stat__label { color: var(--muted); font-size: .9375rem; margin: 0; }

/* --------------------------------------------------------- cards + grids */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-5); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-6); }

.card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #C3CEDA; color: inherit; }
.card__media { aspect-ratio: 3 / 2; background: var(--surface); border-bottom: 1px solid var(--line); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.card__body h3 { margin: 0; }
.card__body p { color: var(--muted); font-size: .9688rem; margin: 0; }
.card__more { margin-top: auto; font-family: var(--font-head); font-weight: 600; font-size: .9375rem; color: var(--orange-text) !important; }
a.card:hover .card__more { color: var(--orange-text-hv) !important; }

/* --------------------------------------------------------- service blocks */
.service { border-top: 3px solid var(--orange); padding-top: var(--s-5); }
.service + .service { margin-top: var(--s-8); }
.service__list { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-5); }
.service__list > li { padding-left: var(--s-5); border-left: 2px solid var(--line); }
.service__list h3 { margin-bottom: var(--s-2); }
.service__list p { color: var(--muted); margin: 0; }


/* --------------------------------------------------------- engagement steps */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.steps > li { counter-increment: step; position: relative; border-top: 3px solid var(--line); }

/* The orange rule is the progress indicator: filled on step one because that is
   the recommended starting point, and it fills on the others as you explore them. */
.steps > li::after {
  content: ""; position: absolute; top: -3px; left: 0; right: 0; height: 3px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  /* Short and linear: each segment travels at a constant speed, so four of them
     in sequence read as one line sweeping across rather than four separate
     animations easing in and out. */
  transition: transform .13s linear;
}
/* Base behaviour, and the fallback for anything without :has(): the hovered
   step fills on its own. */
.steps > li:hover::after,
.steps > li:focus-within::after { transform: scaleX(1); }

.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; top: var(--s-4); left: 0; z-index: 1;
  font-family: var(--font-head); font-weight: 700; font-size: .8125rem;
  letter-spacing: .12em; color: #A9B6C4;
  transition: color .12s ease;
}

/* Cumulative progress: pointing at step N fills every step up to and including
   it, so the rule reads as distance travelled along the path rather than as a
   selected tab. Staggered so it runs left to right. */
/* The stagger lives on the hovered state only. On the way in the bars fill one
   after another; on the way out there is no delay, so they all clear together
   instead of unwinding in slow motion. */
.steps:has(> li:hover) > li:nth-child(2)::after,
.steps:has(> li:focus-within) > li:nth-child(2)::after,
.steps:has(> li:hover) > li:nth-child(2)::before,
.steps:has(> li:focus-within) > li:nth-child(2)::before { transition-delay: 120ms; }

.steps:has(> li:hover) > li:nth-child(3)::after,
.steps:has(> li:focus-within) > li:nth-child(3)::after,
.steps:has(> li:hover) > li:nth-child(3)::before,
.steps:has(> li:focus-within) > li:nth-child(3)::before { transition-delay: 240ms; }

.steps:has(> li:hover) > li:nth-child(4)::after,
.steps:has(> li:focus-within) > li:nth-child(4)::after,
.steps:has(> li:hover) > li:nth-child(4)::before,
.steps:has(> li:focus-within) > li:nth-child(4)::before { transition-delay: 360ms; }

.steps:has(> li:nth-child(1):hover) > li:nth-child(-n+1)::after,
.steps:has(> li:nth-child(1):focus-within) > li:nth-child(-n+1)::after,
.steps:has(> li:nth-child(2):hover) > li:nth-child(-n+2)::after,
.steps:has(> li:nth-child(2):focus-within) > li:nth-child(-n+2)::after,
.steps:has(> li:nth-child(3):hover) > li:nth-child(-n+3)::after,
.steps:has(> li:nth-child(3):focus-within) > li:nth-child(-n+3)::after,
.steps:has(> li:nth-child(4):hover) > li:nth-child(-n+4)::after,
.steps:has(> li:nth-child(4):focus-within) > li:nth-child(-n+4)::after { transform: scaleX(1); }

.steps:has(> li:nth-child(1):hover) > li:nth-child(-n+1)::before,
.steps:has(> li:nth-child(1):focus-within) > li:nth-child(-n+1)::before,
.steps:has(> li:nth-child(2):hover) > li:nth-child(-n+2)::before,
.steps:has(> li:nth-child(2):focus-within) > li:nth-child(-n+2)::before,
.steps:has(> li:nth-child(3):hover) > li:nth-child(-n+3)::before,
.steps:has(> li:nth-child(3):focus-within) > li:nth-child(-n+3)::before,
.steps:has(> li:nth-child(4):hover) > li:nth-child(-n+4)::before,
.steps:has(> li:nth-child(4):focus-within) > li:nth-child(-n+4)::before { color: var(--orange-text); }

.steps a {
  display: block; padding-top: var(--s-6); text-decoration: none; color: inherit;
  border-radius: var(--radius);
}
.steps a:hover { color: inherit; }
.steps h3 { margin: var(--s-3) 0 var(--s-2); transition: color .2s ease; }
.steps a:hover h3 { color: var(--orange-text); }
.steps p { color: var(--muted); font-size: .9688rem; margin: 0; }

.steps__arrow {
  /* #A9B6C4 was only 1.92:1 on the surface behind it. This arrow is the
     affordance telling you the step is a link, so it has to be visible:
     #7C8CA0 is 3.2:1, which clears the 3:1 WCAG asks of a UI graphic. */
  display: inline-block; margin-left: .25em; color: #7C8CA0;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), color .2s ease;
}
.steps a:hover .steps__arrow,
.steps a:focus-visible .steps__arrow { color: var(--orange-text); transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .steps > li::after,
  .steps > li::before { transition: none; transition-delay: 0ms !important; }
  .steps__arrow { transition: color .2s ease; }
  .steps a:hover .steps__arrow { transform: none; }
}

/* --------------------------------------------------------- scope note */
.note {
  border-left: 3px solid var(--orange); background: var(--surface);
  padding: var(--s-4) var(--s-5); border-radius: 0 var(--radius) var(--radius) 0;
}
.note p { margin: 0; color: var(--muted); }
.note strong { color: var(--navy); }
/* The travel terms note carries a heading and a list, not just a paragraph. */
.note h3 {
  margin: 0 0 var(--s-2); font-size: 1rem; color: var(--navy);
  letter-spacing: .01em;
}
.note ul { margin: 0; padding: 0; list-style: none; color: var(--muted); }
.note ul li { position: relative; padding-left: 1.1rem; }
.note ul li + li { margin-top: .4rem; }
.note ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; background: var(--orange); border-radius: 1px;
}
.band .note { background: rgba(255,255,255,.06); border-left-color: var(--orange); }
.band .note p { color: var(--on-navy); }
.band .note strong { color: #fff; }


/* --------------------------------------------------------- spacing utilities */
.stack    { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.stack-sm { margin-top: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
.stack-lg { margin-top: clamp(2.75rem, 2rem + 3vw, 4.25rem); }
.block-gap { margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
/* For an intro sitting directly above its own list, where the two are one
   thought rather than two blocks. Section-sized gaps read as a break. */
.block-gap--sm { margin-bottom: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); }
.social { margin-bottom: var(--s-2); }

/* pricing tiers */
.tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.tiers > li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s-4);
  align-items: baseline; padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.tiers > li:first-child { border-top: 2px solid var(--orange); }
.tiers h3 { margin: 0 0 var(--s-1); }
.tiers p { margin: 0; color: var(--muted); font-size: .9688rem; }
.tiers .count { font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem;
  color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .tiers > li { grid-template-columns: 1fr; gap: var(--s-2); }
  .tiers .count { order: -1; color: var(--orange-text); font-size: .8125rem;
    letter-spacing: .1em; text-transform: uppercase; }
}

/* --------------------------------------------------------- contact */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--s-7); align-items: start; }
.contact-list { margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.contact-list dt { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; font-family: var(--font-head); margin-bottom: var(--s-1); }
.contact-list dd { margin: 0; }
.contact-list dd a { font-family: var(--font-head); font-weight: 600; font-size: 1.125rem; text-decoration: none; }
.contact-list dd a:hover { text-decoration: underline; }
.hours { list-style: none; margin: 0; padding: 0; }
.hours li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.hours li:last-child { border-bottom: 0; }
.hours span:first-child { color: var(--muted); }
.hours span:last-child { font-weight: 600; color: var(--navy); font-family: var(--font-head); }

.social { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.social a {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px;
  padding: .55rem 1rem; border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--navy); font-weight: 600; font-size: .9375rem;
  font-family: var(--font-head); background: #fff;
}
.social a:hover { border-color: var(--navy); color: var(--navy); }
.social svg { flex: 0 0 auto; }

/* --------------------------------------------------------- form */
.form { display: grid; gap: var(--s-4); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-6); }
.field { display: grid; gap: var(--s-2); }
.field label { font-family: var(--font-head); font-weight: 600; font-size: .9375rem; color: var(--navy); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: #fff;
  border: 1px solid #B9C5D2; border-radius: var(--radius);
  padding: .75rem .875rem; min-height: 48px; width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--orange); }
.req { color: var(--orange-text); }
.form__note { font-size: .875rem; color: var(--muted); margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* --------------------------------------------------------- form states */
.btn[data-sending] { opacity: .75; cursor: progress; }
.btn__spinner {
  width: 1em; height: 1em; border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff; border-radius: 50%; display: none;
  animation: btn-spin .7s linear infinite;
}
.btn[data-sending] .btn__spinner { display: block; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

.form__error {
  border-left: 3px solid #B4470A; background: #FDF2EC;
  padding: var(--s-3) var(--s-4); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .9375rem; color: var(--ink); margin: 0;
}
.form__error a { font-weight: 600; }

.form-success {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--orange);
  border-radius: var(--radius); padding: var(--s-6);
  animation: form-in .35s cubic-bezier(.2,.7,.3,1) both;
}
.form-success h3 { margin: 0 0 var(--s-3); }
.form-success p { color: var(--muted); }
.form-success p:last-child { margin-bottom: 0; }
.form-success__tick {
  width: 34px; height: 34px; border-radius: 50%; background: var(--orange);
  display: grid; place-items: center; margin-bottom: var(--s-4);
}
.form-success__tick svg { display: block; }
.form-success__tick path {
  stroke-dasharray: 22; stroke-dashoffset: 22;
  animation: tick-draw .4s .15s cubic-bezier(.6,0,.3,1) forwards;
}
@keyframes form-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .form-success { animation: none; }
  .form-success__tick path { animation: none; stroke-dashoffset: 0; }
  .btn__spinner { animation-duration: 1.4s; }
  .nav, .nav.is-open { transition: opacity .01ms, visibility 0s; transform: none; }
}

/* --------------------------------------------------------- CTA band */
.band { background: var(--navy); color: #fff; }
.band h2 { color: #fff; }
.band p { color: var(--on-navy); }
.band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-6); padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.band__text { max-width: 34rem; }
.band__text > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------- profile */
.profile { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
@media (max-width: 720px) { .profile { grid-template-columns: 1fr; } }
.profile__photo { border-radius: var(--radius); aspect-ratio: 1; object-fit: cover; width: 100%; box-shadow: var(--shadow); }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0 0; padding: 0; }
.tags li { font-size: .875rem; font-weight: 600; font-family: var(--font-head); color: var(--navy); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .85rem; }

/* --------------------------------------------------------- prose */
.prose h2 { margin-top: var(--s-7); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s-5); }
.prose ul { padding-left: 1.25rem; margin: 0 0 var(--s-4); }
.prose li { margin-bottom: var(--s-2); }

/* --------------------------------------------------------- footer */
.site-footer { background: var(--navy); color: var(--on-navy); font-size: .9375rem; }
.site-footer a { color: #fff; text-decoration: none; }
/* Colour only. Changing colour AND adding an underline is two signals for one
   state, and the underline was the noisier of the two. */
.site-footer a:hover { color: var(--orange); }
.site-footer h2 { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-bottom: var(--s-4); }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-6); padding-block: var(--s-7); }
.footer__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.footer__legal { border-top: 1px solid rgba(255,255,255,.14); padding-block: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between; font-size: .8438rem; }
.footer__legal p { margin: 0; max-width: 62ch; }
.footer__built a { text-decoration: underline; }

/* ------------------------------------------------ download button meta */
/* The button says what the file is before you click it: type, length and
   weight. Stacked under the label so the button reads as one thing. */
.btn__meta {
  display: block; font-weight: 500; font-size: .8125rem;
  opacity: .75; letter-spacing: .01em; margin-top: .15rem;
}
.btn--download { flex-direction: column; gap: 0; text-align: center; }

/* --------------------------------------------- spacing utilities
   These three were inline style="" attributes. The site's CSP sets
   style-src 'self', which blocks style attributes outright, so the margins
   were silently not being applied on the live site and Chrome was logging a
   CSP violation on every page load. */
.btn-row--spaced    { margin-top: var(--s-6); }
.form__note--spaced { margin-top: var(--s-4); }