/* ===================================================================
   concept3.css — GG Locksmith Miami, white premium paid-traffic page.

   BELOW-THE-FOLD ONLY. The design tokens, @font-face rules, reset,
   sticky header, hero and sticky mobile call bar are inlined in the
   <head> of index.html so the first screen paints without waiting on a
   stylesheet. This file depends on those tokens and is not usable on
   its own.

   Self-contained: nothing here is shared with the main site or with
   /concept2/, and neither shares anything with this.
   =================================================================== */

/* ---- Section furniture ---------------------------------------------- */

.sec { padding: var(--sec-y) 0; }
.sec--grey { background: var(--grey); }
.sec--navy { background: var(--navy); color: #fff; }

.sec-head { max-width: 46ch; margin: 0 0 var(--head-gap); }
.sec-head--center { margin-inline: auto; text-align: center; }
/* A one-line heading is wider than the 46ch measure above, so this variant
   lifts the limit off the head and puts it back on the paragraph, which is
   the part that actually wants a short line. Without it the heading
   overflows its own box by ~62px from 692px up — invisible at a glance,
   because body has overflow-x: hidden, which is exactly why it is easy to
   ship by accident. */
.sec-head--wide { max-width: none; }
.sec-head--wide .sub { max-width: 46ch; margin-inline: auto; }

/* Heading left, standfirst right. The columns are the same ratio as the
   .areas grid below, so the paragraph sits directly over the contact card
   and the heading over the list of neighbourhoods -- rather than the
   paragraph running under the heading with the right half of the section
   left empty. One column again below the width where .areas splits. */
@media (min-width: 940px) {
  .sec-head--split {
    max-width: none; display: grid; align-items: start;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    /* Column gap only. A row gap here would open a hole between the eyebrow
       and the heading, which sit in rows 1 and 2 of the same column. */
    column-gap: clamp(26px, 3.4vw, 44px); row-gap: 0;
    /* The paragraph spans both rows and is usually taller than the eyebrow
       and heading together. 1fr on row 2 sends all of that spare height
       there; with two intrinsic rows it is split evenly between them and
       the heading drifts away from its eyebrow. */
    grid-template-rows: min-content 1fr;
  }
  .sec-head--split .eyebrow { grid-column: 1; grid-row: 1; }
  .sec-head--split .h2 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .sec-head--split .sub { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}

.h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.85rem, 4.6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.032em;
  color: var(--navy);
  margin: 0 0 0.45em;
  text-wrap: balance;
}
.sec--navy .h2, .final .h2 { color: #fff; }
.h2 em { font-style: normal; color: var(--amber); }

/* One line, always. The size is driven off the viewport rather than the
   usual clamp, so the whole phrase fits a 320px screen without wrapping;
   text-wrap: balance goes with it, there being nothing left to balance.
   Unchanged at 692px and up, where the 2.9rem cap takes over.

   --fit is measured, not guessed, and measured against the FALLBACK rather
   than Outfit, which is what a Mac shows during the font swap:

     "Three steps, start to finish"    11.41em Outfit / 12.63em Avenir Heavy
     "Locksmith work, done properly"   13.53em / 15.46em  -> 5.45vw
     "Trusted by people down the road" 14.30em / 16.32em  -> 5.17vw
     "The questions we get every day"  13.56em / 15.54em  -> 5.42vw

   The number is each phrase's own, so it lives next to the phrase in the
   markup. Re-measure when the words change: the binding case is 320px,
   where the gutters leave 284px. */
.h2--nowrap {
  white-space: nowrap;
  text-wrap: normal;
  font-size: min(2.9rem, var(--fit, 6.7vw));
}

/* A long phrase held to one line on a small phone ends up smaller than the
   body copy under it -- "Trusted by people down the road" would set at
   16.5px at 320px wide. Below the width where its own --fit still yields
   about 20px, such a heading is better wrapped than shrunk, so it drops
   back to the normal h2 clamp. The shorter headings never need this. */
@media (max-width: 389px) {
  .h2--wrap-sm {
    white-space: normal;
    text-wrap: balance;
    font-size: clamp(1.85rem, 4.6vw, 2.9rem);
  }
}

.sub {
  margin: 0;
  font-size: clamp(1rem, 1.9vw, 1.1rem);
  line-height: 1.6;
  color: var(--text);
}
.sec--navy .sub, .final .sub { color: var(--muted); }
/* Phone links sitting inside body copy still need a thumb-sized hit area.
   It has to be display: inline, NOT inline-block -- vertical padding on an
   inline box enlarges the hit area without taking part in line layout,
   whereas inline-block grows the line box and shunts the lines above and
   below it apart. The service-area paragraph, which has a number in the
   middle of it, was visibly unevenly leaded because of this. */
.sub a[href^="tel:"] { display: inline; padding: 13px 2px; color: var(--amber-ink); }

/* ---- Empty image slots ----------------------------------------------
   Every slot with no real photo behind it yet. Intentionally designed:
   soft panel, hairline border, brass line icon, explicit caption. Never
   a broken image and never a grey void. ------------------------------ */

.slot {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 28px 20px;
  text-align: center;
  background: #F2F4F7;
  border: 1px dashed #C3CCD9;
  border-radius: var(--radius);
  color: var(--text-soft);
}
.slot svg { width: 30px; height: 30px; color: var(--amber-ink); }
.slot b {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--navy);
}
.slot span { font-size: 0.78rem; line-height: 1.45; max-width: 30ch; }

/* ---- 3. Services ----------------------------------------------------- */

.svc-grid {
  display: grid;
  /* Explicit 1 / 2 / 4 rather than auto-fit. auto-fit was free to settle on
     three columns in the middle of the range, and four cards in three
     columns is always one orphan on a row of its own — which is what it did
     at 1024. These are the only counts four cards divide into evenly. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
}
@media (min-width: 620px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .card, .card:hover { transition: none; transform: none; } }

.card__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--grey); }
.card__body { padding: clamp(16px, 2vw, 22px); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__body h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--navy);
  margin: 0;
}
.card__body p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--text); }

/* "Learn More" is a real disclosure rather than a link to nowhere —
   there are no service pages to send anyone to. */
.more { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
  color: var(--amber-ink);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.more > summary .arr { transition: transform 0.2s ease; }
.more[open] > summary .arr { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .more > summary .arr { transition: none; } }
.more ul { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 7px; }
.more li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 9px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
}
.more li svg { width: 14px; height: 14px; color: var(--amber-ink); margin-top: 4px; }
.more .calllink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--amber-ink);
  text-decoration: none;
}
.more .calllink:hover { text-decoration: underline; text-underline-offset: 3px; }
.more .calllink svg { width: 15px; height: 15px; }

