/* MechTech Dynamics
   Design: a forensic report. Sideheads in the margin, a technical figure as the hero,
   orange reserved for inspection markers and the primary action. See CLAUDE.md. */

/* Fonts (self-hosted, latin subset) ------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 800;   /* axis ranges trimmed by tools/build-fonts.py */
  font-stretch: 70% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
  font-weight: 400 700;   /* optical size pinned at 18 by tools/build-fonts.py */
  font-display: swap;
}
/* Metric-matched fallbacks so the swap doesn't shift the layout (values from fontTools). */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 102.51%;
  ascent-override: 85.65%;
  descent-override: 20.48%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Source Serif Fallback";
  src: local("Georgia");
  size-adjust: 101.71%;
  ascent-override: 101.86%;
  descent-override: 32.94%;
  line-gap-override: 0%;
}

/* Tokens ------------------------------------------------------------------ */
:root {
  --paper: #f6f7f7;       /* drafting white */
  --plate: #dfe4e8;       /* plate steel */
  --plate-soft: #ebeef1;
  --navy: #1f3346;        /* gauge navy, from the badge */
  --navy-deep: #172736;
  --ink: #17222d;
  --steel: #56636f;       /* secondary text, 4.7:1 on plate */
  --rule: #c5cdd4;
  --field: #6e7b87;       /* form borders, 4:1 on white */
  --orange: #e5801c;      /* signal orange, from the badge */
  --orange-dark: #cf6f12;
  --error: #a3260f;
  --on-navy: #dde4ea;
  --on-navy-muted: #b9c6d1;
  --focus: var(--navy);

  --font-display: "Archivo", "Archivo Fallback", Arial, sans-serif;
  --font-text: "Source Serif 4", "Source Serif Fallback", Georgia, serif;

  --header-h: 72px;
  --gutter: clamp(16px, 4vw, 40px);
  --col-gap: clamp(16px, 2.5vw, 32px);
  --measure: 66ch;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.125rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

img, svg { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--navy);
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4rem);
  font-stretch: 78%;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.012em;
}
h2 {
  font-size: clamp(2rem, 1.55rem + 1.5vw, 3rem);
  font-stretch: 80%;
  font-weight: 760;
  line-height: 1.04;
  letter-spacing: -0.006em;
}
h3 {
  font-size: 1.5rem;
  font-stretch: 88%;
  font-weight: 720;
  line-height: 1.2;
}
h4 {
  font-size: 1.3125rem;
  font-weight: 650;
  line-height: 1.25;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--navy);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
/* Sections and the page receive focus programmatically after an in-page glide; no outline for those. */
[tabindex="-1"]:focus { outline: none; }

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
}
.skip-link:focus { top: 12px; }

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

/* Buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 22px;
  border: 2px solid transparent;
  border-radius: 3px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn--primary { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.btn--primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
.btn--secondary { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn--secondary:hover { background: var(--navy); color: #fff; }
.btn--small { padding: 11px 16px; font-size: 0.9375rem; }
.btn[disabled] { opacity: 0.7; cursor: progress; }

/* Header ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--header-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  color: var(--navy);
  text-decoration: none;
}
.brand picture { flex: none; }
.brand__badge { width: 48px; height: 48px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-stretch: 84%;
  font-weight: 800;
}
.brand__tagline {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  color: var(--steel);
}
.site-nav ul {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  position: relative;
  display: block;
  padding: 8px 10px;
  border-radius: 3px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.site-nav a:hover { background: var(--plate); }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.site-nav a[aria-current]::after { transform: scaleX(1); }
.site-header { transition: box-shadow 0.25s; }
.site-header.is-scrolled { box-shadow: 0 8px 24px -16px rgba(23, 39, 54, 0.45); }
.site-nav .site-nav__phone { display: none; }
.site-header__actions { display: flex; align-items: center; gap: 16px; }
.header-phone {
  font-family: var(--font-display);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.nav-toggle {
  display: none;
  padding: 10px 14px;
  border: 2px solid var(--navy);
  border-radius: 3px;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 0.9375rem;
  line-height: 1;
  text-decoration: none;
}

@media (max-width: 1180px) {
  .header-phone { display: none; }
}
/* Tablets keep the full nav, compacted. Below 880px the brand is the badge alone (the name stays for screen readers). */
@media (min-width: 720px) and (max-width: 1099px) {
  .site-header__inner, .site-header__actions { gap: 12px; }
  .brand { gap: 10px; }
  .brand__badge { width: 42px; height: 42px; }
  .brand__name { font-size: 1.125rem; }
  .brand__tagline { display: none; }
  .site-nav ul { gap: 0; }
  .site-nav a { padding: 8px 7px; font-size: 0.875rem; }
  .site-nav a::after { left: 7px; right: 7px; }
  .site-header__actions .btn--small { padding: 10px 12px; font-size: 0.875rem; }
}
@media (min-width: 720px) and (max-width: 879px) {
  .brand__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (max-width: 719px) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-block; }
  .nav-open .site-nav {
    display: block;
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    padding: 8px var(--gutter) 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 16px 24px -16px rgba(23, 39, 54, 0.35);
  }
  .nav-open .site-nav ul { flex-direction: column; }
  /* Backdrop behind the open menu; tapping it closes the menu (site.js). */
  .nav-open .site-header::after {
    content: "";
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: -1;
    background: rgba(23, 39, 54, 0.5);
  }
  .nav-open .site-nav a { padding: 14px 0; font-size: 1.125rem; border-bottom: 1px solid var(--rule); }
  .nav-open .site-nav a:hover { background: none; }
  .nav-open .site-nav a::after { display: none; }
  .nav-open .site-nav .site-nav__phone {
    display: inline-flex;
    margin-top: 20px;
    padding: 14px 20px;
    border-bottom: 0;
    background: var(--navy);
    color: #fff;
  }
}
@media (max-width: 560px) {
  .site-header__actions .btn { display: none; }
  .brand__tagline { display: none; }
  .brand__badge { width: 42px; height: 42px; }
  .brand__name { font-size: 1.1875rem; }
}

