/* --- Self-hosted fonts ---------------------------------------------------- *
   Clash Display and Satoshi, served from this domain rather than Fontshare's
   CDN. That removes a third-party DNS lookup, TCP connection and TLS handshake
   from the critical path, which is most of the reason the CDN version felt
   slow on a phone with one bar of signal.

   font-display: swap means text paints immediately in Helvetica/Arial and
   reflows when the webfont lands — never invisible text.

   Both faces are ITF Free Font Licence, which permits self-hosting.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/clash-display-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Prestige Painting Newcastle
   Swiss / editorial design system, adapted for a trades lead-gen site.

   WHERE THIS DEVIATES FROM THE SUPPLIED SPEC, AND WHY:
   - Spec greys #b6b5b5 and #838282 sit at ~2.1:1 and ~3.4:1 on #f2f2f2.
     Both fail WCAG AA and both fail outdoors on a phone, which is where
     this site is actually read. Replaced with #5C5C5C (5.9:1) and
     #6B6B6B (4.8:1). The pale greys survive only as decorative echo
     layers, which carry no information.
   - Brass #C8992E is 2.3:1 on the off-white — unusable as text. It is
     used as fill, rule and geometry only. Where brass must read as text
     it darkens to #8A6A1A (4.6:1).
   - Images stay full colour. The 20% grayscale rest state is dropped:
     hover does not exist on the phones most of these customers use, so
     it would have meant mobile users only ever seeing desaturated work.
     A restrained 1.02 scale survives on pointer devices only.
   - Circular and pill crops are used for detail and vertical shots only,
     never for a building — a circle crops the corners off a house.
   ========================================================================== */

:root {
  /* Surface */
  --paper:      #F2F2F2;
  --white:      #FFFFFF;
  --dark:       #1E1E1E;

  /* Ink — every value below passes 4.5:1 on --paper */
  --ink:        #111111;   /* 17.1:1 */
  --ink-2:      #5C5C5C;   /*  5.9:1 */
  --ink-3:      #6B6B6B;   /*  4.8:1 */

  /* Brand */
  --navy:       #0E2340;
  --brass:      #C8992E;   /* fill and geometry only */
  --brass-text: #8A6A1A;   /*  4.6:1 — brass when it must be read */
  --brass-lite: #E8C46A;   /* on dark grounds only */

  /* Echo stack — decorative, aria-hidden, never carries meaning */
  --echo-1: #BFBFBF;
  --echo-2: #C9C9C9;
  --echo-3: #D1D1D1;
  --echo-4: #D9D9D9;

  --line:       rgba(17, 17, 17, .12);
  --line-solid: #DCDCDC;

  /* Type */
  --display: "Clash Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans:    "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --serif:   Georgia, "Iowan Old Style", "Times New Roman", serif;

  --wrap: 1280px;
  --gutter: 24px;
  --header-h: 80px;
  --ease: cubic-bezier(.77, 0, .175, 1);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  padding-bottom: 64px;              /* room for the mobile call bar */
  -webkit-font-smoothing: antialiased;
}
img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .95;
  margin: 0 0 .4em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.6rem, 8vw, 5.5rem); letter-spacing: -.05em; line-height: .9; }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h3 { font-size: 1.15rem; letter-spacing: -.02em; }
p  { margin: 0 0 1.15em; }
a  { color: var(--ink); }
ul { margin: 0 0 1.15em; padding-left: 1.1em; }
li { margin-bottom: .45em; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 14px 22px; font-weight: 700; text-decoration: none;
  text-transform: uppercase; letter-spacing: .08em; font-size: 14px;
}
.skip-link:focus { left: 8px; top: 8px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 72px 0; }
.section--surface { background: var(--white); }
.section--navy { background: var(--dark); color: var(--paper); }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy p, .section--navy li { color: rgba(246, 246, 246, .78); }

.eyebrow {
  font-family: var(--sans); font-weight: 700;
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 1.2em;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--brass); flex: none;
}
.center .eyebrow { justify-content: center; }
.section--navy .eyebrow { color: var(--brass-lite); }

