/* ==========================================================================
   Lockstar Locksmiths — custom styles
   Direction: "brass in the dark" — warm charcoal base, logo gold as metal
   caught in light, two warm-paper relief rows per page. Editorial rows,
   never card grids. Type: Barlow Condensed / Barlow / Lora italic.
   Signature: the key-bitting rule (section divider cut like a key).
   ========================================================================== */

:root {
  --coal: #171512;
  --coal-raise: #211e1a;
  --coal-line: rgba(245, 240, 230, 0.14);
  --paper: #ffffff;
  --paper-deep: #f4f3f0;
  --ink: #1b1813;
  --ink-line: rgba(27, 24, 19, 0.16);
  --gold: #f0b41c;
  --gold-deep: #d69e0e;
  --brass: #9c7a2e;
  --white-warm: #fbf8f2;
  --stone: #a79e8f;
  --stone-dark: #6b6355;
  --orange: #f0821c;        /* 3 Sep: Joseph's hover colour for the call buttons — distinct from the gold */

  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;   /* display sizes ONLY — never small text */
  --font-strong: 'Montserrat', 'Avenir Next', sans-serif;           /* nav, labels, buttons, chips */
  --font-body: 'Barlow', -apple-system, 'Helvetica Neue', sans-serif;
  --font-serif: 'Lora', Georgia, serif;

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--white-warm);
  background: var(--coal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.container { width: min(1160px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.container--wide { width: min(1400px, 100% - 2 * var(--gutter)); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--ink); }

/* --- Type roles -------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.94;
}
.display--hero { font-size: clamp(3.2rem, 9.5vw, 7.5rem); }
.display--xl   { font-size: clamp(2.5rem, 6.5vw, 4.5rem); }
.display--lg   { font-size: clamp(2rem, 4.5vw, 3.1rem); }
.display--md   { font-size: clamp(1.5rem, 3vw, 2.1rem); }

.serif-lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.5;
}

.eyebrow {
  display: inline-flex;
  align-items: flex-start;              /* 13 Oct: dash sits on the FIRST line when the eyebrow wraps (Joseph) */
  gap: 0.75rem;
  font-family: var(--font-strong);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.eyebrow::before { content: ""; flex: none; width: 2rem; height: 2px; background: currentColor;
  margin-top: calc(0.8em - 1px);        /* half of the 1.6 line-height */
  margin-top: calc(0.5lh - 1px); }

.on-paper { background: var(--paper); color: var(--ink); }
.on-paper .eyebrow { color: var(--brass); }
.muted { color: var(--stone); }
.on-paper .muted { color: var(--stone-dark); }

/* --- Key-bitting rule (signature divider) ------------------------------ */

/* 16 Sep: Joseph's OWN vector (brand-logos/key-rule/v3/Key_Detail_vector.svg, Illustrator export) used as-is —
   bow arc rising out of the blade line, bitting polyline with flat valleys, tip. Stroke only (1.5 units, no fill),
   viewBox trimmed to the drawing (177×30 → 256×43). Colour from `color`: brass on coal, ink on paper.
   13 Oct: one extra valley cut into the long flat next to the bow (x 66–81), per Joseph. */
.key-rule {
  border: 0;
  height: 44px;
  margin: 0 auto;
  width: min(256px, 62%);
  color: var(--brass);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='15 10 177 30'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M17.56,36.86c-.43-5.78,2.73-10.19,8.13-12.4,1.74-.8,3.58-1.56,4.97-2.88,2.56-2.52,3.67-6.39,6.92-8.32,9.61-5.89,19.42-.2,19.24,10.96'/%3E%3Cpath d='M56.44,23.68h5.58'/%3E%3Cpath d='M23.58,25.15v-.1'/%3E%3Cpath d='M187.82,27.48c.58.53,1.11,1.08,1.58,1.64l-1.58-1.64Z'/%3E%3Cpolyline points='56.81 23.66 66.4 23.66 69.9 27.16 77.1 27.16 80.6 23.66 87.84 23.66 90.7 26.52 99.16 26.52 103.71 21.97 108.27 21.97 115.09 28.79 123.33 28.79 130.13 21.99 136.28 21.99 138.73 24.44 146.63 24.44 150.04 21.04 157.24 21.04 163.39 27.2 171.29 27.2 177.16 21.32 181.65 21.32 188.22 27.89 188.15 27.97'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='15 10 177 30'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M17.56,36.86c-.43-5.78,2.73-10.19,8.13-12.4,1.74-.8,3.58-1.56,4.97-2.88,2.56-2.52,3.67-6.39,6.92-8.32,9.61-5.89,19.42-.2,19.24,10.96'/%3E%3Cpath d='M56.44,23.68h5.58'/%3E%3Cpath d='M23.58,25.15v-.1'/%3E%3Cpath d='M187.82,27.48c.58.53,1.11,1.08,1.58,1.64l-1.58-1.64Z'/%3E%3Cpolyline points='56.81 23.66 66.4 23.66 69.9 27.16 77.1 27.16 80.6 23.66 87.84 23.66 90.7 26.52 99.16 26.52 103.71 21.97 108.27 21.97 115.09 28.79 123.33 28.79 130.13 21.99 136.28 21.99 138.73 24.44 146.63 24.44 150.04 21.04 157.24 21.04 163.39 27.2 171.29 27.2 177.16 21.32 181.65 21.32 188.22 27.89 188.15 27.97'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.95;
}
.on-paper .key-rule, .on-paper + .key-rule { color: var(--ink); opacity: 0.85; }
.site-footer .key-rule { color: var(--brass); }
.site-footer a[href="tel:1800 562 548"] { color: var(--gold); }
.site-footer a[href="tel:1800 562 548"]:hover { color: var(--white-warm); }
.rule-row { margin: 0; padding: 0; }   /* paper strip carrying the rule between two paper sections */
/* 13 Oct: after a DARK section (safe page: "The craft") the strip has no paper above the rule, so it sat flush
   against the dark edge. Give it the same air above as the next section has below. */
.section:not(.on-paper) + .rule-row,
.brand-band + .rule-row { padding-top: var(--section-y); }   /* same after the hardware band on the lock pages */

/* --- Buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* 3 Sep: buttons set in the display face so they match the phone numbers around them */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.85rem 2rem;
  border-radius: 28px;
  border: 2px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--solid { background: var(--gold); color: var(--ink); }
.btn--solid:hover { background: var(--gold-deep); }
/* 16 Sep (Joseph): ghost buttons on the dark ground follow the call pill — gold outline + gold text at rest,
   white outline + white text on hover — so Get in touch and 1800 LOCK IT sit as a matched pair. */
.btn--ghost { border-color: var(--gold); color: var(--gold); }
.btn--ghost:hover { border-color: var(--white-warm); color: var(--white-warm); }
.on-paper .btn--ghost { border-color: var(--ink-line); color: var(--ink); }
.on-paper .btn--ghost:hover { border-color: var(--brass); color: var(--brass); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
/* 3 Sep: the service-page call button — transparent like Get in touch, styled like the header pill
   (gold outline, gold wordmark with the white digits), just a bit smaller, orange on hover */
.btn--call {
  font-weight: 900;
  font-size: 1.75rem;   /* a step under the 1.95rem header pill — any smaller and the digits blob */
  letter-spacing: 0.03em;
  padding: 0.5rem 1.5rem;
  border-color: var(--gold);
  color: var(--gold);
  background: transparent;
}
.btn--call:hover { background: transparent; border-color: var(--white-warm); color: var(--white-warm); }   /* 16 Sep: white on dark, like the hero */
.btn--call .lk-l { --dx: 0em; --dy: 0em; }
/* 18 Sep (Joseph): on the service-page heroes the pair is larger, and Get in touch is set as heavy as the
   1800 LOCK IT artwork (Barlow Condensed Black + the same hairline stroke; cap height = the wordmark's height). */
.hero--page .btn-row .btn { font-size: 2.25rem; padding: 0.75rem 2.1rem; border-radius: 40px; }
.hero--page .btn-row .lockit--img { height: 0.75em; margin-block: 0.125em; }   /* letters = the ghost label's cap height; 1em box so both buttons are the same height when they stack */
.hero--page .btn-row .btn--ghost { font-weight: 900; letter-spacing: 0.03em; -webkit-text-stroke: 0.018em currentColor; paint-order: stroke fill; }
@media (max-width: 520px) {
  .hero--page .btn-row .btn { font-size: 1.85rem; padding: 0.65rem 1.6rem; }
}

/* --- Nav ---------------------------------------------------------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--coal);            /* solid — no backdrop-filter (fixed-drawer trap) */
  border-bottom: 1px solid var(--coal-line);
}
.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.7rem;
}
.nav-brand { display: inline-flex; align-items: center; text-decoration: none; }
.nav-brand img {
  height: 48px;
  width: auto;
  background: #fff;
  border-radius: 5px;
  padding: 2px 5px;                    /* the van-decal plate — 13 Oct: trimmed, Joseph wanted less white */
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  font-family: var(--font-strong);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--white-warm);
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--gold); border-color: var(--gold); }
/* 3 Sep (Joseph): both header pills the same — transparent with a gold outline, the wordmark in the
   display face bigger and bolder, digits centred in their letters, and the whole pill goes orange on hover. */
