/* ==========================================================================
   Stitch Direct — design system
   Source of truth: files/design-explorations/stage-3-build/SPEC.md
   ("B Split", light navy theme, September 2026), which carries
   files/STYLE_GUIDE.md forward.
   Stack: hand-rolled token-based CSS (no build step; previews/hosts anywhere)

   LIGHT NAVY THEME (approved Sept 2026, replaces the July 2026 dark teal):
   the page is white and #f5f7fa, and the brand colour is architecture rather
   than decoration — a navy (#0a2140) utility bar, hero panel and capability
   panel, a lime "why" panel, a near-black navy footer. The seam between the
   white and navy halves of the hero is slanted so it echoes the diagonal in
   the logo arrow. Lime is the ONE action (Get a Quote, form submit) and the
   heading emphasis underline; it is never text.

   Contrast decisions (WCAG AA, measured):
   - ink #0e1b2f on white 16.7:1; text #2e3d52 10.5:1; muted #5f6d82 5.6:1.
   - Link/label cyan is --cyan-text #007a94 on light (5.0:1). The brighter
     brand --cyan #00a7cc is for arrows, icons and links ON navy (5.7:1) —
     it fails as text on white, so never use it there.
   - On navy #0a2140: white 16.1:1, cyan 5.7:1, lime 9.4:1.
   - On fills: ink on lime 10.9:1, ink on cyan 6.6:1. Never white on lime
     or cyan.

   Shape: buttons and inputs 6px, cards 8px, panels and the hero seam 0.
   Cards carry a 1px border and no shadow; only the sticky header keeps a
   scroll shadow.
   ========================================================================== */

/* Fonts are self-hosted variable woff2 (assets/fonts/) and preloaded in each
   page head. The "glitchy" font switch between pages was webfonts swapping in
   after first render. font-display: block (NOT swap, NOT optional) is
   deliberate: `swap` repaints mid-load, and `optional` has intermittently
   locked pages to the system fallback for this user in the past. With both
   files preloaded and cached the block period is effectively zero — text
   always renders in the brand fonts. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url("../assets/fonts/inter-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Sora replaced Space Grotesk in the Sept 2026 restyle: same geometric
   grotesque family as the wordmark, but a tighter, more corporate figure. */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: block;
  src: url("../assets/fonts/sora-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand */
  --cyan: #00a7cc; /* arrows, icons, links ON navy */
  --cyan-text: #007a94; /* links and category labels on white / off-white */
  --lime: #b3d243; /* the one action + the emphasis underline */
  --lime-dark: #9bba2e;
  --navy: #0a2140; /* panels: utility bar, hero panel, capability panel */
  --navy-raised: #112b52; /* surfaces inside navy, for the page passes */
  --navy-deep: #071a33; /* footer */

  /* Neutrals (light theme) */
  --bg: #ffffff;
  --bg-subtle: #f5f7fa;
  --ink: #0e1b2f;
  --text: #2e3d52;
  --text-muted: #5f6d82;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --ink-on-accent: #0e1b2f; /* text on lime, cyan and white fills */

  /* On navy */
  --navy-text: #ffffff;
  --navy-text-muted: rgba(255, 255, 255, 0.78);
  --navy-border: rgba(255, 255, 255, 0.16);

  /* Type */
  --font-head: "Sora", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 0.8125rem; /* 13px labels */
  --text-sm: 0.9375rem; /* 15px cards, lists, nav */
  --text-base: 1rem;
  --text-lg: 1.0625rem; /* 17px ledes */
  --text-xl: clamp(1.125rem, 1.083rem + 0.19vw, 1.25rem); /* 18 -> 20 card + h3 */
  --text-2xl: clamp(1.875rem, 1.583rem + 1.3vw, 2.75rem); /* 30 -> 44 section h2 */
  --text-3xl: clamp(1.75rem, 1.5rem + 1.11vw, 2.5rem); /* 28 -> 40 */
  --text-panel: clamp(2rem, 1.667rem + 1.48vw, 3rem); /* 32 -> 48 panel h2 */
  --text-hero: clamp(2.5rem, 1.83rem + 2.96vw, 4.5rem); /* 40 -> 72 */

  /* Spacing / shape. Three steps rather than a fluid clamp: the section
     rhythm is easier to reason about, and --page-pad has to stay a plain
     length so the panels can grow past it on wide screens. */
  --gutter: 20px;
  --page-pad: 20px;
  --space-section: 64px;
  --space-tight: 52px;
  --space-panel: 56px; /* vertical padding inside a colour panel */
  --space-body: 48px; /* vertical padding of the list column beside it */
  --radius-sm: 6px; /* buttons, inputs */
  --radius: 8px; /* cards */
  --shadow-soft: 0 1px 2px rgba(10, 33, 64, 0.06), 0 10px 28px rgba(10, 33, 64, 0.08);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); /* the reveal + entrance curve */
  --dur-fast: 180ms; /* hover: cards, buttons, arrows */
  --dur-slow: 600ms; /* scroll reveal + hero entrance */

  --header-h: 70px;
}

