/* ==========================================================================
   IMA Locksmith — design system, light edition
   His brand, daylight register: white and cool mist grounds, brand cyan
   #00A0E3, deep marine reserved for punctuation bands. Anton display type
   (the logo's condensed weight), Barlow body, IBM Plex Mono spec labels.
   Bands re-declare the semantic tokens, so every component works on both
   light and dark grounds without variants.
   ========================================================================== */

/* ---- Fonts ------------------------------------------------------------- */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Anton-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Barlow-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Barlow-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Barlow-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/Barlow-800.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-500.woff2') format('woff2');
}

/* fallback faces with adjusted metrics: web-font swap barely moves layout */
@font-face {
  font-family: 'Barlow-fallback';
  src: local('Arial'), local('Helvetica Neue');
  size-adjust: 94.5%;
  ascent-override: 98%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Anton-fallback';
  src: local('Arial Narrow'), local('Arial');
  size-adjust: 87%;
  ascent-override: 104%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Plex-fallback';
  src: local('Courier New'), local('Menlo');
  size-adjust: 100%;
  ascent-override: 102%;
  descent-override: 28%;
  line-gap-override: 0%;
}

/* ---- Tokens ------------------------------------------------------------ */
:root {
  /* semantic surfaces + text (light defaults; .band-dark re-declares) */
  --ground: #F4F8FA;        /* page ground, cool mist */
  --paper: #FFFFFF;         /* raised cards, header */
  --panel: #FFFFFF;         /* plate background */
  --recess: #EAF1F5;        /* recessed strips inside cards */
  --hairline: #D9E4EB;      /* borders */
  --hairline-strong: #BFD1DC;
  --ink: #14303E;           /* headings + strong text, marine-derived */
  --body-c: #31505F;        /* body copy */
  --slate: #486376;         /* secondary text */
  --slate-dim: #526B7A;     /* captions, muted */
  --link: #006699;          /* accessible cyan for text links (AA on mist too) */
  --accent: #00A0E3;        /* brand cyan, graphic accent + buttons */
  --accent-hi: #33B6F0;
  --accent-deep: #006699;
  --gold: #E8A93C;          /* review stars only */
  --signal: #7CA51D;        /* live 24/7 dot, logo lime (darkened for light bg) */
  --shadow-card: 0 1px 2px rgba(20, 48, 62, .05), 0 14px 34px -18px rgba(20, 48, 62, .22);
  --shadow-pop: 0 2px 4px rgba(20, 48, 62, .07), 0 22px 48px -20px rgba(20, 48, 62, .28);

  --sans: 'Barlow', 'Barlow-fallback', system-ui, -apple-system, sans-serif;
  --display: 'Anton', 'Anton-fallback', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', 'Plex-fallback', ui-monospace, 'SF Mono', monospace;
  --measure: 64ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(5rem, 10vw, 8.75rem);
  --edge: 1180px;
  --radius: 10px;
  --header-float: clamp(4.75rem, 7.5vw, 5.5rem);
}

/* dark marine punctuation band: same component classes, re-keyed tokens */
.band-dark {
  --ground: #0E2C3E;
  --paper: #123549;
  --panel: #163D53;
  --recess: #0C2635;
  --hairline: #24506A;
  --hairline-strong: #35637F;
  --ink: #F2F8FB;
  --body-c: #C9DAE4;
  --slate: #9FBACA;
  --slate-dim: #93AEBF;
  --link: #4FC1F2;
  --accent: #00A0E3;
  --accent-hi: #4FC1F2;
  --accent-deep: #0077B0;
  --signal: #A8CC3D;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .2), 0 16px 36px -18px rgba(0, 0, 0, .45);
  background: linear-gradient(180deg, #0E2C3E 0%, #0B2434 100%);
  color: var(--body-c);
}
.band-mist { --ground: #EAF1F5; background: #EAF1F5; }

/* ---- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--body-c);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: 76px; /* sticky call bar clearance on mobile */
}
@media (min-width: 920px) { body { padding-bottom: 0; } }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent-deep); }
.band-dark a:hover { color: #FFFFFF; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
.band-dark a:focus-visible, .band-dark button:focus-visible, .band-dark summary:focus-visible { outline-color: var(--accent-hi); }
::selection { background: var(--accent); color: #06283A; }
strong { color: var(--ink); font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: 2.5rem 0; }

/* ---- Type -------------------------------------------------------------- */
h1, h2, .display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1.1rem;
  text-wrap: balance;
}
h3 {
  font-family: var(--sans);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 .9rem;
  text-wrap: balance;
}
h4 { font-size: 1.05rem; margin: 0 0 .5rem; font-weight: 700; color: var(--ink); }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1rem, 2vw, 1.15rem); }
p { margin: 0 0 1.2rem; max-width: var(--measure); }
p.lede { font-size: clamp(1.12rem, 2vw, 1.32rem); line-height: 1.6; color: var(--slate); }
p.lede strong { color: var(--ink); }
ul, ol { max-width: var(--measure); padding-left: 1.2rem; margin: 0 0 1.2rem; }
li { margin-bottom: .5rem; }
li::marker { color: var(--accent); }