/* ---- 4. Why choose ---------------------------------------------------- */

.why { display: grid; gap: clamp(30px, 4.5vw, 60px); }
@media (min-width: 920px) { .why { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: start; } }

.why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(18px, 2.6vw, 30px);
}
.why__item { display: grid; gap: 10px; }
.why__ico {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.sec--grey .why__ico { background: #fff; }
.why__ico svg { width: 21px; height: 21px; color: var(--amber-ink); }
.why__item h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.04rem;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0;
}
.why__item p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--text); }

/* ---- 5. Reviews: STYLED BUT UNUSED ---------------------------------------
   No page carries review markup. These rules are kept so that pasting real
   Google reviews back in is a markup-only change — see the note where the
   reviews section used to be, in public/index.html. --------------------- */

.rev-grid {
  display: grid;
  /* Explicit 1 / 2 / 4, for the same reason .svc-grid is: auto-fit was free
     to land on three columns in the middle of the range, and four cards in
     three columns always strands one on a row of its own. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
}
@media (min-width: 620px) { .rev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rev-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rev {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(18px, 2.4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}
.stars { display: flex; gap: 3px; }
.stars svg { width: 17px; height: 17px; color: var(--amber-ink); }
/* Was a dashed amber panel, which is what an EDIT-ME placeholder should
   look like. These now hold prose, so they are set as prose. */
.rev__quote {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font-size: 0.93rem;
  line-height: 1.62;
  color: var(--text);
}
.rev__who { margin-top: auto; display: flex; align-items: center; gap: 12px; }
/* Initials, not a dashed silhouette: there is no reviewer photograph and
   inventing a face for a quote would be worse than the quote. */
.rev__avatar {
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  background: var(--amber-tint);
  border: 1px solid var(--amber-line);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 0.9rem;
  color: var(--amber-ink);
}
.rev__name { font-size: 0.86rem; line-height: 1.4; color: var(--text-soft); }
.rev__name b { display: block; color: var(--navy); font-size: 0.92rem; }

.gbadge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: clamp(26px, 3.5vw, 36px) auto 0;
  padding: 13px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text-soft);
  font-size: 0.84rem;
  line-height: 1.4;
}
.gbadge b { color: var(--navy); font-weight: 700; }
.gbadge__g { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--navy); }

/* ---- 6. Callback form -------------------------------------------------- */

.lead { display: grid; gap: clamp(26px, 4vw, 48px); align-items: center; }
@media (min-width: 900px) { .lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

.lead__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(20px, 3vw, 30px);
  box-shadow: var(--shadow-lg);
}
.fields { display: grid; gap: 13px; }
.f { display: grid; gap: 6px; min-width: 0; }
.f label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.f label .opt { font-weight: 500; letter-spacing: 0.01em; text-transform: none; }
.f input, .f select, .f textarea {
  font-family: var(--body);
  font-size: 1rem;
  color: var(--navy);
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #D3DAE4;
  border-radius: 10px;
  appearance: none;
}
.f textarea { min-height: 82px; resize: vertical; line-height: 1.5; }
.f select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236B7786' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
  padding-right: 38px;
}
.f input:focus, .f select:focus, .f textarea:focus {
  border-color: var(--amber);
  outline: 3px solid rgba(247, 130, 10, 0.26);
  outline-offset: 0;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead__card .btn { margin-top: 5px; }
.lead__small { margin: 12px 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--text-soft); }
.lead__small a { color: var(--amber-ink); font-weight: 700; display: inline-block; padding: 12px 2px; }
.lead__msg {
  margin: 13px 0 0; padding: 12px 14px; border-radius: 10px;
  font-size: 0.86rem; line-height: 1.5;
  background: var(--amber-tint); border: 1px solid var(--amber-line); color: var(--amber-ink);
}
.lead__msg[hidden] { display: none; }

/* ---- 7. Service areas --------------------------------------------------- */

/* Was list | map at 1fr / 1.05fr. The map came out on the client's
   instruction, so rather than leave a hole the list takes the wider share
   and the contact card takes the rest — same two columns, same balance. */
.areas { display: grid; gap: clamp(26px, 3.4vw, 44px); align-items: start; }
@media (min-width: 940px) { .areas { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); } }

.areas__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 18px;
}
.areas__list li {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 0;
  font-size: 0.95rem; font-weight: 500; color: var(--navy);
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.areas__list svg { width: 15px; height: 15px; flex: none; color: var(--amber); }
.areas__list li.is-base { font-weight: 700; }

.areas__name {
  margin: 0 0 6px;
  font-family: var(--display); font-weight: 800; font-size: 1.06rem;
  letter-spacing: -0.022em; color: var(--navy);
}

.nap { margin: 0; }
.nap__row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 2px 18px; padding: 11px 0;
  font-size: 0.9rem; line-height: 1.5;
}
/* "Very light": a hair lighter than --line, which the neighbourhood list
   already uses. Between rows only, so the card has no rule at its edges. */
.nap__row + .nap__row { border-top: 1px solid rgba(14, 27, 46, 0.07); }
.nap dt {
  flex: none;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-soft);
}
.nap dd {
  margin: 0; margin-left: auto; text-align: right;
  min-width: 0; overflow-wrap: anywhere; color: var(--navy);
}
/* inline, not inline-block: the padding has to grow the hit area without
   growing the row. Same reason as the tel: links inside .sub. */
.nap dd a { display: inline; padding: 11px 0; color: var(--amber-ink); font-weight: 700; }

