/* Archivo - 800 (vietnamese) */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/archivo-800-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Archivo - 800 (latin-ext) */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/archivo-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo - 800 (latin) */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/archivo-800-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;
}

/* Archivo - 900 (vietnamese) */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/archivo-900-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Archivo - 900 (latin-ext) */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/archivo-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo - 900 (latin) */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/archivo-900-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;
}

/* Chakra Petch - 600 (thai) */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/chakra-petch-600-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* Chakra Petch - 600 (vietnamese) */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/chakra-petch-600-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Chakra Petch - 600 (latin-ext) */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/chakra-petch-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Chakra Petch - 600 (latin) */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/chakra-petch-600-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;
}

/* Chakra Petch - 700 (thai) */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/chakra-petch-700-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* Chakra Petch - 700 (vietnamese) */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/chakra-petch-700-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Chakra Petch - 700 (latin-ext) */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/chakra-petch-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Chakra Petch - 700 (latin) */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/chakra-petch-700-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;
}

/* Inter - 400 (cyrillic-ext) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Inter - 400 (cyrillic) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Inter - 400 (greek-ext) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

/* Inter - 400 (greek) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* Inter - 400 (vietnamese) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Inter - 400 (latin-ext) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter - 400 (latin) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-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;
}

/* Inter - 500 (cyrillic-ext) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Inter - 500 (cyrillic) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Inter - 500 (greek-ext) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

/* Inter - 500 (greek) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* Inter - 500 (vietnamese) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Inter - 500 (latin-ext) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter - 500 (latin) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-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;
}

/* Inter - 600 (cyrillic-ext) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Inter - 600 (cyrillic) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Inter - 600 (greek-ext) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

/* Inter - 600 (greek) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* Inter - 600 (vietnamese) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Inter - 600 (latin-ext) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter - 600 (latin) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-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;
}


:root {
  /* surfaces, darkest to lightest */
  --void:      #05080b;
  --plate:     #0a0f16;
  --plate-2:   #111a24;
  --plate-3:   #18232f;
  --surface:   #0d141d;   /* alternating section band */
  --surface-2: #16202c;

  /* hairlines */
  --line:   rgba(255,255,255,.09);
  --line-2: rgba(255,255,255,.20);

  /* text */
  --ink:   #eaf0f7;   /* headings and strong text */
  --ink-2: #b8c4d4;   /* body */
  --muted: #8593a6;   /* dim / captions */

  /* caliper blue */
  --blue:      #2f7fd0;
  --blue-hi:   #63aef8;   /* small text and links, higher contrast */
  --blue-btn:  #2266b8;   /* filled button, passes AA with white */
  --blue-deep: #0f4d94;
  --blue-soft: rgba(47,127,208,.14);

  /* brushed steel, straight off the logo lettering */
  --steel-1: #ffffff;
  --steel-2: #dce5f0;
  --steel-3: #8fa0b6;

  --ok:  #3ddc97;
  --bad: #ff5a6e;

  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-tech:    'Chakra Petch', 'Archivo', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --glow:    0 0 28px rgba(47,127,208,.35);
  --glow-lg: 0 0 60px rgba(47,127,208,.28);

  /* the angular corner cut, used on panels and buttons */
  --n: 16px;
  --cut: polygon(var(--n) 0, 100% 0, 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, 0 100%, 0 var(--n));

  --container: 1180px;
  --gutter: 24px;
  --header-h: 74px;
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--void); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--ink-2);
  background: var(--plate);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* fine brushed-metal grain over the whole page, plus a lit corner */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 50% at 85% -5%, rgba(47,127,208,.20), transparent 62%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px);
}
body > * { position: relative; z-index: 1; }

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 .5em;
  font-weight: 800;
}
h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); font-weight: 900; text-transform: uppercase; }
h3 { font-size: 1.14rem; font-weight: 800; letter-spacing: -0.01em; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Chrome lettering. The hard mid-tone band at 50% is the horizon line in the
   logo's letters; the drop-shadow fakes the extrusion under them. */
h1, h2, .chrome {
  background: linear-gradient(180deg,
    #ffffff 0%, #f2f6fb 34%, #b9c8dc 49%, #7f92aa 51%, #d9e3f0 70%, #ffffff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.6))
    drop-shadow(0 0 22px rgba(47,127,208,.22));
}
h1 em, h2 em { font-style: normal; -webkit-text-fill-color: var(--blue-hi); }

/* In Windows High Contrast the gradient behind the letters is dropped but the
   transparent fill is not, which would leave every heading invisible. Hand the
   text back to the system colours. */
@media (forced-colors: active) {
  h1, h2, .chrome, h1 em, h2 em {
    background: none;
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
    filter: none;
  }
}

::selection { background: var(--blue); color: #fff; }

:focus-visible {
  outline: 2px solid var(--blue-hi);
  outline-offset: 3px;
}

/* --------------------------------------------------------------- layout -- */
.container {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--gutter);
}

.section { padding: clamp(58px, 8vw, 106px) 0; position: relative; }
.section--tight { padding: clamp(46px, 6vw, 74px) 0; }

/* The header is sticky, so anything landed on by an anchor link needs to clear
   it. Without this, /services#aircon puts the card's top edge at y=0 and
   the header covers its heading. */
[id] { scroll-margin-top: calc(var(--header-h) + 18px); }

/* alternating band, edged with a lit hairline top and bottom */
.section--surface {
  background:
    repeating-linear-gradient(112deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--surface-2), var(--surface) 55%, var(--surface));
  border-block: 1px solid var(--line);
}
.section--surface::before {
  content: ''; position: absolute; inset-inline: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue) 22%, var(--blue-hi) 50%, var(--blue) 78%, transparent);
  opacity: .5;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--blue-btn); color: #fff; padding: 10px 18px;
  font-weight: 700; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------- eyebrow -- */
