/* ==========================================================================
   DRIVEWAY MECHANICAL — "Nexus" edition
   Design system transcribed from "Nexus — Intelligence That Scales".
   Dark, full-bleed, grid composition. Teal accent on a black foundation.
   Tokens below are the source of truth; don't hardcode values past this block.
   ========================================================================== */

/* Self-hosted, matching the reference: Inter for everything, with Instrument
   Serif reserved for the one gradient accent word in each headline. One latin
   subset each, no third-party font request. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-latin.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;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/instrument-serif-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/instrument-serif-italic-latin.woff2") format("woff2");
}

:root {
  /* --- Colour (from the Nexus token block) --- */
  /* Palette taken from the supplied sample screenshot: a black ground, a fine
     grey dot-matrix texture, and one cyan -> blue -> purple gradient used as
     the single accent (the sample applies it to one word of the headline).
     The logo's orange lives only inside the logo artwork, so the brand still
     reads without the interface turning orange. */
  --primary:        #45D0E8;   /* cyan   */
  --accent-2:       #5B7CFA;   /* blue   */
  --accent-3:       #B24BF3;   /* purple */
  --secondary:      #000000;
  --tertiary:       #5B7CFA;
  --brand-orange:   #E87722;
  --brand-navy:     #14295C;
  --accent-gradient: linear-gradient(90deg, #45D0E8 0%, #5B7CFA 52%, #B24BF3 100%);
  --neutral:        #000000;
  --background:     #000000;
  --surface:        #F1F5F9;
  --text-primary:   #F1F5F9;
  --text-secondary: #171717;
  --border:         #FFFFFF;
  --accent:         #45D0E8;

  /* Derived tints. The system says don't introduce new accent hues, so every
     one of these is the palette at reduced alpha rather than a new colour. */
  --text-muted:     rgba(241, 245, 249, 0.62);
  /* 0.42 looked right but measured 3.69:1 on black — under WCAG AA for the
     12–13px labels it's used on. 0.54 clears 4.5:1 with the same intent. */
  --text-faint:     rgba(241, 245, 249, 0.54);
  --border-hair:    rgba(255, 255, 255, 0.10);
  --border-soft:    rgba(255, 255, 255, 0.16);
  --accent-dim:     rgba(69, 208, 232, 0.14);
  --accent-glow:    rgba(91, 124, 250, 0.14);
  --tertiary-glow:  rgba(59, 130, 246, 0.18);
  --panel:          rgba(255, 255, 255, 0.024);
  --panel-hover:    rgba(255, 255, 255, 0.045);

  /* --- Typography --- */
  --font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --display-lg-size:    118px;
  --display-lg-weight:  300;
  --display-lg-lh:      0.94;
  --display-lg-ls:      -0.035em;

  --body-md-size:   18px;
  --body-md-weight: 600;
  --body-md-lh:     28px;

  --label-md-size:   14px;
  --label-md-weight: 600;
  --label-md-lh:     20px;

  /* --- Radius --- */
  --r-md: 12px;
  --r-lg: 16px;

  /* --- Spacing: 8px base, stepping 8/16/28/32/40/96 --- */
  --s-base: 8px;
  --s-sm:   8px;
  --s-md:   16px;
  --s-lg:   28px;
  --s-xl:   32px;
  --s-2xl:  40px;
  --s-3xl:  96px;
  --gap:    12px;
  --gap-md: 16px;
  --gap-lg: 20px;
  --gap-xl: 32px;
  --section-padding: 68px;

  /* --- Elevation --- */
  --shadow-elevated: rgba(69, 208, 232, 0.09) 0 0 0 1px inset,
                     rgba(91, 124, 250, 0.16) 0 0 32px 0;

  /* --- Motion: 300/500ms, ease + cubic-bezier(0.4,0,0.2,1) --- */
  --dur-fast: 300ms;
  --dur-slow: 500ms;
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);

  /* --- z-index scale --- */
  --z-field:  0;
  --z-base:   10;
  --z-nav:    30;
  --z-overlay:50;

  --max-w: 1240px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }

body {
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* height:auto is load-bearing — the width/height attributes on the <img> tags
   (there to reserve space and stop layout shift) otherwise win over the
   aspect-ratio rules and blow the hero out to its intrinsic height. */
img { max-width: 100%; height: auto; display: block; }

/* Photos are wrapped in <picture> to offer WebP. display:contents drops the
   wrapper out of the box tree so the <img> is still the grid item / flex item
   / .shell-border child it was before — otherwise .intro-point's grid would
   lay out the <picture> and the caption instead of the photo and the caption. */
picture { display: contents; }
/* .shell-border > * paints the inset background on its direct child, which is
   now a display:contents <picture> that can't paint anything. Reach through. */
.shell-border > picture > img { border-radius: calc(var(--r-lg) - 1px); background: var(--background); }

a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #04070E; }

/* Skip link — keyboard users shouldn't have to tab the whole nav */
.skip-link {
  position: absolute; left: var(--s-md); top: -100px;
  z-index: var(--z-overlay);
  background: var(--surface); color: var(--text-secondary);
  padding: var(--s-sm) var(--s-md); border-radius: var(--r-md);
  font-size: var(--label-md-size); font-weight: var(--label-md-weight);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--s-md); }

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

/* ==========================================================================
   TYPOGRAPHY SCALE
   display-lg is 72px in the system; it fluidly steps down on smaller screens
   rather than overflowing, keeping the -0.05em tracking throughout.
   ========================================================================== */

.display {
  font-size: clamp(44px, 8.4vw, var(--display-lg-size));
  font-weight: var(--display-lg-weight);
  line-height: var(--display-lg-lh);
  letter-spacing: var(--display-lg-ls);
}
/* The reference sets one word of the headline in a serif, filled with the
   accent gradient. It's the single most identifying detail of that design. */
.display em, h2 em {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.01em;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

h2 {
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: var(--display-lg-weight);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
h2 em {
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
h3 {
  font-size: 21px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.02em;
}

/* body-md as specified: 18/28 at weight 600. It's a lead style, so it's used
   for intros and pull text. Running paragraphs drop to 400 to stay readable
   at length — same size and rhythm, lighter weight. */
.lead {
  font-size: var(--body-md-size);
  font-weight: var(--body-md-weight);
  line-height: var(--body-md-lh);
  color: var(--text-primary);
  max-width: 62ch;
}
p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  font-weight: 400;
  color: var(--text-muted);
  max-width: 68ch;
}

.label {
  font-size: var(--label-md-size);
  font-weight: var(--label-md-weight);
  line-height: var(--label-md-lh);
}

/* Eyebrow: linear rule + wide tracking, the system's utility voice */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--gap);
  font-size: 12px; font-weight: var(--label-md-weight);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-lg);
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: var(--accent); opacity: 0.7;
}

/* ==========================================================================
   LAYOUT — grid, full bleed
   ========================================================================== */

.shell { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s-xl); }

section {
  padding: var(--section-padding) 0;
  position: relative;
  z-index: var(--z-base);
  /* The nav is fixed, so anchor jumps must stop clear of it */
  scroll-margin-top: 92px;
}
.section-head { margin-bottom: var(--s-2xl); }

/* Hairline rules mark the grid without adding weight */
.rule { height: 1px; background: var(--border-hair); border: 0; }

/* ==========================================================================
   ELEVATED SURFACE + GRADIENT BORDER SHELL
   The system's signature: an outer shell carries a radial+linear gradient so
   the edge reads as depth, with the real surface inset a hair inside it.
   ========================================================================== */

.shell-border {
  position: relative;
  padding: 1px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 72% 42%, rgba(220, 245, 255, 0.08), rgba(0, 0, 0, 0) 22%),
    linear-gradient(90deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.03) 58%, rgba(255,255,255,0.015) 100%);
}
.shell-border > * {
  border-radius: calc(var(--r-lg) - 1px);
  background: var(--background);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border-hair);
  border-radius: var(--r-lg);
  padding: var(--s-xl);
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.panel--elevated { box-shadow: var(--shadow-elevated); }