/* Hero -------------------------------------------------------------------- */
.hero { padding-block: clamp(36px, 5vw, 80px) clamp(56px, 7vw, 104px); }
.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 48px;
  align-items: start;
}
.hero__text { grid-column: 1 / span 6; padding-top: clamp(0px, 2vw, 28px); }
.hero__figure { grid-column: 7 / -1; margin: 0; }
.hero__lead {
  max-width: 34em;
  margin-top: 24px;
  font-size: 1.3125rem;
  line-height: 1.55;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.record {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 48px 0 0;
  padding-top: 18px;
  border-top: 2px solid var(--navy);
}
.record dt {
  margin-bottom: 4px;
  color: var(--steel);
  font-family: var(--font-display);
  font-size: 0.875rem;
}
.record dd {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1rem;
  font-stretch: 92%;
  font-weight: 650;
  line-height: 1.3;
}

.hero__sheet {
  padding: clamp(12px, 2.4vw, 28px);
  background: var(--plate);
  border-radius: 4px;
}
.hero__figure figcaption { margin-top: 16px; }
.fig-key { display: grid; gap: 8px; margin: 0; }
.fig-key > div { display: flex; align-items: center; gap: 12px; }
.fig-key dt {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 800;
}
.fig-key dd { margin: 0; font-size: 1rem; line-height: 1.4; }
.fig-note {
  margin-top: 12px;
  color: var(--steel);
  font-family: var(--font-display);
  font-size: 0.875rem;
}

@media (max-width: 1024px) {
  .hero__text, .hero__figure { grid-column: 1 / -1; }
  .hero__figure { max-width: 760px; }
}
@media (max-width: 480px) {
  .hero__actions .btn { flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .record { grid-template-columns: 1fr; gap: 14px; }
  .record > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 12px; }
  .record dt { margin: 0; padding-top: 1px; }
}

/* Fig. 1: the technical drawing ------------------------------------------- */
.fig { width: 100%; overflow: visible; }
.fig .ln {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fig .fig__thin { stroke-width: 1.2; }
.fig__cracks .ln { stroke-width: 1.4; }
.fig .ln.fig__solid { fill: var(--plate); }
.fig__centre path {
  fill: none;
  stroke: var(--steel);
  stroke-width: 1;
  stroke-dasharray: 22 4 3 4;
}
.fig__scoring path { fill: none; stroke: var(--steel); stroke-width: 1; opacity: 0.5; }
.fig__hatch { fill: url(#fig-hatch); }
.fig__hatch-line { stroke: var(--steel); stroke-width: 1; }
.fig__hidden {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.25;
  stroke-dasharray: 7 5;
}
.fig__dims path { fill: none; stroke: var(--steel); stroke-width: 1; }
.fig__arrowhead { fill: var(--steel); stroke: none; }
.fig text {
  fill: var(--steel);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}
.fig__leader { fill: none; stroke: var(--navy); stroke-width: 1.25; }
.fig__leader-dot { fill: var(--navy); }
.fig__marker { fill: var(--orange); }
.fig__callout text {
  fill: var(--ink);
  font-size: 16px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
}

/* Load sequence: the drawing is drafted, then the inspection points appear. Lines draw and
   fade in place without travelling, so this also runs under prefers-reduced-motion. */
.fig .ln {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: fig-draw 1.1s cubic-bezier(0.55, 0, 0.25, 1) forwards;
}
.fig .d2 { animation-delay: 0.2s; }
.fig .d3 { animation-delay: 0.45s; }
.fig .d4 { animation-delay: 0.7s; }
.fig .fade { opacity: 0; animation: fig-show 0.5s ease-out 0.9s forwards; }
.fig__callout { opacity: 0; animation: fig-show 0.35s ease-out forwards; }
.co-a { animation-delay: 1.4s; }
.co-b { animation-delay: 1.6s; }
.co-c { animation-delay: 1.8s; }
@keyframes fig-draw { to { stroke-dashoffset: 0; } }
@keyframes fig-show { to { opacity: 1; } }

/* Fig. 1 interaction: key items and callouts light up together; a loupe follows the pointer. */
.hero__sheet { position: relative; }
.fig__badge {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fig__callout { cursor: help; }
.fig [data-part] .ln { transition: stroke 0.25s; }
.fig-key > div {
  margin-inline: -8px;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: default;
  transition: background-color 0.25s;
}
.fig-key dt { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
[data-active="a"] .co-a .fig__badge,
[data-active="b"] .co-b .fig__badge,
[data-active="c"] .co-c .fig__badge { transform: scale(1.3); }
[data-active="a"] [data-part="a"] .ln,
[data-active="b"] [data-part="b"] .ln,
[data-active="c"] [data-part="c"] .ln { stroke: var(--orange-dark); }
[data-active="a"] .fig-key [data-point="a"],
[data-active="b"] .fig-key [data-point="b"],
[data-active="c"] .fig-key [data-point="c"] { background: var(--plate); }
[data-active="a"] .fig-key [data-point="a"] dt,
[data-active="b"] .fig-key [data-point="b"] dt,
[data-active="c"] .fig-key [data-point="c"] dt { transform: scale(1.15); }
.fig__reading { fill: var(--navy); font-weight: 750; }

.fig-hint { display: none; }
.loupe {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 190px;
  height: 190px;
  margin: -95px 0 0 -95px;
  overflow: hidden;
  border: 3px solid var(--navy);
  border-radius: 50%;
  background: var(--plate);
  box-shadow: 0 14px 34px -12px rgba(23, 39, 54, 0.55), inset 0 0 0 6px rgba(255, 255, 255, 0.4);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.18s, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.loupe.is-on { opacity: 1; transform: scale(1); }
.loupe svg { position: absolute; top: 0; left: 0; max-width: none; }
.loupe::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--orange), var(--orange)) center / 16px 2px no-repeat,
    linear-gradient(var(--orange), var(--orange)) center / 2px 16px no-repeat;
}
.fig--static .ln, .fig--static .fade, .fig--static .fig__callout {
  animation: none !important;
  opacity: 1 !important;
  stroke-dashoffset: 0 !important;
}
@media (hover: hover) and (pointer: fine) {
  .js .hero__sheet { cursor: crosshair; }
  .js .fig-hint { display: inline; }
}

/* Photos: plates (Fig. 2 to 5) and local placeholders ---------------------- */
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.plates__head { max-width: 44rem; margin-bottom: 40px; }
.plates__head p { margin-top: 16px; color: var(--steel); }
.plates {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 40px) var(--col-gap);
}
.plate { display: flex; flex-direction: column; margin: 0; }
.plate:nth-child(1) { grid-column: 1 / span 7; }
.plate:nth-child(2) { grid-column: 8 / -1; }
.plate:nth-child(3) { grid-column: 1 / span 5; }
.plate:nth-child(4) { grid-column: 6 / -1; }
.plate__frame {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: var(--plate);
}
.plate--wide .plate__frame { aspect-ratio: 16 / 9; }
.plate--narrow .plate__frame { flex: 1; min-height: 260px; }
.plate__frame picture, .plate__frame .photo-ph { position: absolute; inset: 0; }
.plate__frame img { width: 100%; height: 100%; object-fit: cover; }
.plate figcaption { margin-top: 12px; font-size: 1rem; line-height: 1.45; }
.plate__no { color: var(--navy); font-family: var(--font-display); font-weight: 750; }
@media (max-width: 760px) {
  .plate:nth-child(n) { grid-column: 1 / -1; }
  .plate--narrow .plate__frame { flex: none; aspect-ratio: 3 / 2; min-height: 0; }
}

.photo-ph {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  border: 1.5px dashed var(--field);
  border-radius: 3px;
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(86, 99, 111, 0.08) 10px 11px),
    var(--plate);
  color: var(--steel);
  font-family: var(--font-display);
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
}
.photo-ph__name { color: var(--navy); font-size: 0.9375rem; font-weight: 700; overflow-wrap: anywhere; }
.about__portrait.photo-ph { max-width: 360px; aspect-ratio: 4 / 5; margin-bottom: 28px; }

/* Sections and the sidehead layout ---------------------------------------- */
.section { padding-block: clamp(64px, 8vw, 112px); }
.section--plate { background: var(--plate-soft); }
.section--navy {
  --focus: var(--orange);
  background: var(--navy);
  color: var(--on-navy);
}
.section--navy h2, .section--navy h3 { color: #fff; }

/* Arrival cue: after a menu jump, a measuring line draws under that section's heading.
   It answers the click and draws in place, so it runs under reduced motion as well. */
.section h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 14px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
}
.section:target h2::after { animation: arrive 0.7s cubic-bezier(0.6, 0, 0.3, 1) 0.2s forwards; }
/* The hero buttons land on the form (#enquiry), not the section; kept as its own rule so a
   browser without :has() still keeps the one above. */
.section:has(.split__body:target) h2::after { animation: arrive 0.7s cubic-bezier(0.6, 0, 0.3, 1) 0.2s forwards; }
@keyframes arrive { to { transform: scaleX(1); } }

.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 40px;
}
.split__head {
  grid-column: 1 / span 4;
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 32px);
}
.split__head > p { max-width: 30em; margin-top: 16px; color: var(--steel); }
.section--navy .split__head > p { color: var(--on-navy-muted); }
.split__body { grid-column: 5 / -1; min-width: 0; }