/* An eyebrow is a quiet subtitle sitting under its heading, not a second
   headline above it. Muted, no accent rule, no glow: the heading leads and this
   qualifies it. The negative top margin pulls it up against the heading, whose
   own bottom margin is sized for body copy rather than for a label. */
.eyebrow {
  display: block;
  font-family: var(--font-tech);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  margin: -.5rem 0 1.15rem;
}

.section-head { max-width: 660px; margin-bottom: clamp(32px, 4vw, 54px); }
.section-head--center { margin-inline: auto; text-align: center; }

/* Centred introduction block. Deliberately not .section-head: that rule styles
   its own paragraphs, which would override .eyebrow and .lede inside it. */
.intro { max-width: 760px; margin-inline: auto; text-align: center; }
.intro .lede { color: var(--ink-2); }
.section-head p { color: var(--muted); font-size: 1.05rem; margin-top: 6px; }

.lede { font-size: 1.12rem; color: var(--ink-2); }

/* -------------------------------------------------------------- buttons -- */
.btn {
  --btn-n: 10px;
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px;
  font-family: var(--font-tech);
  font-size: .92rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; text-decoration: none;
  cursor: pointer; border: 0;
  background: var(--plate-3); color: var(--ink);
  clip-path: polygon(var(--btn-n) 0, 100% 0, 100% calc(100% - var(--btn-n)), calc(100% - var(--btn-n)) 100%, 0 100%, 0 var(--btn-n));
  transition: transform .16s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* a light sweep across the face on hover, like a reflection moving over metal */
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.30) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.btn:hover::after { transform: translateX(120%); }

/* primary: brushed chrome, exactly like the logo lettering */
.btn--accent {
  background: linear-gradient(180deg, #ffffff 0%, #e8eef7 44%, #b3c2d6 52%, #e3ebf5 62%, #ffffff 100%);
  color: #070b10;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5), var(--glow);
}
.btn--accent:hover { box-shadow: 0 0 0 1px #fff, 0 0 34px rgba(47,127,208,.6); }

/* secondary: lit blue */
.btn--ghost {
  background: rgba(47,127,208,.10);
  color: var(--blue-hi);
  box-shadow: inset 0 0 0 1px rgba(47,127,208,.5);
}
.btn--ghost:hover { background: rgba(47,127,208,.20); color: #fff; box-shadow: inset 0 0 0 1px var(--blue-hi), var(--glow); }

/* on an already-blue or photographic panel */
.btn--light { background: var(--plate); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--light:hover { background: var(--plate-3); box-shadow: inset 0 0 0 1px var(--blue); }

.btn--sm { padding: 11px 18px; font-size: .8rem; --btn-n: 7px; }
.btn--lg { padding: 18px 34px; font-size: .98rem; --btn-n: 12px; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-tech); font-weight: 700; font-size: .86rem;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--blue-hi); text-decoration: none;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .18s ease; }
.link-arrow:hover { color: #fff; }
.link-arrow:hover svg { transform: translateX(5px); }

/* ---------------------------------------------------------- open status -- */
/* Sits beside the logo and says whether the workshop is open right now.
   js/main.js writes the text and unhides it. It starts hidden on purpose: with
   no JavaScript an empty header beats a badge that might say the wrong thing. */
.status {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 7px 13px;
  background: var(--plate-2);
  border: 1px solid var(--line);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  font-family: var(--font-tech);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); white-space: nowrap;
}
/* the bare attribute loses to display:inline-flex above, so restate it */
.status[hidden] { display: none; }

.status__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--muted); }
.status--open { color: var(--ink); }
.status--open .status__dot { background: var(--ok); box-shadow: 0 0 10px rgba(61,220,151,.9); }
.status--appointment .status__dot { background: var(--blue-hi); box-shadow: 0 0 10px rgba(99,174,248,.9); }