/* Hover changes colour and stroke only — never geometry, so nothing shifts */
a.panel:hover, .panel--interactive:hover {
  background: var(--panel-hover);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-elevated);
}
a.panel, .panel--interactive { cursor: pointer; }

/* ==========================================================================
   BUTTONS — primary is the light surface, link is bare text
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--gap);
  font-family: var(--font);
  font-size: var(--label-md-size);
  font-weight: var(--label-md-weight);
  line-height: var(--label-md-lh);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  /* Padding is 0 in the token block; real controls need a hit area, so this
     is the 8px rhythm applied to reach the 44px minimum target. */
  padding: 14px var(--s-lg);
  min-height: 44px;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
  white-space: nowrap;
}

.btn--primary { background: var(--surface); color: var(--text-secondary); }
.btn--primary:hover { background: #FFFFFF; box-shadow: 0 0 32px 0 rgba(241,245,249,0.16); }

.btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border-soft); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--accent { background: var(--accent-dim); color: var(--accent); border-color: rgba(69,208,232,0.38); }
.btn--accent:hover { background: rgba(69,208,232,0.22); border-color: var(--accent); }

.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-link {
  display: inline-flex; align-items: center; gap: var(--s-sm);
  color: var(--surface);
  font-size: var(--label-md-size); font-weight: var(--label-md-weight);
  border-radius: 0; padding: 0;
  min-height: 44px;
  transition: color var(--dur-fast) var(--ease);
}
.btn-link svg { width: 16px; height: 16px; transition: stroke var(--dur-fast) var(--ease); }
.btn-link:hover { color: var(--accent); }

/* ==========================================================================
   WEBGL FIELD + DOM FALLBACK
   ========================================================================== */

.field-wrap {
  /* Anchored to the top of the document rather than fixed to the viewport.
     Fixed meant every section scrolled over the bright band, so body copy
     further down the page sat on top of the glow and became hard to read.
     The field now backs the hero only, and everything below is plain black. */
  position: absolute; top: 0; left: 0; right: 0;
  height: 100svh;
  z-index: var(--z-field);
  pointer-events: none;
  /* Fade it out at the bottom so it ends softly instead of cutting off. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
#field { width: 100%; height: 100%; display: block; }

/* body becomes the positioning context for the field */
body { position: relative; }

/* DOM fallback: a CSS dot matrix, shown when WebGL is unavailable. Same
   sparse black-and-teal read as the shader, without the GPU cost. */
.field-fallback {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(69,208,232,0.22) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 78%);
  opacity: 0.5;
}

/* The shader darkens the headline side itself (centerDark), so no CSS veil is
   needed. Kept as an element for the no-WebGL fallback path only. */
.field-veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: none;
}

/* ==========================================================================
   NAV
   ========================================================================== */

.nav {
  position: fixed; top: var(--s-md); left: var(--s-md); right: var(--s-md);
  z-index: var(--z-nav);
  border-radius: var(--r-lg);
  transition: background var(--dur-slow) var(--ease),
              border-color var(--dur-slow) var(--ease),
              backdrop-filter var(--dur-slow) var(--ease);
  border: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-color: var(--border-hair);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-xl);
  max-width: var(--max-w); margin: 0 auto;
  padding: var(--gap) var(--s-lg);
}
.brand { display: flex; align-items: center; gap: var(--gap); min-width: 0; }
.brand-mark {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--r-md);
  border: 1px solid rgba(69,208,232,0.32);
  background: var(--accent-dim);
  display: grid; place-items: center; color: var(--accent);
}
.brand-mark svg { width: 18px; height: 18px; }
.brand-name {
  font-size: var(--label-md-size); font-weight: var(--label-md-weight);
  letter-spacing: 0.04em; line-height: 1.15; white-space: nowrap;
}
.brand-sub {
  display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-faint);
}

.nav-links { display: flex; align-items: center; gap: var(--gap-xl); }
.nav-links a {
  font-size: var(--label-md-size); font-weight: 500;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
  padding: 6px 0;
}
.nav-links a:hover { color: var(--text-primary); }
.nav-actions { display: flex; align-items: center; gap: var(--gap); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--border-hair);
  border-radius: var(--r-md); color: var(--text-primary);
  width: 44px; height: 44px; cursor: pointer;
  place-items: center;
  transition: border-color var(--dur-fast) var(--ease);
}
.nav-toggle:hover { border-color: var(--accent); }
.nav-toggle svg { width: 20px; height: 20px; }

.nav-drawer { display: none; }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 140px 0 var(--s-3xl);
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-3xl); align-items: center;
}
.hero-copy > * + * { margin-top: var(--s-lg); }
.hero-actions { display: flex; gap: var(--gap-md); flex-wrap: wrap; margin-top: var(--s-xl); }

.hero-facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-md); margin-top: var(--s-2xl);
}
.fact { padding: var(--s-md) 0; border-top: 1px solid var(--border-hair); }
.fact-k {
  display: block; font-size: var(--label-md-size); font-weight: var(--label-md-weight);
  letter-spacing: 0.02em; color: var(--text-primary);
}
.fact-v {
  display: block; margin-top: 4px; font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint);
}

.hero-media { position: relative; }
.hero-media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: calc(var(--r-lg) - 1px);
  /* Warm daylight photography sitting on a black field needs cooling to
     belong to the palette — not a new colour, just a knock-back. */
  filter: saturate(0.72) contrast(1.06) brightness(0.78);
}
.hero-media-tag {
  position: absolute; left: var(--s-md); bottom: var(--s-md);
  display: inline-flex; align-items: center; gap: var(--s-sm);
  padding: var(--s-sm) var(--gap-md);
  border-radius: var(--r-md);
  background: rgba(0,0,0,0.66);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-hair);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.pulse-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(69,208,232,0.7);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(69,208,232,0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(69,208,232,0); }
  100% { box-shadow: 0 0 0 0 rgba(69,208,232,0); }
}

/* ==========================================================================
   GRIDS
   ========================================================================== */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }

.icon-box {
  width: 44px; height: 44px; border-radius: var(--r-md);
  border: 1px solid var(--border-hair);
  background: var(--accent-dim);
  display: grid; place-items: center; color: var(--accent);
  margin-bottom: var(--s-lg);
}
.icon-box svg { width: 22px; height: 22px; }

.panel h3 { margin-bottom: var(--s-sm); }
.panel p { font-size: 16px; line-height: 26px; }

/* Service rows */
.svc { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--gap-lg); align-items: center; }
.svc-num {
  font-size: 12px; letter-spacing: 0.14em; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.svc-body h3 { margin-bottom: 6px; }
.svc-body p { font-size: 16px; line-height: 26px; margin: 0; }

/* Process steps */
.step-n {
  font-size: 40px; font-weight: 300; letter-spacing: -0.04em;
  color: var(--accent); line-height: 1; margin-bottom: var(--s-md);
  font-variant-numeric: tabular-nums;
}

/* Areas */
.area-chips { display: flex; flex-wrap: wrap; gap: var(--gap); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-sm);
  padding: 10px var(--gap-md);
  border: 1px solid var(--border-hair); border-radius: var(--r-md);
  font-size: var(--label-md-size); font-weight: 500; color: var(--text-muted);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--text-primary); }