@media (max-width: 960px) {
  .split__head, .split__body { grid-column: 1 / -1; }
  .split__head { position: static; }
}

/* Services */
.services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px clamp(24px, 4vw, 56px);
}
.services__group h3 {
  margin-bottom: 4px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--navy);
}
.services__group ul { margin: 0; padding: 0; list-style: none; }
.services__group li { padding-top: 24px; }
.services__group h4 { margin-bottom: 6px; }
.services__group p { font-size: 1.0625rem; line-height: 1.6; }
@media (max-width: 720px) {
  .services { grid-template-columns: 1fr; }
}

/* Process */
.process__head { max-width: 40rem; margin-bottom: 48px; }
.process__head p { margin-top: 16px; color: var(--steel); }
.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 40px var(--col-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  position: relative;
  padding-top: 16px;
  counter-increment: step;
}
.steps li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--navy);
  transform-origin: left;
}
.steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: 14px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-stretch: 72%;
  font-weight: 800;
  line-height: 1;
}
.steps h3 { margin-bottom: 8px; font-size: 1.3125rem; }
.steps p { font-size: 1rem; line-height: 1.55; }
@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .steps li { display: grid; grid-template-columns: 3.25rem 1fr; column-gap: 12px; }
  .steps li::before { grid-row: span 3; margin: 0; font-size: 2.75rem; }
  .steps li > * { grid-column: 2; }
}

/* Court */
.court {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px clamp(24px, 4vw, 56px);
  align-items: start;
}
.court__list { margin: 0; padding: 0; list-style: none; }
.court__list li {
  position: relative;
  padding: 14px 0 14px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 1.0625rem;
  line-height: 1.5;
}
.court__list li:first-child { padding-top: 0; }
.court__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(14px + 0.75em);
  width: 14px;
  height: 2px;
  background: var(--orange);
}
.court__list li:first-child::before { top: 0.75em; }
.court__independence {
  padding: clamp(20px, 3vw, 32px);
  border-left: 4px solid var(--orange);
  background: var(--navy-deep);
}
.court__independence h3 { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-stretch: 80%; line-height: 1.05; }
.court__independence p { margin-top: 14px; font-size: 1.125rem; }
.court__independence ul { margin: 20px 0 0; padding-left: 1.1em; color: var(--on-navy-muted); font-size: 1rem; }
.court__independence li + li { margin-top: 6px; }
@media (max-width: 860px) {
  .court { grid-template-columns: 1fr; }
}

/* About */
.about__portrait img {
  width: 100%;
  max-width: 360px;
  margin-bottom: 28px;
  border-radius: 4px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.about__role {
  color: var(--steel);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
}
.about__bio p { max-width: var(--measure); }
.about h3 { margin: 64px 0 24px; }
.ruler { width: 100%; margin-bottom: 20px; }
.ruler__base { stroke: var(--navy); stroke-width: 1.5; }
.ruler__tick { stroke: var(--steel); stroke-width: 1; }
.ruler__event { stroke: var(--orange); stroke-width: 3; }
.ruler__label { fill: var(--steel); font-family: var(--font-display); font-size: 13px; font-weight: 600; }
.timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline li { padding-left: 16px; border-left: 3px solid var(--orange); }
.timeline time, .timeline__now {
  display: block;
  margin-bottom: 6px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-stretch: 78%;
  font-weight: 800;
  line-height: 1;
}
.timeline p { font-size: 1rem; line-height: 1.5; }
.quals { margin: 0; padding-left: 1.2em; list-style: square; }
.quals li { max-width: var(--measure); }
.quals li + li { margin-top: 8px; }
.quals li::marker { color: var(--steel); }
@media (max-width: 860px) {
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ruler { display: none; }
}
@media (max-width: 520px) {
  .timeline { grid-template-columns: 1fr; }
}

/* FAQ */
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-child { border-top: 1px solid var(--rule); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 1.25rem; font-stretch: 94%; font-weight: 650; }
.faq summary:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.faq summary::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(var(--navy), var(--navy)) center / 16px 2px no-repeat,
    linear-gradient(var(--navy), var(--navy)) center / 2px 16px no-repeat;
}
.faq details[open] summary::after { background-size: 16px 2px, 0 0; }
.faq details p { max-width: var(--measure); padding-bottom: 24px; }