/* the long form does not fit next to the logo and the burger on a phone */
.status__short { display: none; }
@media (max-width: 700px) {
  .status { font-size: .68rem; padding: 6px 11px; }
  .status__full { display: none; }
  .status__short { display: inline; }
}
@media (max-width: 380px) { .status { display: none; } }

/* Between the burger breakpoint and a wide desktop the logo, the full nav and
   the two buttons already fill the row, so the badge would push the header
   past the container. Below 940px the nav collapses and the room comes back. */
@media (min-width: 941px) and (max-width: 1180px) { .status { display: none; } }

/* --------------------------------------------------------------- header -- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8,12,18,.86);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
          backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease, background .2s ease;
}
.site-header.is-stuck {
  background: rgba(5,8,11,.94);
  box-shadow: 0 10px 34px -18px #000, 0 1px 0 rgba(47,127,208,.28);
}

.header__in { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }

.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
/* the logo is chrome on its own dark plate, so on this background it simply
   sits flush. No rounding, no box. */
.logo__img { height: 42px; width: auto; display: block; }
.site-footer .logo__img { height: 46px; }
@media (max-width: 520px) { .logo__img { height: 32px; } }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__list a:not(.btn) {
  position: relative; display: block; padding: 10px 15px;
  font-family: var(--font-tech); font-size: .87rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  transition: color .16s ease;
}
.nav__list a:not(.btn)::after {
  content: ''; position: absolute; left: 15px; right: 15px; bottom: 4px;
  height: 2px; background: var(--blue-hi);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 0 10px rgba(99,174,248,.9);
}
.nav__list a:not(.btn):hover { color: var(--ink); }
.nav__list a:not(.btn):hover::after { transform: scaleX(1); }
.nav__list a:not(.btn)[aria-current="page"] { color: #fff; }
.nav__list a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta a::after { display: none; }
/* the quote button lives in .header__cta on desktop; this one is for the
   burger menu only, otherwise the header shows it twice */
.nav__cta { display: none; }

.header__cta { display: flex; align-items: center; gap: 10px; flex: none; }

.burger {
  display: none; width: 44px; height: 44px; margin-left: auto;
  background: var(--plate-2); border: 1px solid var(--line-2); cursor: pointer;
  align-items: center; justify-content: center;
}
.burger span { display: block; position: relative; width: 19px; height: 2px; background: var(--ink); transition: background .2s ease; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 19px; height: 2px; background: var(--ink);
  transition: transform .2s ease, top .2s ease;
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); background: var(--blue-hi); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); background: var(--blue-hi); }

@media (max-width: 940px) {
  .burger { display: flex; }
  .header__cta { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--plate);
    border-bottom: 2px solid var(--blue);
    box-shadow: 0 30px 60px -20px #000;
    margin-left: 0;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .nav__list {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 22px; max-width: var(--container); margin-inline: auto;
  }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__list a:not(.btn) { padding: 16px 2px; font-size: 1rem; }
  .nav__list a:not(.btn)::after { display: none; }
  .nav__cta { display: block; border-bottom: none !important; padding-top: 18px; }
  .nav__cta .btn { width: 100%; }
}