.chip svg { width: 14px; height: 14px; color: var(--accent); }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }
.gallery figure { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--border-hair); }
.gallery img {
  width: 100%; height: 100%; min-height: 100%; object-fit: cover; aspect-ratio: 1;
  filter: saturate(0.6) brightness(0.66) contrast(1.08);
  transition: filter var(--dur-slow) var(--ease);
}
.gallery figure:hover img { filter: saturate(0.9) brightness(0.92) contrast(1.02); }
.gallery .tall { grid-row: span 2; }
.gallery .tall img { aspect-ratio: 1 / 2.06; }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--border-hair); }
.faq-q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap-lg);
  padding: var(--s-lg) 0; text-align: left;
  font-family: var(--font); font-size: 17px; font-weight: 500; line-height: 26px;
  letter-spacing: -0.01em; color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease);
  min-height: 44px;
}
.faq-q:hover { color: var(--accent); }
.faq-icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--accent); transition: transform var(--dur-fast) var(--ease); }
.faq-item[data-open="true"] .faq-icon { transform: rotate(45deg); }
.faq-a { overflow: hidden; height: 0; transition: height var(--dur-fast) var(--ease); }
.faq-a-inner { padding-bottom: var(--s-lg); }
.faq-a p { font-size: 16px; line-height: 26px; }

/* ==========================================================================
   CONTACT / FORM
   ========================================================================== */

.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s-3xl); align-items: start; }
.contact-lines { display: grid; gap: var(--s-lg); margin-top: var(--s-xl); }
.contact-line { display: flex; gap: var(--gap-md); align-items: flex-start; }
.contact-line .icon-box { margin-bottom: 0; }
.contact-k { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.contact-v { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: var(--text-primary); display: block; margin-top: 2px; }
a.contact-v:hover { color: var(--accent); }

.form-row { display: grid; gap: var(--s-sm); margin-bottom: var(--gap-lg); }
.form-row label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.input {
  width: 100%; font-family: var(--font); font-size: 16px; line-height: 24px;
  color: var(--text-primary);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-hair);
  border-radius: var(--r-md);
  padding: 13px var(--gap-md);
  min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.input::placeholder { color: rgba(241,245,249,0.5); }
.input:hover { border-color: var(--border-soft); }
/* A 1px border change is too weak to serve as the only focus cue, so the
   accent ring from :focus-visible is kept rather than suppressed. */
.input:focus { border-color: var(--accent); background: rgba(255,255,255,0.05); }
.input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
textarea.input { resize: vertical; min-height: 116px; }
select.input { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--gap-md) center; padding-right: 44px;
}
.form-note { font-size: 13px; line-height: 20px; color: var(--text-faint); margin-top: var(--gap-md); }
.form-status { font-size: 14px; line-height: 22px; margin-top: var(--gap-md); min-height: 22px; }
.form-status.is-ok { color: var(--accent); }
.form-status.is-error { color: #F0A38A; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer { padding: var(--s-3xl) 0 var(--s-2xl); border-top: 1px solid var(--border-hair); position: relative; z-index: var(--z-base); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-2xl); }
.footer h4 { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; margin-bottom: var(--gap-md); }
.footer ul { list-style: none; display: grid; gap: 10px; }
.footer li a { font-size: 15px; color: var(--text-muted); transition: color var(--dur-fast) var(--ease); }
.footer li a:hover { color: var(--accent); }
.footer-base {
  margin-top: var(--s-2xl); padding-top: var(--s-lg); border-top: 1px solid var(--border-hair);
  display: flex; justify-content: space-between; gap: var(--gap-lg); flex-wrap: wrap;
  font-size: 13px; color: var(--text-faint);
}

/* ==========================================================================
   SCROLL REVEAL
   Elements start displaced and are released by an IntersectionObserver.
   The no-JS and reduced-motion paths below both un-hide them.
   ========================================================================== */

.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  :root { --section-padding: 56px; --s-3xl: 64px; }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-2xl); }
  .hero { min-height: auto; padding: 128px 0 var(--s-3xl); }
  .hero-media img { aspect-ratio: 16 / 10; }
  .contact-grid { grid-template-columns: 1fr; gap: var(--s-2xl); }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery .tall { grid-row: span 1; }
  .gallery .tall img { aspect-ratio: 1; }
  .nav-links { display: none; }
  .nav-toggle { display: grid; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  :root { --section-padding: 48px; --s-3xl: 56px; }
  .shell { padding: 0 var(--s-lg); }
  .nav-inner { padding: 10px var(--gap-md); }
  .brand-sub { display: none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero-facts { grid-template-columns: 1fr; gap: 0; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .svc { grid-template-columns: 1fr; gap: var(--gap-md); }
  .svc-num { order: -1; }
  .svc .btn-link { justify-self: start; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-xl); }
  .footer-base { flex-direction: column; gap: var(--s-sm); }
  .gallery { grid-template-columns: 1fr 1fr; gap: var(--gap); }
}

/* Mobile drawer */
@media (max-width: 1024px) {
  .nav-drawer {
    display: block;
    position: fixed; inset: 0; z-index: var(--z-overlay);
    background: rgba(0,0,0,0.96);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    padding: 96px var(--s-lg) var(--s-xl);
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-fast) var(--ease), visibility var(--dur-fast) var(--ease);
  }
  .nav-drawer[data-open="true"] { opacity: 1; visibility: visible; }
  .nav-drawer nav { display: grid; gap: var(--s-sm); }
  .nav-drawer nav a {
    font-size: 26px; font-weight: 300; letter-spacing: -0.03em;
    padding: var(--gap-md) 0; border-bottom: 1px solid var(--border-hair);
    color: var(--text-primary);
    transition: color var(--dur-fast) var(--ease);
  }
  .nav-drawer nav a:hover { color: var(--accent); }
  .nav-drawer .drawer-actions { display: grid; gap: var(--gap-md); margin-top: var(--s-xl); }
  .nav-drawer .btn { width: 100%; }
  .drawer-close {
    position: absolute; top: var(--s-lg); right: var(--s-lg);
    width: 44px; height: 44px; display: grid; place-items: center;
    background: none; border: 1px solid var(--border-hair); border-radius: var(--r-md);
    color: var(--text-primary); cursor: pointer;
  }
  .drawer-close svg { width: 20px; height: 20px; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

/* Print — a mechanic's customer may well print the contact details */
@media print {
  .field-wrap, .field-veil, .nav, .nav-drawer, .gallery { display: none !important; }
  body { background: #fff; color: #000; }
  p, .lead { color: #222; }
  section { padding: 16px 0; }
}

/* ==========================================================================
   TOUCH TARGETS
   Everything tappable clears 44x44. The contact links matter most: on a phone
   the number and the text link are the whole point of the page.
   ========================================================================== */

a.contact-v {
  display: inline-flex; align-items: center;
  min-height: 44px;
}

.footer li a {
  display: inline-flex; align-items: center;
  min-height: 44px;
}
.footer ul { gap: 0; }

.brand { min-height: 44px; }

.chip { min-height: 44px; }

/* Nav links keep their tight visual rhythm but gain a full-height hit area */
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }

/* ==========================================================================
   BRAND LOCKUP
   A dark-mode knockout of the supplied logo: the navy is reversed to white so
   it reads on black, the brand orange is kept, and the white background is
   gone. No plate, no floating white rectangle — it sits directly on the page
   the way a reversed logo should.
   ========================================================================== */

.brand-lockup {
  display: inline-flex; align-items: center;
  min-height: 44px;
  transition: opacity var(--dur-fast) var(--ease);
}
/* (mark sizing lives on .brand-mark-img) */
.brand-lockup:hover { opacity: 0.82; }



/* ==========================================================================
   PAGE HERO (sub-pages)
   ========================================================================== */

.page-hero { padding: 148px 0 var(--s-3xl); }
.page-hero .display { max-width: 18ch; }
.page-hero .lead { margin-top: var(--s-lg); }

.crumb {
  display: inline-flex; align-items: center; gap: var(--s-sm);
  font-size: 13px; color: var(--text-faint); margin-bottom: var(--s-md);
}
.crumb a { color: var(--text-muted); min-height: 44px; display: inline-flex; align-items: center; }
.crumb a:hover { color: var(--accent); }

/* ==========================================================================
   SERVICE AREA MAP
   Loads with the page and re-centres when a town is picked.
   ========================================================================== */

.map-layout { display: grid; grid-template-columns: 300px 1fr; gap: var(--gap-xl); align-items: start; }

.area-list { display: grid; gap: var(--s-sm); }
.area-btn {
  display: flex; align-items: center; gap: var(--gap);
  width: 100%; min-height: 44px;
  padding: 12px var(--gap-md);
  background: var(--panel);
  border: 1px solid var(--border-hair);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-family: var(--font); font-size: var(--label-md-size); font-weight: 500;
  text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.area-btn:hover { background: var(--panel-hover); border-color: var(--border-soft); color: var(--text-primary); }
.area-btn[aria-current="true"] {
  border-color: var(--accent);
  color: var(--text-primary);
  background: var(--accent-dim);
}
.area-btn .pin { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); }
.area-btn .base {
  margin-left: auto; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent);
}

.map-wrap {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-hair);
  background: #05070B;
  aspect-ratio: 16 / 11;
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

.map-consent {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  gap: var(--gap-md); padding: var(--s-xl); text-align: center;
  background:
    radial-gradient(circle, rgba(255,255,255,0.14) 1px, transparent 1px) 0 0 / 26px 26px,
    #05070B;
}
.map-consent p { font-size: 14px; line-height: 22px; color: var(--text-muted); max-width: 44ch; }
.map-consent .map-note { font-size: 12px; color: var(--text-faint); }

/* ==========================================================================
   MOBILE NAV — "Book now" was crammed against the logo and burger on a phone
   ========================================================================== */

@media (max-width: 560px) {
  .nav-inner { gap: var(--s-sm); padding: 8px 10px; }
  /* Kept at the 44px minimum — measuring at 375px showed ~130px of slack, so
     there was never a need to shrink these below a full tap target. */
  .brand-lockup { min-height: 44px; }


  /* Collapse the label to "Book" so the control keeps a real hit area
     instead of squeezing to a sliver between the logo and the burger. */
  .nav-cta .btn { padding: 11px 14px; font-size: 12px; gap: 6px; }
  .nav-cta .btn .btn-long { display: none; }
  .nav-toggle { width: 44px; height: 44px; }
}

@media (max-width: 340px) {
  /* Only on the very narrowest phones is there genuinely no room for three
     controls. Above this the compact "Book" label fits with room to spare, and
     hiding the primary CTA on a common iPhone width would cost bookings. */
  .nav-cta { display: none; }
}

@media (max-width: 900px) {
  .map-layout { grid-template-columns: 1fr; }
  .area-list { grid-template-columns: repeat(2, 1fr); }
  .map-wrap { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .area-list { grid-template-columns: 1fr; }
  .map-wrap { aspect-ratio: 1 / 1; }
}

/* ==========================================================================
   CTA BAND (shared page footer call to action)
   ========================================================================== */

.cta-band { border-top: 1px solid var(--border-hair); }
.cta-band h2 { max-width: 18ch; margin-inline: auto; }
.cta-band p { margin-inline: auto; }

/* ==========================================================================
   WORK GALLERY — captioned, since "results of work" is its own page now
   ========================================================================== */

.work-gallery { grid-template-columns: repeat(3, 1fr); }
.work-gallery figure {
  position: relative;
  background: var(--panel);
}
.work-gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; gap: 4px;
  padding: var(--s-lg) var(--gap-md) var(--gap-md);
  font-size: 14px; line-height: 20px; color: var(--text-primary);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.86) 62%);
}
.work-tag {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}