/* etched mono label */
.etch {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.4rem;
}
.etch::before { content: ''; width: 2.2rem; height: 2px; background: var(--accent); flex: none; }
.etch--bare::before { display: none; }
.etch b { color: var(--accent-deep); font-weight: 500; }
.band-dark .etch b { color: var(--accent-hi); }

.mono { font-family: var(--mono); }

/* postcode stamp chip */
.stamp {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--accent-deep);
  border: 1px solid var(--hairline-strong);
  background: var(--recess);
  padding: .24rem .6rem;
  border-radius: 4px;
  white-space: nowrap;
}
.band-dark .stamp { color: var(--accent-hi); }

/* ---- Layout ------------------------------------------------------------ */
.wrap { max-width: var(--edge); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * .68); }
.section-head { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.section-head p { color: var(--slate); }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.split {
  display: grid;
  gap: clamp(2.25rem, 5.5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-text { grid-template-columns: 7fr 5fr; }
  .split > .order-first { order: -1; }
  .split--rev > :first-child { order: 2; }
}

/* pin tumbler divider */
.pins-divider { display: block; margin: 0 auto; width: 96px; color: var(--hairline-strong); }
.pins-divider .pin { fill: currentColor; transform: translateY(var(--dy, 0)); transition: transform .9s cubic-bezier(.2,.7,.25,1); }
.pins-divider .pin:nth-of-type(2) { transition-delay: .07s; }
.pins-divider .pin:nth-of-type(3) { transition-delay: .14s; }
.pins-divider .pin:nth-of-type(4) { transition-delay: .21s; }
.pins-divider .pin:nth-of-type(5) { transition-delay: .28s; }
.pins-divider.set .pin { transform: none; }
@media (prefers-reduced-motion: reduce) { .pins-divider .pin { transform: none; } }
.pins-divider .shear { stroke: var(--accent); }

/* knurl strip on dark band edges */
.knurl {
  height: 8px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 1px, transparent 1px 5px),
    #0E2C3E;
}

/* ---- Header ------------------------------------------------------------ */
.header-shell {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding: 0.8rem var(--gutter);
  pointer-events: none;
}
.site-header {
  position: relative;
  max-width: var(--edge);
  margin: 0 auto;
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(20px) saturate(1.45);
  -webkit-backdrop-filter: blur(20px) saturate(1.45);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 12px 40px -14px rgba(20, 48, 62, 0.16),
    0 2px 10px rgba(20, 48, 62, 0.06);
  transition: background .25s ease, box-shadow .25s ease;
}
.header-shell--scrolled .site-header {
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 14px 44px -12px rgba(20, 48, 62, 0.18),
    0 4px 12px rgba(20, 48, 62, 0.08);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.35rem;
  min-height: 58px;
  flex-wrap: nowrap;
  padding: 0.55rem clamp(1.35rem, 3.2vw, 2.15rem);
}
#main { padding-top: var(--header-float); }
.brand { display: flex; align-items: center; flex: none; }
.brand-logo { display: block; height: auto; }
.brand-logo--header { width: 96px; }
.brand-logo--footer { width: 136px; }
.brand--footer { margin-bottom: 1rem; }
.nav-desktop { display: none; }
@media (min-width: 920px) {
  .nav-desktop { display: flex; gap: 1.65rem; align-items: center; }
  .nav-desktop a {
    color: var(--slate);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: .4rem 0;
    border-bottom: 2px solid transparent;
  }
  .nav-desktop a:hover, .nav-desktop a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
}
@media (min-width: 920px) and (max-width: 1100px) { .nav-desktop { gap: 1.15rem; } }
.header-call { display: none; align-items: center; flex: none; }
@media (min-width: 640px) { .header-call { display: flex; } }
.menu-btn {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  padding: 12px 11px;
  cursor: pointer;
}
.menu-btn span { width: 20px; height: 2px; background: var(--ink); transition: transform .25s, opacity .25s; }
@media (min-width: 920px) { .menu-btn { display: none; } }
.nav-open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .menu-btn span:nth-child(2) { opacity: 0; }
.nav-open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile {
  display: none;
  border-top: 1px solid rgba(20, 48, 62, 0.08);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-open .nav-mobile { display: block; }
.nav-mobile a {
  display: block;
  padding: 1rem 1.5rem;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .9rem;
  border-bottom: 1px solid var(--hairline);
}
.nav-mobile a:last-child { border-bottom: 0; }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--sans);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 1rem 1.7rem;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s, color .15s;
}
.btn svg { flex: none; }
.btn-accent {
  background: linear-gradient(180deg, #2FB7F1 0%, #00A0E3 55%, #0093D2 135%);
  color: #06283A;
  border-color: #0084BE;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 24px -10px rgba(0,132,190,.55);
}
.btn-accent:hover { color: #06283A; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 14px 30px -10px rgba(0,132,190,.6); }
.btn-line { border-color: var(--hairline-strong); color: var(--ink); background: var(--paper); }
.btn-line:hover { border-color: var(--accent); color: var(--accent-deep); }
.band-dark .btn-line { background: transparent; }
.band-dark .btn-line:hover { color: var(--accent-hi); }
.btn-big { padding: 1.2rem 2.1rem; font-size: 1.02rem; }
.btn-icon {
  width: 2.65rem;
  height: 2.65rem;
  padding: 0;
  border-radius: 10px;
}
.btn-icon svg { width: 1.1rem; height: 1.1rem; }
.header-call .btn, .callbar .btn, .hero-ctas .btn-accent { white-space: nowrap; }

/* ---- Sticky mobile call bar -------------------------------------------- */
.callbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  background: #0B2434;
  border-top: 1px solid #24506A;
  padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
  gap: .6rem;
}
.callbar .btn { flex: 1; padding: .9rem .5rem; font-size: .95rem; }
.callbar .btn-line { background: transparent; border-color: #35637F; color: #F2F8FB; }
@media (min-width: 920px) { .callbar { display: none; } }

/* ---- Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(0,160,227,.10) 0%, transparent 55%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F8FA 100%);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.hero .etch { margin-bottom: 1.9rem; }
.hero h1 { font-size: clamp(2.4rem, 4.6vw, 4.35rem); margin-bottom: 1.6rem; }
.hero .lede { margin-bottom: 2.4rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.hero-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 11fr 9fr; } }
.hero-media .media-frame { box-shadow: var(--shadow-pop); }
.hero-spec { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* full-bleed photo hero: copy locked left, van livery visible right */
.hero--photo {
  display: flex;
  align-items: center;
  min-height: clamp(520px, 76vh, 800px);
  margin-top: calc(-1 * var(--header-float));
  padding-block: clamp(3.5rem, 7.5vw, 6.5rem);
}
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 36rem) 1fr;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 46%;
  opacity: 0.88;
}
.hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 82%, rgba(244,248,250,.94) 100%),
    linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.97) 36%, rgba(255,255,255,.9) 48%, rgba(255,255,255,.62) 58%, rgba(255,255,255,.28) 66%, transparent 72%),
    rgba(255, 255, 255, 0.22);
}
.hero-content { position: relative; max-width: 36rem; }
.hero--photo .hero-kicker {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 1.25rem;
}
.hero--photo h1 {
  font-size: clamp(2.45rem, 4.5vw, 3.85rem);
  line-height: 1.04;
  margin-bottom: 1rem;
  max-width: 11em;
  color: var(--accent-deep);
}
.hero-tagline {
  font-family: var(--sans);
  font-size: clamp(1.12rem, 2vw, 1.28rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--slate);
  margin: 0 0 1.35rem;
  max-width: 38ch;
}
.hero-tagline strong { color: var(--ink); font-weight: 700; }
.hero--photo .hero-lede {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--slate-dim);
  margin-bottom: 2rem;
  max-width: 50ch;
}
@media (max-width: 880px) {
  .hero--photo { min-height: 0; }
  .hero-layout { grid-template-columns: 1fr; }
  .hero-content { max-width: none; }
  .hero-bg { object-position: 58% 44%; }
  .hero-veil {
    background:
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 55%, rgba(244,248,250,.88) 100%);
  }
}
.hero-spec-overlap { position: relative; z-index: 2; margin-top: -3.25rem; margin-bottom: clamp(1rem, 2vw, 2rem); }
.hero-spec-overlap .spec-strip { box-shadow: var(--shadow-pop); }
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .hero--photo h1 { font-size: clamp(2.1rem, 9.5vw, 2.75rem); }
}