/* ----------------------------------------------------------------- hero -- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 70px 70px;
  -webkit-mask-image: radial-gradient(110% 80% at 20% 20%, #000 0%, transparent 72%);
          mask-image: radial-gradient(110% 80% at 20% 20%, #000 0%, transparent 72%);
}
.hero__in {
  position: relative;
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(34px, 5vw, 68px); align-items: center;
  padding: clamp(54px, 7vw, 100px) 0;
}
.hero h1 { margin-bottom: 22px; }
.hero__lede { font-size: clamp(1.04rem, 1.5vw, 1.18rem); color: var(--ink-2); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; }

@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero__visual { order: -1; }
}

/* ------------------------------------------------------- hero photo -- */
.hero__visual { position: relative; }
.hero-shot {
  position: relative;
  background: var(--plate-2);
  /* mirrored cut: top-right and bottom-left, so the location tag in the
     top-left corner stays square */
  clip-path: polygon(0 0, calc(100% - var(--n)) 0, 100% var(--n), 100% 100%, var(--n) 100%, 0 calc(100% - var(--n)));
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.hero-shot img { width: 100%; height: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-shot::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,8,11,.42) 0%, transparent 32%, rgba(5,8,11,.6) 66%, rgba(5,8,11,.95) 100%),
    linear-gradient(90deg, rgba(47,127,208,.16), transparent 55%);
}
.hero-shot__tag {
  position: absolute; top: 0; left: 0; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px 10px 14px;
  background: rgba(5,8,11,.82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 -2px 0 var(--blue);
  color: #fff; font-family: var(--font-tech);
  font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  padding-right: 30px;
}
.hero-shot__tag svg { width: 15px; height: 15px; color: var(--blue-hi); flex: none; }
/* ----------------------------------------------------------- trust bar -- */
.trustbar {
  background: linear-gradient(180deg, var(--void), #0b1119);
  color: var(--ink-2);
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(47,127,208,.35);
}
.trustbar__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.trustbar__item { display: flex; align-items: center; gap: 12px; font-size: .88rem; }
.trustbar__item svg { width: 21px; height: 21px; color: var(--blue-hi); flex: none; filter: drop-shadow(0 0 8px rgba(47,127,208,.6)); }
.trustbar__item strong { color: #fff; font-weight: 700; }

/* --------------------------------------------------------------- cards -- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) {
  .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .grid--5 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 980px) { .grid--4, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }
@media (max-width: 540px) {
  .grid--5 { grid-template-columns: 1fr; }
  .grid--5 > :last-child:nth-child(odd) { grid-column: auto; }
}

/* Machined plate: no border, the panel is simply lighter than the page and
   its corners are cut. An inset highlight along the top reads as a lit edge. */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--plate-2) 0%, #0d151e 100%);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.07);
  clip-path: var(--cut);
  padding: 28px 26px 26px;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card--link { text-decoration: none; display: block; color: inherit; }
.card--link:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, var(--plate-3) 0%, #101923 100%);
  box-shadow: inset 0 0 0 1px rgba(47,127,208,.55), inset 0 1px 0 rgba(99,174,248,.35), 0 0 30px -8px rgba(47,127,208,.35);
}
.card__icon {
  width: 46px; height: 46px;
  background: rgba(47,127,208,.14); color: var(--blue-hi);
  box-shadow: inset 0 0 0 1px rgba(47,127,208,.45);
  display: grid; place-items: center; margin-bottom: 20px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.card__icon svg { width: 23px; height: 23px; }
.card--link:hover .card__icon { background: var(--blue); color: #fff; box-shadow: var(--glow); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: .95rem; margin: 0; }
.card__more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
  font-family: var(--font-tech); font-weight: 700; font-size: .78rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--blue-hi);
}
.card__more svg { width: 14px; height: 14px; transition: transform .18s ease; }
.card--link:hover .card__more svg { transform: translateX(4px); }

/* a lit blue strip across the top edge */
.card--flag { box-shadow: inset 0 0 0 1px var(--line), inset 0 3px 0 var(--blue); }

/* ---------------------------------------------------------- photo card -- */
.card--photo { padding: 0; display: flex; flex-direction: column; }
.card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); flex: none; }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.85) contrast(1.08) brightness(.9);
  transition: transform .6s cubic-bezier(.22,1,.36,1), filter .3s ease;
}
.card--link:hover .card__media img { transform: scale(1.06); filter: saturate(1) contrast(1.12) brightness(1); }
.card__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,8,11,.35) 0%, transparent 45%, rgba(5,8,11,.75) 100%);
}
.card__body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: 8px; }
.card__body .card__more { margin-top: auto; padding-top: 18px; }