.nav-call {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.95rem;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold);
  background: transparent;
  border: 2px solid var(--gold);
  padding: 0.5rem 1.5rem;
  border-radius: 30px;
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav-call:hover { background: transparent; border-color: var(--white-warm); color: var(--white-warm); }   /* 16 Sep (Joseph): white on dark, matching the hero — no more orange */
.nav-toggle { display: none; }

/* Services dropdown */
.nav-caret { font-size: 0.7em; margin-left: 0.2rem; }
.has-dropdown { position: relative; }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 270px;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: var(--coal-raise);
  border: 1px solid var(--coal-line);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
  z-index: 60;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: 0.6rem 1.3rem;
  font-family: var(--font-strong);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--white-warm);
  text-decoration: none;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.nav-dropdown a:hover { color: var(--gold); background: rgba(240, 180, 28, 0.06); }

@media (max-width: 880px) {
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    padding: 0.5rem;
    cursor: pointer;
  }
  .nav-toggle span { width: 26px; height: 2px; background: var(--white-warm); transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--coal);
    border-bottom: 1px solid var(--coal-line);
    padding: 0.5rem var(--gutter) 1.25rem;
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-link { display: block; padding: 0.9rem 0; border-bottom: 1px solid var(--coal-line); font-size: 0.95rem; }
  .nav-call { display: inline-flex; margin-top: 1rem; }
  .nav-links { max-height: calc(100vh - 70px); overflow-y: auto; }
  .nav-caret { transition: transform 0.2s var(--ease); display: inline-block; }
  .has-dropdown.is-open .nav-caret { transform: rotate(180deg); }
  .nav-dropdown {
    position: static;
    transform: none;
    min-width: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    display: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .has-dropdown.is-open .nav-dropdown { display: block; padding: 0.15rem 0 0.35rem; }
  .has-dropdown:hover .nav-dropdown, .has-dropdown:focus-within .nav-dropdown { transform: none; }
  .nav-dropdown a { padding: 0.55rem 0 0.55rem 1.2rem; font-size: 0.85rem; color: var(--stone); }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: min(88vh, 860px);
  padding-block: clamp(4rem, 10vw, 7rem);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(23, 21, 18, 0.94) 0%, rgba(23, 21, 18, 0.82) 42%, rgba(23, 21, 18, 0.38) 100%);
}
.hero-content { position: relative; z-index: 1; }
.hero-content h1 { max-width: 12ch; }
.hero-content .serif-lead { max-width: 44ch; margin-top: 1.5rem; color: var(--white-warm); }