@media (min-width: 640px) {
  :root {
    --gutter: 28px;
    --page-pad: 28px;
    --space-section: 88px;
    --space-tight: 68px;
    --space-panel: 76px;
    --space-body: 60px;
  }
}

@media (min-width: 1000px) {
  :root {
    --gutter: 36px;
    --page-pad: 36px;
    --space-section: 112px;
    --space-tight: 84px;
    --space-panel: 96px;
    --space-body: 72px;
  }
}

/* 1312px is where (100vw - 1240) / 2 passes the 36px gutter. Above it the
   panels' page-side padding grows with the viewport; below it it is the plain
   gutter. .container carries the gutter INSIDE its max-width (see below), so
   the reading column's content edge lands on --page-pad at every width and
   the chrome (utility bar, header, panels) shares the copy's left edge. */
@media (min-width: 1312px) {
  :root {
    --page-pad: calc((100vw - 1240px) / 2);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* author styles on display would otherwise defeat the hidden attribute */
[hidden] {
  display: none !important;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 0.6em;
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-2xl);
  line-height: 1.06;
}

h2 {
  font-size: var(--text-2xl);
}

h3 {
  font-size: var(--text-xl);
}

h4 {
  font-size: var(--text-base);
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em;
}

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

a {
  color: var(--cyan-text);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

button {
  font: inherit;
  cursor: pointer;
}

strong {
  color: var(--ink);
  font-weight: 600;
}

/* Heading emphasis: <em> inside a heading is underlined in lime. Colour as
   emphasis is out (lime fails as text, cyan competes with links); an underline
   in the accent reads as a highlighter mark and stays AA because the word
   itself is still ink. box-decoration-break keeps it whole across line wraps. */
h1 em,
h2 em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.14em;
  /* one continuous highlighter stroke: left at auto the browser cuts the mark
     out under every descender and it reads as disconnected dashes */
  text-decoration-skip-ink: none;
  /* the marked phrase is one unit: without this "the best method." breaks
     across a line and the mark renders as two disconnected dashes */
  white-space: nowrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

::selection {
  background: var(--lime);
  color: var(--ink-on-accent);
}

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

/* --cyan is 2.8:1 on white, under the 3:1 SC 1.4.11 floor, so the ring uses
   the darker link cyan on light and the brighter brand cyan on navy. */
.section--dark :focus-visible,
.panel--navy :focus-visible,
.page-hero :focus-visible,
.hero__panel :focus-visible,
.utility-bar :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--cyan);
}

.skip-link {
  position: absolute;
  top: -56px;
  left: 16px;
  z-index: 100;
  background: var(--lime);
  color: var(--ink-on-accent);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease);
}

.skip-link:focus {
  top: 12px;
  text-decoration: none;
}

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

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(1240px + 2 * var(--gutter));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.section--tight {
  padding-top: var(--space-tight);
  padding-bottom: var(--space-tight);
}

.section--subtle {
  background: var(--bg-subtle);
}

/* A white section that follows a tinted band needs a hairline to sit on */
.section--ruled {
  border-top: 1px solid var(--border);
}

.section--dark {
  background: var(--navy);
  color: var(--navy-text-muted);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark strong {
  color: var(--navy-text);
}

.section--dark p,
.section--dark .lede {
  color: var(--navy-text-muted);
}

/* :not(.btn) — otherwise this beats .btn--primary and paints cyan text on
   the lime fill (1.7:1). Ink on lime is 10.9:1. */
.section--dark a:not(.btn) {
  color: var(--cyan);
}

/* Section heading row: heading left, optional action right */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 48px;
  margin-bottom: clamp(32px, 4vw, 44px);
}

.section-head h2 {
  margin: 0;
  max-width: 24ch;
}

.section-head .lede {
  margin-top: 12px;
}