/* top-right, because the card's own cut takes the top-left corner */
.card--photo .card__icon {
  position: absolute; top: 0; right: 0; left: auto; z-index: 2; margin: 0;
  width: 44px; height: 44px;
  background: rgba(5,8,11,.78); color: var(--blue-hi);
  box-shadow: inset 0 -2px 0 var(--blue);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.card--photo .card__icon svg { width: 20px; height: 20px; }
.card--link.card--photo:hover .card__icon { background: var(--blue); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .card--link:hover .card__media img { transform: none; }
}

/* ------------------------------------------------------------- reviews -- */
.reviews-grid {
  margin-top: clamp(24px, 3.5vw, 38px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.review-card {
  position: relative;
  background: linear-gradient(180deg, var(--plate-2) 0%, #0d151e 100%);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.07);
  clip-path: var(--cut);
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
}

.review-card__stars {
  display: flex;
  gap: 4px;
  color: #f59e0b;
  margin-bottom: 12px;
}

.review-card__stars svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  filter: drop-shadow(0 0 4px rgba(245,158,11,.35));
}

.review-card__text {
  color: var(--ink-2);
  font-size: .92rem;
  line-height: 1.55;
  margin: 0 0 16px;
  font-style: normal;
  flex-grow: 1;
}

.review-card__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  margin-top: auto;
  flex-wrap: wrap;
}

.review-card__author {
  min-width: 0;
  flex: 1 1 auto;
}

.review-card__author strong {
  display: block;
  font-family: var(--font-tech);
  font-size: .84rem;
  color: var(--ink);
  letter-spacing: .02em;
  line-height: 1.3;
}

.review-card__author span {
  display: block;
  font-size: .74rem;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.3;
}

.review-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-tech);
  font-size: .68rem;
  color: var(--blue-hi);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(47,127,208,.12);
  padding: 3px 7px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  flex-shrink: 0;
}

.review-card__badge svg {
  width: 11px;
  height: 11px;
  color: var(--blue-hi);
}

@media (max-width: 860px) {
  .reviews-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 4px 4px 14px;
    margin-inline: -12px;
    padding-inline: 12px;
    scrollbar-width: none;
  }
  .reviews-grid::-webkit-scrollbar {
    display: none;
  }
  .review-card {
    flex: 0 0 min(84vw, 320px);
    scroll-snap-align: center;
    padding: 18px 16px 16px;
  }
  .review-card__text {
    font-size: .88rem;
    line-height: 1.5;
    margin-bottom: 12px;
  }
}


/* ---------------------------------------------------------- split band -- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 70px); align-items: center; }
.split--media-left .split__media { order: -1; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split--media-left .split__media { order: 0; } }

/* form page: wide column for the form, narrow one for the aside. this has to
   be a class, not an inline style, or it outranks the stack-to-one-column
   rule above and the aside hangs off the side of the page on a phone */
.split--form { align-items: start; }
@media (min-width: 901px) { .split--form { grid-template-columns: 1.45fr .8fr; } }

.media-frame {
  position: relative; overflow: hidden;
  background: var(--surface-2);
  clip-path: var(--cut);
  box-shadow: inset 0 0 0 1px var(--line-2);
  aspect-ratio: 4 / 3;
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.06); }
.media-frame--tall { aspect-ratio: 3 / 4; }

/* instrument-cluster readout */
.stat-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 30px;
  background: var(--plate-2);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 2px 0 var(--blue-deep);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.stat-strip > div { padding: 20px 16px; border-right: 1px solid var(--line); }
.stat-strip > div:last-child { border-right: none; }
.stat-strip strong {
  display: block; font-family: var(--font-tech); font-weight: 700;
  font-size: 1.85rem; color: #fff; line-height: 1;
  text-shadow: 0 0 22px rgba(47,127,208,.6);
}
.stat-strip span {
  display: block; margin-top: 8px; font-family: var(--font-tech);
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 520px) {
  .stat-strip { grid-template-columns: 1fr; }
  .stat-strip > div { border-right: none; border-bottom: 1px solid var(--line); }
  .stat-strip > div:last-child { border-bottom: none; }
}

/* ------------------------------------------------------------- ticklist -- */
.ticklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticklist li { display: flex; align-items: flex-start; gap: 12px; font-size: .97rem; color: var(--ink-2); }
.ticklist svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--blue-hi); filter: drop-shadow(0 0 6px rgba(47,127,208,.6)); }
.ticklist--2 { grid-template-columns: 1fr 1fr; column-gap: 28px; }
@media (max-width: 640px) { .ticklist--2 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ vehicles -- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px;
  background: var(--plate-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-tech); font-size: .85rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.chip svg { width: 17px; height: 17px; color: var(--blue-hi); }

/* ----------------------------------------------------------------- CTA -- */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--plate-3) 0%, var(--plate) 55%, var(--void) 100%);
  color: var(--ink-2);
  padding: clamp(36px, 5vw, 60px);
  clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 110% at 100% 0%, rgba(47,127,208,.42), transparent 62%);
}
.cta-band__in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band h2 { margin-bottom: 10px; }
.cta-band p { max-width: 46ch; margin: 0; }
.cta-band__actions { display: flex; gap: 13px; flex-wrap: wrap; }