/* ---- 8. Final CTA band --------------------------------------------------- */

.final { background: var(--navy); color: #fff; padding: var(--sec-y) 0; }
.final__grid { display: grid; gap: clamp(28px, 4vw, 52px); align-items: center; }
@media (min-width: 920px) { .final__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); } }
.final .btn { margin-top: 6px; }

.stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: var(--sp-5) 0 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
}
.stats li { background: var(--navy); padding: 16px 18px; display: grid; gap: 3px; }
/* Three tiles in a two-column grid leaves a dead cell; the last one takes
   the whole row instead. */
@media (max-width: 619px) { .stats li:last-child { grid-column: 1 / -1; } }
@media (min-width: 620px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stats b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
  color: var(--amber);
}
.stats span { font-size: 0.78rem; letter-spacing: 0.055em; text-transform: uppercase; color: var(--muted); }

/* ---- 9. Footer ----------------------------------------------------------- */

.foot { background: #0A1522; color: var(--muted); padding: clamp(34px, 4.4vw, 54px) 0 30px; font-size: 0.9rem; }
.foot__grid { display: grid; gap: clamp(26px, 4vw, 44px); }
@media (min-width: 760px) { .foot__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.foot h3 {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff; margin: 0 0 14px;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot ul a, .foot address a { display: inline-flex; align-items: center; min-height: 44px; }
.foot a:hover { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
.foot address { font-style: normal; line-height: 1.75; }
.foot__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: #fff; }
.foot__brand svg { width: 20px; height: 27px; color: var(--amber); }
.foot__brand b { font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.015em; }

.social { display: flex; gap: 9px; margin-top: 4px; }
.social a {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.26);
  border-radius: 11px;
  color: var(--muted);
}
.social a:hover { color: var(--amber); border-color: var(--amber); }
.social svg { width: 18px; height: 18px; }

.foot__legal {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between;
  font-size: 0.8rem; line-height: 1.6; color: #7E8CA0;
}
/* Clear of the sticky mobile call bar. */
@media (max-width: 899px) { .foot { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } }

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

.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   ADDED — photography, the why-us split, and the hover/reveal polish.

   Built in the vocabulary already in this file: white cards, a 1px --line
   edge, --shadow-md, 14-18px radii, amber reserved for conversion. Nothing
   here introduces a second visual idea.
   ========================================================================== */

/* ---- Why us: a photograph beside the reasons ---------------------------- */

/* Was text | items, with no image in the whole section. Now it is
   photograph | (heading + items), so the section gains an image without the
   four reasons getting any narrower than they already were. */
@media (min-width: 920px) {
  .why { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
}

.why__media {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  isolation: isolate;
}
.why__media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover;
  object-position: 50% 62%;     /* hold the doorway, not the sky */
  background: var(--grey);
  transform: scale(1.015);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.why__media:hover img { transform: scale(1.045); }
@media (max-width: 919px) { .why__media img { aspect-ratio: 16 / 9; } }

/* Deliberately the same object as .badge in the hero rather than a second
   card style invented for one section. */
.why__tag {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 15px;
  box-shadow: var(--shadow-md);
}
.why__tag-ico {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--grey); color: var(--amber-ink);
}
.why__tag-ico svg { width: 19px; height: 19px; }
.why__tag b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 0.95rem; letter-spacing: -0.02em; color: var(--navy); line-height: 1.15;
}
.why__tag > span { margin-top: 1px; }
.why__tag span span, .why__tag > span { font-size: 0.78rem; line-height: 1.4; color: var(--text-soft); }
.why__main .why__grid { margin-top: var(--sp-5); }

/* ---- Final band: tools, where the empty van slot used to be ------------- */

.final__media {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.final__media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  object-position: 50% 45%;
  background: var(--navy-2);
}

/* ---- Hover life on what was already here -------------------------------- */

/* The cards lifted but their photographs sat still, which is the tell that a
   grid was styled and its contents were not. */
.card { isolation: isolate; overflow: hidden; }
.card__img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.card:hover .card__img { transform: scale(1.055); }
.card:hover h3 { color: var(--amber-ink); }
.card__body h3 { transition: color 0.2s ease; }

.why__item { border-radius: 12px; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.why__item:hover { transform: translateY(-3px); }
.why__ico { transition: color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.why__item:hover .why__ico { color: var(--amber-ink); transform: translateY(-1px) scale(1.06); }

.areas__list li { border-radius: 8px; transition: color 0.2s ease, transform 0.2s ease; }
.areas__list li:hover { color: var(--navy); transform: translateX(3px); }

/* ---- Staggered reveal --------------------------------------------------- */

/* Siblings arriving on the same frame read as a slide transition, not a page.
   nth-child so the markup needs no inline style. */
.js .svc-grid .reveal:nth-child(2),
.js .why__grid .reveal:nth-child(2) { transition-delay: 70ms; }
.js .svc-grid .reveal:nth-child(3),
.js .why__grid .reveal:nth-child(3) { transition-delay: 140ms; }
.js .svc-grid .reveal:nth-child(4),
.js .why__grid .reveal:nth-child(4) { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  .js .svc-grid .reveal, .js .why__grid .reveal { transition-delay: 0ms !important; }
  .why__media img, .card__img, .why__item, .why__ico, .areas__list li { transition: none !important; }
  .why__media:hover img, .card:hover .card__img, .why__item:hover,
  .why__item:hover .why__ico, .areas__list li:hover { transform: none; }
}

/* ==========================================================================
   ADDED — glass sheen, background motifs, the lead contact block, and the
   small motion that was missing.

   Rule followed throughout: every animation here is a transform or an
   opacity, both of which the compositor can run without touching layout, and
   every one of them is switched off under prefers-reduced-motion at the
   bottom of this file.
   ========================================================================== */

/* ---- Glass sheen -------------------------------------------------------- */

/* One definition, applied to buttons and to every photograph. The highlight
   is a skewed gradient band swept across on hover; it never paints over text
   because it only exists on elements whose content is an image or a label,
   and pointer-events are off so it cannot eat a click. */
.btn,
.hero__frame,
.why__media,
.final__media,
.card__media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn::after,
.hero__frame::after,
.why__media::after,
.final__media::after,
.card__media::after {
  content: "";
  position: absolute;
  top: -25%; bottom: -25%;
  left: -60%; width: 42%;
  background: linear-gradient(100deg,
    transparent 0%,
    var(--sheen, rgba(255, 255, 255, 0.5)) 50%,
    transparent 100%);
  transform: skewX(-16deg);
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}

/* hover:hover keeps it off touch devices, where :hover sticks after a tap. */
@media (hover: hover) {
  .btn:hover::after,
  .btn:focus-visible::after,
  .hero__frame:hover::after,
  .why__media:hover::after,
  .final__media:hover::after,
  .card:hover .card__media::after {
    animation: sheen-sweep 0.85s cubic-bezier(0.3, 0.6, 0.3, 1);
  }
}

@keyframes sheen-sweep {
  0%   { left: -60%; opacity: 0; }
  14%  { opacity: 1; }
  100% { left: 118%; opacity: 0; }
}

/* A white sheen is invisible on a white button, so the ghost variant gets a
   warm one instead of nothing. */
.btn--ghost { --sheen: rgba(247, 130, 10, 0.26); }

/* ---- Background motifs -------------------------------------------------- */

.sec, .final { position: relative; overflow: hidden; }
.sec > .wrap, .final > .wrap { position: relative; z-index: 1; }

.deco {
  position: absolute;
  pointer-events: none;
  color: var(--navy);
  opacity: 0.05;
  z-index: 0;
}
.final .deco { color: #fff; opacity: 0.07; }

.deco--keys  { top: -18px; right: 3%; width: 320px; }
.deco--rings { bottom: -70px; left: -70px; width: 240px; }
.deco--grid  { top: 8%; right: -40px; width: 260px; }
.deco--hole  { top: 50%; right: 4%; width: 190px; transform: translateY(-50%); }

/* They sit behind the content (z-index 0 against the wrap's 1) and run at 5%
   opacity, so overlapping the column is not a problem — they read as a
   watermark, not an object competing for space. 900px is where the layout
   stops having edges to put them against; below that they are the only
   purely decorative thing on the page, so they go first. */
@media (max-width: 899px) { .deco { display: none; } }

/* ---- Lead section: contact details beside the form ---------------------- */

/* ---- The small motion that was missing ---------------------------------- */

/* The arrow on a call button leans into the direction it is sending you. */
.btn svg:last-child { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.btn:hover svg:last-child { transform: translateX(3px); }

/* Nav links had a colour change and nothing else. */
.nav a { position: relative; }
.nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 2px;
  height: 2px; border-radius: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }

/* The hero badge lifts a few pixels once, as the hero settles.

   Transform only, deliberately. animation-fill-mode: backwards holds the
   opening frame through the delay, so an opening frame of opacity 0 means an
   invisible badge for as long as the animation has not started — which in a
   throttled or backgrounded tab can be "for good". That exact pattern left
   the main site's hero blank below the headline. Worst case here is a badge
   sitting ten pixels low, which nobody will ever notice. */
.badge { animation: badge-settle 0.7s 0.25s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
@keyframes badge-settle {
  from { transform: translateY(10px); }
  to   { transform: none; }
}

.trust li svg, .why__tag-ico svg { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.trust li:hover svg { transform: scale(1.12); }

.stars svg { transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.rev:hover .stars svg { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .btn::after, .hero__frame::after, .why__media::after,
  .final__media::after, .card__media::after { display: none; }
  .btn svg:last-child, .nav a::after,
  .trust li svg, .why__tag-ico svg, .stars svg { transition: none !important; }
  .btn:hover svg:last-child, .trust li:hover svg,
  .rev:hover .stars svg { transform: none; }
  .nav a::after { display: none; }
  .badge { animation: none; }
}

/* ---- Service card icon -------------------------------------------------- */

/* Sits on the seam between the photograph and the text, the same device as
   the hero .badge and the why-us .why__tag rather than a fourth idea.

   It is positioned against .card__body, not .card__media: the media box
   carries overflow:hidden for the zoom and the sheen, so anything inside it
   that crossed its edge would simply be cut off. .card__body has no clipping
   of its own, and the card's own overflow:hidden never comes into it because
   the chip stays well inside the card's bounds. */
/* The extra 16px is the chip: it hangs 21px below the seam, so without it
   the heading sat 6px off the chip at narrow widths. This keeps the gap
   between 11 and 17px across the range. */
.card__body { position: relative; padding-top: calc(clamp(16px, 2vw, 22px) + 16px); }

.card__ico {
  position: absolute;
  top: 0;
  left: clamp(16px, 2vw, 22px);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  color: var(--amber-ink);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.22s ease, background-color 0.22s ease;
}
.card__ico svg { width: 21px; height: 21px; }

/* The card already lifts and its photograph already scales; the chip joining
   in is what ties the two halves of the card together on hover. */
.card:hover .card__ico {
  transform: translateY(-50%) scale(1.08);
  background: var(--amber-tint);
}

@media (prefers-reduced-motion: reduce) {
  .card__ico { transition: none; }
  .card:hover .card__ico { transform: translateY(-50%); }
}

/* ==========================================================================
   ADDED — the trust structure: proof bar, three steps, pricing and FAQ.

   Same vocabulary as everything above it: white cards on a 1px --line edge,
   14-18px radii, --amber-tint panels with --amber-ink glyphs, amber kept for
   conversion. No new colours and no second idea about what a card is.
   ========================================================================== */

/* ---- Proof bar ----------------------------------------------------------
   Sits in the hero's own white, directly under it, so it reads as part of
   the first screen rather than the start of the next section. Each tile is
   a link into whatever backs the number up. ------------------------------ */

.proofwrap { padding: 0 0 var(--sec-y); background: var(--white); }

.proof {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* The 1px gap over a --line background is what draws the hairlines
     between tiles — cheaper than four border declarations that have to
     know which edge they are on. */
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* Three tiles. Below 760px that is a pair and a remainder, so the last one
   spans the full row rather than leaving an empty cell showing the --line
   grey through the gap. */
.proof li:last-child { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proof li:last-child { grid-column: auto; }
}

.proof li { background: #fff; display: grid; }
.proof a {
  display: grid; gap: 3px; justify-items: center; align-content: center;
  text-align: center;
  padding: clamp(15px, 2vw, 21px) 10px;
  min-height: 44px;
  text-decoration: none; color: inherit;
  transition: background-color 0.2s ease;
}
.proof a:hover { background: var(--amber-tint); }
.proof__ico { display: grid; place-items: center; height: 26px; color: var(--amber-ink); margin-bottom: 2px; }
.proof__ico svg { width: 21px; height: 21px; }
.proof b {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.1rem, 2.3vw, 1.38rem);
  letter-spacing: -0.022em; line-height: 1.1; color: var(--navy);
}
.proof span:last-child {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-soft);
}
.proof a .proof__ico { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.proof a:hover .proof__ico { transform: translateY(-2px) scale(1.08); }

/* ---- Three steps --------------------------------------------------------
   Redesigned. Three things carry the section:

     1. A progress rail across the top of each card, filled a third, two
        thirds, then all the way. The card itself shows how far through the
        job you are, so the sequence is legible before a word is read. With
        JS on, the fill grows from nothing as the card scrolls in.
     2. A large ghosted numeral behind the copy, which gives the cards depth
        and scale without adding anything a visitor has to read.
     3. Navy icon tiles. The only navy-filled shapes in this part of the
        page, so the eye lands on them first and travels 1 - 2 - 3.

   The numerals and the rail are decorative; the <ol> already carries the
   order for a screen reader, and each card states its own step in text.
   ------------------------------------------------------------------------ */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 32px); } }

.step {
  --pad: clamp(20px, 2.6vw, 26px);
  position: relative;
  /* Own stacking context, so the ghosted numeral can sit behind the copy
     and still stay in front of the card's own white background. */
  isolation: isolate;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: calc(var(--pad) + 7px) var(--pad) var(--pad);
  box-shadow: var(--shadow-sm);
  display: grid; gap: var(--sp-2);
  align-content: start;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease, border-color 0.3s ease;
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--amber-line); }

/* The progress rail. Rounded to the card's own top corners rather than
   clipped, because the connector between cards has to escape the box. */
.step::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  border-radius: 18px 18px 0 0;
  background-color: var(--line);
  background-image: linear-gradient(90deg, var(--amber-hi), var(--amber-edge));
  background-repeat: no-repeat;
  background-size: var(--fill, 100%) 100%;
  transition: background-size 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.step:nth-child(1) { --fill: 34%; }
.step:nth-child(2) { --fill: 67%; }
.step:nth-child(3) { --fill: 100%; }
/* Grows as the card arrives. Static at full fill when JS is off. */
.js .step.reveal:not(.is-in)::before { background-size: 0 100%; }

.step__ghost {
  position: absolute; z-index: -1;
  top: 6px; right: 14px;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(82px, 9.6vw, 122px);
  line-height: 1; letter-spacing: -0.055em;
  color: var(--navy); opacity: 0.055;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.step:hover .step__ghost { opacity: 0.1; transform: translate(-3px, 3px); }

.step__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.step__ico {
  flex: none;
  width: 52px; height: 52px; border-radius: 15px;
  display: grid; place-items: center;
  background: linear-gradient(155deg, var(--navy-2), var(--navy));
  color: var(--amber-hi);
  box-shadow: 0 10px 22px -11px rgba(14, 27, 46, 0.6);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.step__ico svg { width: 26px; height: 26px; }
.step:hover .step__ico { transform: translateY(-3px) rotate(-4deg); box-shadow: 0 16px 26px -11px rgba(14, 27, 46, 0.65); }

/* Navy on the amber tint, not brass: at 11px this has to clear 4.5:1 and
   brass on tint only reaches 4.2. */
.step__label {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: 999px;
  background: var(--amber-tint); border: 1px solid var(--amber-line);
  font-family: var(--display); font-weight: 800; font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--navy); white-space: nowrap;
}

.step h3 {
  font-family: var(--display); font-weight: 700; font-size: 1.14rem;
  letter-spacing: -0.02em; color: var(--navy); margin: 2px 0 0;
}
.step p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--text); }
.step__link {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; margin-top: 2px;
  font-weight: 700; font-size: 0.9rem;
  color: var(--amber-ink); text-decoration: none;
}
.step__link svg { width: 15px; height: 15px; flex: none; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.step__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.step__link:hover svg { transform: translateX(3px); }

/* The dashes between the cards say "then" without a word. Lined up with the
   icon tiles rather than the middle of the card, so the row reads as one
   run. Only on the wide layout, where the cards are side by side. */
@media (min-width: 820px) {
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--pad) + 33px);
    right: calc(-1 * clamp(20px, 2.6vw, 32px) - 1px);
    width: clamp(20px, 2.6vw, 32px); height: 2px;
    background: repeating-linear-gradient(90deg, var(--amber-line) 0 5px, transparent 5px 11px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .step, .step::before, .step__ghost, .step__ico, .step__link svg { transition: none; }
  .js .step.reveal:not(.is-in)::before { background-size: var(--fill, 100%) 100%; }
}

/* ---- Transparent pricing ------------------------------------------------ */

.pricing { display: grid; gap: clamp(26px, 3.6vw, 48px); align-items: center; }
@media (min-width: 920px) { .pricing { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
.pricing__copy .btn { margin-top: var(--sp-4); }
.pricing__copy .dial { margin-top: var(--sp-1); }

.plist {
  list-style: none; margin: 0;
  padding: clamp(18px, 2.4vw, 26px);
  display: grid; gap: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}
.plist li { display: flex; align-items: flex-start; gap: 14px; padding: var(--sp-3) 0; min-width: 0; }
.plist li:first-child { padding-top: 0; }
.plist li:last-child { padding-bottom: 0; }
.plist li + li { border-top: 1px solid var(--line); }
.plist__ico {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--amber-tint); color: var(--amber-ink);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.plist__ico svg { width: 20px; height: 20px; }
.plist li:hover .plist__ico { transform: translateY(-2px) scale(1.06); }
.plist__txt { min-width: 0; font-size: 0.9rem; line-height: 1.55; color: var(--text); }
.plist__txt b {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: -0.016em; color: var(--navy); margin-bottom: 3px;
}

.deco--shield { bottom: -46px; left: -56px; width: 220px; }

/* ---- FAQ ---------------------------------------------------------------- */

.faq { display: grid; gap: var(--sp-2); max-width: 820px; margin: 0 auto; }
.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.faq details[open] { box-shadow: var(--shadow-md); border-color: #D8DEE7; }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 16px;
  padding: 15px clamp(16px, 2vw, 22px);
  min-height: 60px;
  font-family: var(--display); font-weight: 700; font-size: 1.01rem;
  letter-spacing: -0.015em; color: var(--navy);
  border-radius: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--amber-ink); }
/* A chevron drawn from two borders rather than a sixth inline SVG. */
.faq summary::after {
  content: ""; flex: none; margin-left: auto;
  width: 9px; height: 9px;
  border-right: 2.2px solid var(--amber-ink);
  border-bottom: 2.2px solid var(--amber-ink);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq__a {
  margin: 0;
  padding: 0 clamp(16px, 2vw, 22px) 18px;
  font-size: 0.94rem; line-height: 1.62; color: var(--text);
}
.faq__a a { color: var(--amber-ink); font-weight: 700; }

.faq__foot {
  margin: var(--sp-5) 0 0;
  text-align: center; font-size: 0.92rem; color: var(--text-soft);
}
.faq__foot a { color: var(--amber-ink); font-weight: 700; display: inline-block; padding: 12px 2px; }

/* ---- Reviews -------------------------------------------------------------
   The "sample reviews" chip that used to live here is gone, along with the
   invented quotes it was labelling. .gwrap stays because it is the wrapper
   the real Google badge will sit in. ------------------------------------- */

.gwrap { text-align: center; margin: 0; }

/* ---- Service-area block ------------------------------------------------- */

/* The contact details and the call button, in the column the map used to
   hold. A card rather than loose text, because this section sits on white
   and loose text in a half-width column reads as a leftover. */
.areas__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(18px, 2.4vw, 26px);
  box-shadow: var(--shadow-md);
}
.areas__cta { margin-top: var(--sp-4); }
/* Fourteen names in two columns needs a little more room per row than the
   twelve did; the list is the taller column now and sets the section. */
.areas__list { gap: 2px 20px; }

/* ---- Two actions on a service card ------------------------------------- */

.more__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.calllink--alt { color: var(--text-soft) !important; font-weight: 650 !important; }
.calllink--alt:hover { color: var(--amber-ink) !important; }

/* ---- Header button at phone widths ------------------------------------- */

/* "Get Fast Help Now" is four words longer than "Call Now", and the header
   also carries the wordmark. Below 480px the button gives up its padding
   rather than the brand giving up its name. */
@media (max-width: 479px) {
  .hdr .btn { padding: 10px 13px; font-size: 0.85rem; gap: 7px; }
  .hdr .btn svg { width: 15px; height: 15px; }
}

/* ---- Staggered reveal for the new rows --------------------------------- */

.js .steps .reveal:nth-child(2) { transition-delay: 70ms; }
.js .steps .reveal:nth-child(3) { transition-delay: 140ms; }
.js .rev-grid .reveal:nth-child(2) { transition-delay: 70ms; }
.js .rev-grid .reveal:nth-child(3) { transition-delay: 140ms; }
.js .rev-grid .reveal:nth-child(4) { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  .js .steps .reveal, .js .rev-grid .reveal { transition-delay: 0ms !important; }
  .step, .step__ico, .step__link svg, .plist__ico,
  .proof a, .proof a .proof__ico, .faq summary::after, .faq details { transition: none !important; }
  .step:hover, .step:hover .step__ico, .step__link:hover svg,
  .plist li:hover .plist__ico, .proof a:hover .proof__ico { transform: none; }
}

/* ---- Form states -------------------------------------------------------- */

/* The one message element has two jobs, and they are not the same news. */
.lead__msg--warn {
  background: var(--amber-tint);
  border: 1px solid var(--amber-line);
  color: var(--amber-ink);
}
.lead__msg--ok {
  background: #EAF7EE;
  border: 1px solid #A9D9B8;
  color: #1B6B35;
}

/* Replaces the form once a request is in. */
.leadok { display: grid; justify-items: center; gap: var(--sp-2); text-align: center; padding: var(--sp-2) 0; }
.leadok__tick {
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: #EAF7EE; color: #1B6B35;
  border: 1px solid #A9D9B8;
  margin-bottom: var(--sp-1);
}
.leadok__tick svg { width: 30px; height: 30px; }
.leadok h3 {
  font-family: var(--display); font-weight: 800; font-size: 1.24rem;
  letter-spacing: -0.022em; color: var(--navy); margin: 0;
}
.leadok p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--text); max-width: 34ch; }
.leadok .btn { margin-top: var(--sp-2); }

/* Stacked, with a 44px target on each of eleven links, the footer ran to
   over a thousand pixels on a phone — longer than the hero. Two columns
   from 380px up puts the two link lists side by side and halves it. */
@media (min-width: 380px) and (max-width: 759px) {
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
  .foot__grid > :first-child { grid-column: 1 / -1; }
}

/* ---- The $29 starting price -------------------------------------------- */

/* Appears twice: a quiet line in the hero and a loud tile in the pricing
   block. Both carry the qualifier in the same breath as the number, because
   $29 read as the cost of opening a door is a promise the business cannot
   keep. If you shorten either one, shorten the sentence, not the caveat. */

.pricenote {
  display: flex; align-items: flex-start; gap: 11px;
  max-width: 46ch;
  margin: var(--sp-3) 0 0;
  padding: 12px 15px;
  background: var(--amber-tint);
  border: 1px solid var(--amber-line);
  border-radius: 12px;
  font-size: 0.86rem; line-height: 1.5; color: var(--text);
}
.pricenote b { color: var(--navy); font-weight: 700; }
.pricenote__ico { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: var(--amber-ink); margin-top: 1px; }
.pricenote__ico svg { width: 20px; height: 20px; }

/* The one navy tile in a white section: it is the number the page is
   leading with, and amber on navy is 6.7:1. */
.pricetag {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 20px);
  margin: var(--sp-4) 0 0;
  padding: clamp(15px, 2vw, 20px) clamp(16px, 2.2vw, 22px);
  background: var(--navy);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}
.pricetag__n {
  flex: none;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.1rem, 5.4vw, 2.7rem);
  letter-spacing: -0.042em; line-height: 1;
  color: var(--amber);
}
.pricetag__t { font-size: 0.85rem; line-height: 1.5; color: var(--muted); }
.pricetag__t b {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  letter-spacing: -0.015em; color: #fff; margin-bottom: 2px;
}

/* ---- The service card's own CTA ---------------------------------------- */

/* Replaces the two text links that used to sit inside the disclosure. The
   disclosure still opens the detail — it is just no longer pretending to be
   the card's call to action. */
.card__cta {
  margin-top: var(--sp-3);
  min-height: 50px;
  padding: 12px 18px;
  font-size: 0.95rem;
  border-radius: 11px;
}
.card__cta svg { width: 16px; height: 16px; }

/* ==========================================================================
   ADDED — the back-to-top control, and the /contact/ page's own two blocks.
   Everything above this line is shared by both pages.
   ========================================================================== */

/* ---- Back to top --------------------------------------------------------
   A plain anchor to #top, so it still works with JavaScript off; the script
   only adds .is-on once the page has been scrolled. It has to clear the
   sticky call bar, which is fixed to the bottom below 900px and is about
   74px tall plus the safe-area inset. ------------------------------------- */

.totop {
  position: fixed; right: clamp(14px, 3.2vw, 26px); z-index: 55;
  bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  color: var(--navy);
  box-shadow: var(--shadow-md);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.25s ease, background 0.2s ease, border-color 0.2s ease;
}
.totop svg { width: 20px; height: 20px; }
.totop:hover { background: #fff; border-color: var(--amber-line); color: var(--amber-ink); }
.totop:active { transform: translateY(1px); }

/* Above the call bar's breakpoint there is nothing to clear. */
@media (min-width: 900px) { .totop { bottom: clamp(18px, 2.4vw, 30px); } }

/* With JS on, it fades in on scroll instead of sitting there from the top of
   the page. Without JS the [hidden] attribute is never removed and the
   control simply does not appear -- it would be pointing at the top of the
   page you are already on. */
.js .totop { opacity: 0; transform: translateY(10px); pointer-events: none; }
.js .totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .totop { transition: opacity 0.15s ease; }
  .js .totop { transform: none; }
}

/* ---- /contact/ ----------------------------------------------------------- */

/* Three ways to reach us. Explicit 1/3 rather than auto-fit, which can
   settle on two columns and strand the third. */
.ways { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 2vw, 22px); }
@media (min-width: 760px) { .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ways__item {
  /* Flex column, not grid: the card stretches to the tallest in the row and
     margin-top: auto then drops the button onto its bottom edge. A
     start-packed grid sizes the rows to the content, so the buttons would
     only line up for as long as all three paragraphs ran to the same number
     of lines -- true today, and one copy edit away from not being. */
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(20px, 2.6vw, 26px);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.ways__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--amber-line); }
.ways__ico {
  flex: none; align-self: flex-start;
  width: 50px; height: 50px; border-radius: 15px;
  display: grid; place-items: center;
  background: linear-gradient(155deg, var(--navy-2), var(--navy));
  color: var(--amber-hi);
  box-shadow: 0 10px 22px -11px rgba(14, 27, 46, 0.6);
}
.ways__ico svg { width: 25px; height: 25px; }
.ways__item h2 {
  margin: 4px 0 0;
  font-family: var(--display); font-weight: 700; font-size: 1.14rem;
  letter-spacing: -0.02em; color: var(--navy);
}
.ways__item p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--text); }
/* The button sits on the card's bottom edge whatever the copy length, so the
   three line up across the row. */