.hero--page { min-height: min(62vh, 620px); }

.hero-phone {
  margin-top: 2.4rem;
}
.hero-phone a {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1;
  letter-spacing: 0.02em;
  /* 14 Sep (Joseph): the gold wordmark with white digits is the resting state everywhere —
     header pill, hero, service-page button. Hover flips it: white letters, gold digits. */
  color: var(--gold);
  border-bottom: 3px solid var(--gold);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.hero-phone a:hover { color: var(--white-warm); border-color: var(--white-warm); }
.hero-phone > a .lk-l i { color: #fff; }
.hero-phone > a:hover .lk-l i { color: var(--gold); }
.hero-phone .hero-phone-alt {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--stone);
}
.hero-phone .hero-phone-alt a {
  font: inherit;
  color: var(--white-warm);
  border-bottom: 1px solid var(--coal-line);
  letter-spacing: 0.03em;
}

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3.5rem;
  margin-top: 2.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--coal-line);
}
.stat .stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1;
  color: var(--gold);
  letter-spacing: 0.01em;
}
/* 3 Sep: the star sits small and apart from the 4.8, sized nearer the label text */
.stat .stat-star { font-size: 0.46em; margin-left: 0.32em; vertical-align: 0.42em; letter-spacing: 0; }
.stat .stat-label {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--font-strong);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--white-warm);
}

/* --- Sections ------------------------------------------------------------ */

.section { padding-block: var(--section-y); }
.section-head { max-width: 60ch; margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }

/* Service cards (homepage + services hub) */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
@media (max-width: 1024px) { .svc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .svc-cards { grid-template-columns: 1fr; } }
.svc-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ink-line);
  text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(27, 24, 19, 0.13); }
