/* ==========================================================================
   DEANES — Locksmith & Safe Engineering
   Implements the Deanes Locksmiths Design System (Claude Design project
   dc7849fc) as a static site. Token names and values are carried across
   verbatim from tokens/*.css so the two stay reconcilable.

   One documented deviation from the design system: the mobile call bar is
   fixed to the viewport. The system states "nothing is fixed or sticky".
   That rule is overridden here for one element only, on one breakpoint only,
   because a sticky thumb-zone call bar is the single highest-measured
   conversion mechanic for emergency trades. The header still scrolls away.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------ */
:root {
  /* Brand — sampled directly from the logo artwork */
  --deanes-red: #a1252a;
  --deanes-red-dark: #7d1c20;
  --deanes-red-light: #c4383e;
  --deanes-red-wash: #f7e9ea;
  /* Accessibility addition, not in the source design system. The system uses
     --deanes-red-light for red text on ink, which measures 3.27:1 and fails
     WCAG AA for body text. This lighter tint of the same brand red measures
     4.83:1 on --deanes-ink. Use it for red TEXT on ink surfaces only; the
     decorative 4px rules keep --deanes-red-light. */
  --deanes-red-on-ink: #e35a5f;
  --deanes-ink: #1b1b1b;
  --deanes-ink-soft: #2e2e2e;
  --deanes-white: #fdfefd;

  /* Neutral ramp */
  --n-0: #ffffff;  --n-50: #f7f7f6;  --n-100: #eeeeec; --n-200: #dcdcda;
  --n-300: #c2c2bf; --n-400: #9a9a97; --n-500: #6f6f6c; --n-600: #4d4d4b;
  --n-700: #343433; --n-800: #232322; --n-900: #1b1b1b;

  /* Semantic */
  --success: #2f6b3a; --warning: #b4761a; --danger: var(--deanes-red); --info: #2b4c6f;

  /* Aliases */
  --text-strong: var(--deanes-ink);
  --text-body: var(--n-700);
  --text-muted: var(--n-500);
  --text-inverse: var(--deanes-white);
  --text-accent: var(--deanes-red);
  --surface-page: var(--n-0);
  --surface-subtle: var(--n-50);
  --surface-card: var(--n-0);
  --surface-inverse: var(--deanes-ink);
  --surface-accent: var(--deanes-red);
  --surface-accent-wash: var(--deanes-red-wash);
  --border-hairline: var(--n-200);
  --border-strong: var(--n-300);
  --border-inverse: #3a3a39;
  --border-accent: var(--deanes-red);
  --focus-ring: var(--deanes-red);

  /* Type */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900;
  --fs-display-1: clamp(40px, 7vw, 64px);
  --fs-display-2: clamp(32px, 5.6vw, 48px);
  --fs-h1: clamp(27px, 4vw, 38px);
  --fs-h2: clamp(22px, 3vw, 28px);
  --fs-h3: 21px;
  --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px;
  --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-loose: 1.65;
  --ls-wordmark: 0.02em; --ls-display: -0.01em; --ls-eyebrow: 0.16em; --ls-normal: 0;

  /* Spacing + shape */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --gutter: 24px; --container: 1180px; --container-narrow: 760px;
  --section-y: clamp(56px, 8vw, 96px);
  --section-y-tight: clamp(40px, 6vw, 56px);
  --radius-none: 0; --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px;
  --border-w: 1px; --border-w-thick: 3px; --rule-accent: 4px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(27, 27, 27, .08);
  --shadow-md: 0 2px 8px rgba(27, 27, 27, .10);
  --shadow-lg: 0 10px 28px rgba(27, 27, 27, .14);
  --shadow-accent: 0 6px 18px rgba(161, 37, 42, .28);
  --inset-hairline: inset 0 0 0 1px var(--border-hairline);

  /* Motion */
  --ease-standard: cubic-bezier(.2, 0, .2, 1);
  --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms;
  --press-scale: .985;

  --callbar-h: 0px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--callbar-h);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-snug);
  margin: 0;
}