/* The email address is a single unbreakable token about 196px wide at this
   size, against 244px of card at 320px once the button's own padding is
   taken off. Narrower padding and a break opportunity inside the address
   keep it in the card instead of pushing the grid wider than the page. */
.ways__item .btn {
  margin-top: auto;
  padding: 12px 14px; min-height: 52px; font-size: 0.98rem;
  min-width: 0; overflow-wrap: anywhere;
}

/* The contact details sit under the standfirst in the left column, where the
   homepage has its icon list. */
.cdetails { margin-top: clamp(22px, 2.8vw, 32px); }

/* ---- The service-area map -----------------------------------------------
   A drawn schematic rather than an embed. It costs no third-party script,
   no consent banner and no layout shift, and it cannot start showing a
   "For development purposes only" watermark when a billing key lapses.
   Positions are approximate and the caption says so.
   ------------------------------------------------------------------------ */

.areas__map { display: grid; gap: clamp(14px, 1.8vw, 18px); align-content: start; }

.amap {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(14px, 1.8vw, 18px);
  box-shadow: var(--shadow-md);
}
.amap__svg {
  display: block; width: 100%; height: auto;
  border-radius: 12px; overflow: hidden;
  background: var(--grey);
}
/* The bay has to be obviously water at a glance. At the first pass the
   land and the water were four points apart and the coast did not read at
   all; the shoreline stroke is what actually makes it legible. */