/* Contact */
/* Direct contact: one ruled row per channel under a navy datum rule, like the hero record. Each number
   appears once; WhatsApp gets its own row. Hours and area follow as a footnote on the same icon column. */
.contact__direct {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--navy);
  font-family: var(--font-display);
}
.contact__direct li { border-bottom: 1px solid var(--rule); }
.contact__direct a {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  min-height: 52px;
  padding: 10px 0;
  color: var(--navy);
  text-decoration: none;
}
.contact__direct .icon, .contact__notes .icon { width: 20px; height: 20px; }
.contact__direct .icon:not(.icon--line) { fill: currentColor; }
.contact__direct .icon--line, .contact__notes .icon { stroke-width: 1.75; }
.contact__value {
  font-size: 1.125rem;
  font-stretch: 92%;
  font-weight: 650;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.contact__direct a:hover .contact__value {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.contact__notes {
  display: grid;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  color: var(--steel);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.contact__notes li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 14px; }
.contact__notes .icon { margin-top: 1px; }
.contact__notes p { margin: 0; }
.contact__notes strong { color: var(--ink); font-weight: 600; }

.enquiry__form {
  padding: clamp(20px, 3.5vw, 40px);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.enquiry__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
}
.field--message { grid-column: 1 / -1; }
.field label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
}
.field__optional { color: var(--steel); font-weight: 400; }
.field__hint { margin: -2px 0 8px; color: var(--steel); font-size: 0.9375rem; line-height: 1.45; }
.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--field);
  border-radius: 3px;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.4;
}
.field textarea { min-height: 170px; resize: vertical; line-height: 1.5; }
.field select {
  padding-right: 42px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231f3346' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--navy);
  outline-offset: 1px;
}
.field [aria-invalid="true"] { border-color: var(--error); }
.field__error {
  margin: 6px 0 0;
  color: var(--error);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}
.field__error:empty { display: none; }
.field--hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.field--consent {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 4px 12px;
  margin: 26px 0;
}
.field--consent input { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--navy); }
.field--consent label {
  margin: 0;
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}
.field--consent .field__error { grid-column: 2; margin: 0; }
.enquiry__alert {
  margin-bottom: 24px;
  padding: 12px 16px;
  background: #fbeae6;
  border-left: 4px solid var(--error);
  font-size: 1rem;
}
.enquiry__result {
  margin-bottom: 24px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--navy);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.45;
}
@media (max-width: 640px) {
  .enquiry__grid { grid-template-columns: 1fr; }
  .enquiry__form .btn { width: 100%; }
}

/* Simple pages (privacy, 404) --------------------------------------------- */
.page { padding-block: clamp(48px, 7vw, 96px); }
.prose { max-width: var(--measure); }
.prose h1 { margin-bottom: 20px; font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); }
.prose h2 { margin: 2em 0 0.5em; font-size: 1.5rem; font-stretch: 88%; }
.prose__meta { color: var(--steel); font-family: var(--font-display); font-size: 0.9375rem; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 6px; }
.prose h3 { margin: 1.4em 0 0.4em; font-size: 1.1875rem; font-stretch: 92%; }
/* Conspicuous notice (Consumer Protection Act s49) at the top of the terms. */
.notice {
  margin: 28px 0;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--orange);
  border-radius: 0 3px 3px 0;
}
/* Missing business detail, visible on localhost only (legal_detail()). */
.todo {
  padding: 1px 6px;
  border-radius: 2px;
  background: #ffe9a8;
  color: #4a3600;
  font-family: var(--font-display);
  font-size: 0.875em;
  font-weight: 650;
}
.prose .btn { margin-top: 8px; }