.section-head__action {
  padding-top: 12px;
  margin: 0;
}

.lede {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--text);
  max-width: 58ch;
}

/* --------------------------------------------------------------------------
   Buttons & links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.btn:hover {
  text-decoration: none;
}

/* Very narrow screens: let long button labels wrap instead of overflowing */
@media (max-width: 380px) {
  .btn {
    white-space: normal;
    text-align: center;
  }
}

.btn .icon {
  flex: none;
}

/* Primary = the one action on the page: lime fill, ink text */
.btn--primary {
  background: var(--lime);
  color: var(--ink-on-accent);
}

.btn--primary:hover {
  background: var(--lime-dark);
}

/* Secondary: hairline outline on light backgrounds */
.btn--outline {
  padding-top: 12px;
  padding-bottom: 12px;
  border-color: var(--border-strong);
  color: var(--ink);
  background: transparent;
}

.btn--outline:hover {
  border-color: var(--ink);
  background: var(--bg-subtle);
}

/* Secondary on navy */
.btn--light,
.section--dark .btn--outline {
  padding-top: 12px;
  padding-bottom: 12px;
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--navy-text);
  background: transparent;
}

.btn--light:hover,
.section--dark .btn--outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
  color: var(--navy-text);
}

.btn--sm {
  padding: 10px 18px;
  font-size: 0.875rem;
}

/* Inline arrow link */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--cyan-text);
}

.arrow-link .icon {
  transition: transform var(--dur-fast) var(--ease);
}

.arrow-link:hover .icon {
  transform: translateX(3px);
}

.section--dark .arrow-link,
.panel--navy .arrow-link {
  color: var(--cyan);
}

.panel--lime .arrow-link {
  color: var(--ink);
}