/* spec strip */
.spec-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin: 0;
}
@media (min-width: 880px) { .spec-strip { grid-template-columns: repeat(4, 1fr); } }
.spec-strip > div {
  padding: 1.2rem 1.4rem;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  margin-top: -1px;
  margin-left: -1px;
}
.spec-strip dt {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate-dim);
  margin-bottom: .35rem;
}
.spec-strip dd { margin: 0; font-weight: 700; font-size: 1.04rem; color: var(--ink); }
.spec-strip dd b { color: var(--accent-deep); font-weight: 800; }
.band-dark .spec-strip dd b { color: var(--accent-hi); }
@media (max-width: 480px) { .spec-strip dd { font-size: .92rem; } }

/* ---- Plates (cards) ----------------------------------------------------- */
.plate {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.8rem 1.7rem 1.7rem;
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
a.plate { color: inherit; display: block; }
a.plate:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-pop); color: inherit; }
.plate .idx {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  color: var(--accent-deep);
  display: block;
  margin-bottom: 1rem;
}
.band-dark .plate .idx { color: var(--accent-hi); }
.plate h3 { margin-bottom: .6rem; }
.plate p { color: var(--slate); font-size: .97rem; margin-bottom: 0; }
.plate .more {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

/* ---- Steps -------------------------------------------------------------- */
.step .idx { color: var(--accent-deep); }
.step h3 { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 1.18rem; }

/* ---- Media frames -------------------------------------------------------- */
.media-frame {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--recess);
  box-shadow: var(--shadow-card);
}
.media-frame img, .media-frame video { width: 100%; height: 100%; object-fit: cover; }
.media-frame figcaption {
  position: absolute;
  left: 0; bottom: 0; right: 0;
  padding: .85rem 1.1rem;
  font-family: var(--mono);
  font-size: .67rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #F2F8FB;
  background: linear-gradient(180deg, transparent, rgba(10, 30, 42, .85) 55%);
}
figure.media-frame { margin: 0; }
/* uniform aspect treatments: consistent frames read as designed, not dropped in */
.frame-43 { aspect-ratio: 4 / 3; }
.frame-32 { aspect-ratio: 3 / 2; }
.frame-45 { aspect-ratio: 4 / 5; max-width: 470px; }
.frame-45 img, .frame-43 img, .frame-32 img { height: 100%; }