@media (max-width: 900px) { .work-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .work-gallery { grid-template-columns: 1fr; }
  .work-gallery .tall { grid-row: span 1; }
  .work-gallery .tall img { aspect-ratio: 4 / 3; }
}

/* Panels used as links shouldn't inherit the underline-free anchor reset alone */
a.panel h3 { transition: color var(--dur-fast) var(--ease); }
a.panel:hover h3 { color: var(--accent); }

/* The nav CTA splits its label so it can shorten to "Book" on a phone. It has
   no icon, so the flex gap would otherwise open a space mid-word. */
.nav-cta .btn { gap: 0; }

/* ==========================================================================
   LIVE COLOUR CYCLE
   The sample cycles its mark through mint -> lime -> cyan on a 15s loop. The
   same three-stop cycle drives the accent details here, so the page feels
   alive without anything moving. Paused under prefers-reduced-motion.
   ========================================================================== */

@keyframes accentCycle {
  0%, 100% { color: var(--primary); }
  50%      { color: var(--accent-2); }
  75%      { color: var(--accent-3); }
}
@keyframes accentCycleBg {
  0%, 100% { background-color: var(--primary); }
  50%      { background-color: var(--accent-2); }
  75%      { background-color: var(--accent-3); }
}
@keyframes accentCycleBorder {
  0%, 100% { border-color: var(--accent-2); }
  33%      { border-color: var(--primary); }
  66%      { border-color: var(--accent-3); }
}

.eyebrow,
.display em,
.step-n,
.work-tag,
.icon-box { animation: accentCycle 15s ease-in-out infinite; }

.eyebrow::before { animation: accentCycleBg 15s ease-in-out infinite; }

/* The dot needs BOTH: the expanding glow ring and the colour cycle. Listing
   only one in this shorthand silently dropped the pulse. */
.pulse-dot {
  animation: pulse 2.4s var(--ease) infinite,
             accentCycleBg 15s ease-in-out infinite;
}

/* The reference's primary button is a plain white pill, not a gradient — the
   gradient is reserved for the one accent word in the headline. */
.btn--primary {
  background: var(--surface);
  color: var(--text-secondary);
  border: 0;
}
.btn--primary:hover {
  background: #FFFFFF;
  box-shadow: 0 0 32px 0 rgba(255, 255, 255, 0.20);
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow, .display em, .step-n, .work-tag, .icon-box,
  .eyebrow::before, .pulse-dot { animation: none; }
}

/* ==========================================================================
   CONTACT DETAILS — formal, consistent typography
   The phone number previously sat at a different size and weight to its label,
   which read as a mismatched font. Label and value now share one scale, with
   normal (not tabular) figures so the number looks like running text, not data.
   ========================================================================== */

.contact-lines { gap: var(--gap-lg); }

.contact-line {
  align-items: center;
  padding: var(--gap-md) 0;
  border-bottom: 1px solid var(--border-hair);
}
.contact-line:last-child { border-bottom: 0; }

.contact-k {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.contact-v {
  display: block;
  margin-top: 3px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: normal;
  color: var(--text-primary);
}
a.contact-v { min-height: 0; }
a.contact-v:hover { color: var(--accent); }

/* Step numbers read as headings, not as data readouts */
.step-n { font-variant-numeric: normal; }

/* ==========================================================================
   REVIEWS
   ========================================================================== */

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

.rating-summary {
  display: flex; align-items: center; gap: var(--s-xl);
  padding: var(--s-xl);
}
.rating-score { display: flex; align-items: center; gap: var(--gap-md); }
.rating-num {
  font-size: 44px; font-weight: 300; line-height: 1;
  letter-spacing: -0.04em; color: var(--text-primary);
}
.stars { color: var(--primary); font-size: 18px; letter-spacing: 2px; }
.rating-label {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint); margin: 0;
}
.rating-count { font-size: 15px; color: var(--text-muted); margin: 4px 0 0; }