.icon {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.icon--sm {
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------------------------------
   Utility bar — the thin navy strip above the header, on every page
   -------------------------------------------------------------------------- */
.utility-bar {
  background: var(--navy);
  color: var(--navy-text-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
  padding-top: 9px;
  padding-bottom: 9px;
}

/* The bar's colour is full-bleed; its content takes the same measure as
   .container, so the address sits on the page's left edge at every width. */
.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  max-width: calc(1240px + 2 * var(--gutter));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.utility-bar__contact {
  display: flex;
  align-items: center;
  gap: 28px;
  color: var(--navy-text);
}

/* Vertical padding plus the matching negative margin: a 26px tap target
   inside a bar that keeps its 9px rhythm */
.utility-bar a {
  color: var(--navy-text);
  display: inline-block;
  padding-top: 4px;
  padding-bottom: 4px;
  margin-top: -4px;
  margin-bottom: -4px;
}

.utility-bar a:hover {
  color: var(--lime);
  text-decoration: none;
}

/* Under 720px only the two things a visitor would tap survive */
@media (max-width: 720px) {
  .utility-bar__inner {
    justify-content: center;
  }

  .utility-bar__address {
    display: none;
  }

  .utility-bar__contact {
    gap: 20px;
  }
}

/* --------------------------------------------------------------------------
   Header / nav — white, hairline bottom, colour logo
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--dur-fast) var(--ease);
}

.site-header.is-scrolled {
  box-shadow: 0 1px 2px rgba(10, 33, 64, 0.06), 0 6px 20px rgba(10, 33, 64, 0.07);
}

/* Full-bleed header: logo lines up with the page-side padding of the panels */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
}

.site-header .site-header__inner {
  max-width: none;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.site-logo img {
  height: 46px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-nav a {
  position: relative;
  display: inline-block;
  padding: 8px 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  border-radius: var(--radius-sm);
}

.site-nav a:hover {
  color: var(--ink);
  text-decoration: none;
  background: var(--bg-subtle);
}

.site-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  background: var(--lime);
}

.site-header__cta {
  flex: none;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
}

.nav-toggle .icon--close {
  display: none;
}

@media (max-width: 920px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* Collapsed menu: the quote button sits with the toggle, not mid-header */
  .site-header__cta {
    margin-left: auto;
  }

  .site-nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px var(--gutter) 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    display: none;
  }

  .site-nav a {
    padding: 14px 4px;
    font-size: var(--text-lg);
    color: var(--ink);
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }

  .site-nav a:hover {
    background: none;
  }

  .site-nav a[aria-current="page"]::after {
    left: 4px;
    right: auto;
    width: 28px;
    bottom: 10px;
  }

  .site-nav .site-nav__cta {
    margin-top: 16px;
    border-bottom: 0;
    justify-content: center;
    padding: 14px;
  }

  body.nav-open .site-nav {
    display: flex;
  }

  body.nav-open .nav-toggle .icon--menu {
    display: none;
  }

  body.nav-open .nav-toggle .icon--close {
    display: block;
  }

  body.nav-open {
    overflow: hidden;
  }
}

/* The page's one action stays in the header on mobile; logo, button and
   toggle have to fit at 360px. */
@media (max-width: 560px) {
  .site-logo img {
    height: 38px;
  }

  .site-header__inner {
    gap: 12px;
  }

  .site-header__cta {
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (min-width: 921px) {
  .site-nav .site-nav__cta {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Split sections — a colour panel beside a white list. The structural idea
   of the whole page: brand colour as architecture, not decoration.
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: var(--split, minmax(0, 1fr) minmax(0, 1fr));
}

.split--caps {
  --split: 40% 60%;
}

.split--why {
  --split: 42% 58%;
}

.panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: var(--space-panel) 56px var(--space-panel) var(--page-pad);
}

.panel > * {
  margin: 0;
}

/* Sized by the list beside it, a centred panel leaves ~190px of dead colour
   above its heading. Top-aligned, the panel h2 and the list's first rule
   share a datum. */
.split--caps .panel,
.split--why .panel {
  justify-content: flex-start;
}

.panel h2 {
  font-size: var(--text-panel);
  max-width: 14ch;
}

.panel p {
  font-size: var(--text-base);
  line-height: 1.6;
  max-width: 40ch;
}

.panel--navy {
  background: var(--navy);
  color: var(--navy-text-muted);
}

.panel--navy h2 {
  color: var(--navy-text);
}

.panel--navy p {
  color: var(--navy-text-muted);
}

.panel--lime {
  background: var(--lime);
  color: rgba(14, 27, 47, 0.82);
}

.panel--lime h2 {
  color: var(--ink);
}

.panel--lime p {
  color: rgba(14, 27, 47, 0.82);
  font-size: var(--text-lg);
  max-width: 34ch;
}

/* On lime the underline flips to navy — lime on lime would vanish */
.panel--lime h2 em {
  text-decoration-color: var(--navy);
}

.split__body {
  padding: var(--space-body) var(--page-pad) var(--space-body) 56px;
  align-content: center;
  display: grid;
}

@media (max-width: 900px) {
  .split,
  .split--caps,
  .split--why {
    --split: minmax(0, 1fr);
  }

  .panel {
    padding: 40px var(--gutter);
  }

  .split__body {
    padding: 40px var(--gutter) 48px;
  }
}

/* --------------------------------------------------------------------------
   Ruled list — the site's list vocabulary: hairline-separated rows, two
   columns on desktop, no numbering, no cards.
   -------------------------------------------------------------------------- */
.ruled-list,
.cap-list,
.value-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
}

.ruled-list > li,
.cap-list > li,
.value-list > li {
  padding: 24px 0 28px;
  border-top: 1px solid var(--border);
}

.ruled-list__title,
.cap-list__name,
.value-list h3 {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 8px;
}

.ruled-list__desc,
.cap-list__desc,
.value-list p {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

.cap-list a {
  display: block;
  color: inherit;
}

.cap-list a:hover {
  text-decoration: none;
}

.cap-list a:hover .cap-list__name {
  color: var(--cyan-text);
}

/* On navy (about.html "How a job runs") */
.section--dark .ruled-list > li,
.section--dark .value-list > li {
  border-color: var(--navy-border);
}

.section--dark .value-list h3,
.section--dark .ruled-list__title {
  color: var(--navy-text);
}

.section--dark .value-list p,
.section--dark .ruled-list__desc {
  color: var(--navy-text-muted);
}

@media (min-width: 901px) {
  .ruled-list > li:nth-last-child(-n + 2),
  .cap-list > li:nth-last-child(-n + 2),
  .value-list > li:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }

  .section--dark .value-list > li:nth-last-child(-n + 2) {
    border-bottom-color: var(--navy-border);
  }
}

@media (max-width: 900px) {
  .ruled-list,
  .cap-list,
  .value-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .ruled-list > li:last-child,
  .cap-list > li:last-child,
  .value-list > li:last-child {
    border-bottom: 1px solid var(--border);
  }

  .section--dark .value-list > li:last-child {
    border-bottom-color: var(--navy-border);
  }
}

/* --------------------------------------------------------------------------
   Home hero — typographic split. White copy at left, a navy panel at right
   whose left edge is slanted so the seam echoes the logo arrow.
   Owner decision (July 2026, still standing): no photo, no video here.
   -------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 52% 48%;
  min-height: 660px;
  background: var(--bg);
  overflow: hidden;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: 72px 56px 72px var(--page-pad);
}

.hero__inner > * {
  margin: 0;
}

.hero h1 {
  font-size: var(--text-hero);
  color: var(--ink);
  max-width: 12ch;
}

/* At 72px the shared .14em offset leaves the mark floating between two lines
   rather than sitting on the one it marks. */
.hero h1 em {
  text-underline-offset: 0.09em;
}

.hero__copy {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--text);
  max-width: 540px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--navy);
  color: var(--navy-text);
  padding: 72px var(--page-pad) 72px 150px;
  clip-path: polygon(11% 0, 100% 0, 100% 100%, 0 100%);
}

.hero__place {
  margin: 0 0 14px;
  font-size: 0.875rem;
  color: var(--navy-text-muted);
}

.hero__tagline {
  list-style: none;
  margin: 0;
}

.hero__tagline li {
  border-top: 1px solid var(--navy-border);
}

.hero__tagline a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--navy-text);
}