.lede { font-size: 1.1rem; color: var(--ink-2); max-width: 60ch; }
.section--navy .lede { color: rgba(246, 246, 246, .78); }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }

/* Hairline drop — the vertical rule that leads into a section */
.rule-drop {
  width: 1px; height: 72px; margin: 0 auto 40px;
  background: linear-gradient(180deg, transparent, var(--line-solid));
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 14px 30px;
  font-family: var(--sans); font-weight: 700;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; text-align: center;
  border: 1px solid transparent; border-radius: 999px;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn--primary { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.btn--primary:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--dark); }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.45); }
.btn--ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--lg { min-height: 58px; padding: 16px 36px; font-size: .85rem; }
.btn--block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.center .btn-row { justify-content: center; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(242, 242, 242, .9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 18px; min-height: var(--header-h); }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand__mark { flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: -.03em;
}
.brand__sub {
  font-size: .58rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-2); margin-top: 4px; font-weight: 700;
}

.nav { display: none; }
.nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; }
.nav a {
  display: block; padding: 6px 0;
  color: var(--ink); text-decoration: none;
  font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  transition: color .12s var(--ease);
}
.nav a:hover { color: var(--ink-3); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--brass); }

.header-actions { display: flex; align-items: center; gap: 10px; }
.header-phone {
  display: none; align-items: center; gap: 8px;
  color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: 14px; letter-spacing: .06em;
  padding: 10px 4px; white-space: nowrap;
  transition: color .12s var(--ease);
}
.header-phone:hover { color: var(--ink-3); }
.header-quote { display: none; }
.header-quote.btn { min-height: 46px; padding: 11px 24px; font-size: .72rem; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: transparent; border: 1px solid var(--dark);
  border-radius: 999px; color: var(--ink); cursor: pointer;
}
.mobile-nav { display: none; background: var(--paper); border-bottom: 1px solid var(--line); }
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 6px 0 14px; }
.mobile-nav li { margin: 0; }
.mobile-nav a {
  display: block; padding: 15px var(--gutter); min-height: 48px;
  color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.mobile-nav a[aria-current="page"] { color: var(--brass-text); }
.mobile-nav .btn { margin: 16px var(--gutter) 0; width: calc(100% - (var(--gutter) * 2)); }

/* --- Sticky mobile call bar ---------------------------------------------- */
.call-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--dark);
  border-top: 1px solid rgba(255,255,255,.14);
}
.call-bar a {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 58px; padding: 8px;
  font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
}
.call-bar__call { color: var(--white); }
.call-bar__quote { background: var(--brass); color: var(--ink); }

/* ==========================================================================
   THE ECHO STACK
   Five instances of one word. The top layer is real text; the four beneath
   are aria-hidden decoration, each shifted up and left by 0.04em increments
   and fading toward the paper. pointer-events:none throughout.
   ========================================================================== */
.echo {
  position: relative;
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3rem, 11vw, 11rem);
  line-height: .9;
  letter-spacing: -.05em;
  text-transform: uppercase;
  margin: 0;
  isolation: isolate;
}
.echo__top { position: relative; z-index: 5; color: var(--ink); display: block; }
.echo__layer {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; user-select: none;
  display: block;
}
.echo__layer--1 { color: var(--echo-1); transform: translate(-.04em, -.04em); z-index: 4; }
.echo__layer--2 { color: var(--echo-2); transform: translate(-.08em, -.08em); z-index: 3; }
.echo__layer--3 { color: var(--echo-3); transform: translate(-.12em, -.12em); z-index: 2; }
.echo__layer--4 { color: var(--echo-4); transform: translate(-.16em, -.16em); z-index: 1; }

/* --- Hero ----------------------------------------------------------------- */
.hero { background: var(--paper); overflow: hidden; }
.hero__inner {
  min-height: 70vh;
  padding: 64px 0 56px;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
}
.hero__sub {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--ink-2);
  max-width: 46ch; margin: 32px auto 0;
}
.hero .btn-row { margin-top: 34px; justify-content: center; }