/* Footer ------------------------------------------------------------------ */
.site-footer {
  --focus: var(--orange);
  padding-top: 64px;
  background: var(--navy-deep);
  color: var(--on-navy-muted);
  font-size: 1rem;
  line-height: 1.6;
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.3fr;
  gap: 40px;
  padding-bottom: 48px;
}
.site-footer__brand { display: flex; align-items: flex-start; gap: 16px; }
.site-footer__brand picture { flex: none; }
.site-footer__brand img { width: 72px; height: 72px; }
.site-footer__brand p { max-width: 24em; }
.site-footer__brand strong { color: #fff; font-family: var(--font-display); font-size: 1.125rem; }

/* Social profiles sit with the brand, not the contact details: a proof of presence, not a channel. */
.social { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.site-footer .social__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 3px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  transition: border-color 0.2s, background-color 0.2s;
}
.site-footer .social__link:hover {
  border-color: var(--orange);
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}
.social__link .icon { width: 18px; height: 18px; flex: none; fill: currentColor; }
.site-footer__heading {
  margin-bottom: 12px;
  color: #fff;
  font-size: 1rem;
  font-stretch: 100%;
  font-weight: 700;
}
.site-footer ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.site-footer__wa {
  display: inline-flex;
  margin-left: 6px;
  padding: 3px;
  vertical-align: -6px;
  border-radius: 3px;
}
.site-footer__wa .icon { width: 18px; height: 18px; fill: currentColor; }
.site-footer__wa:hover { background: rgba(255, 255, 255, 0.14); }
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 20px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.875rem;
}
.site-footer__base p { margin: 0; }
.site-footer .site-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
@media (max-width: 860px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* Scroll motion ------------------------------------------------------------
   site.js adds .reveal only to elements still below the fold (no flash on load),
   sets --i on children for staggering, then adds .is-revealed when they scroll in.
   Base rules only fade, draw or wipe in place, so they suit prefers-reduced-motion too.
   Movement (rise-ins, parallax, zoom) is added further down for no-preference only. */
.reveal[data-reveal="fade"],
.reveal[data-reveal="stagger"] > * {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal[data-reveal="stagger"] > * { transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.is-revealed[data-reveal="fade"],
.reveal.is-revealed[data-reveal="stagger"] > * { opacity: 1; transform: none; }

/* Steps: one line drafted across all five, each step appearing as the line reaches it. */
.reveal[data-reveal="steps"] li::after {
  transform: scaleX(0);
  transition: transform 0.45s cubic-bezier(0.6, 0, 0.3, 1) calc(var(--i, 0) * 180ms);
}
.reveal[data-reveal="steps"] li::before,
.reveal[data-reveal="steps"] li > * {
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 180ms + 0.25s);
}
.reveal.is-revealed[data-reveal="steps"] li::after { transform: none; }
.reveal.is-revealed[data-reveal="steps"] li::before,
.reveal.is-revealed[data-reveal="steps"] li > * { opacity: 1; transform: none; }

/* Career ruler: the rule is drawn, ticks follow, then each event mark rises. */
.reveal[data-reveal="ruler"] .ruler__base {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s cubic-bezier(0.6, 0, 0.3, 1);
}
.reveal[data-reveal="ruler"] .ruler__tick,
.reveal[data-reveal="ruler"] .ruler__label {
  opacity: 0;
  transition: opacity 0.3s ease calc(var(--i, 0) * 16ms);
}
.reveal[data-reveal="ruler"] .ruler__event {
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.9s + var(--i, 0) * 120ms);
}
.reveal.is-revealed[data-reveal="ruler"] .ruler__base { stroke-dashoffset: 0; }
.reveal.is-revealed[data-reveal="ruler"] .ruler__tick,
.reveal.is-revealed[data-reveal="ruler"] .ruler__label { opacity: 1; }
.reveal.is-revealed[data-reveal="ruler"] .ruler__event { transform: none; }

/* Plates: each photo is uncovered like a scan, then its caption appears. */
.reveal[data-reveal="plates"] .plate__frame {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.25, 1) calc(var(--i, 0) * 160ms);
}
.reveal[data-reveal="plates"] figcaption {
  opacity: 0;
  transition: opacity 0.6s ease calc(var(--i, 0) * 160ms + 0.7s);
}
.reveal.is-revealed[data-reveal="plates"] .plate__frame { clip-path: inset(0 0 0 0); }
.reveal.is-revealed[data-reveal="plates"] figcaption { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .reveal[data-reveal="fade"] { transform: translateY(20px); }
  .reveal[data-reveal="stagger"] > * { transform: translateY(16px); }
  .reveal[data-reveal="steps"] li::before,
  .reveal[data-reveal="steps"] li > * { transform: translateY(10px); }

  /* Slow parallax inside each photo frame (site.js sets --shift), plus a hover push-in. */
  .plate__frame img {
    transform: translate3d(0, var(--shift, 0px), 0) scale(1.12);
    transition: scale 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: transform;
  }
  .plate:hover .plate__frame img { scale: 1.04; }
}

/* Back to top: a depth gauge, not a floating circle --------------------------
   Datum-and-arrow glyph from the drafting vocabulary of Fig. 1; the orange bar
   on the left edge fills with how far down the page the reader is (--depth, 0-1).
   site.js shows it after the hero and lifts it clear of the footer base (--dock). */
.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: calc(24px + var(--dock, 0px));
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 52px;
  height: 64px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  background: var(--navy);
  box-shadow: 0 10px 24px -12px rgba(23, 39, 54, 0.6);
  color: #fff;
  text-decoration: none;
  transition: opacity 0.25s ease, visibility 0.25s, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.2s, background-color 0.2s;
}
.to-top:hover { border-color: var(--orange); background: var(--navy-deep); }
.to-top:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.to-top__depth {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--orange);
  transform: scaleY(var(--depth, 0));
  transform-origin: top;
}
.to-top__glyph { width: 20px; height: 20px; }
.to-top__datum, .to-top__shaft { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.to-top__head { fill: currentColor; }
.to-top__label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1;
}
/* Hidden until site.js sees the reader is past the hero (no flash on load). Without JS
   the header brand already links to the top. */