.svc-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.svc-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem 1.25rem 1.3rem; }
.svc-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  line-height: 1.05;
}
.svc-card p { margin: 0.6rem 0 1.1rem; color: var(--stone-dark); font-size: 0.98rem; line-height: 1.55; }
.svc-card .svc-go {
  margin-top: auto;
  font-family: var(--font-strong);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.76rem;
  color: var(--brass);
}
.svc-card:hover .svc-go { color: var(--ink); }

/* Brand band (full-width, coloured logos) */
.brand-band { padding-block: clamp(2.8rem, 6vw, 4.2rem); border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); text-align: center; }
.brand-band-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem clamp(2.5rem, 7vw, 5.5rem);
  margin-top: 2rem;
}
.brand-band-row img { height: clamp(36px, 5vw, 54px); width: auto; }

/* Stylised service-area map */
.area-map { width: 100%; height: auto; display: block; border-radius: 10px; }
.map-caption { margin-top: 1rem; font-size: 0.95rem; color: var(--stone-dark); }

/* Inline logo icons */
.gicon { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; margin-right: 0.5rem; }
.ficon { width: 18px; height: 18px; display: inline-block; vertical-align: -4px; margin-right: 0.6rem; flex: none; }

/* Editorial service rows (never cards) */
.svc-rows { border-top: 1px solid var(--ink-line); }
.svc-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto;
  gap: 1rem 2.5rem;
  align-items: baseline;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--ink-line);
  text-decoration: none;
  transition: background 0.2s var(--ease);
}
.svc-row:hover { background: var(--paper-deep); }
.svc-row h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  letter-spacing: 0.02em;
}
.svc-row p { margin: 0; color: var(--stone-dark); font-family: var(--font-body); font-weight: 500; font-size: 1.0625rem; line-height: 1.6; }
.svc-row .svc-go {
  font-family: var(--font-strong);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  color: var(--brass);
  white-space: nowrap;
}
.svc-row:hover .svc-go { color: var(--ink); }
@media (max-width: 720px) {
  .svc-row { grid-template-columns: 1fr; gap: 0.35rem; }
  .svc-row .svc-go { display: none; }
}

/* Split rows (image + copy) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.split figure { margin: 0; }
.split img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

/* Reviews */
.review-band blockquote {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.6;
  color: var(--white-warm);
}
.on-paper .review-band blockquote { color: var(--ink); }
.review-band figcaption {
  margin-top: 1rem;
  font-family: var(--font-strong);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  color: var(--stone);
}
.on-paper .review-band figcaption { color: var(--stone-dark); }
.review-stars { color: var(--gold); letter-spacing: 0.18em; font-size: 0.95rem; margin-bottom: 0.9rem; }
.on-paper .review-stars { color: var(--gold-deep); }
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.review-score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem 1.6rem;
}
.review-score .score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.4rem, 8vw, 5.6rem);
  line-height: 1;
  color: var(--gold);
}
.review-score .score-of {
  display: inline-flex;
  align-items: center;
  color: var(--stone);
  font-size: 1.05rem;
}
.review-score .score-of strong { color: var(--white-warm); }
.gicon--lg { width: 28px; height: 28px; vertical-align: -7px; margin-right: 0.7rem; }

/* Brand strip */
.brand-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 3rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ink-line);
}
.brand-strip img {
  height: clamp(28px, 4vw, 42px);
  width: auto;
  filter: grayscale(1) contrast(0.85);
  opacity: 0.75;
}

/* Suburb chips */
.area-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; padding: 0; list-style: none; }
.area-list li {
  font-family: var(--font-strong);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: 0.9rem;
  padding: 0.5rem 1.15rem;
  border: 1px solid var(--ink-line);
  border-radius: 28px;
  color: var(--stone-dark);
  background: var(--paper-deep);
}
.on-dark-band .area-list li { border-color: var(--coal-line); color: var(--stone); }

/* Checklist (service pages) */
.check-list { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.check-list li {
  position: relative;
  padding: 0.85rem 0 0.85rem 2.2rem;
  border-bottom: 1px solid var(--ink-line);
  font-size: 1.05rem;
}
.check-list li::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0.85rem;
  color: var(--brass);
  font-size: 0.95rem;
}