.amap__land  { fill: #EDF1F6; }
.amap__water { fill: #C3DBEF; }
.amap__coast { stroke: #9FC3E0; stroke-width: 1.6; }
.amap__river { fill: none; stroke: #9FC3E0; stroke-width: 6; stroke-linecap: round; }
.amap__road  { fill: none; stroke: #FFFFFF; stroke-width: 6; stroke-linecap: round; }
.amap__road--thin { stroke-width: 3.4; opacity: 0.8; }
.amap__causeway { fill: none; stroke: #FFFFFF; stroke-width: 3.4; stroke-linecap: round; opacity: 0.95; }

.amap__pins circle { r: 7; fill: var(--amber); stroke: #fff; stroke-width: 2.6; }
/* The markers arrive one after another the first time the map is seen. It
   is the one piece of motion in this section, and it stops the map reading
   as a flat illustration. Nothing depends on it: with JS off or motion
   reduced the pins are simply there. */
.js .reveal:not(.is-in) .amap__pins circle { opacity: 0; transform: translateY(-6px); }
.amap__pins circle {
  transform-box: fill-box; transform-origin: center;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.amap__pins circle:nth-child(2)  { transition-delay: 40ms; }
.amap__pins circle:nth-child(3)  { transition-delay: 80ms; }
.amap__pins circle:nth-child(4)  { transition-delay: 120ms; }
.amap__pins circle:nth-child(5)  { transition-delay: 160ms; }
.amap__pins circle:nth-child(6)  { transition-delay: 200ms; }
.amap__pins circle:nth-child(7)  { transition-delay: 240ms; }
.amap__pins circle:nth-child(8)  { transition-delay: 280ms; }
.amap__pins circle:nth-child(9)  { transition-delay: 320ms; }
.amap__pins circle:nth-child(10) { transition-delay: 360ms; }
.amap__pins circle:nth-child(11) { transition-delay: 400ms; }
.amap__pins circle:nth-child(12) { transition-delay: 440ms; }
.amap__pins circle:nth-child(13) { transition-delay: 480ms; }
.amap__pins circle:nth-child(14) { transition-delay: 520ms; }
@media (prefers-reduced-motion: reduce) {
  .amap__pins circle { transition: none; }
  .js .reveal:not(.is-in) .amap__pins circle { opacity: 1; transform: none; }
}

.amap__labels text {
  font-family: var(--body); font-size: 11px; font-weight: 700;
  fill: var(--navy); paint-order: stroke;
  stroke: rgba(237, 241, 246, 0.95); stroke-width: 3.5px; stroke-linejoin: round;
}

.amap__cap {
  margin: 12px 2px 0;
  font-size: 0.78rem; line-height: 1.5; color: var(--text-soft);
}

/* ==========================================================================
   ADDED — the interior pages. Everything above is shared with the homepage.
   These classes appear on /services/, the four service pages, /pricing/,
   /reviews/, /faq/, /how-it-works/ and /service-areas/.
   ========================================================================== */

/* ---- Breadcrumbs --------------------------------------------------------- */

.crumbs { padding: clamp(14px, 1.8vw, 20px) 0 0; font-size: 0.82rem; }
.crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px;
  color: var(--text-soft);
}
.crumbs li { display: flex; align-items: center; gap: 6px; }
/* The separator is drawn rather than typed, so a screen reader reads the
   trail as "Home, Services, Car Locksmith" and not a row of slashes. */
.crumbs li + li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--line); }
.crumbs a { color: var(--text-soft); text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; }
.crumbs a:hover { color: var(--amber-ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--navy); font-weight: 650; }

/* ---- Page header --------------------------------------------------------- */

/* Tighter than a homepage section: it sits directly under the breadcrumbs
   and directly above the content, and does not need the full rhythm. */
.phead { padding-top: clamp(26px, 3.2vw, 44px); padding-bottom: clamp(26px, 3.2vw, 44px); }
.phead .sec-head { margin-bottom: 0; }

/* ---- Services index ------------------------------------------------------ */

.svcidx-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2.2vw, 24px); }
@media (min-width: 640px)  { .svcidx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .svcidx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* The whole card is the link. One target, not a card with a link in it. */
.svcidx {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.svcidx:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--amber-line); }
.svcidx__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--grey); }
.svcidx__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.svcidx:hover .svcidx__media img { transform: scale(1.04); }
.svcidx__body { display: flex; flex-direction: column; gap: 8px; padding: clamp(16px, 2vw, 20px); flex: 1; }
.svcidx__h { font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; color: var(--navy); }
.svcidx__p { font-size: 0.9rem; line-height: 1.55; color: var(--text); }
.svcidx__go {
  margin-top: auto; padding-top: 10px;
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 0.88rem; color: var(--amber-ink);
}
.svcidx__go svg { width: 15px; height: 15px; flex: none; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.svcidx:hover .svcidx__go svg { transform: translateX(3px); }

.svcidx-foot { margin: clamp(22px, 2.8vw, 30px) 0 0; text-align: center; font-size: 0.95rem; color: var(--text); }
.svcidx-foot a { color: var(--amber-ink); font-weight: 700; display: inline; padding: 13px 2px; }

/* ---- A single service page ----------------------------------------------- */

.svcpage { display: grid; gap: clamp(24px, 3.2vw, 44px); align-items: start; }
@media (min-width: 940px) { .svcpage { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); } }

.svcpage__media { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md); background: var(--grey); }
.svcpage__media img { display: block; width: 100%; height: auto; }

.svcpage__copy { display: grid; gap: var(--sp-3); align-content: start; }
.svcpage__copy .h2 { margin-bottom: 0; }
.svcpage__copy p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--text); }
.svcpage__copy .btn { justify-self: start; margin-top: var(--sp-2); }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.97rem; line-height: 1.5; color: var(--navy); }
.ticks svg { flex: none; width: 15px; height: 15px; margin-top: 4px; color: var(--amber-ink); }

.svcpage__ask {
  margin: 0;
  padding: clamp(14px, 1.8vw, 18px);
  background: var(--amber-tint); border: 1px solid var(--amber-line);
  border-radius: 14px;
  font-size: 0.93rem !important; line-height: 1.55; color: var(--navy) !important;
}
.svcpage__ask b { display: block; margin-bottom: 2px; }

/* ---- The other services, at the foot of a service page -------------------- */

.svclinks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 620px) { .svclinks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .svclinks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svclinks a {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 56px; padding: 12px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  font-weight: 650; font-size: 0.95rem; color: var(--navy); text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, color 0.25s ease;
}
.svclinks a:hover { transform: translateY(-2px); border-color: var(--amber-line); color: var(--amber-ink); }