/* Roofcraft Shropshire: "The Red Ridge" design system.
   Mobile first (390), then 768 / 1024 / 1280. Hex colours only (oklch discards the page on old Chrome).
   Owned by the design-system build. Page builders: do NOT edit, put page styles in src/pages/<slug>.css.
   Component reference: src/README.md */

/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: "Brygada";
  src: url(../fonts/brygada-600.woff2) format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url(../fonts/jost-var.woff2) format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}
/* metric-matched fallbacks so the swap does not shift the layout */
@font-face {
  font-family: "Brygada fb";
  src: local("Georgia Bold"), local("Georgia-Bold"), local("Georgia");
  font-weight: 600;
  size-adjust: 91.2%; ascent-override: 100.9%; descent-override: 27.4%; line-gap-override: 0%;
}
@font-face {
  font-family: "Jost fb";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 96.1%; ascent-override: 111.3%; descent-override: 39%; line-gap-override: 0%;
}

/* ------------------------------------------------------------------ tokens */
:root {
  /* brand, from their logo + letterhead */
  --ridge: #ab2a1e;          /* the red roof chevron: call buttons, links, the ridge system */
  --ridge-deep: #8c2218;     /* pressed / hover */
  --ridge-lift: #f08a7c;     /* red on Staffordshire Blue only */
  --script: #16181b;         /* their black script: all text on light */
  --paper: #ffffff;
  /* from their own photos */
  --overcast: #e8eef5;       /* Shropshire sky, DSC_0201 */
  --staffs: #363237;         /* Staffordshire Blue tile, fb36 */
  --staffs-deep: #2b282e;
  --slate: #3d4042;          /* Welsh slate, fb24 */
  --slate-mid: #747578;      /* decorative only */
  --slate-sheen: #c6c4cb;    /* muted text on dark (7.3:1 on Staffordshire Blue) */
  --muted: #4d4f54;          /* secondary text on light (8.2:1 on white, 7.0:1 on overcast) */
  --ink-soft: #3f4146;       /* ledes and long secondary copy (10.2:1 on white) */
  --lead: #9a9295;           /* lead flashing: borders, never text */
  --oak: #735f3a;            /* battens, tiny doses */
  --rule: #dcd9da;           /* hairlines on white (lead at ~35%) */
  --rule-dark: #4d484f;      /* hairlines on Staffordshire Blue */

  --serif: "Brygada", "Brygada fb", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Jost fb", Arial, Helvetica, sans-serif;

  --fs-h1: clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);
  --fs-lede: clamp(1.0625rem, .98rem + .4vw, 1.3125rem);
  --fs-small: .9375rem;

  --gutter: 16px;
  --section: 48px;
  --radius: 4px;
  --header-h: 56px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