.review-card { display: flex; flex-direction: column; gap: var(--gap-md); }
.review-head { display: flex; align-items: center; gap: var(--gap); }
.review-rating { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.review-text {
  font-size: 17px; line-height: 27px; color: var(--text-primary);
  margin: 0; max-width: none;
}
.review-text--none { color: var(--text-faint); font-style: italic; font-size: 15px; }
.review-meta {
  display: flex; align-items: baseline; gap: var(--gap);
  margin-top: auto; padding-top: var(--gap-md);
  border-top: 1px solid var(--border-hair);
}
.review-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.review-when { font-size: 13px; color: var(--text-faint); }

@media (max-width: 700px) {
  .rating-summary { flex-direction: column; align-items: flex-start; gap: var(--gap-md); }
}

/* ==========================================================================
   SERVICES DETAIL PAGE
   ========================================================================== */

.svc-jumps {
  display: flex; flex-wrap: wrap; gap: var(--s-sm);
  margin-top: var(--s-xl);
}
.svc-jump {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px var(--gap-md);
  border: 1px solid var(--border-hair); border-radius: var(--r-md);
  font-size: var(--label-md-size); font-weight: 500; color: var(--text-muted);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.svc-jump:hover { border-color: var(--accent); color: var(--text-primary); }

.svc-block {
  padding: var(--s-2xl) 0;
  border-top: 1px solid var(--border-hair);
  scroll-margin-top: 100px;
}
.svc-block:first-of-type { border-top: 0; }

.svc-block-head { display: flex; align-items: flex-start; gap: var(--gap-lg); margin-bottom: var(--s-lg); }
.svc-block-head .icon-box { margin-bottom: 0; flex-shrink: 0; }
.svc-index {
  display: block; font-size: 12px; letter-spacing: 0.16em;
  color: var(--text-faint); margin-bottom: 6px;
}
.svc-block h2 { font-size: clamp(26px, 3.2vw, 38px); }

.svc-block-body { display: grid; grid-template-columns: 1fr 0.85fr; gap: var(--s-3xl); align-items: start; }
.svc-when { font-size: 16px; line-height: 26px; margin-top: var(--gap-lg); }
.svc-when strong { color: var(--text-primary); font-weight: 600; }

.svc-included {
  background: var(--panel);
  border: 1px solid var(--border-hair);
  border-radius: var(--r-lg);
  padding: var(--s-xl);
}
.svc-included h3 {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 600; margin-bottom: var(--gap-md);
}
.svc-included ul { list-style: none; display: grid; gap: 10px; margin-bottom: var(--s-lg); }
.svc-included li {
  position: relative; padding-left: 24px;
  font-size: 15px; line-height: 23px; color: var(--text-muted);
}
.svc-included li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.svc-book { width: 100%; justify-content: center; }

.panel-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--gap-md);
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--accent);
}
.panel-more svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .svc-block-body { grid-template-columns: 1fr; gap: var(--s-xl); }
}

/* ==========================================================================
   NAV LOCKUP — mark + wordmark
   The full logo is a 2.5:1 lockup carrying three lines of type and a tagline;
   below about 40px tall none of that is readable. The nav therefore pairs the
   reversed mark with the wordmark as live text, which stays crisp at any size.
   The complete logo still appears at full size in the footer.
   ========================================================================== */

.brand-lockup { gap: 10px; }
.brand-mark-img { height: 30px; width: auto; flex-shrink: 0; }

.brand-word { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.brand-word-main {
  font-size: 15px; font-weight: 700; letter-spacing: 0.10em;
  line-height: 1.1; color: var(--text-primary);
}
.brand-word-sub {
  font-size: 9px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint); line-height: 1.3;
  margin-top: 2px;
}

@media (max-width: 560px) {
  .brand-mark-img { height: 26px; }
  .brand-word-main { font-size: 13px; letter-spacing: 0.08em; }
  .brand-word-sub { display: none; }
}

/* ==========================================================================
   FULL-BLEED HERO (no photograph)
   The headline sits directly on the WebGL field, as in the reference.
   ========================================================================== */

.hero--field {
  min-height: 92svh;
  display: flex;
  align-items: center;
  padding: 180px 0 var(--s-3xl);
}
.hero--field .hero-copy { max-width: 62ch; }
.hero--field .display { max-width: 15ch; }
.hero--field .lead { max-width: 54ch; }

.hero--field .hero-actions {
  align-items: center;
  gap: var(--s-xl);
  margin-top: var(--s-2xl);
}

.hero--field .hero-facts {
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--s-3xl);
  max-width: 880px;
}

@media (max-width: 900px) {
  .hero--field { min-height: auto; padding: 148px 0 var(--s-3xl); }
  .hero--field .hero-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .hero--field .hero-facts { grid-template-columns: 1fr; }
  .hero--field .hero-actions { flex-direction: column; align-items: stretch; gap: var(--gap-md); }
  .hero--field .hero-actions .btn { width: 100%; }
  .hero--field .hero-actions .btn-link { justify-content: center; }
}

/* ==========================================================================
   CONTACT BLOCK
   Details rail on the left, enquiry card on the right.
   ========================================================================== */

.contact-rail .contact-lines { gap: 0; }

.contact-line--link { text-decoration: none; }
.contact-line--link:hover .contact-v { color: var(--accent); }
.contact-line--link:hover .icon-box { border-color: var(--accent); }

.contact-note {
  display: block; margin-top: 4px;
  font-size: 13px; line-height: 20px; color: var(--text-faint);
}
.contact-v--email {
  /* long address must not push the rail wide on a phone */
  overflow-wrap: anywhere;
  font-size: 16px;
}

.contact-card { padding: var(--s-2xl); }
.contact-card-head { margin-bottom: var(--s-xl); }
.contact-card-head h2 {
  font-size: 26px; letter-spacing: -0.02em; line-height: 1.2;
  margin-bottom: var(--s-sm);
}
.contact-card-head p { font-size: 15px; line-height: 24px; margin: 0; }

/* Two-up rows collapse to one column when there isn't room */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); }

.req { color: var(--accent); margin-left: 2px; }

.field-hint {
  font-size: 13px; line-height: 19px; color: var(--text-faint);
  margin: 6px 0 0;
}
.field-error {
  font-size: 13px; line-height: 19px; color: #F5A3A3;
  margin: 6px 0 0;
  display: flex; align-items: center; gap: 6px;
}
/* An author `display` beats the UA stylesheet's [hidden] rule, so the
   attribute has to be honoured explicitly or empty error rows keep their
   icon and spacing. */
.field-error[hidden] { display: none; }
.field-error::before {
  content: ""; flex-shrink: 0;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid currentColor;
  background:
    linear-gradient(currentColor, currentColor) center 3px / 1.5px 5px no-repeat,
    linear-gradient(currentColor, currentColor) center 10px / 1.5px 1.5px no-repeat;
}

.input[aria-invalid="true"] {
  border-color: #F5A3A3;
  background: rgba(245, 163, 163, 0.06);
}
.input[aria-invalid="true"]:focus-visible { outline-color: #F5A3A3; }

.form-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md);
  margin-top: var(--s-lg);
}
.form-actions .btn { width: 100%; }

@media (max-width: 560px) {
  .field-grid { grid-template-columns: 1fr; gap: 0; }
  .form-actions { grid-template-columns: 1fr; }
  .contact-card { padding: var(--s-xl); }
}

/* ==========================================================================
   CONTACT BLOCK (contact-11 layout)
   A bordered 2x2 grid: the two direct contact routes across the top, map and
   enquiry form beneath. Borders are drawn with a single outer rule plus inner
   dividers so nothing doubles up.
   ========================================================================== */

.c11 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border-hair);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.012);
}

.c11-cell { padding: var(--s-2xl); }

/* Inner dividers only, so edges aren't drawn twice */
.c11 > *:nth-child(odd)  { border-right: 1px solid var(--border-hair); }
.c11 > *:nth-child(n+3)  { border-top: 1px solid var(--border-hair); }

/* --- top row: write us / call us --- */