p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--deanes-red); text-decoration: none; }
a:hover { color: var(--deanes-red-dark); text-decoration: underline; }

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

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

.skip-link {
  position: absolute; left: var(--sp-4); top: -80px; z-index: 200;
  background: var(--deanes-ink); color: var(--text-inverse);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-body-sm);
  transition: top var(--dur-base) var(--ease-standard);
}
.skip-link:focus { top: var(--sp-4); color: var(--text-inverse); text-decoration: none; }

/* --- Layout ------------------------------------------------------------ */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding: var(--section-y) 0; }
.section--tight { padding: var(--section-y-tight) 0; }
.section--subtle { background: var(--surface-subtle); }
.section--ink { background: var(--surface-inverse); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--text-inverse); }
.section--ink p { color: rgba(253, 254, 253, .78); }

.section__head { display: flex; flex-direction: column; gap: var(--sp-5); }
.section__head + * { margin-top: var(--sp-7); }
.section__title { font-weight: var(--fw-bold); font-size: var(--fs-h1); max-width: 22ch; }
.section__intro {
  font-size: var(--fs-body-lg); line-height: var(--lh-loose);
  color: var(--text-body); max-width: 62ch;
}
.section--ink .section__intro { color: rgba(253, 254, 253, .78); }

.grid { display: grid; gap: var(--sp-5); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; }
}

/* --- Eyebrow (the 4px red rule motif) ---------------------------------- */
.eyebrow { display: flex; align-items: center; gap: var(--sp-3); }
.eyebrow::before {
  content: ""; width: 28px; height: var(--rule-accent);
  background: currentColor; flex: 0 0 auto;
}
.eyebrow span {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-caption); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.eyebrow--red { color: var(--deanes-red); }
.eyebrow--muted { color: var(--text-muted); }
.eyebrow--inverse { color: var(--text-inverse); }

/* --- Buttons ----------------------------------------------------------- */
.btn {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .06em;
  border: var(--border-w) solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2); line-height: 1; text-decoration: none;
  font-size: 14px; padding: 12px 20px;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(var(--press-scale)); }
.btn--sm { font-size: 12px; padding: 8px 14px; }
.btn--lg { font-size: 16px; padding: 16px 28px; }
.btn--block { width: 100%; }