.trust-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px;
  margin: 44px auto 0; padding-top: 26px;
  border-top: 1px solid var(--line);
  max-width: 900px;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
}
.trust-strip span { display: flex; align-items: center; gap: 9px; }
.trust-strip svg { flex: none; color: var(--brass-text); }

/* --- Page head (inner pages) --------------------------------------------- */
.page-head { padding: 56px 0 48px; border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); margin-bottom: .25em; }
.page-head p { color: var(--ink-2); max-width: 58ch; margin: 0; font-size: 1.08rem; }
.crumbs {
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 22px;
}
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

/* --- Editorial quote ------------------------------------------------------ */
.quote-editorial {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 1.02; letter-spacing: -.04em;
  text-transform: uppercase;
  max-width: 20ch; margin: 0 auto 48px;
}
.quote-editorial em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  text-transform: lowercase; letter-spacing: -.02em;
}

/* --- Grids and cards ------------------------------------------------------ */
.grid { display: grid; gap: 32px; }
.grid--2, .grid--3 { grid-template-columns: 1fr; }

.col h3 {
  font-size: 1.05rem; letter-spacing: .02em; margin-bottom: .6em;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.col p { color: var(--ink-2); font-size: .97rem; margin-bottom: 0; }

.card {
  background: transparent;
  border: 1px solid var(--line);
  padding: 34px 28px 30px;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { background: var(--white); border-color: var(--line-solid); }
.card h2, .card h3 { letter-spacing: -.02em; }
.card p { color: var(--ink-2); }
.card p:last-child { margin-bottom: 0; }
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin-bottom: 26px;
  border: 1px solid var(--dark); color: var(--ink);
  transition: transform .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
}
.card:hover .card__icon { transform: rotate(12deg); background: var(--brass); color: var(--ink); border-color: var(--brass); }
.card__list { margin: 0; padding-left: 1.05em; font-size: .93rem; color: var(--ink-2); }
.card__cta {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 22px; text-decoration: none; color: var(--ink);
  font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
}
.card__cta svg { transition: transform .25s var(--ease); }
.card:hover .card__cta svg { transform: translateX(5px); }

/* ==========================================================================
   ASYMMETRICAL SHOWCASE — 12 column grid, mixed aspect ratios
   ========================================================================== */
.showcase { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.sc { position: relative; overflow: hidden; margin: 0; grid-column: span 12; }
.sc img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s var(--ease);
}
.sc figcaption {
  margin-top: 12px;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2);
}
.sc__frame { position: relative; overflow: hidden; background: var(--line-solid); }

.sc--wide  .sc__frame { aspect-ratio: 16 / 10; border-radius: 2px; }
.sc--tall  .sc__frame { aspect-ratio: 3 / 4;   border-radius: 2px; }
.sc--pill  .sc__frame { height: 500px; border-radius: 999px; }
.sc--round .sc__frame { aspect-ratio: 1 / 1; border-radius: 50%; }

/* Circular overlay on the pill — reveals on hover, and is always
   reachable by keyboard because the whole figure is focusable. */
.sc__overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .5s var(--ease);
  pointer-events: none;
}
.sc__badge {
  width: 168px; height: 168px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.85);
  background: rgba(17,17,17,.42);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #fff; font-weight: 700;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  padding: 20px;
}
.sc:hover .sc__overlay, .sc:focus-within .sc__overlay { opacity: 1; }

/* Scale only where there is a real pointer. Touch devices never hover. */
@media (hover: hover) and (pointer: fine) {
  .sc:hover img { transform: scale(1.05); }
}

/* --- Service area --------------------------------------------------------- */
.suburbs {
  display: flex; flex-wrap: wrap; gap: 10px 0; list-style: none; margin: 0; padding: 0;
}
.suburbs li {
  margin: 0; padding: 0 16px 0 0; margin-right: 16px;
  border-right: 1px solid var(--line);
  font-size: .88rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2);
}
.section--navy .suburbs li { color: rgba(246,246,246,.8); border-color: rgba(255,255,255,.18); }