.hero__tagline a:hover {
  text-decoration: none;
  color: var(--lime);
}

.hero__tagline .icon {
  flex: none;
  color: var(--cyan);
  transition: transform var(--dur-fast) var(--ease);
}

.hero__tagline a:hover .icon {
  transform: translateX(3px);
}

@media (max-width: 1100px) {
  .hero__panel {
    padding-left: 90px;
  }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .hero__inner {
    padding: 48px var(--gutter) 44px;
  }

  .hero__panel {
    clip-path: none;
    padding: 40px var(--gutter);
  }
}

/* --------------------------------------------------------------------------
   Work / catalogue: product cards. White surface, hairline border, image on
   top, a plain category label under the title — no pills anywhere.
   -------------------------------------------------------------------------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 20px);
}

/* about.html shows three tiles in the same grid; :has keeps them even
   rather than leaving a hole in the fourth column. */
.work-grid:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.work-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.work-figure:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.work-figure a {
  display: block;
  color: inherit;
}

.work-figure a:hover {
  text-decoration: none;
}

.work-figure img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.work-figure figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px 22px;
}

.work-figure figcaption strong {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Category label: the replacement for every pill tag on the site */
.card-label,
.work-figure figcaption span {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--cyan-text);
}

/* The catalogue tiles are the big ones, so their category line takes the
   second-tier 15px (SPEC §6) rather than the 13px card caption. */
.catalog-card__type {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--cyan-text);
}

/* Plain bordered chip, for lists of short terms */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
}

@media (max-width: 900px) {
  .work-grid,
  .work-grid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .work-grid,
  .work-grid:has(> :nth-child(3):last-child) {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-figure img {
    height: 220px;
  }
}

/* --------------------------------------------------------------------------
   Catalogue grid — five supplier cards, deliberately uneven: three across
   the top, two wider underneath. Tile ORDER drives the layout.
   -------------------------------------------------------------------------- */
.catalog-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 20px);
}

.catalog-card:nth-child(-n + 3) {
  grid-column: span 2;
}

.catalog-card:nth-child(n + 4) {
  grid-column: span 3;
}

.catalog-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.catalog-card a:hover {
  text-decoration: none;
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.catalog-card__cover {
  display: block;
  height: 220px;
}

.catalog-card:nth-child(n + 4) .catalog-card__cover {
  height: 240px;
}

.catalog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding: 20px 22px 22px;
}

.catalog-card__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.catalog-card__go {
  display: inline-flex;
  flex: none;
  color: var(--cyan-text);
  transition: transform var(--dur-fast) var(--ease);
}

.catalog-card__go .icon {
  width: 18px;
  height: 18px;
}

.catalog-card a:hover .catalog-card__go {
  transform: translate(2px, -2px);
}

.catalog-card__desc {
  display: block;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.catalog-card__cta {
  display: block;
  margin-top: auto;
  padding-top: 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cyan-text);
}

/* The instruction that makes the grid usable reads as the section lede,
   directly under the heading rather than buried below the tiles. */
.catalog-note {
  margin: 12px 0 0;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--text);
  max-width: 58ch;
}