.btn--primary { background: var(--surface-accent); color: var(--text-inverse); }
.btn--primary:hover { background: var(--deanes-red-dark); color: var(--text-inverse); }
.btn--dark { background: var(--deanes-ink); color: var(--text-inverse); }
.btn--dark:hover { background: #000; color: var(--text-inverse); }
.btn--outline { background: transparent; color: var(--deanes-ink); border-color: var(--deanes-ink); }
.btn--outline:hover { background: var(--deanes-ink); color: var(--text-inverse); }
.btn--outline-inverse { background: transparent; color: var(--text-inverse); border-color: rgba(253,254,253,.5); }
.btn--outline-inverse:hover { background: var(--text-inverse); color: var(--deanes-ink); }
.btn--ghost { background: transparent; color: var(--deanes-red); }
.btn--ghost:hover { color: var(--deanes-red-dark); text-decoration: underline; }

/* --- Phone CTA (the conversion mechanism) ------------------------------ */
.phone {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: 18px; letter-spacing: .01em;
  padding: 10px 18px; border-radius: var(--radius-sm); text-decoration: none;
  transition: background var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
}
.phone:hover { text-decoration: none; }
.phone:active { transform: scale(var(--press-scale)); }
.phone__label {
  font-size: .6em; letter-spacing: var(--ls-eyebrow);
  opacity: .85; text-transform: uppercase;
}
.phone--sm { font-size: 14px; padding: 6px 12px; }
.phone--lg { font-size: clamp(20px, 4.4vw, 24px); padding: 14px 22px; }
.phone--red { background: var(--surface-accent); color: var(--text-inverse); }
.phone--red:hover { background: var(--deanes-red-dark); color: var(--text-inverse); }
.phone--ink { background: var(--deanes-ink); color: var(--text-inverse); }
.phone--ink:hover { background: #000; color: var(--text-inverse); }
.phone--plain { background: transparent; color: var(--deanes-red); padding: 0; }

/* --- Cards ------------------------------------------------------------- */
.card {
  border-radius: var(--radius-md); padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  background: var(--surface-card); color: var(--text-body);
  border: var(--border-w) solid var(--border-hairline);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.card--rule { border-top: var(--rule-accent) solid var(--deanes-red); }
.card--subtle { background: var(--surface-subtle); }
.card--ink {
  background: var(--surface-inverse); color: var(--text-inverse);
  border-color: var(--border-inverse);
}
.card--ink h2, .card--ink h3 { color: var(--text-inverse); }
.card--ink p { color: rgba(253, 254, 253, .82); }
.card--accent {
  background: var(--surface-accent); color: var(--text-inverse); border-color: transparent;
}
.card--accent h2, .card--accent h3 { color: var(--text-inverse); }
.card--accent p { color: rgba(253, 254, 253, .88); }
.card--pad-lg { padding: var(--sp-7); }

.card__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); }
.card__body { font-size: var(--fs-body); line-height: var(--lh-loose); }
.card__foot { margin-top: auto; padding-top: var(--sp-2); }

/* --- Badges ------------------------------------------------------------ */
.badge {
  display: inline-block; font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: 11px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--radius-sm);
}
.badge--red { background: var(--surface-accent); color: var(--text-inverse); }
.badge--ink { background: var(--deanes-ink); color: var(--text-inverse); }
.badge--wash { background: var(--surface-accent-wash); color: var(--deanes-red-dark); }
.badge--outline { background: transparent; color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--border-strong); }
.badge-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* --- Header ------------------------------------------------------------ */
.site-header {
  background: var(--n-0);
  border-bottom: var(--border-w) solid var(--border-hairline);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  /* Longhand only. This element is also .container, and a `padding` shorthand
     here resets the horizontal gutter to 0 and clips the wordmark. */
  padding-top: var(--sp-4); padding-bottom: var(--sp-4);
}
.site-header__logo img { height: 46px; width: auto; }
.site-nav { display: flex; align-items: center; gap: var(--sp-5); }
.site-nav__links { display: flex; align-items: center; gap: var(--sp-5); }
/* Overlay chrome — mobile only. */
.site-nav__head, .site-nav__foot, .nav-close { display: none; }
/* Scoped away from .phone: the phone button carries its own colour, and an
   unscoped `.site-nav a` rule outranks `.phone--red` on specificity and paints
   ink text onto the red field (2.31:1). */
.site-nav a:not(.phone) {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--text-strong);
  padding-bottom: 2px; border-bottom: 2px solid transparent;
  transition: color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.site-nav a:not(.phone):hover { color: var(--deanes-red); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--deanes-red); border-bottom-color: var(--deanes-red); }

.nav-toggle {
  display: none; background: transparent; border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-strong);
  min-height: 44px; align-items: center; gap: var(--sp-2);
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.nav-toggle[aria-expanded="true"] {
  background: var(--deanes-red); border-color: var(--deanes-red); color: var(--text-inverse);
}

@media (max-width: 1040px) {
  .site-header__logo img { height: 38px; }
  .nav-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); }

  /* Full-screen overlay. A drop-down panel leaves the only exit back up in the
     header, which reads as no exit at all. This gives the menu its own close
     control, a full surface, and locks the page behind it. */
  .site-nav {
    display: none; position: fixed; inset: 0; z-index: 120;
    flex-direction: column; align-items: stretch; gap: 0; padding: 0;
    background: var(--surface-inverse);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .site-nav.is-open { display: flex; }

  .site-nav__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); padding: var(--sp-4) var(--gutter);
    border-bottom: var(--border-w) solid var(--border-inverse);
  }
  .site-nav__logo { height: 30px; width: auto; }

  .nav-close {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: 44px; padding: 10px 16px; cursor: pointer;
    background: var(--deanes-red); color: var(--text-inverse); border: 0;
    border-radius: var(--radius-sm);
    font-family: var(--font-display); font-weight: var(--fw-bold);
    font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
    transition: background var(--dur-base) var(--ease-standard);
  }
  .nav-close:hover { background: var(--deanes-red-dark); }
  .nav-close span { font-size: 19px; line-height: 1; }

  .site-nav__links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--sp-2) var(--gutter) var(--sp-6);
  }
  .site-nav a:not(.phone) {
    color: var(--text-inverse); font-size: 15px;
    padding: var(--sp-4) 0; border-bottom: var(--border-w) solid var(--border-inverse);
  }
  .site-nav a:not(.phone):hover { color: var(--deanes-red-on-ink); }
  .site-nav a[aria-current="page"] {
    color: var(--deanes-red-on-ink); border-bottom-color: var(--border-inverse);
  }

  .site-nav__foot { display: block; padding: 0 var(--gutter) var(--sp-8); }
  .site-nav__foot .phone { width: 100%; justify-content: center; }

  .site-header__inner { position: relative; }
  .site-header__phone { display: none; }

  body.nav-open { overflow: hidden; }
}