/* --- Steps ---------------------------------------------------------------- */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 0; }
.steps li {
  margin: 0; padding: 26px 0 26px 76px; position: relative;
  border-bottom: 1px solid var(--line);
}
.section--navy .steps li { border-color: rgba(255,255,255,.16); }
.steps li:first-child { border-top: 1px solid var(--line); }
.section--navy .steps li:first-child { border-top-color: rgba(255,255,255,.16); }
.steps li::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; left: 0; top: 26px;
  font-family: var(--display); font-weight: 700; font-size: 1.6rem;
  color: var(--brass-text); letter-spacing: -.03em;
}
.section--navy .steps li::before { color: var(--brass-lite); }
.steps h3 { margin-bottom: .3em; }
.steps p { margin: 0; color: var(--ink-2); }

/* --- Testimonials --------------------------------------------------------- */
.quote-card { background: var(--white); border: 1px solid var(--line); padding: 34px 30px; }
.quote-card blockquote {
  margin: 0 0 22px; font-family: var(--display); font-weight: 700;
  font-size: 1.3rem; line-height: 1.15; letter-spacing: -.02em;
}
.quote-card cite { font-style: normal; font-weight: 700; display: block; font-size: .9rem; }
.quote-card .meta {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); margin: 6px 0 0;
}
.empty-state { border: 1px solid var(--dark); background: var(--white); padding: 38px 32px; }
.empty-state h3 { margin-top: 0; }
.empty-state p { color: var(--ink-2); }
.empty-state p:last-child { margin-bottom: 0; }

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--dark); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 26px 48px 26px 0; position: relative;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  letter-spacing: -.02em; text-transform: uppercase; line-height: 1.1;
  min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; margin-top: -7px;
  width: 14px; height: 14px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .faq__body { padding: 0 0 28px; color: var(--ink-2); max-width: 70ch; }
.faq .faq__body p:last-child { margin-bottom: 0; }

/* --- Forms ---------------------------------------------------------------- */
.form-card { background: var(--white); border: 1px solid var(--dark); padding: 34px 28px; }
.field { margin-bottom: 22px; }
.field label {
  display: block; font-weight: 700; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 9px;
}
.field .hint {
  display: block; font-weight: 500; font-size: .84rem; letter-spacing: 0;
  text-transform: none; color: var(--ink-2); margin-top: 5px;
}
.field .req { color: #A1170D; }
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%; min-height: 52px; padding: 14px 16px;
  font-family: var(--sans); font-weight: 500; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-solid); border-radius: 0;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