.c11-contact {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--gap-lg);
  min-height: 0;
  transition: background var(--dur-fast) var(--ease);
}
.c11-contact:hover { background: rgba(255, 255, 255, 0.03); }

.c11-stack { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.c11-label { font-size: 15px; color: var(--text-muted); }
.c11-value {
  font-size: 24px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--text-primary); line-height: 1.2;
}
.c11-value--email { overflow-wrap: anywhere; }
.c11-contact:hover .c11-value { color: var(--accent); }

.c11-icon {
  flex-shrink: 0;
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--surface); color: var(--text-secondary);
  display: grid; place-items: center;
  transition: transform var(--dur-fast) var(--ease);
}
.c11-icon svg { width: 20px; height: 20px; }

/* --- bottom left: map --- */

.c11-heading, .c11-intro {
  font-size: clamp(21px, 2.1vw, 27px);
  font-weight: 400; letter-spacing: -0.02em; line-height: 1.3;
  margin-bottom: var(--s-lg);
}
.c11-intro { max-width: 30ch; color: var(--text-primary); }

.c11-map {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border-hair);
  aspect-ratio: 1 / 1;
  background: #0A0C10;
}
.c11-map iframe {
  width: 100%; height: 100%; border: 0; display: block;
  /* The reference map is desaturated so it sits inside a dark page instead of
     glaring out of it. */
  filter: grayscale(1) invert(0.92) contrast(0.86) brightness(0.96);
}

.c11-place {
  position: absolute; top: var(--gap-md); left: var(--gap-md);
  max-width: min(280px, calc(100% - var(--s-xl)));
  padding: var(--gap-md);
  border-radius: var(--r-md);
  background: rgba(8, 10, 14, 0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-soft);
}
.c11-place-head { display: flex; align-items: flex-start; gap: var(--gap); }
.c11-place-name {
  font-size: 14px; font-weight: 600; line-height: 19px;
  color: var(--text-primary);
}
.c11-place-out {
  flex-shrink: 0; width: 28px; height: 28px; margin: -4px -4px 0 auto;
  display: grid; place-items: center; border-radius: 8px;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.c11-place-out svg { width: 15px; height: 15px; }
.c11-place-out:hover { color: var(--accent); background: rgba(255,255,255,0.06); }
.c11-place-addr { font-size: 12px; line-height: 17px; color: var(--text-faint); margin: 6px 0 0; }
.c11-place-rating { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12px; }
.c11-place-score { font-weight: 600; color: var(--text-primary); }
.c11-place-rating .stars { font-size: 12px; letter-spacing: 1px; }
.c11-place-count { color: var(--text-faint); }

.c11-map-note { font-size: 13px; line-height: 20px; color: var(--text-faint); margin-top: var(--gap-md); }

/* --- bottom right: form --- */

.c11-form .form-row { margin-bottom: var(--gap-lg); }
.c11-form label {
  display: block; margin-bottom: var(--s-sm);
  font-size: 15px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--text-primary);
}
.c11-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); }

.c11-form .input {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.09);
  padding: 14px var(--gap-md);
}
.c11-form .input::placeholder { color: rgba(241, 245, 249, 0.42); }

.c11-consent {
  display: flex; align-items: flex-start; gap: var(--gap);
  margin: var(--s-lg) 0 var(--gap-md);
}
.c11-consent label {
  font-size: 14px; line-height: 21px; color: var(--text-muted);
  font-weight: 400; margin: 0;
}
.c11-check {
  flex-shrink: 0; appearance: none;
  width: 20px; height: 20px; margin-top: 1px;
  border: 1px solid var(--border-soft); border-radius: 6px;
  background: rgba(255,255,255,0.04); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.c11-check:hover { border-color: var(--accent); }
.c11-check:checked {
  background: var(--accent-gradient); border-color: transparent;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E"),
    var(--accent-gradient);
  background-size: 13px 13px, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.c11-check[aria-invalid="true"] { border-color: #F5A3A3; }

.c11-send { width: 100%; justify-content: center; padding: 16px var(--s-lg); }
.c11-alt { display: flex; justify-content: center; margin-top: var(--gap-md); }
.c11-alt .btn-link { background: none; border: 0; cursor: pointer; font-family: var(--font); }

/* --- responsive --- */

@media (max-width: 1000px) {
  .c11 { grid-template-columns: 1fr; }
  /* Single column: every cell divides from the one above, none to the right */
  .c11 > * { border-right: 0 !important; }
  .c11 > *:not(:first-child) { border-top: 1px solid var(--border-hair); }
  .c11-map { aspect-ratio: 4 / 3; }
}

@media (max-width: 560px) {
  .c11-cell { padding: var(--s-xl); }
  .c11-value { font-size: 20px; }
  .c11-row2 { grid-template-columns: 1fr; gap: 0; }
  .c11-map { aspect-ratio: 1 / 1; }
}

/* ==========================================================================
   FOOTER DENSITY
   Every footer link was carrying a 44px tap target, which on a desktop pointer
   just reads as a very tall, very empty footer. Touch devices keep the full
   target; fine pointers get a compact rhythm.
   ========================================================================== */

.footer { padding: var(--s-2xl) 0 var(--s-xl); }
.footer-grid { gap: var(--s-xl) var(--s-2xl); }

.footer h4 { margin-bottom: 10px; }
.footer p { font-size: 14px; line-height: 22px; }

@media (hover: hover) and (pointer: fine) {
  /* Footer links inherit the body's 28px line-height, which is generous for a
     link list. Tighten it here only; touch devices keep the full tap target. */
  .footer li a { min-height: 0; padding: 2px 0; line-height: 20px; font-size: 14px; }
  .footer ul { gap: 4px; }
  .footer li { margin-bottom: 0; }
}

.footer-base { margin-top: var(--s-xl); padding-top: var(--gap-md); font-size: 12px; }

/* ==========================================================================
   HERO, MATCHED TO THE REFERENCE COMPOSITION
   The reference hero is deliberately empty: one quiet line of intro, one very
   large headline, two lines of body, two actions, and a lot of black. Anything
   else competes with the headline.
   ========================================================================== */

/* The intro line is a plain sentence, not an uppercase tracked-out label. */
.hero--field .eyebrow {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  margin-bottom: var(--s-2xl);
  animation: none;
}
.hero--field .eyebrow::before { content: none; }

.hero--field .hero-copy { max-width: 1080px; }
.hero--field .display { max-width: 13ch; margin-bottom: var(--s-2xl); }

/* Body copy sits heavier and larger than elsewhere on the site */
.hero--field .lead {
  font-size: 21px;
  line-height: 32px;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 46ch;
}

.hero--field .hero-actions { gap: var(--s-2xl); margin-top: var(--s-3xl); }
.hero--field .hero-actions .btn--primary { padding: 20px 40px; font-size: 15px; }
.hero--field .hero-actions .btn-link { font-size: 15px; gap: var(--gap-md); }
.hero--field .hero-actions .btn-link svg { width: 20px; height: 20px; }

/* Closing rule, as in the reference */
.hero--field::after {
  content: "";
  position: absolute; left: var(--s-xl); right: var(--s-xl); bottom: 0;
  height: 1px; background: var(--border-hair);
}

/* Nav CTA is an outlined pill; the filled white button belongs to the hero so
   there's a single dominant action on the page. */
.nav-cta .btn--primary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-soft);
  box-shadow: none;
}
.nav-cta .btn--primary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: none;
}

@media (max-width: 900px) {
  .hero--field .eyebrow { font-size: 16px; margin-bottom: var(--s-xl); }
  .hero--field .lead { font-size: 18px; line-height: 28px; }
  .hero--field .display { max-width: 100%; }
  .hero--field .hero-actions { gap: var(--s-lg); margin-top: var(--s-2xl); }
}