.to-top:not(.is-shown) { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .to-top:not(.is-shown) { transform: translateY(12px); }
  .to-top:hover .to-top__glyph { transform: translateY(-2px); }
  .to-top__glyph { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
}
@media (max-width: 640px) {
  .to-top { width: 46px; height: 56px; bottom: calc(16px + var(--dock, 0px)); }
}

/* Print: attorneys print profiles for the file ----------------------------- */
@media print {
  .site-header, .skip-link, .hero__actions, #contact .split__body, .site-footer__nav, .ruler, .to-top { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .section, .hero { padding-block: 18pt; }
  .section--navy, .section--plate, .site-footer { background: #fff; color: #000; }
  .section--navy h2, .section--navy h3, .site-footer a, .site-footer strong { color: #000; }
  .split__head { position: static; }
}

/* ==========================================================================
   Two service lines (change requests of 8 and 9 October 2026): forensic work
   and pre-purchase inspections. Sections below follow the page order.
   ========================================================================== */

/* Header: labels never wrap; the phone number gives way earlier, the brand name goes below
   960px (it was 880px), and from 720 to 819px the nav tightens a step further. */
.site-nav a { white-space: nowrap; }
@media (max-width: 1279px) {
  .header-phone { display: none; }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .site-nav a { padding-inline: 6px; }
  .site-nav a::after { left: 6px; right: 6px; }
}
@media (min-width: 720px) and (max-width: 959px) {
  .brand__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (min-width: 720px) and (max-width: 819px) {
  .site-nav a { padding-inline: 5px; font-size: 0.8125rem; }
  .site-nav a::after { left: 5px; right: 5px; }
}

/* Hero: the headline is two statements, each on its own line. */
.hero h1 { font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.5rem); text-wrap: pretty; }
.hero h1 span { display: block; }
.hero__lead { font-size: 1.1875rem; line-height: 1.6; }
.hero__lead p { margin-bottom: 0.7em; }

/* The two routes: equal blocks, one per service line. Labels wrap; no icons, no arrows. */
.hero__routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 34em;
  margin-top: 28px;
}
.btn--route {
  justify-content: flex-start;
  min-height: 76px;
  padding: 14px 20px;
  font-size: 1.0625rem;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
}
.btn--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.hero__call {
  margin-top: 16px;
  color: var(--steel);
  font-family: var(--font-display);
  font-size: 1rem;
}
.hero__call a { font-weight: 650; white-space: nowrap; }
.hero .record { margin-top: 40px; }
@media (max-width: 480px) {
  .hero__routes { grid-template-columns: 1fr; }
  .btn--route { min-height: 60px; }
}

/* How it works ---------------------------------------------------------------
   A navy plate. Each process is a route: five stations on a datum line, each with a drafting-style
   drawing (app/views/art/route-*.svg). When a route comes into view, or its tab is chosen, the
   line is drawn, each drawing drafts itself as the line reaches it, then a short tour lights each station
   while the line fills orange. Drawing, fading and wiping happen in place, so they run under reduced
   motion too; the badge pop, text rise and gauge needle sweep are for no-preference only. */
.process .process__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  max-width: none;
  margin-bottom: 36px;
}
.route-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.route-tabs {
  display: inline-flex;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
}
.route-tabs button {
  padding: 11px 18px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--on-navy);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.route-tabs button:hover { background: rgba(255, 255, 255, 0.08); }
.route-tabs button[aria-selected="true"] { background: #fff; color: var(--navy); }
.route-panel + .route-panel { margin-top: 72px; }
.route-panel:focus-visible { outline-offset: 8px; }
.route-panel__head { max-width: 40rem; margin-bottom: 24px; }
.route-panel__head h3 { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); font-stretch: 80%; line-height: 1.1; }
.route-panel__head p { margin-top: 10px; color: var(--on-navy-muted); }
.route-fig { margin: 0; }
.route-sheet {
  padding: clamp(20px, 3vw, 40px) clamp(16px, 2.6vw, 36px);
  border-radius: 4px;
  background-color: var(--navy-deep);
  /* drafting grid */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
}
.route {
  --art-ink: #dde4ea;
  --art-thin: #8ea1b2;
  --rail: rgba(221, 228, 234, 0.4);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--col-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.route__step { --d: calc(var(--i, 0) * 0.34s + 0.1s); position: relative; min-width: 0; }
.route__step:nth-child(2) { --i: 1; }
.route__step:nth-child(3) { --i: 2; }
.route__step:nth-child(4) { --i: 3; }
.route__step:nth-child(5) { --i: 4; }
.route__art { width: 100%; max-width: 210px; height: auto; overflow: visible; }
.route__rail { position: relative; height: 34px; margin: 14px 0 18px; }
.route__rail::before, .route__rail::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 17px;
  right: calc(-1 * var(--col-gap));
  height: 2px;
  transform-origin: left;
}
.route__rail::before { background: var(--rail); }
.route__rail::after { background: var(--orange); transform: scaleX(0); transition: transform 0.5s cubic-bezier(0.6, 0, 0.3, 1); }
.route__step.is-past .route__rail::after { transform: none; }
.route__step:last-child .route__rail::before, .route__step:last-child .route__rail::after { right: 0; }
.route__step:last-child .route__rail {
  background: linear-gradient(var(--rail), var(--rail)) no-repeat right 0 top 8px / 2px 18px;
}
.route__mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 5px var(--navy-deep);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}
.route__step.is-active .route__mark {
  transform: scale(1.18);
  box-shadow: 0 0 0 5px var(--navy-deep), 0 0 0 8px rgba(229, 128, 28, 0.45);
}
.route__step h4 { margin-bottom: 8px; color: #fff; font-size: 1.25rem; font-stretch: 88%; font-weight: 720; line-height: 1.2; }
.route__step p { color: var(--on-navy-muted); font-size: 1rem; line-height: 1.55; }

/* The drawings: main lines, thin lines, centre lines, hatching and orange inspection marks. */
.art .a-ln, .art .a-th, .art .a-acc-ln {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  transition: stroke 0.3s;
}
.art .a-ln { stroke: var(--art-ink); stroke-width: 2.2; }
.art .a-th, .art .a-fd { stroke: var(--art-thin); stroke-width: 1.2; fill: none; }
.art .a-acc-ln { stroke: var(--orange); stroke-width: 2.2; }
.art .a-solid { fill: var(--art-solid, var(--navy-deep)); }
.art .a-cl { fill: none; stroke: var(--art-thin); stroke-width: 1; stroke-dasharray: 12 3 2 3; opacity: 0.75; }
.art .a-hatch { fill: url(#rt-hatch); }
.art .a-acc { fill: var(--orange); }
.art .a-dot { fill: var(--art-ink); transition: fill 0.3s; }
.art .a-hole { fill: var(--art-solid, var(--navy-deep)); }
.art .a-needle { --r: 300deg; transform-box: view-box; transform-origin: 100px 84px; transform: rotate(var(--r)); }
.route__step.is-active .a-ln { stroke: var(--orange); }
.route__step.is-active .a-th { stroke: #e9a868; }
.route__step.is-active .a-dot { fill: var(--orange); }

/* Each stroke's offset into its drawing's drafting sequence, in 0.05s steps. Classes, not style
   attributes, because the CSP (style-src 'self') blocks inline styles. */
.art .o0 { --o: 0s; }
.art .o1 { --o: 0.05s; }
.art .o2 { --o: 0.10s; }
.art .o3 { --o: 0.15s; }
.art .o4 { --o: 0.20s; }
.art .o5 { --o: 0.25s; }
.art .o6 { --o: 0.30s; }
.art .o7 { --o: 0.35s; }
.art .o8 { --o: 0.40s; }
.art .o9 { --o: 0.45s; }
.art .o10 { --o: 0.50s; }
.art .o11 { --o: 0.55s; }
.art .o12 { --o: 0.60s; }
.art .o13 { --o: 0.65s; }
.art .o14 { --o: 0.70s; }
.art .o15 { --o: 0.75s; }
.art .o16 { --o: 0.80s; }
.art .o17 { --o: 0.85s; }
.art .o18 { --o: 0.90s; }
.art .o19 { --o: 0.95s; }
.art .o20 { --o: 1.00s; }
.art .o21 { --o: 1.05s; }
.art .o22 { --o: 1.10s; }
.art .o23 { --o: 1.15s; }

/* Drafting sequence. Hidden only once JS is running; without it the routes are simply drawn. */
[data-draft] { --d: 0.1s; }
.js [data-draft]:not(.is-drafted) :is(.a-ln, .a-th, .a-acc-ln) { stroke-dashoffset: 1; }
.js [data-draft]:not(.is-drafted) :is(.a-cl, .a-fd, .a-hatch, .a-acc, .a-dot, .a-hole, .a-key) { opacity: 0; }
.js .route:not(.is-drafted) :is(.route__mark, h4, p) { opacity: 0; }
.js .route:not(.is-drafted) .route__rail::before { transform: scaleX(0); }
[data-draft].is-drafted :is(.a-ln, .a-th, .a-acc-ln) {
  animation: rt-draw 0.9s cubic-bezier(0.55, 0, 0.25, 1) calc(var(--d) + var(--o, 0s)) backwards;
}
[data-draft].is-drafted :is(.a-cl, .a-fd, .a-hatch, .a-acc, .a-dot, .a-hole, .a-key) {
  animation: rt-fade 0.5s ease calc(var(--d) + var(--o, 0.5s)) backwards;
}
.route.is-drafted .route__rail::before { animation: rt-rail 0.34s linear calc(var(--d) - 0.1s) backwards; }
.route.is-drafted .route__mark { animation: rt-fade 0.35s ease calc(var(--d) + 0.1s) backwards; }
.route.is-drafted h4 { animation: rt-fade 0.5s ease calc(var(--d) + 0.3s) backwards; }
.route.is-drafted p { animation: rt-fade 0.5s ease calc(var(--d) + 0.4s) backwards; }
@keyframes rt-draw { from { stroke-dashoffset: 1; } }
@keyframes rt-fade { from { opacity: 0; } }
@keyframes rt-rail { from { transform: scaleX(0); } }
@keyframes rt-rail-y { from { transform: scaleY(0); } }
@keyframes rt-pop { from { opacity: 0; transform: scale(0.3); } }
@keyframes rt-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes rt-sweep { from { transform: rotate(135deg); } }
@media (prefers-reduced-motion: no-preference) {
  .route.is-drafted .route__mark {
    animation-name: rt-pop;
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .route.is-drafted :is(h4, p) { animation-name: rt-rise; }
  .route.is-drafted .a-needle { animation: rt-sweep 1.4s cubic-bezier(0.3, 0.7, 0.2, 1) calc(var(--d) + 0.6s) backwards; }
}

/* Below 1100px each route runs down the page: the rail on the left, the drawing on the right. */
@media (max-width: 1099px) {
  .route { grid-template-columns: 1fr; }
  .route__step { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 20px; padding-bottom: 36px; }
  .route__step:last-child { padding-bottom: 0; }
  .route__rail { grid-column: 1; grid-row: 1 / span 2; height: auto; margin: 0; }
  .route__rail::before, .route__rail::after {
    top: 17px;
    bottom: -36px;
    left: 16px;
    right: auto;
    width: 2px;
    height: auto;
    transform-origin: top;
  }
  .route__rail::after { transform: scaleY(0); }
  .route__step.is-past .route__rail::after { transform: none; }
  .route__step:last-child .route__rail::before, .route__step:last-child .route__rail::after { display: none; }
  .route__step:last-child .route__rail { background: none; }
  .route__step h4 { grid-column: 2; grid-row: 1; padding-top: 6px; }
  .route__step p { grid-column: 2; grid-row: 2; max-width: 34em; }
  .route__art { grid-column: 3; grid-row: 1 / span 2; width: 180px; max-width: none; }
  .js .route:not(.is-drafted) .route__rail::before { transform: scaleY(0); }
  .route.is-drafted .route__rail::before { animation-name: rt-rail-y; }
}
@media (max-width: 560px) {
  .route__step { grid-template-columns: 34px minmax(0, 1fr); column-gap: 16px; }
  .route__rail { grid-row: 1 / span 3; }
  .route__art { grid-column: 2; grid-row: 3; width: 150px; margin-top: 14px; }
  .route-tabs { display: flex; width: 100%; }
  .route-tabs button { flex: 1 1 0; padding-inline: 10px; }
}
@media print {
  .route-tabs { display: none !important; }
  .route-panel[hidden] { display: block !important; }
  .route { --art-ink: #1f3346; --art-thin: #56636f; }
  .route-sheet { background: #fff; }
  .art .a-solid, .art .a-hole { fill: #fff; }
  .route * { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
  .route__step h4 { color: #000; }
}

/* Fig. 2: the pre-purchase car, keyed A to D to the inspection items beside it (like Fig. 1). */
.fig-car {
  --art-ink: var(--navy);
  --art-thin: var(--steel);
  --art-solid: var(--plate-soft);
  max-width: 480px;
  margin: 32px 0 0;
}
.fig-car__art { width: 100%; height: auto; overflow: visible; }
.fig-car figcaption {
  margin-top: 10px;
  color: var(--steel);
  font-family: var(--font-display);
  font-size: 0.875rem;
  line-height: 1.45;
}
.fig-car__no { color: var(--navy); font-weight: 750; }
.fig-car .a-key {
  fill: var(--ink);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
}
.fig-car .callout { cursor: help; }
.fig-car .callout .a-th { transition: stroke 0.25s, stroke-width 0.25s; }
.callout__badge {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fig-car[data-active="a"] [data-point="a"] .callout__badge,
.fig-car[data-active="b"] [data-point="b"] .callout__badge,
.fig-car[data-active="c"] [data-point="c"] .callout__badge,
.fig-car[data-active="d"] [data-point="d"] .callout__badge { transform: scale(1.25); }
.fig-car[data-active="a"] [data-point="a"] .a-th,
.fig-car[data-active="b"] [data-point="b"] .a-th,
.fig-car[data-active="c"] [data-point="c"] .a-th,
.fig-car[data-active="d"] [data-point="d"] .a-th { stroke: var(--orange-dark); stroke-width: 1.8; }
.services__group li[data-point] {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 12px;
  margin-inline: -10px;
  padding-inline: 10px;
  border-radius: 3px;
  transition: background-color 0.25s;
}
.services__group li[data-point] > :not(.services__key) { grid-column: 2; }
.services__group li[data-point] + li::before { left: 10px; right: 10px; }
.services__group li.is-active { background: var(--plate); }
.services__key {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.services__group li.is-active .services__key { transform: scale(1.15); }
@media (max-width: 960px) {
  .fig-car { max-width: 520px; }
}

/* Service lists: each group's navy rule is drawn as it comes in, then a hairline under each item. */
.services__group h3 { position: relative; border-bottom: 0; }
.services__group h3::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--navy);
  transform-origin: left;
}
.services__group h3.reveal::after { transform: scaleX(0); transition: transform 0.9s cubic-bezier(0.6, 0, 0.3, 1) 0.1s; }
.services__group h3.reveal.is-revealed::after { transform: none; }
.services__group li { position: relative; padding: 20px 0 22px; }
.services__group li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: left;
}
.services__group .reveal > li + li::before {
  transform: scaleX(0);
  transition: transform 0.7s cubic-bezier(0.6, 0, 0.3, 1) calc(var(--i, 0) * 70ms + 0.15s);
}
.services__group .reveal.is-revealed > li + li::before { transform: none; }

/* Court: the independence statement as a panel; the orange list dashes draw in. */
.court__panel { border-left: 4px solid var(--orange); background: var(--navy-deep); }
.court__part { padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 32px); }
.court__part h3 { font-size: 1.5rem; font-stretch: 84%; line-height: 1.15; }
.court__part p { margin-top: 10px; font-size: 1.0625rem; line-height: 1.6; }
.court__list li::before { transform-origin: left; }
.court__list.reveal li::before {
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.6, 0, 0.3, 1) calc(var(--i, 0) * 70ms + 0.25s);
}
.court__list.reveal.is-revealed li::before { transform: none; }

/* About: the portrait is uncovered like the photo plates. */
.reveal[data-reveal="fade"] .about__portrait img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.25, 1) 0.15s;
}
.reveal.is-revealed[data-reveal="fade"] .about__portrait img { clip-path: inset(0); }

/* FAQ: answers open smoothly where the browser can animate to auto height; the plus becomes a minus. */
.faq summary::after { transition: background-size 0.3s cubic-bezier(0.3, 0.7, 0.2, 1); }
.faq details[open] summary::after { background-size: 16px 2px, 2px 0; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size 0.4s cubic-bezier(0.3, 0.7, 0.2, 1), content-visibility 0.4s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .faq details::details-content { transition-duration: 0.2s; }
}

/* Enquiry: a hero button that preselects the matter type flashes the field so the change is seen. */
.field select.is-preset { animation: preset 1.4s ease-out; }
@keyframes preset { from { background-color: var(--plate); border-color: var(--navy); } }

/* Inspections and Legal support are separate sections, each one list under a drawn navy
   rule. From 721px the four items sit two by two; items are h3 (under the section h2) styled as h4. */
.services--one { grid-template-columns: 1fr; }
.services__rule { display: block; height: 2px; background: var(--navy); transform-origin: left; }
.services__rule.reveal { transform: scaleX(0); transition: transform 0.9s cubic-bezier(0.6, 0, 0.3, 1) 0.1s; }
.services__rule.reveal.is-revealed { transform: none; }
.services__group h3.services__item { margin-bottom: 6px; padding: 0; font-size: 1.3125rem; font-stretch: 100%; font-weight: 650; line-height: 1.25; }
.services__group h3.services__item::after { content: none; }
@media (min-width: 721px) {
  .services--one ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); }
  .services--one li:nth-child(2)::before { content: none; }
}

/* Header sub-menu: Services opens a panel listing the three services, each with a
   one-line description. Click to open (no hover menus). Without JS the panel opens on keyboard
   focus and "Services" is a plain link to Inspections. Below 720px the services are listed
   in the Menu sheet directly, without the parent. */
.site-nav__group { position: relative; }
.site-nav .site-nav__parent { display: flex; align-items: center; gap: 6px; }
.site-nav__caret { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.2s; }
.site-nav__group.is-open .site-nav__caret { transform: rotate(180deg); }
.site-nav__group:has(.site-nav__sub a[aria-current]) > .site-nav__parent::after,
.site-nav__group.is-open > .site-nav__parent::after { transform: scaleX(1); }
.site-nav__sub {
  position: absolute;
  top: calc(100% + 12px);
  left: -8px;
  z-index: 60;
  width: 22rem;
  margin: 0;
  padding: 4px 20px 8px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--navy);
  box-shadow: 0 18px 32px -18px rgba(23, 39, 54, 0.45);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.18s, visibility 0s 0.18s;
}
.site-nav__group.is-open .site-nav__sub,
html:not(.js) .site-nav__group:focus-within .site-nav__sub { visibility: visible; opacity: 1; transition: opacity 0.18s; }
@media (prefers-reduced-motion: no-preference) {
  .site-nav__sub { transform: translateY(-6px); transition: opacity 0.18s, transform 0.22s cubic-bezier(0.3, 0.7, 0.2, 1), visibility 0s 0.22s; }
  .site-nav__group.is-open .site-nav__sub,
  html:not(.js) .site-nav__group:focus-within .site-nav__sub { transform: none; transition: opacity 0.18s, transform 0.22s cubic-bezier(0.3, 0.7, 0.2, 1); }
}
.site-nav .site-nav__sub { display: block; }
.site-nav__sub li + li { border-top: 1px solid var(--rule); }
.site-nav .site-nav__sub a { padding: 12px 0 12px 14px; white-space: normal; }
.site-nav .site-nav__sub a:hover { background: none; }
.site-nav .site-nav__sub a::after { display: none; }
.site-nav__sub a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--orange);
  transform: scaleY(0);
  transition: transform 0.2s;
}
.site-nav__sub a:hover::before,
.site-nav__sub a:focus-visible::before,
.site-nav__sub a[aria-current]::before { transform: none; }
.site-nav__label { display: block; color: var(--navy); }
.site-nav__desc { display: block; margin-top: 2px; color: var(--steel); font-size: 0.8125rem; font-weight: 400; line-height: 1.35; }
@media (max-width: 719px) {
  .site-nav .site-nav__parent { display: none; }
  .site-nav__sub,
  html:not(.js) .site-nav__group:focus-within .site-nav__sub {
    position: static;
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .site-nav__sub::before {
    content: "Services";
    display: block;
    padding-top: 10px;
    color: var(--steel);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
  }
  .site-nav__sub li + li { border-top: 0; }
  .site-nav__sub a::before, .site-nav__desc { display: none; }
}