textarea { min-height: 130px; resize: vertical; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px;
}
input:focus, select:focus, textarea:focus { border-color: var(--ink); background: var(--white); }
.field--error input, .field--error select, .field--error textarea { border-color: #A1170D; border-width: 2px; }
.error-msg { display: none; color: #8C1D18; font-size: .85rem; font-weight: 700; margin-top: 7px; }
.field--error .error-msg { display: block; }

.radio-set { border: 0; padding: 0; margin: 0 0 22px; }
.radio-set legend {
  font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 10px; padding: 0;
}
.radio-row { display: grid; gap: 10px; }
.radio-opt {
  display: flex; align-items: flex-start; gap: 11px;
  min-height: 52px; padding: 14px 16px;
  border: 1px solid var(--line-solid); cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.radio-opt input { margin: 2px 0 0; width: 20px; height: 20px; flex: none; accent-color: var(--ink); }
.radio-opt:hover { background: var(--paper); }
.radio-opt strong { display: block; font-size: .93rem; letter-spacing: .04em; text-transform: uppercase; }
.radio-opt span { display: block; font-size: .84rem; color: var(--ink-2); line-height: 1.4; }
.radio-opt:has(input:checked) { border-color: var(--ink); border-width: 2px; padding: 13px 15px; }

.form-status { margin-top: 20px; padding: 18px 20px; font-weight: 700; font-size: .95rem; }
.form-status[hidden] { display: none; }
.form-status--ok  { background: #E7F4EA; border: 1px solid #1B5E20; color: #133F16; }
.form-status--bad { background: #FDECEA; border: 1px solid #A1170D; color: #7A1409; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Leave a review ------------------------------------------------------- *
   Two panels. Google is deliberately the loud one: a review on Google lifts
   the map pack and shows stars in search results, and it is not ours to
   curate. The form underneath is the fallback for people who will not use
   Google, and it only ever lands in an inbox — nothing publishes itself.
   -------------------------------------------------------------------------- */
.review-split { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) {
  .review-split { grid-template-columns: 5fr 7fr; gap: 40px; }
  /* Before the Google profile is verified the panel is hidden — the form
     then takes the full width rather than sitting in a narrow column. */
  .review-split:has(> .google-panel[hidden]) { grid-template-columns: 1fr; }
}

.google-panel {
  background: var(--dark); color: var(--paper);
  border: 1px solid var(--dark); border-top: 5px solid var(--brass);
  padding: 34px 28px;
  position: sticky; top: calc(var(--header-h) + 24px);
}
.google-panel[hidden] { display: none; }
.google-panel h3 { color: var(--white); font-size: 1.9rem; margin-bottom: .45em; }
.google-panel p { color: rgba(246, 246, 246, .78); font-size: .95rem; }
.google-panel .btn { width: 100%; }
.google-panel .eyebrow { color: var(--brass-lite); }

.google-stars { display: flex; gap: 5px; margin: 0 0 18px; }
.google-stars svg { color: var(--brass); fill: var(--brass); }

/* The Google button is the loudest thing on the page, deliberately. White on
   near-black is 16.7:1 — nothing else here competes with it. */
.btn--google {
  background: var(--white); color: var(--ink); border-color: var(--white);
  min-height: 64px; font-size: .92rem; letter-spacing: .1em;
  gap: .75em;
}
.btn--google:hover,
.btn--google:focus-visible { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.btn--google svg { flex: none; }

/* Jump link in the page head, so a past customer finds the form without
   scrolling past reviews they did not come here to read. */
.head-link { margin-top: 18px; }
.head-link a {
  font-weight: 700; font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  border-bottom: 2px solid var(--brass); padding-bottom: 3px;
}
.head-link a:hover { border-bottom-color: var(--ink); }

.google-steps { list-style: none; padding: 0; margin: 24px 0 0; }
.google-steps li {
  display: flex; gap: 12px; align-items: baseline;
  font-size: .88rem; line-height: 1.5; color: rgba(246, 246, 246, .78);
  margin-bottom: .7em;
}
.google-steps li:last-child { margin-bottom: 0; }
.google-steps b {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--brass); color: var(--ink);
  font-size: .72rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Star rating — real radios, styled. Fills every star up to the one chosen. */
.star-set { border: 0; padding: 0; margin: 0 0 22px; }
.star-set legend {
  font-weight: 700; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 10px; padding: 0;
}
.star-row { display: flex; gap: 4px; }
.star-opt {
  position: relative; display: block; cursor: pointer;
  width: 46px; height: 46px;                 /* 44px minimum tap target */
}
.star-opt input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.star-opt svg {
  width: 100%; height: 100%; display: block;
  color: #8A8A8A; fill: transparent;         /* 3.5:1 on white — an unselected
                                                control still has to be seen */
  transition: color .15s var(--ease), fill .15s var(--ease);
  pointer-events: none;
}
.star-opt:has(input:checked) svg,
.star-opt:has(~ .star-opt input:checked) svg { color: var(--brass); fill: var(--brass); }
.star-row:hover .star-opt svg { color: var(--brass); fill: transparent; }
.star-opt:has(input:focus-visible) svg { outline: 3px solid var(--ink); outline-offset: 2px; }
/* If :has is unavailable the chosen star still fills, so the choice is visible */
.star-opt input:checked ~ svg { color: var(--brass); fill: var(--brass); }
.field--error .star-row { outline: 2px solid #A1170D; outline-offset: 4px; }

/* Consent — publishing someone's words needs their permission, in writing */
.consent { display: block; }
.consent__box {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px; background: var(--paper);
  border: 1px solid var(--line-solid); cursor: pointer;
  font-weight: 500; font-size: .9rem; line-height: 1.5;
  letter-spacing: 0; text-transform: none; margin: 0;
}
.consent__box:hover { background: var(--white); }
.consent__box input {
  width: 22px; height: 22px; margin: 1px 0 0;
  flex: none; accent-color: var(--ink);
}
.consent--error .consent__box,
.field--error .consent__box { border-color: #A1170D; border-width: 2px; }

.review-note {
  font-size: .85rem; line-height: 1.55; color: var(--ink-2);
  border-left: 2px solid var(--brass); padding-left: 16px; margin: 24px 0 0;
}

/* --- Contact -------------------------------------------------------------- */
.contact-row {
  display: grid; gap: 0; margin: 0 0 48px; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 1px solid var(--dark);
}
.contact-row li { margin: 0; border-bottom: 1px solid var(--line); }
.contact-tile {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 26px 4px; text-decoration: none; color: var(--ink); min-height: 48px;
  transition: padding-left .25s var(--ease);
}
.contact-tile:hover { padding-left: 12px; }
.contact-tile svg { flex: none; color: var(--brass-text); margin-top: 3px; }
.contact-tile .label {
  display: block; font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 5px;
}
.contact-tile .value { display: block; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }

.map-frame { border: 1px solid var(--line); overflow: hidden; line-height: 0; background: var(--line-solid); }
.map-frame iframe { width: 100%; height: 340px; border: 0; display: block; filter: grayscale(1) contrast(1.05); }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  background: var(--dark); color: rgba(246, 246, 246, .62);
  padding: 72px 0 32px; font-size: .93rem;
  border-top: 1px solid rgba(255,255,255,.05);
}
.site-footer h2, .site-footer h3 {
  color: var(--white); font-size: .74rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1.6em;
  font-family: var(--sans);
}
.site-footer .footer-brand h2 {
  font-family: var(--display); font-size: 1.5rem; letter-spacing: -.03em; margin-bottom: .5em;
}
.footer-grid { display: grid; gap: 44px; }
.site-footer a { color: rgba(246, 246, 246, .82); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .8em; }
.footer-contact li { display: flex; gap: 11px; align-items: flex-start; }
.footer-contact svg { flex: none; margin-top: 3px; color: var(--brass-lite); }
.footer-legal {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(246, 246, 246, .55);
}

/* --- CTA band ------------------------------------------------------------- */
.cta-band { background: var(--brass); color: var(--ink); padding: 64px 0; }
.cta-band h2 { color: var(--ink); margin-bottom: .3em; }
.cta-band p { color: rgba(17,17,17,.78); max-width: 52ch; }
.cta-band .btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cta-band .btn--primary:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.cta-band .btn--outline { border-color: var(--ink); color: var(--ink); }
.cta-band .btn--outline:hover { background: var(--ink); color: var(--brass); }

/* --- Breakpoints ---------------------------------------------------------- */
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .radio-row { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .call-bar { display: none; }
  .nav { display: block; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
  .header-phone { display: inline-flex; }
  .header-quote { display: inline-flex; }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .section { padding: 110px 0; }
  .hero__inner { min-height: 78vh; padding: 90px 0 80px; }
  .page-head { padding: 88px 0 72px; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; }

  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
  .split--form { grid-template-columns: 1fr 1.05fr; align-items: start; gap: 56px; }

  .sc--wide-8  { grid-column: span 8; }
  .sc--pill-4  { grid-column: span 4; }
  .sc--round-5 { grid-column: span 5; }
  .sc--wide-7  { grid-column: span 7; }
  .sc--half    { grid-column: span 6; }

  .cta-band .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
  .cta-band p { margin-bottom: 0; }
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .sc:hover img { transform: none; }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  .site-header, .call-bar, .cta-band, .map-frame, .echo__layer { display: none; }
  body { padding: 0; font-size: 12pt; background: #fff; }
}

/* ==========================================================================
   TESTIMONIAL MARQUEE
   Two rows of compact cards counter-scrolling, edge-faded, pausing on hover.

   ADAPTED FROM THE SUPPLIED SPEC — what changed and why:
   - The spec's shadcn register (Inter, #FAFAFA ground, indigo #4F46E5,
     12–16px radii) is a different design language to the rest of this site.
     The mechanic is kept exactly; the skin uses the site's own tokens so it
     reads as part of the page rather than a component dropped on top.
     Indigo becomes brass, Inter becomes Clash/Satoshi, radii go sharp.
   - Edge fade is a mask, per spec, so it works over paper or white.
   - The duplicated set is generated in JS and marked aria-hidden, so screen
     readers and search engines see each review exactly once.
   - Under reduced motion the mechanic is removed entirely and the cards
     become a plain readable grid — not a frozen rail.
   ========================================================================== */

.marquee { position: relative; }
.marquee[hidden] { display: none; }

.marquee__viewport {
  position: relative;
  overflow: hidden;
  /* Mask, not a gradient overlay — survives any background behind it. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.marquee__viewport + .marquee__viewport { margin-top: 20px; }

.marquee__track { display: flex; width: max-content; }
/* No JS: the loop never starts, so wrap the single set instead of clipping it. */
.marquee__track:not(.is-animating) {
  flex-wrap: wrap; width: auto; gap: 20px;
}
.marquee__track:not(.is-animating) > .t-card { margin-right: 0; }
.marquee__track.is-animating { animation: mq-left 68s linear infinite; }
.marquee__track.is-animating.marquee__track--reverse { animation-name: mq-right; animation-duration: 76s; }

/* Cards carry their own trailing margin rather than the track using `gap`,
   so the duplicated set is exactly 50% of the track and -50% loops clean. */
@keyframes mq-left  { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes mq-right { from { transform: translateX(-50%); }   to { transform: translateX(0); } }

.marquee:hover .marquee__track.is-animating,
.marquee:focus-within .marquee__track.is-animating { animation-play-state: paused; }

.t-card {
  flex: none;
  width: 336px;
  margin-right: 20px;
  background: var(--white);
  border: 1px solid var(--line-solid);
  border-radius: 2px;
  padding: 24px 22px 20px;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .04);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.t-card__quote {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .97rem;
  line-height: 1.55;
  color: var(--ink);
}
.t-card__quote::before { content: "\201C"; }
.t-card__quote::after  { content: "\201D"; }

.t-card__person { display: flex; align-items: center; gap: 12px; margin-top: auto; }

/* Initials on a disc — no image dependency at all. */
.t-card__avatar {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700;
  font-size: .78rem; letter-spacing: .04em;
  color: #FFFFFF;
  background: var(--dark);
}
.t-card:nth-child(4n+1) .t-card__avatar { background: #1E1E1E; }
.t-card:nth-child(4n+2) .t-card__avatar { background: #0E2340; }
.t-card:nth-child(4n+3) .t-card__avatar { background: #8A6A1A; }
.t-card:nth-child(4n+4) .t-card__avatar { background: #3F3F46; }

.t-card__name {
  display: block;
  font-family: var(--sans); font-weight: 700;
  font-size: .92rem; letter-spacing: .01em; color: var(--ink);
  font-style: normal;
}
.t-card__meta {
  display: block;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 3px;
}

@media (max-width: 640px) {
  .t-card { width: min(336px, 78vw); }
}

/* --- Reduced motion: drop the mechanic, not just the speed ---------------- */
@media (prefers-reduced-motion: reduce) {
  .marquee__viewport {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .marquee__viewport + .marquee__viewport { margin-top: 20px; }
  .marquee__track,
  .marquee__track.is-animating {
    animation: none;
    width: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }
  .t-card { width: auto; margin-right: 0; }
  /* The duplicated set is decoration — it has no place in a static list. */
  .marquee__track > [aria-hidden="true"] { display: none; }
}

/* --- Real logo (crown) -------------------------------------------
   Luke's crown is the primary mark. The file is ~4x the display height so
   it stays sharp on Retina; width:auto keeps its 1.1:1 ratio. Sized larger
   than the PPN monogram was because the crown is squarer and carries more
   internal detail. */
.brand img.brand__mark { height: 52px; width: auto; }
.footer-brand .footer-mark { height: 60px; width: auto; margin-bottom: 18px; }
@media (max-width: 420px) {
  .brand img.brand__mark { height: 42px; }
}