/* Facts sit in their own strip beneath the hero rather than inside it */
.fact-strip { padding: var(--s-2xl) 0; }
.fact-strip .hero-facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-md); margin: 0;
}
@media (max-width: 900px) { .fact-strip .hero-facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fact-strip .hero-facts { grid-template-columns: 1fr; } }

/* ==========================================================================
   TEXT LEGIBILITY OVER THE FIELD
   Even within the hero, copy can cross the glow. A soft scrim sits directly
   behind the hero text (not over the whole field), so the effect stays bright
   at the edges while the words keep their contrast.
   ========================================================================== */

.hero--field .hero-copy { position: relative; }
.hero--field .hero-copy::before {
  content: "";
  position: absolute;
  inset: -6% -12% -10% -12%;
  z-index: -1;
  background: radial-gradient(
    ellipse 78% 74% at 32% 50%,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.72) 42%,
    rgba(0, 0, 0, 0) 78%
  );
  pointer-events: none;
}

/* Phone: copy spans the full width, so the scrim does too */
@media (max-width: 900px) {
  .hero--field .hero-copy::before {
    inset: -4% -8%;
    background: radial-gradient(
      ellipse 92% 68% at 50% 50%,
      rgba(0, 0, 0, 0.90) 0%,
      rgba(0, 0, 0, 0.78) 55%,
      rgba(0, 0, 0, 0) 88%
    );
  }
}

/* About page list */
.about-list { list-style: none; display: grid; gap: 12px; margin-top: var(--gap-md); }
.about-list li {
  position: relative; padding-left: 26px;
  font-size: 16px; line-height: 25px; color: var(--text-muted);
}
.about-list li::before {
  content: ""; position: absolute; left: 4px; top: 10px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.text-link { color: var(--accent); }
.text-link:hover { text-decoration: underline; }

/* ==========================================================================
   FIELD HEIGHT PER PAGE TYPE
   The home hero is close to full height; sub-page heroes are short. Sizing the
   field to the hero keeps content off the glow instead of relying on one
   blanket height that only suits the home page.
   ========================================================================== */

.page-home .field-wrap { height: 100svh; }

.page-sub .field-wrap {
  height: 460px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 48%, transparent 100%);
}

/* Sub-page heroes get the same scrim treatment as the home hero */
.page-hero .shell { position: relative; }
.page-hero .shell::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  background: radial-gradient(
    ellipse 76% 80% at 30% 50%,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.70) 46%,
    rgba(0, 0, 0, 0) 80%
  );
  pointer-events: none;
}

@media (max-width: 900px) {
  .page-sub .field-wrap { height: 380px; }
  .page-hero .shell::before {
    background: radial-gradient(
      ellipse 94% 74% at 50% 50%,
      rgba(0, 0, 0, 0.90) 0%,
      rgba(0, 0, 0, 0.78) 55%,
      rgba(0, 0, 0, 0) 90%
    );
  }
}

/* ==========================================================================
   CONTACT BLOCK: BALANCE THE MAP AGAINST THE FORM
   The form cell is naturally taller than a square map, which left a long
   stretch of empty cell beside it. The map now fills whatever height its
   neighbour needs, and sticks while the form scrolls past.
   ========================================================================== */

.c11-map-cell { display: flex; flex-direction: column; }
.c11-map-cell .c11-map {
  aspect-ratio: auto;
  flex: 1 1 auto;
  min-height: 420px;
}

/* Sticky and stretch are mutually exclusive here: sticky needs align-self:start,
   which stops the cell filling the row and leaves a tall empty bordered box
   beside the form. Matching the form's height is the more useful of the two. */

@media (max-width: 1000px) {
  .c11-map-cell .c11-map { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .c11-map-cell .c11-map { aspect-ratio: 1 / 1; }
}

/* Home "where we work" map: same treatment as the contact block */
#areas .map-layout { align-items: stretch; }
#areas .c11-map { aspect-ratio: auto; min-height: 100%; }
@media (max-width: 900px) {
  #areas .c11-map { aspect-ratio: 4 / 3; min-height: 0; }
}

/* Honeypot: off-screen for people, still fillable by bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; opacity: 0;
  pointer-events: none;
}

.sms-form.is-sending .c11-send { opacity: 0.7; cursor: progress; }
.c11-send[disabled] { pointer-events: none; }

/* ==========================================================================
   CONTACT BLOCK: FIT THE VIEWPORT
   The block was taller than the screen, so the map scrolled out of view while
   you filled the form. Tighter rhythm inside the card keeps both on screen.
   ========================================================================== */

@media (min-width: 1001px) {
  .c11-cell { padding: var(--s-xl); }
  .c11-contact { padding-top: var(--gap-lg); padding-bottom: var(--gap-lg); }
  .c11-value { font-size: 20px; }

  .c11-card-tight .c11-form .form-row { margin-bottom: var(--gap-md); }
  .c11-card-tight .c11-form label { margin-bottom: 5px; font-size: 13px; }
  .c11-card-tight .c11-form .input { padding: 10px var(--gap-md); font-size: 15px; }
  .c11-card-tight .c11-row2 { gap: var(--gap-md); }
  .c11-card-tight .contact-card-head { margin-bottom: var(--gap-lg); }
  .c11-card-tight .contact-card-head h2 { font-size: 22px; }
  .c11-card-tight .contact-card-head p { font-size: 14px; }
  .c11-card-tight .c11-consent { margin: var(--gap-md) 0 var(--gap); }
  .c11-card-tight .c11-consent label { font-size: 13px; line-height: 19px; }
  .c11-card-tight .c11-send { padding: 13px var(--s-lg); }
  .c11-card-tight .form-note { font-size: 13px; margin-top: 10px; }
  .c11-card-tight .form-status { margin-top: 10px; font-size: 13px; }
  .c11-card-tight textarea.input { min-height: 74px; }
}

/* Contact is a utility page: a compact header leaves room for the block itself
   so the form and the map are on screen together. */
@media (min-width: 1001px) {
  .page-hero--compact { padding: 116px 0 var(--s-lg); }
  .page-hero--compact .display { font-size: 46px; line-height: 1.05; }
  .page-hero--compact .crumb { margin-bottom: 6px; }
  .page-sub .field-wrap { height: 340px; }
}

@media (min-width: 1001px) {
  /* Final squeeze so the whole block clears a laptop viewport */
  .c11-contact { padding-top: var(--gap-md); padding-bottom: var(--gap-md); }
  .c11-contact .c11-stack { gap: 6px; }
  .c11-contact .c11-label { font-size: 13px; }
  .c11-value { font-size: 18px; }
  .c11-icon { width: 40px; height: 40px; }

  .c11-card-tight .c11-form .form-row { margin-bottom: 12px; }
  .c11-card-tight textarea.input { min-height: 62px; }
  .c11-card-tight .contact-card-head { margin-bottom: var(--gap-md); }
  .c11-card-tight .contact-card-head h2 { font-size: 20px; margin-bottom: 4px; }
  .c11-cell { padding: var(--gap-lg) var(--s-xl); }
  .c11-map-cell .c11-heading { font-size: 20px; margin-bottom: var(--gap-md); }
  .c11-map-note { font-size: 12px; margin-top: 10px; }
}

/* ==========================================================================
   HOME: INTRO BAND
   Photographs doing the explaining. The hero stays clean; this is where a
   visitor finds out what the business actually is.
   ========================================================================== */

.intro-band { padding-top: var(--s-2xl); }
.intro-grid {
  display: grid; grid-template-columns: 0.85fr 1fr;
  gap: var(--s-3xl); align-items: center;
}

.intro-media { position: relative; }
.intro-media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: calc(var(--r-lg) - 1px);
  filter: saturate(0.78) contrast(1.05) brightness(0.82);
}
.intro-tag {
  position: absolute; left: var(--gap-md); bottom: var(--gap-md);
  display: inline-flex; align-items: center; gap: var(--s-sm);
  padding: 9px var(--gap-md); border-radius: var(--r-md);
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-hair);
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}