/* ---- Anti-snap band (homepage) ----------------------------------------- */
.anti-snap { padding-block: clamp(5rem, 10vw, 8.5rem); }
.anti-snap-head {
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: clamp(2.75rem, 5.5vw, 4rem);
  text-align: center;
}
.anti-snap-head .etch { justify-content: center; }
.anti-snap-head h2 { margin-bottom: 1.25rem; }
.anti-snap-head p { margin-inline: auto; margin-bottom: 0; color: var(--slate); }
.anti-snap-diagram {
  display: flex;
  justify-content: center;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}
.anti-snap-diagram .cylinder-fig {
  max-width: min(600px, 100%);
  margin: 0 auto;
}
.anti-snap-split {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 880px) {
  .anti-snap-split { grid-template-columns: 1fr 1fr; }
}
.anti-snap-split + .anti-snap-split {
  margin-top: clamp(3.5rem, 7vw, 5rem);
  padding-top: clamp(3.5rem, 7vw, 5rem);
  border-top: 1px solid var(--hairline);
}
.anti-snap-split .frame-45 { max-width: none; width: 100%; }
.anti-snap-copy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.anti-snap-copy h3 {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
}
.anti-snap-copy p { margin: 0; max-width: 48ch; color: var(--slate); }
.anti-snap-copy p strong { color: var(--ink); }
.anti-snap-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.35rem;
}
.anti-snap-video { aspect-ratio: 16 / 9; }
.anti-snap-video video { display: block; }
.anti-snap-video figcaption {
  position: static;
  background: var(--recess);
  color: var(--slate);
  border-top: 1px solid var(--hairline);
  padding: .95rem 1.15rem;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: .04em;
  font-size: .72rem;
}