/* FAQ */
.faq { border-top: 1px solid var(--ink-line); }
.faq details { border-bottom: 1px solid var(--ink-line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 0;
  font-family: var(--font-strong);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--brass); transition: transform 0.2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-body { padding: 0 0 1.4rem; max-width: 62ch; color: var(--stone-dark); }

/* CTA band */
.cta-band { text-align: center; }
.cta-band .hero-phone { margin-top: 1.8rem; }
.cta-band .cta-note { margin-top: 1.4rem; color: var(--stone); font-size: 1rem; }

/* --- Contact form -------------------------------------------------------- */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 2rem; }
.form-grid .form-field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-field label {
  display: block;
  font-family: var(--font-strong);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  margin-bottom: 0.45rem;
  color: var(--stone);
}
.on-paper .form-field label { color: var(--stone-dark); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--white-warm);
  background: var(--coal-raise);
  border: 1px solid var(--coal-line);
  border-radius: 4px;
  padding: 0.85rem 1rem;
  transition: border-color 0.2s var(--ease);
}
.on-paper .form-field input, .on-paper .form-field textarea, .on-paper .form-field select {
  color: var(--ink);
  background: var(--white-warm);
  border-color: var(--ink-line);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--gold); }
.form-field textarea { min-height: 130px; resize: vertical; }
.form-status { margin-top: 1rem; font-weight: 600; display: none; }
.form-status.is-ok { display: block; color: var(--gold); }
.on-paper .form-status.is-ok { color: var(--brass); }
.form-status.is-err { display: block; color: #d9573a; }
.hp-field { position: absolute; left: -9999px; opacity: 0; }

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  background: var(--coal);
  border-top: 1px solid var(--coal-line);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: 0.98rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { height: 54px; width: auto; background: #fff; border-radius: 5px; padding: 2px 6px; }
.footer-brand p { margin-top: 1.1rem; color: var(--stone); max-width: 30ch; }
.footer-col h4 {
  font-family: var(--font-strong);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--gold);
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.55rem; }
.footer-col a { color: var(--stone); text-decoration: none; transition: color 0.2s var(--ease); }
.footer-col a:hover { color: var(--gold); }
.footer-legal {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--coal-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem 2rem;
  color: var(--stone);
  font-size: 0.9rem;
}

/* --- Reveal -------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .nav-call { transition: none; }
}

/* --- Summary of services: Emergency · Residential · Commercial · Safes ---
   Editorial columns divided by hairlines — not cards. */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--coal-line);
}
.on-paper .cat-grid { border-top-color: var(--ink-line); }
.cat-col {
  padding: 2.2rem clamp(1rem, 2vw, 1.8rem) 2.4rem;
  border-bottom: 1px solid var(--coal-line);
  border-right: 1px solid var(--coal-line);
}
.on-paper .cat-col { border-bottom-color: var(--ink-line); border-right-color: var(--ink-line); }
.cat-col:first-child { padding-left: 0; }
.cat-col:last-child { border-right: 0; padding-right: 0; }
.cat-col h3 { margin-bottom: 0.9rem; }
.cat-col > p { color: var(--stone); font-size: 1rem; line-height: 1.6; }
.on-paper .cat-col > p { color: var(--stone-dark); }
.cat-list { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.cat-list li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.5rem;
  font-size: 0.98rem;
  line-height: 1.5;
}
.cat-list li::before {
  content: "\2605";
  position: absolute;
  left: 0;
  top: 0.45rem;
  color: var(--brass);
  font-size: 0.8rem;
}
.cat-link {
  display: inline-block;
  margin-top: 1.3rem;
  font-family: var(--font-strong);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.on-paper .cat-link { color: var(--brass); }
.cat-link:hover { border-bottom-color: currentColor; }
@media (max-width: 980px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-col:nth-child(2n) { border-right: 0; padding-right: 0; }
  .cat-col:nth-child(2n+1) { padding-left: 0; }
}
@media (max-width: 560px) {
  .cat-grid { grid-template-columns: 1fr; }
  .cat-col { padding-left: 0; padding-right: 0; border-right: 0; }
}

/* --- Photo bands (locks, keys, safe dials) --- */
.photo-grid { display: grid; gap: clamp(1rem, 2.2vw, 1.8rem); }
.photo-grid--2 { grid-template-columns: repeat(2, 1fr); }
.photo-grid--3 { grid-template-columns: repeat(3, 1fr); }
.photo-grid--4 { grid-template-columns: repeat(4, 1fr); }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-grid--2 img { aspect-ratio: 3 / 2; }
.photo-grid figcaption {
  margin-top: 0.8rem;
  font-family: var(--font-strong);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}
@media (max-width: 900px) {
  .photo-grid--3, .photo-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .photo-grid--2, .photo-grid--3, .photo-grid--4 { grid-template-columns: 1fr; }
}

/* --- Safe brand marks (wordmarks until real logos are dropped in) --- */
.brand-group-label {
  margin: 2.2rem 0 0;
  font-family: var(--font-strong);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
}
.brand-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem clamp(1.6rem, 4vw, 3rem);
  margin-top: 1rem;
}
.brand-mark {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: clamp(1rem, 1.9vw, 1.45rem);
  line-height: 1.1;
  color: var(--ink);
  opacity: 0.72;
}
.brand-marks img { height: clamp(30px, 4.2vw, 46px); width: auto; }
.brand-note {
  margin: 2.4rem auto 0;
  max-width: 62ch;
  font-size: 0.95rem;
  color: var(--stone-dark);
}