/* --- Hero -------------------------------------------------------------- */
.hero {
  position: relative; background: var(--surface-inverse); color: var(--text-inverse);
  padding: var(--section-y) 0; overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .34; filter: grayscale(.35);
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(27,27,27,.94) 0%, rgba(27,27,27,.62) 60%, rgba(27,27,27,.35) 100%);
}
.hero__inner { position: relative; display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start; }
.hero h1 {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--fs-display-2); line-height: var(--lh-tight);
  letter-spacing: var(--ls-display); color: var(--text-inverse); max-width: 20ch;
}
.hero__intro {
  font-size: var(--fs-body-lg); line-height: var(--lh-loose);
  color: rgba(253, 254, 253, .82); max-width: 56ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.hero__meta {
  font-size: var(--fs-body-sm); color: rgba(253, 254, 253, .72);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
}
.hero__meta strong { color: var(--text-inverse); font-weight: var(--fw-semibold); }

@media (max-width: 700px) {
  .hero__scrim {
    background: linear-gradient(180deg, rgba(27,27,27,.9) 0%, rgba(27,27,27,.82) 100%);
  }
}

/* --- Trust strip ------------------------------------------------------- */
.trust-strip { background: var(--deanes-ink-soft); padding: var(--sp-5) 0; }
.trust-strip ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); justify-content: center;
}
.trust-strip li {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-caption); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: rgba(253, 254, 253, .86);
  display: flex; align-items: center; gap: var(--sp-2);
}
.trust-strip li::before {
  content: ""; width: 10px; height: var(--rule-accent);
  background: var(--deanes-red-light); flex: 0 0 auto;
}

/* --- Lists ------------------------------------------------------------- */
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.ticks li { display: flex; gap: var(--sp-3); line-height: var(--lh-loose); }
.ticks li::before {
  content: ""; width: 14px; height: var(--rule-accent); background: var(--deanes-red);
  flex: 0 0 auto; margin-top: 11px;
}
.ticks strong { color: var(--text-strong); font-family: var(--font-display); font-weight: var(--fw-bold); }
.section--ink .ticks strong, .card--ink .ticks strong { color: var(--text-inverse); }
.section--ink .ticks li, .card--ink .ticks li { color: rgba(253, 254, 253, .82); }

.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }

/* --- Steps ------------------------------------------------------------- */
.step__num {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: 40px; line-height: 1; color: var(--deanes-red); letter-spacing: var(--ls-display);
}

/* --- Price table ------------------------------------------------------- */
.price-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-4); padding: var(--sp-4) 0;
  border-bottom: var(--border-w) solid var(--border-hairline);
}
.price-row:last-child { border-bottom: 0; }
.price-row__name { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text-strong); }
.price-row__note { display: block; font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body-sm); color: var(--text-muted); margin-top: 2px; }
.price-row__value {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h3); color: var(--deanes-red); white-space: nowrap;
}