@media (max-width: 900px) {
  .catalog-card:nth-child(-n + 3),
  .catalog-card:nth-child(n + 4) {
    grid-column: span 3;
  }
}

@media (max-width: 560px) {
  .catalog-card:nth-child(-n + 3),
  .catalog-card:nth-child(n + 4) {
    grid-column: span 6;
  }

  .catalog-card__cover,
  .catalog-card:nth-child(n + 4) .catalog-card__cover {
    height: 200px;
  }
}

/* --------------------------------------------------------------------------
   Beyond — "if it can be decorated" : copy left, the item list ruled right
   -------------------------------------------------------------------------- */
.beyond {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}

.beyond__intro h2 {
  font-size: var(--text-3xl);
  max-width: 22ch;
  margin: 0 0 18px;
}

.beyond__intro .lede {
  margin: 0;
  color: var(--text-muted);
}

.statement {
  max-width: 880px;
}

.statement h2 {
  font-size: var(--text-3xl);
  max-width: 20ch;
}

.statement__items {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
}

.statement .statement__items {
  margin-top: 28px;
}

.statement__items li {
  padding: 12px 0;
  border-top: 1px solid var(--border);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ink);
}

@media (max-width: 900px) {
  .beyond {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Each rule belongs to its own item, so it never runs across the gutter */
.statement__items > li:nth-last-child(-n + 2) {
  border-bottom: 1px solid var(--border);
}

@media (max-width: 480px) {
  .statement__items {
    grid-template-columns: minmax(0, 1fr);
  }

  .statement__items > li:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .statement__items > li:last-child {
    border-bottom: 1px solid var(--border);
  }
}

/* --------------------------------------------------------------------------
   Split teaser (visit / about cross-links)
   -------------------------------------------------------------------------- */
.teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.teaser--flip > :first-child {
  order: 2;
}

.teaser__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}

/* A step under the 40px section heading it closes, so the page keeps
   descending (SPEC §7: 36px). */
.teaser__body h2 {
  font-size: clamp(1.625rem, 1.4rem + 1vw, 2.25rem);
  max-width: 20ch;
}

/* Two unequal blocks of copy align at the top, not at their centres */
.teaser--top {
  align-items: start;
}

.teaser__meta {
  list-style: none;
  display: grid;
  gap: 14px;
  margin: 24px 0 28px;
  font-size: var(--text-sm);
}

.teaser__meta li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.teaser__meta .icon {
  color: var(--cyan-text);
  margin-top: 2px;
  flex: none;
}

/* Long unbreakable strings (email address) must not set the column's
   min-content width on narrow screens */
.teaser__meta span {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 820px) {
  .teaser {
    grid-template-columns: minmax(0, 1fr);
  }

  .teaser--flip > :first-child {
    order: 0;
  }
}

/* --------------------------------------------------------------------------
   Interior page hero — a navy band, so page tops carry the brand colour
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  padding-top: var(--space-panel);
  padding-bottom: var(--space-panel);
}

/* Faint brand arrow, echoing the hero seam (inline data URI so every page
   gets it without markup changes) */
.page-hero::before {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(-30px, 5vw, 110px);
  transform: translateY(-50%);
  width: clamp(150px, 18vw, 260px);
  aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='580 33 181 181'%3E%3Cpolygon fill='%23B3D243' points='745.875,122.954 595.261,211.228 635.317,129.572 646.239,128.915'/%3E%3Cpolygon fill='%2300A7CC' points='745.875,122.954 595.261,34.67 632.307,113.349'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.16;
  pointer-events: none;
}

/* Below 900px the band is only as wide as the copy, so the mark would sit
   straight under the h1 and the lede. */
@media (max-width: 900px) {
  .page-hero::before {
    display: none;
  }
}

.page-hero .container {
  position: relative;
}

/* --text-3xl (28 -> 40) is a SMALLER step than the section h2's --text-2xl
   (30 -> 44), so an interior page title needs its own step above both. */
.page-hero h1 {
  font-size: clamp(2.25rem, 1.55rem + 2.2vw, 3.5rem);
  max-width: 18ch;
  margin-bottom: 0.35em;
  color: var(--navy-text);
}

.page-hero .lede {
  margin: 0;
  color: var(--navy-text-muted);
}

/* --------------------------------------------------------------------------
   Service detail rows (services page; .svc-row__facts also on about)
   -------------------------------------------------------------------------- */
.svc-row {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding-top: var(--space-body);
  padding-bottom: var(--space-body);
  border-bottom: 1px solid var(--border);
}

/* The section's own padding carries the outer seams; the rows only carry
   the rhythm between them. */
.svc-row:first-child {
  padding-top: 0;
}

.svc-row:last-child {
  padding-bottom: 0;
  border-bottom-width: 0;
}

.svc-row--flip .svc-row__media {
  order: -1;
}

.svc-row__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Supplier product cutouts arrive tall and shot on white. Cropping one to 4:3 cuts the
   top off the product, and upscaling a 450px cutout to fill the frame just looks soft, so
   these sit whole on a white plate instead. The plate only reads as a plate against a
   tinted band, so every row that uses one lives in a --bg-subtle section. */
.svc-row__media--product {
  --plate-pad: clamp(8px, 1.5vw, 16px);
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  overflow: hidden;
}

/* Absolutely positioned, not a grid child: a percentage max-height on an in-flow child
   resolves against a height the child is itself setting, so the plate stretched to the
   portrait image and this row grew taller than every other 4:3 row on the page. */
.svc-row__media--product img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: calc(100% - 2 * var(--plate-pad));
  max-height: calc(100% - 2 * var(--plate-pad));
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
}