.intro-points {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-md); margin-top: var(--s-2xl);
}
.intro-point { display: grid; gap: 10px; }
.intro-point img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-md); border: 1px solid var(--border-hair);
  filter: saturate(0.7) brightness(0.74) contrast(1.06);
  transition: filter var(--dur-slow) var(--ease);
}
.intro-point:hover img { filter: saturate(0.95) brightness(0.95) contrast(1.02); }
.intro-point span {
  font-size: 13px; line-height: 18px; color: var(--text-faint);
}

/* Service teaser cards with a photo */
.panel--shot { padding: 0; overflow: hidden; display: block; }
.panel--shot .shot { display: block; }
.panel--shot .shot img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  filter: saturate(0.88) brightness(0.92) contrast(1.02);
  transition: filter var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.panel--shot:hover .shot img { filter: saturate(1) brightness(1.02) contrast(1); }
.panel--shot .shot-body { display: block; padding: var(--s-xl); }
.panel--shot .icon-box { margin-bottom: var(--gap-md); }

/* Recent work strip */
.work-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }
.work-strip figure { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-hair); }
.work-strip img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  filter: saturate(0.7) brightness(0.7) contrast(1.06);
  transition: filter var(--dur-slow) var(--ease);
}
.work-strip figure:hover img { filter: saturate(0.95) brightness(0.94) contrast(1.02); }
.work-strip figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s-lg) var(--gap-md) 12px;
  font-size: 13px; font-weight: 500; color: var(--text-primary);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 65%);
}

@media (max-width: 1000px) {
  .intro-grid { grid-template-columns: 1fr; gap: var(--s-2xl); }
  .intro-media img { aspect-ratio: 16 / 10; }
  .work-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .intro-points { grid-template-columns: repeat(3, 1fr); gap: var(--s-sm); }
  .intro-point span { font-size: 11px; line-height: 15px; }
  .work-strip { grid-template-columns: 1fr 1fr; gap: var(--s-sm); }
}

/* ==========================================================================
   BRAND MARK
   The mark carries real tonal structure (navy body, silver alloy spokes).
   Flattening it to one white silhouette destroyed that and left a blob at nav
   size, so it is tonally inverted instead: the body goes light, the spokes go
   dark, and the wheel stays recognisable small.
   ========================================================================== */

.brand-mark-img { height: 42px; }
.brand-lockup { gap: 11px; }
.brand-word-main { font-size: 16px; letter-spacing: 0.11em; }

.brand-lockup--footer .brand-mark-img { height: 46px; }
.brand-lockup--footer .brand-word-main { font-size: 19px; }
.brand-lockup--footer .brand-word-sub { font-size: 10px; }

@media (max-width: 560px) {
  .brand-mark-img { height: 32px; }
  .brand-word-main { font-size: 14px; letter-spacing: 0.08em; }
}

/* ==========================================================================
   TRUST STRIP
   Licence, insurance and ABN. Verified details, so they're stated plainly.
   ========================================================================== */

.trust-strip {
  padding: var(--gap-lg) 0;
  border-top: 1px solid var(--border-hair);
  position: relative; z-index: var(--z-base);
}
.trust-strip-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-xl); flex-wrap: wrap;
}
.trust-item { display: inline-flex; align-items: center; gap: var(--s-sm); }
.trust-k {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint);
}
.trust-v {
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--text-primary);
}
.trust-item--badge { gap: var(--gap); }
.trust-item--badge svg { width: 26px; height: 26px; color: var(--accent); flex-shrink: 0; }
.trust-item--badge > span { display: grid; gap: 1px; }

/* A hairline rule either side of the badge, as in the supplied artwork */
.trust-strip-inner::before,
.trust-strip-inner::after { content: none; }

@media (max-width: 760px) {
  .trust-strip-inner { justify-content: flex-start; gap: var(--gap-lg); }
  .trust-item { flex-direction: column; align-items: flex-start; gap: 2px; }
  .trust-item--badge { flex-direction: row; align-items: center; }
}

/* ==========================================================================
   FOOTER PROPORTIONS
   The Site column stacked seven links, so it set the height of the whole row
   while the brand and contact columns sat half empty. Running the links in two
   short columns brings the tallest column down to four rows and the footer
   stops looking stretched.
   ========================================================================== */

@media (min-width: 761px) {
  .footer-grid { grid-template-columns: 1.5fr 1.2fr 1fr; gap: var(--s-2xl); align-items: start; }
  .footer-links { grid-template-columns: 1fr 1fr; column-gap: var(--gap-lg); }
  .footer { padding: var(--s-xl) 0 var(--gap-lg); }
  .footer-base { margin-top: var(--gap-lg); padding-top: 12px; }
  .footer .brand-lockup { margin-bottom: 10px !important; }
  .footer p { margin-bottom: 0; }
}

/* ==========================================================================
   SOCIAL LINKS
   Rendered only for platforms with a real URL configured.
   ========================================================================== */

.social-h { margin-top: var(--gap-lg); }
.social-row { display: flex; gap: var(--s-sm); flex-wrap: wrap; }

.social-link {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border-hair);
  border-radius: var(--r-md);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.social-link svg { width: 19px; height: 19px; }
.social-link:hover {
  color: var(--text-primary);
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   SELECT CHEVRON
   `.c11-form .input` sets `background` (shorthand), which resets
   background-image to none and silently removed the dropdown arrow. This rule
   comes last and sets background-color and background-image separately so the
   two can't clobber each other again.
   ========================================================================== */

select.input,
.c11-form select.input {
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(255, 255, 255, 0.045);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2345D0E8' stroke-width='2.4' 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: 17px 17px;
  padding-right: 44px;
  cursor: pointer;
}
select.input:hover { border-color: var(--border-soft); }
select.input:focus-visible { background-color: rgba(255, 255, 255, 0.06); }

/* ==========================================================================
   FACT STRIP
   The hero already draws a full-width rule at its base, and each fact was
   drawing its own top border on top of that. The result was a solid line
   followed by four disconnected dashes with gaps at the gutters. One rule,
   with vertical dividers between the items, matches the bordered-grid
   language used by the contact block and the trust strip.
   ========================================================================== */

.fact-strip { padding: 0 0 var(--s-2xl); }

.fact-strip .hero-facts {
  gap: 0;
  border-top: 1px solid var(--border-hair);
}

.fact-strip .fact {
  border-top: 0;
  padding: var(--s-lg) var(--gap-lg);
  border-left: 1px solid var(--border-hair);
}
.fact-strip .fact:first-child { border-left: 0; padding-left: 0; }

.fact-strip .fact-k { font-size: 15px; line-height: 21px; }
.fact-strip .fact-v { margin-top: 6px; font-size: 11px; letter-spacing: 0.12em; }

@media (max-width: 900px) {
  /* Two-up: the third and fourth start a new row, so their left edge resets */
  .fact-strip .fact:nth-child(odd) { border-left: 0; padding-left: 0; }
  .fact-strip .fact:nth-child(n+3) { border-top: 1px solid var(--border-hair); }
}
@media (max-width: 560px) {
  .fact-strip .fact { border-left: 0; padding-left: 0; }
  .fact-strip .fact:not(:first-child) { border-top: 1px solid var(--border-hair); }
}

/* ==========================================================================
   PAIRED FIELD ALIGNMENT
   .form-row is a grid, and grid items stretch by default. When a validation
   error appeared under one column, that column grew, the other stretched to
   match, and its label/input were pushed apart to fill the space -- so the two
   inputs fell out of line. Both columns now size to their own content and hang
   from the top.
   ========================================================================== */

.c11-row2 { align-items: start; }
.form-row { align-content: start; }