/* --- FAQ --------------------------------------------------------------- */
.faq { border-top: var(--border-w) solid var(--border-hairline); }
.faq details { border-bottom: var(--border-w) solid var(--border-hairline); }
.faq summary {
  cursor: pointer; padding: var(--sp-5) 0; list-style: none;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h3); color: var(--text-strong);
  display: flex; justify-content: space-between; gap: var(--sp-4); align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 14px; height: var(--rule-accent);
  background: var(--deanes-red);
  transition: transform var(--dur-base) var(--ease-standard);
}
.faq details[open] summary::after { transform: rotate(90deg); }
.faq details > div { padding: 0 0 var(--sp-5); line-height: var(--lh-loose); max-width: 68ch; }
.faq details > div p + p { margin-top: var(--sp-3); }

/* --- Forms ------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-caption); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--text-strong);
}
.field input, .field textarea, .field select {
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-strong);
  padding: 12px 14px; border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--n-0); width: 100%;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--deanes-red); }
.field textarea { resize: vertical; min-height: 120px; }
.field__hint { font-size: var(--fs-body-sm); color: var(--text-muted); }
.form { display: flex; flex-direction: column; gap: var(--sp-5); }
/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status {
  font-size: var(--fs-body-sm); line-height: var(--lh-loose);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  border-left: var(--border-w-thick) solid var(--deanes-red);
  background: var(--surface-accent-wash); color: var(--n-700);
}
.form__status[data-tone="ok"] {
  border-left-color: var(--success); background: #eef4ef; color: var(--n-700);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

/* --- Notice ------------------------------------------------------------ */
.notice {
  border-left: var(--border-w-thick) solid var(--deanes-red);
  background: var(--surface-accent-wash);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm); line-height: var(--lh-loose); color: var(--n-700);
}

/* Placeholder marker — content the business still has to confirm. Visible on
   purpose so nothing unverified reads as fact. See CONTENT-TODO.md. */
.todo {
  border-bottom: 1px dashed var(--deanes-red);
  color: var(--deanes-red-dark); font-style: italic;
}
.section--ink .todo, .card--ink .todo, .site-footer .todo { color: var(--deanes-red-on-ink); }

/* --- Footer ------------------------------------------------------------ */
.site-footer {
  background: var(--surface-inverse); color: rgba(253, 254, 253, .72);
  padding: var(--sp-7) 0 var(--sp-6);
}
.site-footer__top {
  display: flex; flex-wrap: wrap; gap: var(--sp-7);
  align-items: flex-start; justify-content: space-between;
}
.site-footer__logo img { height: 150px; width: auto; }
.site-footer h2 {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  font-size: var(--fs-caption); color: var(--deanes-red-on-ink); margin-bottom: var(--sp-3);
}
.site-footer__col { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-body-sm); }
.site-footer__col a:not(.site-footer__phone) { color: rgba(253, 254, 253, .82); }
.site-footer__col a:not(.site-footer__phone):hover { color: var(--text-inverse); }
.site-footer__phone {
  color: var(--text-inverse); text-decoration: none;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3);
}
.site-footer__bar {
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: var(--border-w) solid var(--border-inverse);
  font-size: var(--fs-caption); display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
}

@media (max-width: 700px) {
  .site-footer__logo img { height: 110px; }
}

/* --- Sticky mobile call bar -------------------------------------------
   Documented deviation from the design system's "nothing is fixed or sticky".
   Mobile only, single action, thumb zone. --------------------------------- */
.call-bar { display: none; }

@media (max-width: 900px) {
  :root { --callbar-h: 68px; }
  .call-bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    background: var(--deanes-ink);
    border-top: var(--rule-accent) solid var(--deanes-red);
    padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom));
  }
  .call-bar a {
    display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
    width: 100%; min-height: 52px;
    background: var(--surface-accent); color: var(--text-inverse);
    border-radius: var(--radius-sm); text-decoration: none;
    font-family: var(--font-display); font-weight: var(--fw-bold);
    font-size: 19px; letter-spacing: .01em;
    transition: background var(--dur-base) var(--ease-standard),
                transform var(--dur-fast) var(--ease-standard);
  }
  .call-bar a:active { transform: scale(var(--press-scale)); background: var(--deanes-red-dark); }
  .call-bar__label {
    font-size: 11px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; opacity: .85;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}