.svc-row h2 {
  font-size: var(--text-3xl);
  margin-bottom: 14px;
}

.svc-row__facts {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 18px 0 24px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.svc-row__facts li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.svc-row__facts li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--lime);
  flex: none;
  transform: translateY(-1px);
}

@media (max-width: 820px) {
  .svc-row,
  .svc-row--flip {
    grid-template-columns: minmax(0, 1fr);
  }

  .svc-row--flip .svc-row__media {
    order: 0;
  }
}

/* --------------------------------------------------------------------------
   Split layout — two-column content/panel grid (contact page form + shop info)
   -------------------------------------------------------------------------- */
.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

@media (max-width: 820px) {
  .split-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Forms (contact page)
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}

.form-grid .field--full {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}

.field label .optional {
  font-weight: 400;
  color: var(--text-muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease);
}

/* The select was the one browser-default surface left on a themed form, and
   it computed 4px shorter than the text inputs beside it. */
.field select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007a94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-muted);
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-color: var(--cyan);
}

/* Success / failure panels. contact.js toggles .is-active — these two display
   rules are the only thing that reveals them, so they must stay. */
.form-success {
  display: none;
  padding: 28px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}

.form-success.is-active {
  display: block;
}

.form-success h3,
.form-error h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.form-success .icon {
  color: var(--cyan-text);
  flex-shrink: 0;
}

/* Same weight as the success panel so the layout doesn't jump, but a warm
   accent rather than the brand cyan — the one moment that isn't good news. */
.form-error {
  display: none;
  margin-top: 20px;
  padding: 28px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}

.form-error.is-active {
  display: block;
}

.form-error .icon {
  flex-shrink: 0;
  color: #a8412a; /* 6.2:1 on --bg-subtle; caution without alarm */
}

/* Mid-send: the button is inert but must not look broken or disappear. */
.btn[disabled] {
  cursor: progress;
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Map
   -------------------------------------------------------------------------- */
.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
}

.map-embed iframe {
  width: 100%;
  height: 380px;
  border: 0;
}

/* --------------------------------------------------------------------------
   Info list (contact page)
   -------------------------------------------------------------------------- */
.info-list {
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}

.info-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-top: 22px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.info-list .icon {
  color: var(--cyan-text);
  flex: none;
  margin-top: 3px;
}

.info-list h3 {
  font-size: var(--text-xl);
  margin-bottom: 2px;
}

.info-list a {
  display: inline-block;
  padding-top: 4px;
  padding-bottom: 4px;
}

.info-list p {
  font-size: var(--text-base);
  color: var(--text-muted);
  margin: 0;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.875rem;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.72);
}

.site-footer a:hover {
  color: #fff;
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(140px, 1fr));
  gap: 48px 32px;
  padding-top: var(--space-body);
  padding-bottom: 48px;
}

.site-footer__brand img {
  height: 44px;
  width: auto;
  margin-bottom: 18px;
}

.site-footer__brand p {
  max-width: 36ch;
}

.site-footer h3 {
  font-family: var(--font-head);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 16px;
}

.site-footer ul {
  list-style: none;
  display: grid;
  gap: 10px;
}