/* photo-backed variants, defined after the base rules so they win */
.cta-band--photo {
  background:
    linear-gradient(100deg, rgba(5,8,11,.96) 26%, rgba(5,8,11,.6) 100%),
    url('../images/night-drive.webp') center / cover no-repeat;
}

/* ------------------------------------------------------------ page head -- */
.pagehead {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--plate));
  border-bottom: 1px solid var(--line);
  padding: clamp(42px, 6vw, 76px) 0 clamp(40px, 5vw, 64px);
}
.pagehead::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: linear-gradient(100deg, transparent 25%, #000 100%);
          mask-image: linear-gradient(100deg, transparent 25%, #000 100%);
}
.pagehead::after {
  content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue) 30%, var(--blue-hi) 50%, var(--blue) 70%, transparent);
  opacity: .7;
}
.pagehead__in { position: relative; max-width: 760px; }
.pagehead h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 16px; }
.pagehead p { color: var(--ink-2); font-size: 1.06rem; margin: 0; }

.crumbs {
  display: flex; align-items: center; gap: 9px; margin-bottom: 20px;
  font-family: var(--font-tech); font-size: .76rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.crumbs a { text-decoration: none; color: var(--muted); }
.crumbs a:hover { color: var(--blue-hi); }
.crumbs span[aria-current] { color: var(--ink); }
.crumbs svg { width: 13px; height: 13px; opacity: .6; }

/* ------------------------------------------------------------- service -- */
.service-card { display: flex; flex-direction: column; height: 100%; }

.mot-panel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 4vw, 56px); align-items: center;
  background: linear-gradient(140deg, var(--plate-3), var(--plate) 60%, var(--void));
  color: var(--ink-2);
  padding: clamp(32px, 4.5vw, 58px);
  clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.mot-panel::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 120% at 96% 8%, rgba(47,127,208,.4), transparent 58%);
}
.mot-panel > * { position: relative; }
.mot-panel--photo {
  background:
    linear-gradient(96deg, rgba(5,8,11,.96) 32%, rgba(5,8,11,.52) 100%),
    url('../images/svc-mot.webp') center / cover no-repeat;
}

.class-cards { display: grid; gap: 13px; }
.class-card {
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 3px 0 0 var(--blue);
  padding: 20px 24px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.class-card strong {
  display: block; font-family: var(--font-tech); font-weight: 700;
  font-size: 1.14rem; color: #fff; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px;
}
.class-card span { font-size: .89rem; color: var(--muted); }
@media (max-width: 860px) { .mot-panel { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------- timeline -- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, var(--blue), var(--line));
}
.timeline li { position: relative; padding: 0 0 28px 36px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 16px; height: 16px; background: var(--plate);
  box-shadow: inset 0 0 0 3px var(--line-2);
  transform: rotate(45deg);
}
.timeline li:first-child::before { box-shadow: inset 0 0 0 3px var(--blue-hi), var(--glow); }
.timeline h3 { font-size: 1.02rem; margin-bottom: 3px; }
.timeline p { font-size: .93rem; color: var(--muted); margin: 0; }
.timeline .year {
  display: block; margin-bottom: 5px;
  font-family: var(--font-tech); font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--blue-hi);
}