/* --- Split hero: copy left, quote form right ----------------------------- */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(340px, 0.88fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
/* the copy column is narrower than a full-bleed hero, so the display type steps down */
.hero--split .display--hero { font-size: clamp(2.7rem, 5.2vw, 4.8rem); }
.hero--split .hero-copy h1 { max-width: 14ch; }
.hero--split .hero-phone { margin-top: 1.8rem; }
.hero--split .hero-phone a { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.hero--split .stat-row { margin-top: 2rem; padding-top: 1.4rem; gap: 1.2rem 2.6rem; }
.hero--split .stat .stat-num { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.hero--split .hero-content .serif-lead { max-width: 40ch; margin-top: 1.2rem; }

.hero-form-panel {
  background: var(--coal-raise);
  border: 1px solid var(--coal-line);
  border-top: 2px solid var(--brass);
  padding: clamp(1.5rem, 2.2vw, 2.1rem);
}
.hero-form-panel h2 { margin-top: 0.5rem; }
.hero-form-lead { margin-top: 0.8rem; color: var(--stone); font-size: 0.98rem; line-height: 1.55; }
.hero-form .form-grid { margin-top: 1.3rem; gap: 0.85rem; }
.hero-form .form-field input,
.hero-form .form-field select,
.hero-form .form-field textarea { padding: 0.7rem 0.85rem; font-size: 0.98rem; }
.hero-form textarea { min-height: 78px; }
.hero-form .btn-row { margin-top: 1.3rem; }
.hero-form .btn { width: 100%; justify-content: center; }
.hero-form-note {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--coal-line);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--stone);
}
.hero-form-note a { color: var(--gold); text-decoration: none; border-bottom: 1px solid currentColor; }

@media (max-width: 980px) {
  /* 29 Sep (Joseph, from his phone): once the hero stacks, the quote form comes straight after the headline
     and the services list sits under it. .hero-copy dissolves (display: contents) so its children and the
     form can be ordered as one column; the desktop two-column hero is untouched. */
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }   /* stretch: the grid rule's align-items:center would centre every row */
  .hero-copy { display: contents; }
  .hero-copy > h1 { order: 1; }
  .hero-form-panel { order: 2; width: 100%; max-width: 560px; margin-top: 1.7rem; }
  .hero-what-label { order: 3; margin-top: 2.3rem; }
  .hero-points { order: 4; }
  .hero-phone { order: 5; }
  .stat-row { order: 6; }
  .hero--split { min-height: 0; }
  .hero--split .hero-copy h1 { max-width: 12ch; }
}
@media (max-width: 560px) {
  .hero--split { padding-top: 2.6rem; }     /* less air above the headline, so the form starts on the first screen */
}
/* the form panel sits on the bright side of the hero photo — calm that edge down */
.hero--split .hero-media::after {
  background: linear-gradient(100deg, rgba(23, 21, 18, 0.95) 0%, rgba(23, 21, 18, 0.86) 40%, rgba(23, 21, 18, 0.62) 100%);
}

/* --- Safe brand logo wall ------------------------------------------------ */
.brand-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.7rem, 3vw, 2.8rem) clamp(1rem, 2vw, 2rem);
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.brand-cell { display: flex; align-items: center; justify-content: center; min-height: 58px; }
.brand-cell img {
  height: clamp(32px, 4.2vw, 48px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  /* the palette is charcoal + gold; twelve logos in full colour would shout, so they
     sit back in mono and come up to full colour on hover (and always on touch) */
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter 0.25s var(--ease), opacity 0.25s var(--ease);
}
.brand-cell:hover img { filter: none; opacity: 1; }
@media (hover: none) { .brand-cell img { filter: none; opacity: 1; } }
@media (max-width: 860px) { .brand-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .brand-wall { grid-template-columns: repeat(2, 1fr); } }

/* ---- 27 Aug round (Celina's email): digits inside 1800 LOCK IT, labelled ----
   phone stack, mobile number, hero what-we-do points ------------------------ */

.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;
}

/* Joseph's spec: the digits of 1800 562 548 set small inside each LOCK IT glyph */
/* The wordmark carries the digits, so the letters are set as heavy as the family
   goes and then thickened again with a stroke — the extra mass is what lets each
   glyph actually close around its number. The stroke inherits, so the digit
   itself has to switch it back off or it would be painted out in gold/ink. */