.site-footer li a {
  display: inline-block;
  padding-top: 4px;
  padding-bottom: 4px;
}

.site-footer address {
  font-style: normal;
  line-height: 1.7;
}

/* Email/phone strings shouldn't force horizontal overflow on tiny screens */
.site-footer li,
.site-footer address {
  overflow-wrap: anywhere;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--text-xs);
}

@media (max-width: 860px) {
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
}

/* --------------------------------------------------------------------------
   Motion
   The one authored moment is the hero: the headline, its copy and buttons
   rise, then the navy panel slides in from the right and its four capability
   rows follow — roughly 900ms end to end, once, on load. Everything else is
   the quiet scroll reveal and 180ms hover feedback.
   -------------------------------------------------------------------------- */
/* Hiding is scoped to html.js (set by main.js) so content is never
   stuck invisible when JS is unavailable. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }

  html.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  /* Hero entrance. Pure CSS, not [data-reveal]: it runs on load, above the
     fold, and it is choreographed rather than staggered by the observer. */
  @keyframes hero-rise {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
  }

  @keyframes hero-panel-in {
    from {
      opacity: 0;
      transform: translateX(24px);
    }
  }

  .hero__inner > *,
  .hero__panel,
  .hero__place,
  .hero__tagline li {
    animation: hero-rise 520ms var(--ease-out) backwards;
  }

  .hero__inner > :nth-child(1) {
    animation-delay: 60ms;
  }

  .hero__inner > :nth-child(2) {
    animation-delay: 150ms;
  }

  .hero__inner > :nth-child(3) {
    animation-delay: 240ms;
  }

  .hero__panel {
    animation-name: hero-panel-in;
    animation-duration: 620ms;
    animation-delay: 120ms;
  }

  .hero__place {
    animation-delay: 320ms;
  }

  .hero__tagline li:nth-child(1) {
    animation-delay: 390ms;
  }

  .hero__tagline li:nth-child(2) {
    animation-delay: 460ms;
  }

  .hero__tagline li:nth-child(3) {
    animation-delay: 530ms;
  }

  .hero__tagline li:nth-child(4) {
    animation-delay: 600ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* Hover keeps its colour change; the movement goes away. */
  .work-figure:hover,
  .catalog-card a:hover,
  .catalog-card a:hover .catalog-card__go,
  .arrow-link:hover .icon,
  .hero__tagline a:hover .icon {
    transform: none;
  }
}

/* === about.html === */
/* "What accounts count on" sits in a narrow column, so the shared ruled item
   list runs as a single column here — and only its last row closes. */
.about-facts {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 18px;
}

.about-facts > li:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.about-facts > li:last-child {
  border-bottom: 1px solid var(--border);
}

/* === services.html === */
/* Lime is reserved for the one action and the heading underline, so the fact
   markers on the service rows drop to a neutral rule colour. */
.svc-row__facts li::before {
  background: var(--border-strong);
}

/* === contact.html === */

/* The form is the page's work, so it gets the wider column and the aside
   heading steps down from the 44px section size to sit beside it. */
.contact-split {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(40px, 6vw, 88px);
}

.contact-aside h2 {
  font-size: var(--text-xl);
  margin-bottom: 18px;
}

/* Visit band: the invitation reads as a statement beside the map, on the
   page's own --space-tight rhythm rather than a deeper band of its own. */
.contact-visit {
  padding-top: var(--space-tight);
  padding-bottom: var(--space-tight);
}

.contact-visit .teaser__body .lede {
  margin: 0;
}

.contact-visit .map-embed iframe {
  height: 420px;
}

/* The closing CTA band's buttons sit off its lede by the same step on every
   page (this was an inline style on banners.html). */
.section--dark .hero__actions {
  margin-top: 28px;
}

/* === banners.html === */
/* The three banner facts sit in the narrow copy column of a .svc-row, so the
   shared two-column ruled treatment would break each sentence over two lines.
   One column, same hairline rows. */
.banner-facts {
  grid-template-columns: minmax(0, 1fr);
  margin: 22px 0 26px;
}

/* === contact.html === (corrections: keep the stack below 820px, and let the
   map take the larger half of the visit band) */
@media (max-width: 820px) {
  .contact-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

.contact-visit .teaser {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
}

.contact-visit .teaser__body .lede {
  max-width: 26ch;
}

@media (max-width: 900px) {
  .contact-visit .teaser {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-visit .teaser__body .lede {
    max-width: none;
  }
}