/* portrait (legacy circular — used elsewhere if needed) */
.portrait {
  width: min(250px, 58vw);
  border-radius: 50%;
  border: 4px solid var(--paper);
  box-shadow: var(--shadow-pop);
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
}

/* ---- Founder (homepage) -------------------------------------------------- */
.founder-split {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 880px) {
  .founder-split { grid-template-columns: 0.95fr 1.05fr; }
}
.founder-portrait {
  margin: 0;
  width: min(100%, 420px);
  margin-inline: auto;
}
@media (min-width: 880px) {
  .founder-portrait { width: 100%; max-width: 480px; margin-inline: 0; }
}
.founder-portrait-frame {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--recess);
  box-shadow: var(--shadow-pop);
  aspect-ratio: 4 / 5;
}
.founder-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 14%;
}
.founder-portrait figcaption {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}
.founder-copy p:last-child { margin-bottom: 0; }

/* ---- Reviews ------------------------------------------------------------- */
.reviews-section .section-head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.reviews-section .platform-cards { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.platform-cards { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
@media (min-width: 720px) { .platform-cards { grid-template-columns: 1fr 1fr; } }
.split .platform-cards { grid-template-columns: 1fr; }

a.platform-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1.6rem 1.65rem;
  color: inherit;
  min-height: 100%;
}
a.platform-card:hover { color: inherit; transform: translateY(-3px); }
.platform-card-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  min-height: 48px;
}
.platform-card-icon {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(20, 48, 62, 0.12);
}
.platform-card-logo { height: 28px; width: auto; flex: none; display: block; }
.platform-card--checkatrade .platform-card-icon { border-radius: 8px; }
.platform-card--checkatrade .platform-card-logo { height: 30px; }
.platform-card--google {
  border-color: rgba(66, 133, 244, 0.35);
  background: linear-gradient(155deg, rgba(66, 133, 244, 0.1) 0%, rgba(52, 168, 83, 0.04) 38%, var(--panel) 62%);
}
.platform-card--checkatrade {
  border-color: rgba(227, 27, 56, 0.28);
  background: linear-gradient(155deg, rgba(227, 27, 56, 0.08) 0%, rgba(0, 84, 166, 0.05) 42%, var(--panel) 65%);
}
.platform-card-rating {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem .65rem;
}
.platform-score {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2.35rem;
  line-height: 1;
}
.platform-card--google .platform-score { color: #1a73e8; }
.platform-card--checkatrade .platform-score { color: #0054a6; }
.platform-score-of {
  font-size: 1rem;
  font-weight: 600;
  color: var(--slate-dim);
}
.platform-card-copy {
  margin: 0;
  font-size: .94rem;
  line-height: 1.55;
  color: var(--slate);
  flex: 1;
}
.platform-card-cta {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: .25rem;
}
.platform-card--google .platform-card-cta { color: #1a73e8; }
.platform-card--checkatrade .platform-card-cta { color: #e31b38; }
a.platform-card:hover .platform-card-cta { text-decoration: underline; text-underline-offset: 3px; }

.stars { color: var(--gold); letter-spacing: .12em; font-size: .85rem; white-space: nowrap; }

.review-wall {
  column-gap: 1.5rem;
  margin-top: 0;
}
@media (min-width: 720px) { .review-wall { columns: 2; } }
@media (min-width: 1000px) { .review-wall { columns: 3; } }
.review-wall--stack { columns: 1; max-width: 36rem; }
.review {
  break-inside: avoid;
  margin: 0 0 1.5rem;
  display: inline-block;
  width: 100%;
}
.review blockquote { margin: 0 0 1.1rem; font-size: .99rem; color: var(--ink); }
.review footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  font-size: .85rem;
  color: var(--slate);
}
.review footer .who b { color: var(--ink); font-weight: 700; display: block; }
.review footer .who span { font-size: .78rem; color: var(--slate-dim); }

/* ---- FAQ ------------------------------------------------------------------ */
.faq { border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.faq details { border-bottom: 1px solid var(--hairline); background: var(--paper); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.5rem;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--accent-deep);
  font-size: 1.25rem;
  transition: transform .2s;
  flex: none;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-body { padding: 0 1.5rem 1.35rem; color: var(--slate); }
.faq .faq-body p { margin-bottom: .6rem; }

/* ---- Coverage board -------------------------------------------------------- */
.board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
@media (min-width: 640px) { .board { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 920px) { .board { grid-template-columns: repeat(4, 1fr); } }
.board a, .board span.covered {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .95rem 1.1rem;
  background: var(--paper);
  color: var(--ink);
  font-size: .94rem;
  font-weight: 600;
}
.board a:hover { background: var(--recess); color: var(--accent-deep); }
.board .pc { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; color: var(--slate-dim); }
.board a:hover .pc { color: var(--accent-deep); }
.board--pair a:last-child:nth-child(odd) { grid-column: 1 / -1; }
.board::after { content: ''; background: var(--paper); grid-column: auto / -1; }

/* ---- CTA band ---------------------------------------------------------------- */
.cta-band { text-align: center; padding-block: clamp(4rem, 9vw, 6.5rem); }
.cta-band h2 { margin-bottom: .8rem; }
.cta-band p { margin-inline: auto; color: var(--slate); margin-bottom: 2rem; }
.cta-band .hero-ctas { justify-content: center; }
.cta-phone {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: .02em;
  color: var(--ink);
  display: inline-block;
  margin-bottom: 1.4rem;
}
.cta-phone:hover { color: var(--accent-hi); }
@media (max-width: 480px) { .cta-phone { font-size: clamp(1.7rem, 9vw, 2.1rem); } }

/* ---- Forms ---------------------------------------------------------------------- */
.form-alert {
  border: 1px solid var(--hairline-strong);
  border-left: 3px solid var(--slate);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--body-c);
}
.form-alert strong { display: block; color: var(--ink); margin-bottom: .2rem; }
.form-alert--ok { border-left-color: var(--signal); }
.form-alert--bad { border-left-color: #C0392B; }
.form-alert[hidden] { display: none; }
.form-grid { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
label {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: .5rem;
}
input, textarea, select {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: 7px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  padding: .9rem 1rem;
}
input:hover, textarea:hover { border-color: var(--accent); }
textarea { min-height: 130px; resize: vertical; }

/* ---- Footer ---------------------------------------------------------------------- */
.site-footer { padding: clamp(3.5rem, 7vw, 5rem) 0 2rem; font-size: .93rem; }
.footer-grid { display: grid; gap: 2.75rem; margin-bottom: 3.25rem; }
@media (min-width: 880px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.site-footer h3 { font-size: .78rem; letter-spacing: .16em; margin-bottom: 1.1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer a { color: var(--slate); }
.site-footer a:hover { color: #FFFFFF; }
.site-footer address { font-style: normal; line-height: 1.9; }
.footer-legal {
  border-top: 1px solid var(--hairline);
  padding-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--slate-dim);
}
.footer-legal a { color: var(--slate-dim); }
.footer-legal a:hover { color: #FFFFFF; }

/* ---- Breadcrumbs ---------------------------------------------------------------------- */
.crumbs {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-dim);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding-top: 1.6rem;
}
.crumbs a { color: var(--slate); }
.crumbs a:hover { color: var(--accent-deep); }
.crumbs .sep { color: var(--hairline-strong); }

/* ---- Page hero (inner pages) ------------------------------------------------------------ */
.page-hero {
  padding-block: clamp(3rem, 6.5vw, 5rem) clamp(2.75rem, 5.5vw, 4rem);
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(100% 100% at 100% 0%, rgba(0,160,227,.08) 0%, transparent 55%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F8FA 100%);
}
.page-hero .lede { margin-bottom: 0; }
.page-hero .hero-ctas { margin-top: 2rem; margin-bottom: 0; }

/* ---- Article (blog) ----------------------------------------------------------------------- */
.article { padding-block: clamp(3rem, 6.5vw, 4.5rem); }
.article-body { max-width: var(--measure); margin-inline: auto; }
.article-body h2 { font-size: 1.5rem; margin-top: 2.6rem; letter-spacing: .02em; }
.article-body img { border-radius: var(--radius); border: 1px solid var(--hairline); margin: 2rem 0; box-shadow: var(--shadow-card); }
.article-meta {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.article-figs { display: grid; gap: 1.5rem; margin: 2rem 0; }
@media (min-width: 640px) { .article-figs.two { grid-template-columns: 1fr 1fr; } }
.article-figs img { margin: 0; }
.post-nav { display: grid; gap: 1rem; border-top: 1px solid var(--hairline); margin-top: 3rem; padding-top: 2rem; }
@media (min-width: 640px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav a { font-size: .93rem; color: var(--ink); font-weight: 600; }
.post-nav a:hover { color: var(--accent-deep); }
.post-nav .dir {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate-dim);
  display: block;
  margin-bottom: .35rem;
}
.post-card time {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-dim);
  display: block;
  margin-bottom: .7rem;
}

/* ---- Cylinder figure (lives on the dark band) ---------------------------------------------- */
.cylinder-fig { max-width: 560px; width: 100%; color: var(--slate); }
.cylinder-fig .line { stroke: var(--hairline-strong); }
.cylinder-fig .line-hi { stroke: var(--slate); }
.cylinder-fig .accent-line { stroke: var(--accent); }
.cylinder-fig .accent-fill { fill: var(--accent); }
.cylinder-fig .dim { stroke: var(--slate-dim); }
.cylinder-fig text {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  fill: var(--slate);
  text-transform: uppercase;
}
.cylinder-fig text.hi { fill: var(--accent-hi); }

/* ---- Reveal ------------------------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .45s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero .etch, .hero h1, .hero .lede, .hero .hero-ctas, .hero .hero-spec, .hero .hero-media {
    animation: rise .6s cubic-bezier(.2,.7,.3,1) both;
  }
  .hero h1 { animation-delay: .06s; }
  .hero .lede { animation-delay: .12s; }
  .hero .hero-ctas { animation-delay: .18s; }
  .hero .hero-media { animation-delay: .2s; }
  .hero .hero-spec { animation-delay: .28s; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---- Misc ----------------------------------------------------------------------- */
.note { font-size: .85rem; color: var(--slate-dim); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mx-auto { margin-inline: auto; }
.table-scroll { overflow-x: auto; }

/* prose links: visible affordance */
p a, li a, .faq-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0,102,153,.5); }
p a:hover, li a:hover { text-decoration-color: var(--accent-deep); }
.site-footer ul a, .board a, .nav-desktop a, .nav-mobile a, .post-nav a { text-decoration: none; }

/* skip link */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #06283A;
  padding: .6rem 1rem;
  z-index: 100;
  border-radius: 0 0 6px 0;
  font-weight: 700;
}
.skip:focus { left: 0; }