.lockit {
  font-weight: 900;
  -webkit-text-stroke: 0.018em currentColor;
  paint-order: stroke fill;
}
/* 16 Sep (Joseph): the wordmark is now his supplied artwork — gold letters with the white keypad digits set
   inside them — used everywhere 1800 LOCK IT appears. Rendered as a background so hover can swap the file:
   every instance → white letters / gold digits on the dark ground (16 Sep: pill + button no longer go orange). The phone number
   stays in the sr-only span, so screen readers and search still get the text. Height tracks font-size. */
.lockit--img {
  display: inline-block;
  height: 0.72em;
  aspect-ratio: 1574 / 252;
  vertical-align: -0.02em;
  /* 29 Sep (Joseph): the digits are filled WHITE — in his file they are see-through holes, which on the dark
     site read as damage to the letters at phone size. Built by prep_lockit.py; new file names so no phone
     is served the cached knock-out artwork. */
  background: url("../assets/img/1800-lock-it-white.png") center / contain no-repeat;
  -webkit-text-stroke: 0;
}
.hero-phone a:hover .lockit--img { background-image: url("../assets/img/1800-lock-it-white-hover.png"); }
.nav-call:hover .lockit--img, .btn--call:hover .lockit--img { background-image: url("../assets/img/1800-lock-it-white-hover.png"); }
.lk-l { position: relative; display: inline-block; }
.lk-l i {
  position: absolute;
  left: 50%;
  top: 50%;
  /* per-letter nudge, set by the .lk-<LETTER> rules below */
  transform: translate(calc(-50% + var(--dx, 0em)), calc(-50% + var(--dy, 0em)));
  -webkit-text-stroke: 0;
  font-style: normal;
  font-weight: 700;
  font-size: 0.4em;
  line-height: 1;
  letter-spacing: 0;
  /* Joseph's spec is a WHITE digit, and it has to read at a glance. White alone
     washes out where it crosses the gold glyph (and vanished entirely in the nav
     pill, which used to set it gold-on-gold), so a tight coal halo carries it
     over both the letter and the ground behind it — one rule works on the dark
     heroes and on the gold pill alike. */
  color: #fff;
  text-shadow:
     1px 0 0 var(--coal), -1px 0 0 var(--coal),
     0 1px 0 var(--coal),  0 -1px 0 var(--coal),
     1px 1px 0 var(--coal), -1px 1px 0 var(--coal),
     1px -1px 0 var(--coal), -1px -1px 0 var(--coal);
}
/* In the pill the letters are dark ink on gold, so a white digit sitting inside
   the glyph already has all the contrast it needs — the full halo just blotted
   the letters out at this size. Keep it to a hairline so the digit still holds
   where it laps onto the gold. */
/* No halo in the pill. The letters here are dark ink on gold, so a white digit
   sitting in the glyph is already high-contrast — and at this size a 1px halo
   is wider than the numeral's own strokes, which turned every digit into a
   blob. The pill is sized up instead so the digits have room to read. */
/* In the pill the type is far too small for an outlined digit — a 1px halo is as
   thick as the numeral's own strokes and turns each one into a blob. So the digit
   gets a solid ink keycap instead: white on dark reads at any size, it holds on
   the gold as well as on the letter, and it nods at the phone keypad the number
   comes from. */
/* 3 Sep: in the header pill the digits sit dead centre of each letter (Joseph), and the pill is
   now gold-on-dark like the heroes, so the default white-with-coal-halo digit is right here too. */
.nav-call .lk-l { --dx: 0em; --dy: 0em; }

/* labelled phone stack: Free call above 1800 LOCK IT, Mobile above 0433 */
.phone-label {
  display: block;
  font-family: var(--font-strong);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.35rem;
}
.hero-phone .hero-phone-mob { margin-top: 1.15rem; }
.hero-phone .hero-phone-mob a {
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  color: var(--white-warm);
  border-bottom-width: 2px;
  border-bottom-color: var(--coal-line);
}
.hero-phone .hero-phone-mob a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.hero--split .hero-phone .hero-phone-mob a { font-size: clamp(1.4rem, 2.4vw, 2rem); }

/* both call pills in the nav */
.nav-call-group { display: flex; align-items: center; gap: 0.55rem; }
/* .nav-call--mob now shares every rule with .nav-call (same outline, same text size — Joseph, 3 Sep);
   the class is kept for the tablet-width hide rule below and the drawer spacing. */
@media (max-width: 880px) {
  .nav-call-group { flex-wrap: wrap; }
  .nav-call--mob { margin-top: 1rem; }
}