/* -------------------------------------------------------------- contact -- */
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: linear-gradient(180deg, var(--plate-2), #0d151e);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.07);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  padding: 24px 18px;
  text-decoration: none;
  height: 100%;
  color: inherit;
  min-width: 0;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
a.contact-card:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, var(--plate-3), #101923);
  box-shadow: inset 0 0 0 1px rgba(47,127,208,.55), 0 0 30px -8px rgba(47,127,208,.4);
}
.contact-card__icon {
  width: 44px;
  height: 44px;
  flex: none;
  background: rgba(47,127,208,.14);
  color: var(--blue-hi);
  box-shadow: inset 0 0 0 1px rgba(47,127,208,.45);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
a.contact-card:hover .contact-card__icon {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--glow);
}
.contact-card__icon svg { width: 21px; height: 21px; }
.contact-card h3 {
  font-family: var(--font-tech);
  font-size: .74rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
  font-weight: 700;
}
.contact-card p {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.38;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.contact-card small {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: .84rem;
  margin-top: 5px;
}
@media (max-width: 1100px) {
  .contact-card {
    flex-direction: row;
    gap: 18px;
    align-items: flex-start;
    padding: 22px 22px;
  }
  .contact-card__icon {
    margin-bottom: 0;
  }
}
@media (max-width: 540px) {
  .contact-card {
    gap: 16px;
    padding: 20px 18px;
  }
}

.hours { width: 100%; border-collapse: collapse; box-shadow: inset 0 0 0 1px var(--line); }
.hours th, .hours td { padding: 14px 20px; text-align: left; font-size: .95rem; }
.hours th { font-family: var(--font-tech); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); background: var(--plate-2); }
.hours td { text-align: right; color: var(--muted); background: var(--plate-2); }
.hours tr + tr th, .hours tr + tr td { border-top: 1px solid var(--line); }
.hours tr.is-today th { background: rgba(47,127,208,.16); color: #fff; box-shadow: inset 3px 0 0 var(--blue-hi); }
.hours tr.is-today td { background: rgba(47,127,208,.16); color: var(--blue-hi); font-weight: 600; }

.map-frame {
  overflow: hidden; background: var(--surface-2); line-height: 0;
  clip-path: var(--cut);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.map-frame iframe { width: 100%; height: 420px; border: 0; display: block; filter: invert(.92) hue-rotate(180deg) saturate(.7) contrast(.95); }

/* ---------------------------------------------------------------- form -- */
.form-shell {
  background: linear-gradient(180deg, var(--plate-2), var(--plate));
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.07);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  padding: clamp(26px, 3.5vw, 44px);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 8px; }
.field > label, .fieldset__legend {
  font-family: var(--font-tech); font-size: .76rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink);
}
.field .req { color: var(--blue-hi); }
.field .hint { font-size: .84rem; color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; font-family: var(--font-body); }

.input, .select, .textarea {
  width: 100%; padding: 14px 16px;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--void);
  border: 1px solid var(--line-2); border-radius: 0;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
/* 4.9:1 against the field background. The old #5d6b7d sat at 3.7:1, under the
   4.5:1 minimum, and placeholders are not exempt from it. */
.input::placeholder, .textarea::placeholder { color: #6f7d90; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--blue);
  background: #070b11;
  box-shadow: 0 0 0 3px rgba(47,127,208,.22), var(--glow);
}
.textarea { min-height: 132px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363aef8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
  padding-right: 44px;
}
.select option { background: var(--plate-2); color: var(--ink); }