@media (min-width: 768px) { :root { --gutter: 32px; --section: 80px; } }
@media (min-width: 1024px) { :root { --header-h: 72px; --section: 104px; --fs-small: 1rem; } }
@media (min-width: 1280px) { :root { --gutter: 48px; } }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--script);
  font: 400 1.0625rem/1.6 var(--sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
@media (min-width: 1024px) { body { font-size: 1.125rem; line-height: 1.65; } }
@media (min-width: 1280px) { body { font-size: 1.1875rem; line-height: 1.62; } }
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.04; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; }
address { font-style: normal; }
a { color: var(--ridge); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; }
a[href^="tel:"] { white-space: nowrap; }
::selection { background: #f6d4cf; color: var(--script); }
:focus-visible { outline: 3px solid var(--ridge); outline-offset: 2px; border-radius: 2px; }
.on-dark :focus-visible { outline-color: var(--ridge-lift); }
main:focus { outline: none; }

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--script); color: #fff; padding: 12px 16px; border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 8px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ layout primitives */
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 820px; }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .6); }
.section--overcast { background: var(--overcast); }
.section--staffs { background: var(--staffs); color: #fff; }
.section--staffs h2, .section--staffs h3 { color: #fff; }
.section--staffs p { color: #e3e1e4; }
.section--rule { border-top: 1px solid var(--rule); }
.section__head { max-width: 44rem; margin-bottom: 28px; }
.section__head h2 + p, .section__head h2 + .lede { margin-top: 12px; }
.section__foot { margin-top: 28px; }
.lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-soft); max-width: 40rem; }
.section--staffs .lede { color: #dedce1; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.stack > * + * { margin-top: var(--stack, 16px); }
.prose { max-width: 42rem; }
.prose > * + * { margin-top: 16px; }
.prose h2 { margin-top: 40px; }
.prose h3 { margin-top: 28px; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 6px; }
.split { display: grid; gap: 32px; }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
  .split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--center { align-items: center; }
}
.grid-2 { display: grid; gap: 16px; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-3 { display: grid; gap: 16px; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* ------------------------------------------------------------------ buttons */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  border: 2px solid transparent; border-radius: var(--radius);
  font: 600 1.125rem/1.1 var(--sans);
  text-align: center; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease,
    background-position .18s var(--ease), transform .18s var(--ease);
  touch-action: manipulation;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 20px; height: 20px; flex: none; }
/* red call button: a faint half-bond slate course texture that shifts half a slate on press */
.btn--call {
  background-color: var(--ridge);
  color: #fff;
  font-variant-numeric: tabular-nums lining-nums;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='24'%3E%3Cpath d='M0 11.5h36M0 23.5h36M9 0v11.5M27 12v12' stroke='%23fff' stroke-opacity='.09' fill='none'/%3E%3C/svg%3E");
  background-size: 36px 24px;
  background-position: 0 0;
}
.btn--call:hover { background-color: var(--ridge-deep); }
/* press (mouse or touch): the courses shift half a slate and the button sits down 1px, over 180ms */
.btn--call:active, .btn--call.is-pressed { background-position: 18px 0; transform: translateY(1px); }
.btn--line { background: transparent; color: var(--script); border-color: var(--script); }
.btn--line:hover { background: var(--script); color: #fff; }
.btn--quiet { background: var(--overcast); color: var(--script); }
.btn--quiet:hover { background: #d9e2ec; }
.btn--block { display: flex; width: 100%; }
.btn--lg { min-height: 56px; font-size: 1.1875rem; }
.btn--sm { min-height: 44px; padding: 0 14px; font-size: 1rem; gap: 6px; }
.btn--sm svg { width: 18px; height: 18px; }
.on-dark .btn--call { box-shadow: 0 0 0 2px var(--staffs), 0 0 0 4px #fff; }
.on-dark .btn--line { color: #fff; border-color: #fff; }
.on-dark .btn--line:hover { background: #fff; color: var(--script); }
.btn-row { display: grid; gap: 12px; }
@media (min-width: 560px) {
  .btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
}
.on-dark .btn-row { gap: 16px; }

/* text link with an arrow, for "see all" style links */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 600; color: var(--ridge); text-decoration: none;
}
.link-arrow::after {
  content: ""; width: 18px; height: 12px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h15M11 1.5 15.5 6 11 10.5' stroke='%23ab2a1e' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .2s var(--ease);
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(3px); }
.on-dark .link-arrow { color: var(--ridge-lift); }
.on-dark .link-arrow::after { filter: brightness(1.9) saturate(.8); }

/* ------------------------------------------------------------------ proof line (put right above every primary CTA)
   The real CHAS and Trader Register marks in white tiles, then two checkable facts: over 25 years,
   and the limited company with its Companies House number linked. One compact row at 390
   (about 52px tall), so the hero Call button stays well inside the first screen. */
.proof {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  list-style: none; margin: 0; padding: 0;
  font: 500 .9375rem/1.35 var(--sans); color: var(--script);
}
.proof__marks { display: flex; gap: 6px; flex: none; }
.proof__badge {
  display: flex; align-items: center; justify-content: center;
  height: 50px; padding: 5px 7px;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
}
.proof__badge picture, .proof__badge img { height: 100%; width: auto; }
.proof__facts { display: grid; gap: 3px; min-width: 0; }
.proof__facts > span { display: block; }
.proof__facts strong { font-weight: 600; }
.proof__facts a { color: var(--ridge); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 1024px) {
  .proof { gap: 12px 18px; font-size: 1.0625rem; }
  .proof__marks { gap: 8px; }
  .proof__badge { height: 60px; padding: 6px 9px; }
  .proof__facts { gap: 4px; }
}
.on-dark .proof { color: #fff; }
.on-dark .proof__badge { border-color: #fff; }
.on-dark .proof__facts a { color: #fff; }

/* "still busy": their own recent hiring posts, the honest answer to job photos from 2017 to 2022 */
.busy {
  display: flex; gap: 12px; align-items: flex-start;
  max-width: 44rem; margin: 0; padding: 14px 16px;
  background: var(--overcast); border-radius: var(--radius);
  font-size: 1rem; line-height: 1.5; color: var(--script);
}
.busy::before {
  content: ""; flex: none; width: 18px; height: 11px; margin-top: .45em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M1 8.1 7.5 1.4 14 8.1' stroke='%23ab2a1e' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
}
.busy strong { font-weight: 600; }
.busy a { white-space: nowrap; }
.section--overcast .busy { background: var(--paper); }
.on-dark .busy { background: var(--staffs-deep); color: #e3e1e4; }
.on-dark .busy strong { color: #fff; }
.on-dark .busy a { color: #fff; }
.on-dark .busy::before { filter: brightness(1.9) saturate(.8); }
@media (min-width: 1024px) { .busy { font-size: 1.0625rem; padding: 16px 20px; } }

/* ------------------------------------------------------------------ proof strip (badges + checkable facts) */
.proof-strip {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px;
  list-style: none; margin: 0; padding: 0;
}
.proof-strip__item { display: flex; flex-direction: column; gap: 6px; }
.proof-strip__mark {
  height: 52px; display: flex; align-items: center;
}
.proof-strip__mark img { height: 100%; width: auto; }
.proof-strip__big {
  font: 600 2.25rem/1 var(--serif); letter-spacing: -.01em; color: var(--script);
  display: flex; align-items: center; height: 52px;
}
.proof-strip__title { font-weight: 600; line-height: 1.3; }
.proof-strip__text { font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
.proof-strip__text a { display: inline-block; padding: 8px 0 0; }
@media (min-width: 900px) {
  .proof-strip { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .proof-strip__mark, .proof-strip__big { height: 64px; }
}

/* ------------------------------------------------------------------ slate cards ("check the slate")
   A link card: photo, then a Welsh-slate face with two nail holes. On hover/focus the slate
   tips up a few degrees and shows the oak batten underneath. */
.slate-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  list-style: none; margin: 0; padding: 0;
}
.slate-cards > li { display: flex; }
.slate-cards > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .slate-cards { grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 16px; }
  .slate-cards > li:last-child:nth-child(odd) { grid-column: auto; }
}
.slate-card {
  position: relative; display: flex; flex-direction: column; width: 100%;
  color: #fff; text-decoration: none; border-radius: 3px;
  background: var(--oak);
  isolation: isolate;
}
.slate-card__img {
  aspect-ratio: 3 / 2; overflow: hidden; border-radius: 3px 3px 0 0; background: #cfd3d8;
}
.slate-card__img img { width: 100%; height: 100%; object-fit: cover; }
.slate-cards > li:last-child:nth-child(odd) .slate-card__img { aspect-ratio: 16 / 6; }
@media (min-width: 900px) { .slate-cards > li:last-child:nth-child(odd) .slate-card__img { aspect-ratio: 3 / 2; } }
.slate-card__face {
  position: relative; flex: 1;
  display: block;
  padding: 20px 34px 14px 12px;
  background-color: var(--slate);
  background-image: url(../gen/slate-riven-tile.webp);
  background-size: 128px 128px;
  background-blend-mode: soft-light;
  border-radius: 0 0 3px 3px;
  transform-origin: 50% 0;
  transition: transform .28s var(--ease);
}
.slate-card { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* nail holes at the head of the slate */
.slate-card__face::before, .slate-card__face::after {
  content: ""; position: absolute; top: 8px; width: 5px; height: 5px; border-radius: 50%;
  background: #1c1e20; box-shadow: 0 1px 0 #6a6d72;
}
.slate-card__face::before { left: 22%; }
.slate-card__face::after { right: 22%; }
.slate-card__title { font: 600 1.125rem/1.2 var(--serif); letter-spacing: -.005em; }
.slate-card__hint { display: block; margin-top: 4px; font: 400 .875rem/1.35 var(--sans); color: #e0e1e4; }
@media (min-width: 1024px) { .slate-card__hint { font-size: .9375rem; } }
.slate-card__arrow {
  position: absolute; right: 10px; top: 21px; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9h11M10 4.5 14.5 9 10 13.5' stroke='%23f08a7c' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
}
.slate-card:focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .slate-card:hover .slate-card__face,
  .slate-card:focus-visible .slate-card__face { transform: perspective(600px) rotateX(-9deg) translateY(-2px); }
  /* press: the slate tips as soon as the finger lands (Chrome sets :active on touch), a 180ms lift */
  .slate-card:active .slate-card__face,
  .slate-card.is-pressed .slate-card__face { transform: perspective(600px) rotateX(-6deg) translateY(-1px); transition-duration: .18s; }
}
/* reduced motion: the finger is still acknowledged, as a lighter slate rather than a tip */
@media (prefers-reduced-motion: reduce) {
  .slate-card:active .slate-card__face,
  .slate-card.is-pressed .slate-card__face { background-color: #4a4d50; }
}

/* ------------------------------------------------------------------ photo figure with caption */
.figure { margin: 0; }
.figure__img { position: relative; aspect-ratio: var(--ar, 16 / 9); overflow: hidden; border-radius: 3px; background: #d5dbe2; }
.figure__img picture, .slate-card__img picture { width: 100%; height: 100%; }
.figure__img img { width: 100%; height: 100%; object-fit: cover; }
.figure figcaption { margin-top: 10px; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.figure__quote { display: block; color: var(--script); font-weight: 500; font-size: 1rem; }
.figure__meta { display: block; margin-top: 4px; font-size: .9375rem; color: var(--muted); }
.section--staffs .figure figcaption, .on-dark .figure figcaption { color: var(--slate-sheen); }
.section--staffs .figure__quote, .on-dark .figure__quote { color: #fff; }

/* horizontal work strip: swipe on phones, a grid from 900 */
.work-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px;
  margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 12px;
  list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: thin; scrollbar-color: var(--lead) transparent;
}
.work-strip > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 640px) { .work-strip { grid-auto-columns: 46%; } }
@media (min-width: 1024px) {
  .work-strip {
    grid-auto-flow: row; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); grid-auto-columns: auto;
    margin: 0; padding: 0; overflow: visible; gap: 24px;
  }
}

/* ------------------------------------------------------------------ quote from a Facebook comment (never a "review") */
.fb-quote { margin: 0; padding: 20px 0 0; border-top: 3px solid var(--ridge); max-width: 34rem; }
.fb-quote p { font: 600 1.5rem/1.25 var(--serif); letter-spacing: -.01em; }
.fb-quote footer { margin-top: 10px; font-size: var(--fs-small); color: var(--muted); }
.on-dark .fb-quote { border-top-color: var(--ridge-lift); }
.on-dark .fb-quote footer { color: var(--slate-sheen); }

/* ------------------------------------------------------------------ ticked list (their own reasons) */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; line-height: 1.45; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 15px; height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M1 8.1 7.5 1.4 14 8.1' stroke='%23ab2a1e' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (min-width: 640px) { .ticks--2 { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
.on-dark .ticks li::before { filter: brightness(1.9) saturate(.8); }

/* ------------------------------------------------------------------ service rows (a list of services, hub pages) */
.service-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.service-row { border-bottom: 1px solid var(--rule); }
.service-row > a, .service-row > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center;
  padding: 18px 0; color: inherit; text-decoration: none;
}
.service-row h3 { font-size: 1.25rem; }
.service-row p { grid-column: 1; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.service-row > a::after {
  content: ""; grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h15M11 1.5 15.5 6 11 10.5' stroke='%23ab2a1e' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .2s var(--ease);
}
.service-row > a:hover h3 { color: var(--ridge); }
.service-row > a:hover::after { transform: translateX(4px); }

/* ------------------------------------------------------------------ Q and A blocks (anxieties answered) */
.qa { display: grid; gap: 16px; }
@media (min-width: 900px) { .qa { grid-template-columns: 1fr 1fr; gap: 24px; } }
.qa__item { background: var(--paper); padding: 22px 20px 24px; border-top: 3px solid var(--slate); }
.qa__item h3 { margin-bottom: 10px; }
.qa__item p + p { margin-top: 10px; }

/* ------------------------------------------------------------------ breadcrumbs */
.crumbs { padding-top: 12px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; font-size: .9375rem; color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before {
  content: ""; width: 7px; height: 11px; margin: 0 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 11'%3E%3Cpath d='M1 1l4.5 4.5L1 10' stroke='%239a9295' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
}
.crumbs a { display: inline-block; min-width: 44px; padding: 12px 3px; margin: 0 -3px; color: var(--muted); }
.crumbs a:hover { color: var(--ridge); }
.crumbs [aria-current] { color: var(--script); padding: 12px 0; }

/* ------------------------------------------------------------------ FAQ (native details) */
.faq { border-top: 1px solid var(--rule); max-width: 50rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 16px 0;
  font: 600 1.1875rem/1.3 var(--serif); letter-spacing: -.005em;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 16px; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 1.5 8 8.5l7-7' stroke='%23ab2a1e' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { color: var(--ridge); }
.faq__a { padding: 0 0 22px; max-width: 42rem; }
.faq__a > * + * { margin-top: 12px; }

/* ------------------------------------------------------------------ closing quote block (partial: cta) */
.cta-band { background: var(--staffs); color: #fff; padding-block: 56px 64px; text-align: left; }
.cta-band__inner { max-width: 820px; }
.cta-band__ridge { width: 132px; height: 26px; margin-bottom: 18px; overflow: visible; }
.cta-band__ridge path { fill: none; stroke: var(--ridge-lift); stroke-width: 3; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.cta-band h2 { color: #fff; }
.cta-band__lede { margin-top: 12px; color: #e3e1e4; font-size: var(--fs-lede); max-width: 34rem; }
.cta-band .btn-row { margin-top: 28px; }
.cta-band__alt { display: flex; flex-wrap: wrap; gap: 0 22px; list-style: none; padding: 0; margin: 18px 0 0; }
.cta-band__alt a { display: inline-block; padding: 12px 0; color: #fff; font-weight: 500; }
.cta-band .proof { margin-top: 18px; }
.cta-band .busy { margin-top: 20px; }
@media (min-width: 1024px) { .cta-band { padding-block: 96px 104px; } .cta-band__ridge { width: 200px; height: 40px; } }

/* ------------------------------------------------------------------ stepped lead flashing divider (fb09 profile) */
.flashing {
  height: 22px; margin: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='22'%3E%3Cpath d='M0 20h12v-8h12V4h12v8h12' fill='none' stroke='%239a9295' stroke-width='2.5' stroke-linejoin='miter'/%3E%3C/svg%3E") repeat-x left center / 48px 22px;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* One value for every page. At phone widths the sticky call bar covers the bottom ~70px,
       so the wipe starts with the strip's top at about 0.80 of the viewport, clear of the bar,
       and runs about 310px to 0.44 (critic-measured on the roofline page). Desktop has no call
       bar, so it may start as it enters. */
    .flashing { animation: rc-flash linear both; animation-timeline: view(); animation-range: cover 21% cover 60%; }
    /* Desktop: no call bar, but "entry 10%" of a 22px strip is the fold itself, so the wipe was
       half drawn before the strip reached 0.8 of the viewport. Start it in view instead. */
    @media (min-width: 1024px) { .flashing { animation-range: cover 24% cover 60%; } }
  }
}
@keyframes rc-flash { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ------------------------------------------------------------------ form controls */
.field { display: grid; gap: 6px; }
.field + .field { margin-top: 18px; }
.field label, .field legend { font-weight: 600; font-size: 1rem; }
.field__hint { font-size: .9375rem; color: var(--muted); }
.field__error { font-size: .9375rem; color: var(--ridge); font-weight: 500; }
.input, .textarea, .select {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font: 400 1.0625rem/1.4 var(--sans); color: var(--script);
  background: #fff; border: 1.5px solid #8c878a; border-radius: var(--radius);
  appearance: none;
}
.textarea { min-height: 120px; resize: vertical; }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: 3px solid var(--ridge); outline-offset: 1px; border-color: var(--script); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--ridge); }
/* `appearance: none` above strips a select's native arrow, which left the property picker
   looking exactly like a text box: you could not tell it opened without clicking it. The
   chevron is drawn back on for .select only, with room reserved on the right so a long
   option never runs underneath it. Forced-colours mode drops background images, so the
   native control is handed back there rather than losing the arrow a second time. */
.select {
  padding-right: 44px;
  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.5 11 1.5' fill='none' stroke='%234d4f54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}
@media (forced-colors: active) {
  .select { appearance: auto; padding-right: 14px; background-image: none; }
}
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  border: 1.5px solid #8c878a; border-radius: 999px; background: #fff;
  font-size: 1rem; line-height: 1.25; cursor: pointer;
}
.chip input:checked + span { background: var(--script); border-color: var(--script); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--ridge); outline-offset: 2px; }

/* ------------------------------------------------------------------ themed Google Map behind a facade */
.map { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--overcast); aspect-ratio: 16 / 12; }
@media (min-width: 768px) { .map { aspect-ratio: 16 / 11; } }
.map__facade {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 12px;
  padding: 20px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 90C30 70 50 95 80 70s40-40 40-40M0 30c25 10 45-15 70 5s50 5 50 5' stroke='%23c9d6e3' stroke-width='2' fill='none'/%3E%3C/svg%3E") 0 0 / 240px 240px,
    var(--overcast);
}
.map__pins { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.map__pins li { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; font: 500 .8125rem/1.2 var(--sans); color: var(--script); white-space: nowrap; }
.map__pins li::before {
  content: ""; width: 22px; height: 14px; margin-bottom: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M2 12.5 11 2l9 10.5' stroke='%23ab2a1e' stroke-width='3' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
}
.map__pins li.is-base { font-weight: 600; }
.map__facade .btn { position: relative; z-index: 1; }
.map__note { position: relative; z-index: 1; font-size: .875rem; color: var(--muted); }
.map__canvas { position: absolute; inset: 0; }
.map__fallback { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: 20px; background: var(--overcast); }
.map-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 12px; }
.map-links a { display: inline-block; padding: 11px 0; }
.map-recenter {
  margin: 10px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--radius);
  background: #fff; color: var(--script); font: 600 .9375rem var(--sans); cursor: pointer;
  box-shadow: 0 1px 4px rgba(22, 24, 27, .3);
}

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: transform .24s var(--ease);
}
.site-header.is-hidden { transform: translateY(calc(-100% - 2px)); }
.site-header__bar { display: flex; align-items: center; gap: 8px; height: var(--header-h); }
.brand { display: flex; align-items: center; min-height: 44px; margin-right: auto; }
.brand img { height: 44px; width: auto; }
.nav { display: none; }
.nav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px;
  color: var(--script); text-decoration: none; font-weight: 500; font-size: 1rem; border-radius: var(--radius);
}
.nav__link:hover { color: var(--ridge); }
.nav__link[aria-current="page"] { color: var(--ridge); box-shadow: inset 0 -2px 0 var(--ridge); border-radius: 0; }
.header-phone {
  display: none; align-items: center; min-height: 44px; padding: 0 6px;
  color: var(--script); text-decoration: none; font-weight: 600; font-size: 1.0625rem; font-variant-numeric: tabular-nums;
}
.header-phone:hover { color: var(--ridge); }
.header-quote { display: none; }
.header-call { padding: 0 14px 0 12px; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 10px;
  background: transparent; color: var(--script); border: 1.5px solid var(--rule); border-radius: var(--radius);
  font: 500 1rem var(--sans); cursor: pointer;
}
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn[aria-expanded="true"] { background: var(--script); color: #fff; border-color: var(--script); }
@media (min-width: 1024px) {
  .brand img { height: 54px; }
  .header-phone, .header-quote { display: inline-flex; }
  .header-call { display: none; }
  .site-header__bar { gap: 12px; }
}
@media (min-width: 1280px) {
  .nav { display: block; margin-right: 8px; }
  .menu-btn { display: none; }
}

/* the menu sheet: opens from the apex (sig-pitch.css) */
.menu-sheet {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  box-shadow: 0 24px 40px -24px rgba(22, 24, 27, .45);
  max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h));
  overflow-y: auto; overscroll-behavior: contain;
}
.menu-sheet[hidden] { display: none; }
.menu { list-style: none; margin: 0; padding: 4px var(--gutter) 0; }
.menu__link {
  display: flex; flex-direction: column; justify-content: center; min-height: 60px; padding: 8px 0;
  border-bottom: 1px solid var(--rule); color: var(--script); text-decoration: none;
}
.menu__label { font: 600 1.1875rem/1.25 var(--serif); letter-spacing: -.005em; }
.menu__hint { margin-top: 2px; font-size: .9375rem; color: var(--muted); }
.menu__link:hover .menu__label, .menu__link[aria-current="page"] .menu__label { color: var(--ridge); }
.menu__cta { display: grid; gap: 10px; padding: 18px var(--gutter) 22px; }
@media (min-width: 1024px) {
  .menu-sheet { left: auto; right: var(--gutter); width: 420px; border: 1px solid var(--rule); border-radius: 0 0 var(--radius) var(--radius); }
}

/* ------------------------------------------------------------------ sticky call bar (under 1024 only) */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--rule);
  box-shadow: 0 -8px 24px -16px rgba(22, 24, 27, .35);
  transition: transform .24s var(--ease), visibility 0s;   /* same clock as the header */
}
.callbar__call, .callbar .btn { min-height: 52px; padding: 0 10px; font-size: 1.0625rem; gap: 8px; }
.callbar__call svg { width: 18px; height: 18px; }
.js .callbar:not(.is-on) { transform: translateY(calc(100% + 2px)); visibility: hidden; transition: transform .24s var(--ease), visibility 0s .24s; }
body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) {
  .callbar { display: none; }
  body { padding-bottom: 0; }
}

/* ------------------------------------------------------------------ footer */
.site-footer { background: var(--staffs-deep); color: #e3e1e4; padding-top: 44px; font-size: 1rem; }
.site-footer a { color: #fff; }
.site-footer__grid { display: grid; gap: 24px 16px; grid-template-columns: 1fr 1fr; }
.site-footer__brand { grid-column: 1 / -1; }
.site-footer__brand img { height: 52px; width: auto; margin-bottom: 12px; }
.site-footer__brand address { line-height: 1.55; }
.site-footer__brand strong { color: #fff; }
.site-footer__contact { margin-top: 12px; line-height: 1.4; }
.site-footer__contact a { display: inline-block; padding: 12px 0; font-weight: 500; font-size: 1.0625rem; }
.site-footer__contact a[href^="tel"] { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.1875rem; }
.site-footer h2, .site-footer__marks-title { font: 600 1rem/1.3 var(--sans); color: var(--slate-sheen); margin: 0 0 6px; letter-spacing: 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col a { display: inline-block; padding: 12px 0; text-decoration: none; line-height: 1.3; }
.site-footer__col a:hover { text-decoration: underline; }
.site-footer__marks { grid-column: 1 / -1; }
.site-footer__badges { display: flex; gap: 12px; margin-top: 8px; }
.badge-tile { display: flex; align-items: center; justify-content: center; height: 64px; padding: 6px 10px; background: #fff; border-radius: var(--radius); }
.badge-tile img { height: 100%; width: auto; }
.site-footer__base {
  margin-top: 32px; padding-top: 18px; padding-bottom: 24px; border-top: 1px solid var(--rule-dark);
  display: grid; gap: 4px; font-size: .9375rem; color: var(--slate-sheen);
}
.site-footer__base a { display: inline-block; padding: 10px 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0 20px; align-items: center; }
@media (min-width: 900px) {
  .site-footer { padding-top: 80px; }
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
  .site-footer__brand, .site-footer__marks { grid-column: auto; }
  .site-footer__base { grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
}

/* ------------------------------------------------------------------ reduced motion: everything instant */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}