/* The 1800 pill is deliberately large — the digits inside LOCK IT have to be
   readable and that needs glyph size. Between the tablet breakpoint and ~1100px
   two pills that big overflow the nav bar, so the SECOND (mobile) pill drops out
   rather than shrinking the 1800 one. The mobile number is still in the hero, in
   the footer, and back in the nav drawer below 880px. */
@media (min-width: 881px) and (max-width: 1100px) {
  .nav-links { gap: 1.2rem; }
  .nav-call--mob { display: none; }
}

/* hero: What we do — little gold dot points */
.hero-what-label {
  margin-top: 1.6rem;
  font-family: var(--font-strong);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
/* 18 Sep (Joseph): one point per row by default (phones, tablets, narrow laptops). From 1240px up — where the
   copy column is its full 661px — 13 Oct: the points are now the full service names, too long for two rows of
   four, so they sit as a two-column grid (four rows of two, in service order). */
.hero-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.7rem 0 0;
  padding: 0;
}
@media (min-width: 1240px) {
  .hero-points { display: grid; grid-template-columns: repeat(2, max-content); gap: 0.55rem 2.2rem; }
  .hero-points li { white-space: nowrap; }
}
.hero-points li {
  display: flex;
  align-items: center;
  gap: 0.55em;
  color: var(--white-warm);
  font-weight: 500;
  font-size: 1.02rem;
}
.hero-points li a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.hero-points li a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.hero-points li::before {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* Nesting the digit per glyph. Barlow Condensed 900 only gives a closed counter
   on O; C and K have a part-enclosed crook; L, I and T are open, so their digit
   is sat on the thickest part of the stroke instead of floating in the gap.
   Values are in em so they hold at every size the wordmark is used at. */
.lk-L { --dx: -0.06em; --dy:  0.10em; }   /* down onto the stem/arm corner */
.lk-O { --dx:  0em;    --dy:  0em;    }   /* dead centre — the counter holds it */
.lk-C { --dx:  0.03em; --dy:  0em;    }   /* nudged into the C's bowl */
.lk-K { --dx: -0.04em; --dy:  0em;    }   /* onto the stem, left of the fork */
.lk-I { --dx:  0em;    --dy:  0em;    }   /* centred on the stem */
.lk-T { --dx:  0em;    --dy:  0.12em; }   /* below the crossbar, on the stem */


/* ---- 3 Sep round (Celina's Pages doc): service pages ---------------------------
   Joseph: bigger text for the description, the dot points and the Good to know section. */
.svc-page .split p { font-size: 1.2rem; line-height: 1.62; }
.svc-page .check-list li { font-size: 1.18rem; padding-block: 0.95rem; }
.svc-page .check-list li::before { top: 0.95rem; font-size: 1.05rem; }
.svc-page .faq summary { font-size: 1.18rem; padding: 1.35rem 0; }
.svc-page .faq .faq-body { font-size: 1.12rem; line-height: 1.62; max-width: 66ch; }
.svc-page .review-band blockquote { font-size: 1.15rem; }
@media (max-width: 560px) {
  .svc-page .split p { font-size: 1.1rem; }
  .svc-page .check-list li, .svc-page .faq summary { font-size: 1.08rem; }
  .svc-page .faq .faq-body { font-size: 1.02rem; }
}
/* the wordmark inside the hero call button reads at button size */
.btn--call .lockit { -webkit-text-stroke: 0.012em currentColor; }


/* ---- 29 Sep round (Joseph, from his phone) --------------------------------------
   "The services are a little too spaced out and perhaps need to be a little larger" and
   "maybe the number needs to be bigger too". Both only where the hero stacks. */
@media (max-width: 980px) {
  .hero-points { gap: 0.2rem; margin-top: 0.55rem; }
  .hero-points li { font-size: 1.24rem; line-height: 1.4; }
  /* the wordmark is 4.5em wide (0.72em tall x 1574/252), so 17vw fills most of a phone's width;
     the digits inside it grow with it */
  .hero--split .hero-phone > a { font-size: clamp(3.4rem, 17vw, 4.6rem); border-bottom-width: 4px; }
  .hero--split .hero-phone .hero-phone-mob a { font-size: clamp(1.9rem, 8vw, 2.4rem); }
}
@media (max-width: 560px) {
  .cta-band .hero-phone > a { font-size: clamp(3.4rem, 17vw, 4.6rem); border-bottom-width: 4px; }
  .cta-band .hero-phone .hero-phone-mob a { font-size: clamp(1.9rem, 8vw, 2.4rem); }
}