/* a real UK plate stays a real UK plate */
.input--reg {
  font-family: var(--font-display); font-weight: 900; font-size: 1.2rem;
  letter-spacing: .12em; text-transform: uppercase;
  background: #ffd400; border-color: #ffd400; color: #10141a;
  box-shadow: 0 0 26px rgba(255,212,0,.22);
}
.input--reg::placeholder { color: rgba(16,20,26,.42); letter-spacing: .12em; }
.input--reg:focus { background: #ffd400; border-color: #fff; box-shadow: 0 0 0 3px rgba(255,212,0,.3); }

.checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
@media (max-width: 560px) { .checks { grid-template-columns: 1fr; } }
.check {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; cursor: pointer;
  background: var(--void);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: .92rem; color: var(--ink-2);
  transition: box-shadow .16s ease, background .16s ease, color .16s ease;
}
.check:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.check input { accent-color: var(--blue); width: 17px; height: 17px; flex: none; margin: 0; }
.check:has(input:checked) { background: rgba(47,127,208,.13); color: #fff; box-shadow: inset 0 0 0 1px var(--blue); }

.fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.field > label.check {
  font-family: var(--font-body); font-size: .9rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--ink-2);
}

.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(255,90,110,.18); }
.field.has-error .input--reg { background: #ffd400; }
.field.has-error > label.check,
.fieldset.has-error .check { box-shadow: inset 0 0 0 1px var(--bad); }
.error-msg { display: none; font-size: .84rem; color: var(--bad); font-weight: 500; }
.field.has-error .error-msg, .fieldset.has-error .error-msg { display: block; }

.form-note { font-size: .85rem; color: var(--muted); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.form-status {
  display: none; align-items: flex-start; gap: 13px;
  padding: 17px 19px; margin-bottom: 24px; font-size: .95rem;
}
.form-status.is-visible { display: flex; }
.form-status svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.form-status--err { background: rgba(255,90,110,.1);  color: #ffb3bc; box-shadow: inset 0 0 0 1px rgba(255,90,110,.4); }

.form-success { display: none; text-align: center; padding: clamp(30px, 5vw, 58px) 20px; }
.form-success.is-visible { display: block; }
.form-success__icon {
  width: 72px; height: 72px; margin: 0 auto 24px;
  background: rgba(61,220,151,.12); color: var(--ok);
  box-shadow: inset 0 0 0 1px rgba(61,220,151,.5), 0 0 40px rgba(61,220,151,.25);
  display: grid; place-items: center;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.form-success__icon svg { width: 34px; height: 34px; }

/* ----------------------------------------------------------------- FAQ -- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; cursor: pointer; list-style: none;
  font-family: var(--font-tech); font-weight: 700; font-size: 1.02rem;
  letter-spacing: .03em; color: var(--ink);
  transition: color .16s ease;
}
.faq summary:hover { color: var(--blue-hi); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363aef8' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .22s ease;
}
.faq details[open] summary { color: var(--blue-hi); }
/* a minus, not a rotated plus: rotating the plus makes an x, which reads
   as "close" or "error" rather than "collapse" */
.faq details[open] summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363aef8' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}
.faq details > div { padding: 0 4px 24px; color: var(--muted); max-width: 78ch; }

/* -------------------------------------------------------------- footer -- */
.site-footer {
  background: linear-gradient(180deg, #0a1017, var(--void));
  color: var(--muted);
  padding: clamp(50px, 6vw, 76px) 0 0;
  border-top: 2px solid var(--blue);
  box-shadow: 0 -1px 26px rgba(47,127,208,.22);
}
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 42px 34px; padding-bottom: 48px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; gap: 34px; } }

/* h3 rather than h4: the last heading in main is an h2, so h4 here would skip a
   level for anyone navigating the page by heading. */
.site-footer h3 {
  font-family: var(--font-tech); font-size: .75rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--blue-hi); margin-bottom: 20px; font-weight: 700;
}
.footer__blurb { font-size: .93rem; margin: 20px 0 22px; max-width: 34ch; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer__list a { text-decoration: none; font-size: .93rem; transition: color .16s ease, padding-left .16s ease; }
.footer__list a:hover { color: var(--blue-hi); padding-left: 4px; }
.footer__contact { display: grid; gap: 15px; font-size: .93rem; font-style: normal; }
.footer__contact a { color: var(--ink); text-decoration: none; font-weight: 500; }
.footer__contact a:hover { color: var(--blue-hi); }
.footer__contact div { display: flex; gap: 12px; align-items: flex-start; }
.footer__contact svg { width: 17px; height: 17px; color: var(--blue); flex: none; margin-top: 3px; }

.socials { display: flex; gap: 10px; margin-top: 24px; }
.socials a {
  width: 42px; height: 42px;
  background: var(--plate-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  display: grid; place-items: center; color: var(--ink-2);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.socials a:hover { background: var(--blue); color: #fff; transform: translateY(-3px); box-shadow: var(--glow); }
.socials svg { width: 18px; height: 18px; }

.footer__bar {
  border-top: 1px solid var(--line); padding: 24px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-family: var(--font-tech); font-size: .76rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.footer__bar a { text-decoration: none; }
.footer__bar a:hover { color: var(--blue-hi); }
.footer__credit {
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--muted);
  opacity: .7;
}

/* ------------------------------------------------------- floating call -- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; gap: 8px; padding: 10px var(--gutter);
  background: rgba(5,8,11,.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--blue-deep);
}
.callbar .btn { flex: 1; padding: 13px 8px; font-size: .8rem; gap: 6px; }
.callbar .btn svg { width: 15px; height: 15px; }
@media (max-width: 700px) {
  .callbar { display: flex; }
  body { padding-bottom: 74px; }
}

/* ------------------------------------------------------------- reveals -- */
/* Scoped to .js, which a one-line script in each <head> sets before the first
   paint. Only hide this content if something is definitely going to reveal it:
   if js/main.js is blocked or fails to load, .js is never set and the page is
   simply visible rather than stuck at zero opacity. */
.js [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* An element arrived at by a #hash must not also be nudged 20px down by the
   reveal, or the browser scrolls to where it is and it then slides out from
   under the sticky header. Land it in its final position. */
.js [data-reveal]:target { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card--link:hover, a.contact-card:hover, .socials a:hover { transform: none; }
  .btn::after { display: none; }
}

/* --------------------------------------------------------------- utils -- */
.u-center { text-align: center; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.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;
}