/* ==========================================================================
   JD PM Renovations site styles
   Palette: ink black + warm copper, taken from the monochrome badge logo.
   ========================================================================== */

:root {
  /* Brand */
  --ink:        #12161b;
  --ink-2:      #1b222b;
  --ink-3:      #2a3440;
  --paper:      #ffffff;
  --paper-2:    #f7f5f2;
  --paper-3:    #ece8e2;

  /* Accent is used both as text on light grounds and as a background under
     white text, so it has to clear 4.5:1 in both directions:
     #a75e1a on white = 4.93:1, white on #a75e1a = 4.93:1, on tint = 4.53:1. */
  --accent:     #a75e1a;
  --accent-lit: #e2933f;   /* for dark grounds only: 7.33:1 on --ink */
  --accent-dim: #7d4410;

  --text:       #1a1f26;
  --text-mute:  #5b6672;
  --text-faint: #6a7179;   /* 4.94:1 on white, 4.54:1 on --paper-2 */
  --on-dark:    #f3f1ee;
  --on-dark-mute: #a9b2bc;

  --line:       #e2ddd6;
  --line-dark:  rgba(255, 255, 255, .14);

  --ok:         #2f7d52;

  /* Type */
  --display: "Barlow Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Space + shape */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --maxw: 1180px;
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(18, 22, 27, .06), 0 2px 8px rgba(18, 22, 27, .05);
  --shadow:    0 2px 6px rgba(18, 22, 27, .07), 0 12px 32px rgba(18, 22, 27, .09);
  --shadow-lg: 0 4px 12px rgba(18, 22, 27, .09), 0 24px 60px rgba(18, 22, 27, .14);
}

/* --------------------------------------------------------------- reset -- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The off-canvas nav is parked outside the viewport, so the page must not
   scroll sideways to reach it. `clip` is used in preference to `hidden`
   because `hidden` on the scroll container would break the sticky header. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

img, video { max-width: 100%; height: auto; display: block; }

/* Inline icons carry width/height attributes; never let them flex-stretch to
   fill their container, which is what an unsized viewBox SVG will do. */
svg { display: block; flex: none; }
.btn svg, .svc__more svg, .callout svg { width: 1.05em; height: 1.05em; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: .005em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); text-transform: uppercase; letter-spacing: .01em; }
h2 { font-size: clamp(2rem, 4.4vw, 3rem);   text-transform: uppercase; }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-dim); text-underline-offset: 3px; }
a:hover { color: var(--accent); }

strong { font-weight: 650; color: var(--ink); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--on-dark);
  padding: .75rem 1.25rem; font-weight: 600;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ------------------------------------------------------------- layout -- */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap--tight { max-width: 800px; }

section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
section.pad-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }

.dark { background: var(--ink); color: var(--on-dark); }
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--paper); }
.dark p { color: var(--on-dark-mute); }
.dark a { color: var(--accent-lit); }
/* strong defaults to --ink, which is all but invisible on a dark ground. */
.dark strong { color: var(--on-dark); }
.tint { background: var(--paper-2); }

/* Section heading block */
.eyebrow {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .95rem;
  color: var(--accent);
  margin: 0 0 .6rem;
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--accent); flex: none;
}
.dark .eyebrow { color: var(--accent-lit); }
.dark .eyebrow::before { background: var(--accent-lit); }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--text-mute); max-width: 62ch; }
.dark .lead { color: var(--on-dark-mute); }

.head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 68ch; }
.head--center { margin-inline: auto; text-align: center; }
.head--center .eyebrow { justify-content: center; }

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--display);
  font-size: 1.15rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .85rem 1.75rem;
  border: 2px solid transparent; border-radius: var(--r-sm);
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn--nowrap { white-space: nowrap; }

.btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); color: #fff; }

.btn--dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--dark:hover { background: var(--ink-3); border-color: var(--ink-3); color: var(--paper); }

.btn--ghost { background: transparent; color: var(--ink); border-color: currentColor; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dark .btn--ghost,
.hero .btn--ghost { color: var(--paper); }
.dark .btn--ghost:hover,
.hero .btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

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

.topbar {
  background: var(--ink-2); color: var(--on-dark-mute);
  font-size: .85rem; letter-spacing: .02em;
}
.topbar .wrap {
  display: flex; flex-wrap: wrap; gap: .35rem 1.5rem;
  align-items: center; justify-content: center;
  min-height: 40px; padding-block: .35rem; text-align: center;
}
/* The phone number here is a primary action on a phone, so give it a tap
   target rather than the 16px line-height the text alone would provide. */
.topbar a {
  color: var(--paper); text-decoration: none; font-weight: 600;
  display: inline-block; padding: .55rem .25rem; margin: -.55rem 0;
}
.topbar a:hover { color: var(--accent-lit); text-decoration: underline; }
@media (max-width: 720px) {
  /* Full 44px target where it is actually tapped; a mouse does not need it. */
  .topbar a { min-height: 44px; display: inline-flex; align-items: center; }
}
.topbar .sep { color: var(--line-dark); }
@media (max-width: 640px) { .topbar .sep { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 74px;
}

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
.brand__badge { width: 46px; height: 46px; flex: none; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--display); font-weight: 700; font-size: 1.4rem;
  text-transform: uppercase; letter-spacing: .04em;
}
.brand__sub {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .2em;
  color: var(--text-mute); margin-top: .25rem; font-weight: 600;
}

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a:not(.btn) {
  font-family: var(--display); font-size: 1.1rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink); text-decoration: none;
  padding: .5rem .8rem; border-radius: var(--r-sm);
}
.nav a:not(.btn):hover { background: var(--paper-2); color: var(--accent-dim); }
.nav a:not(.btn)[aria-current="page"] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.nav .btn { margin-left: .6rem; font-size: 1.05rem; padding: .6rem 1.2rem; }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: .5rem; color: var(--ink);
}
.nav-toggle svg { width: 28px; height: 28px; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw);
    background: var(--paper); border-left: 1px solid var(--line);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: .25rem; padding: 5.5rem 1.25rem 2rem;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%); transition: transform .25s ease;
  }
  .nav[data-open="true"] { transform: translateX(0); }
  .nav a:not(.btn) { padding: .85rem 1rem; font-size: 1.25rem; border-bottom: 1px solid var(--line); }
  .nav a:not(.btn)[aria-current="page"] { box-shadow: none; }
  .nav .btn { margin: 1rem 0 0; }
  .nav-scrim {
    position: fixed; inset: 0; background: rgba(18, 22, 27, .45);
    opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 99;
  }
  .nav-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
}

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative; background: var(--ink); color: var(--on-dark);
  padding-block: clamp(4rem, 11vw, 8rem);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .62;
}
/* The gradient stays near-opaque across the left column, where the headline
   and buttons sit, and opens up on the right so the photograph is actually
   visible. Text contrast therefore still measures against solid ink. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    var(--ink) 20%,
    rgba(18, 22, 27, .88) 44%,
    rgba(18, 22, 27, .55) 72%,
    rgba(18, 22, 27, .34) 100%);
}
@media (max-width: 900px) {
  /* Narrow screens put text over the whole width, so keep it darker. */
  .hero::after {
    background: linear-gradient(175deg, rgba(18, 22, 27, .92), rgba(18, 22, 27, .72));
  }
}
.hero .wrap { position: relative; z-index: 2; }
.hero__inner { max-width: 42rem; }
.hero h1 { color: #fff; margin-bottom: .4em; }
.hero h1 .hl { color: var(--accent-lit); display: block; }
.hero p { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: #dfdcd7; max-width: 46ch; }
.hero .btn-row { margin-top: 2rem; }

.hero__trust {
  margin-top: 2.75rem; padding-top: 1.75rem;
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 1rem 2.25rem;
}
.hero__trust li {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-size: 1.05rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: #fff;
}
.hero__trust svg { width: 19px; height: 19px; color: var(--accent-lit); flex: none; }
ul.hero__trust { list-style: none; margin: 2.75rem 0 0; padding: 1.75rem 0 0; }

/* ----------------------------------------------------------------- grids -- */

/* Deliberate column counts rather than auto-fit.
   auto-fit packs in however many columns happen to fit, which regularly left
   a single card alone on the final row between roughly 768px and 1100px.
   Fixed counts per breakpoint, plus the rule further down that lets a lone
   final card span the row, mean no grid ever strands one item. */
.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); grid-template-columns: 1fr; }

@media (min-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  /* Four abreast only once each card has room for its heading on one line. */
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* A final card with nothing beside it reads as a mistake; let it span instead. */
@media (min-width: 620px) {
  .grid--2 > :last-child:nth-child(odd),
  .grid--3 > :last-child:nth-child(odd),
  .grid--4 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  /* At three columns the odd/even test no longer applies. */
  .grid--3 > :last-child:nth-child(odd) { grid-column: auto; }
  .grid--3 > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}
@media (min-width: 1180px) {
  .grid--4 > :last-child:nth-child(odd) { grid-column: auto; }
  .grid--4 > :last-child:nth-child(4n + 1) { grid-column: 1 / -1; }
}

.split {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split--wide-left { }
@media (min-width: 900px) { .split--wide-left { grid-template-columns: 1.15fr .85fr; } }

/* ----------------------------------------------------------------- cards -- */

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card h3 { margin-bottom: .45rem; }
.card p { color: var(--text-mute); font-size: .97rem; margin: 0; }
.card--lift:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--paper-3); }
.dark .card { background: var(--ink-2); border-color: var(--line-dark); }
.dark .card p { color: var(--on-dark-mute); }

.icon-badge {
  width: 46px; height: 46px; border-radius: var(--r-sm);
  display: grid; place-items: center; margin-bottom: 1rem;
  background: rgba(201, 113, 31, .12); color: var(--accent-dim);
}
.icon-badge svg { width: 24px; height: 24px; }
.dark .icon-badge { background: rgba(226, 147, 63, .16); color: var(--accent-lit); }

/* Numbered step cards */
.step { position: relative; padding-left: 4.25rem; }
.step__n {
  position: absolute; left: 0; top: -.15rem;
  font-family: var(--display); font-size: 2.6rem; font-weight: 700;
  line-height: 1; color: var(--accent); opacity: .55;
  font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: .35rem; }
.step p { color: var(--text-mute); margin: 0; }
.dark .step p { color: var(--on-dark-mute); }

/* --------------------------------------------------------------- service -- */

.svc {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; background: var(--paper);
  transition: transform .2s ease, box-shadow .2s ease;
}
.svc:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: inherit; }
.svc__media { aspect-ratio: 4 / 3; background: var(--paper-3); overflow: hidden; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; }
.svc__body { padding: 1.35rem 1.4rem 1.5rem; }
.svc__body h3 { margin-bottom: .3rem; font-size: 1.35rem; }
.svc__body p { color: var(--text-mute); font-size: .95rem; margin: 0; }
.svc__more {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem;
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; font-size: 1rem; color: var(--accent-dim);
}
.svc:hover .svc__more { color: var(--accent); }

/* -------------------------------------------------------------- options -- */

.opt {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); overflow: hidden; display: flex; flex-direction: column;
}
.opt--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.opt__top { padding: 1.4rem 1.5rem; border-bottom: 1px solid var(--line); }
.opt--featured .opt__top { background: var(--ink); color: var(--paper); border-bottom-color: var(--ink); }
.opt__tag {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .14em;
  font-size: .78rem; font-weight: 600; color: var(--text-mute);
}
.opt--featured .opt__tag { color: var(--accent-lit); }
.opt__top h3 { margin: .3rem 0 .5rem; font-size: 1.55rem; }
.opt--featured .opt__top h3 { color: #fff; }
.opt__life {
  font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--accent);
}
.opt--featured .opt__life { color: var(--accent-lit); }
.opt__life small {
  display: block; font-family: var(--body); font-size: .72rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
}
.opt--featured .opt__life small { color: var(--on-dark-mute); }
.opt__body { padding: 1.4rem 1.5rem; flex: 1; }
.opt__body p { color: var(--text-mute); font-size: .97rem; margin: 0; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ticks li {
  display: grid; grid-template-columns: 20px 1fr; gap: .6rem;
  align-items: start; font-size: .95rem; color: var(--text-mute);
}
.ticks svg { width: 20px; height: 20px; margin-top: .15rem; }
.ticks .yes svg { color: var(--ok); }
.ticks .no  svg { color: #b4432f; }
.dark .ticks li { color: var(--on-dark-mute); }

/* -------------------------------------------------------------- process -- */

.proc { display: grid; gap: 0; counter-reset: proc; }
.proc__item {
  display: grid; grid-template-columns: auto 1fr; gap: 1.5rem;
  padding-bottom: 2.25rem; position: relative;
}
.proc__item:last-child { padding-bottom: 0; }
.proc__dot {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: grid; place-items: center; z-index: 2;
  background: var(--ink); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 1.35rem;
}
.proc__item:not(:last-child)::before {
  content: ""; position: absolute; left: 25px; top: 52px; bottom: 0;
  width: 2px; background: var(--line);
}
.dark .proc__item:not(:last-child)::before { background: var(--line-dark); }
.proc__body h3 { margin-bottom: .3rem; }
.proc__body p { color: var(--text-mute); margin: 0; }
.dark .proc__body p { color: var(--on-dark-mute); }

/* ------------------------------------------------------------------ area -- */

.chips { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.chips li {
  border: 1px solid var(--line); border-radius: 100px;
  padding: .45rem 1.05rem; font-size: .93rem; font-weight: 550;
  background: var(--paper);
}
.dark .chips li { border-color: var(--line-dark); background: var(--ink-2); color: var(--on-dark); }

/* ------------------------------------------------------------------- CTA -- */

.cta-band { background: var(--accent); color: #fff; }
.cta-band .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem 2rem;
}
.cta-band h2 { color: #fff; margin: 0 0 .3rem; }
.cta-band p { color: #fff; margin: 0; max-width: 48ch; }
.cta-band .btn--dark { background: var(--ink); border-color: var(--ink); }
.cta-band .btn--ghost { color: #fff; }
.cta-band .btn--ghost:hover { background: #fff; color: var(--accent-dim); border-color: #fff; }

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

.form-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.5rem, 3.5vw, 2.5rem);
  box-shadow: var(--shadow);
}

.field { margin-bottom: 1.15rem; }
.field label {
  display: block; font-weight: 600; font-size: .93rem;
  margin-bottom: .4rem; color: var(--ink);
}
.field .req { color: var(--accent); }
.field .hint { font-weight: 400; color: var(--text-faint); font-size: .85rem; }

.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  padding: .7rem .85rem; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 113, 31, .16);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: #b4432f; box-shadow: 0 0 0 3px rgba(180, 67, 47, .13);
}
.field .err { display: none; color: #b4432f; font-size: .85rem; margin-top: .35rem; font-weight: 550; }
.field .err[data-show="true"] { display: block; }

.form-row { display: grid; gap: 0 1.15rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: .88rem; color: var(--text-faint); margin-top: 1rem; }

.form-status {
  display: none; margin-top: 1.25rem; padding: 1rem 1.15rem;
  border-radius: var(--r-sm); font-weight: 550; font-size: .95rem;
}
.form-status[data-state="ok"] {
  display: block; background: rgba(47, 125, 82, .1);
  border: 1px solid rgba(47, 125, 82, .35); color: #1d5637;
}
.form-status[data-state="err"] {
  display: block; background: rgba(180, 67, 47, .09);
  border: 1px solid rgba(180, 67, 47, .35); color: #8d3122;
}

/* ------------------------------------------------------------------ misc -- */

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.contact-list > li { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; }
.contact-list svg { width: 22px; height: 22px; color: var(--accent-lit); }
.contact-list .ci {
  width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: rgba(226, 147, 63, .14);
}
.contact-list dt {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .1em;
  font-size: .85rem; color: var(--on-dark-mute); font-weight: 600;
}
.contact-list dd { margin: .15rem 0 0; font-size: 1.1rem; font-weight: 550; color: #fff; }
.contact-list a { color: #fff; text-decoration: none; }
.contact-list a:hover { color: var(--accent-lit); text-decoration: underline; }

.figure { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.figure img { width: 100%; }
.figure figcaption {
  font-size: .85rem; color: var(--text-faint); line-height: 1.5;
  padding: .8rem 1rem; background: var(--paper-2);
  border-top: 1px solid var(--line);
}
/* On a dark section the near-white caption bar reads as a bright slab stuck
   to the photo. Carry the section's own colours through it instead, and drop
   the shadow, which has nothing to fall on, for a hairline that defines the
   edge. */
.dark .figure { box-shadow: none; }
.dark .figure figcaption {
  background: var(--ink-2); color: var(--on-dark-mute);
  border-top-color: var(--line-dark);
}

.callout {
  border-left: 4px solid var(--accent); background: var(--paper-2);
  padding: 1.25rem 1.5rem; border-radius: 0 var(--r) var(--r) 0;
}
.callout strong { display: block; margin-bottom: .25rem; }
.dark .callout { background: var(--ink-2); border-left-color: var(--accent-lit); }

.fineprint { font-size: .82rem; color: var(--text-faint); line-height: 1.6; }
.dark .fineprint,
.site-footer .fineprint { color: #99a2ab; }

/* --------------------------------------------------------- testimonials -- */
/* Driven by TESTIMONIALS in build.py. While that list is empty the section is
   not emitted at all, so these rules sit unused until there are reviews. */

.quote {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  margin: 0; display: flex; flex-direction: column;
}
.quote__stars { display: flex; gap: .15rem; color: var(--accent); margin-bottom: .9rem; }
.quote__stars svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.quote blockquote {
  margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--text); flex: 1;
}
.quote blockquote::before { content: "\201C"; }
.quote blockquote::after  { content: "\201D"; }
.quote__who {
  margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-weight: 600; font-size: .95rem; color: var(--ink);
  display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline;
}
.quote__where { font-weight: 400; font-size: .88rem; color: var(--text-faint); }

.dark .quote { background: var(--ink-2); border-color: var(--line-dark); }
.dark .quote__stars { color: var(--accent-lit); }
.dark .quote blockquote { color: var(--on-dark); }
.dark .quote__who { color: var(--on-dark); border-top-color: var(--line-dark); }
.dark .quote__where { color: var(--on-dark-mute); }

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

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.25rem 2.5rem 1.25rem 0;
  font-family: var(--display); font-size: 1.3rem; font-weight: 600;
  position: relative; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .35rem; top: 50%;
  transform: translateY(-50%); font-size: 1.7rem; font-weight: 400;
  color: var(--accent); line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--accent-dim); }
.faq .faq__a { padding: 0 2.5rem 1.4rem 0; color: var(--text-mute); }
.faq .faq__a p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- footer -- */

.site-footer { background: var(--ink); color: var(--on-dark-mute); padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.site-footer h4 {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .1em;
  font-size: 1rem; color: #fff; margin-bottom: 1rem;
}
.site-footer a { color: var(--on-dark-mute); text-decoration: none; }
.site-footer a:hover { color: var(--accent-lit); text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .95rem; }

.footer-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.footer-grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 860px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .footer-grid > :first-child { grid-column: auto; }
}
.footer-brand .brand { color: #fff; margin-bottom: 1rem; }
.footer-brand .brand__sub { color: var(--on-dark-mute); }
.footer-brand p { font-size: .95rem; max-width: 34ch; }
.footer-brand .brand__badge { filter: invert(1) brightness(1.9); }

.footer-bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-block: 1.5rem;
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between; font-size: .85rem;
}

/* Sticky mobile call bar */
.callbar { display: none; }
@media (max-width: 720px) {
  .callbar {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; inset: auto 0 0 0; z-index: 90;
    box-shadow: 0 -2px 16px rgba(18, 22, 27, .2);
  }
  .callbar a {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .95rem .5rem; text-decoration: none;
    font-family: var(--display); font-size: 1.15rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
  }
  .callbar svg { width: 18px; height: 18px; }
  .callbar__call { background: var(--ink); color: #fff; }
  .callbar__quote { background: var(--accent); color: #fff; }
  body { padding-bottom: 56px; }
}

/* Reveal on scroll.
   Content is visible by default and only hidden once the inline snippet in
   <head> has confirmed JavaScript is running. Without that guard, a blocked
   or failed script would leave most of the page permanently blank. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal[data-seen="true"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* Visually hidden but available to screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* Footer column headings are h2 for document outline; styled as small labels. */
.site-footer .foot-h {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .1em;
  font-size: 1rem; color: #fff; margin: 0 0 1rem; line-height: 1.2;
}

/* Roofing option cards carry a sample of the material itself. */
.opt__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-3); }
.opt__media img { width: 100%; height: 100%; object-fit: cover; }

/* The seven-step process, as a photo grid on the roofing page. */
/* Seven steps strand a lone card whenever the column count divides into 7
   with remainder 1 -- which both 2 and 3 columns do. Four columns gives a
   clean 4 + 3; at tablet widths the final step spans the row instead. */
.pgrid {
  display: grid; gap: clamp(1.25rem, 2.5vw, 1.9rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1000px) {
  .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 561px) and (max-width: 999px) {
  .pgrid > :last-child { grid-column: span 2; }
  .pgrid > :last-child .pstep__media { aspect-ratio: 21 / 8; }
}
@media (max-width: 560px) {
  .pgrid { grid-template-columns: 1fr; }
}
.pstep h3 { margin: .9rem 0 .35rem; font-size: 1.25rem; }
.pstep p { color: var(--text-mute); font-size: .95rem; margin: 0; }
.pstep__media {
  position: relative; aspect-ratio: 10 / 7; overflow: hidden;
  border-radius: var(--r); background: var(--paper-3);
}
.pstep__media img { width: 100%; height: 100%; object-fit: cover; }
.pstep__n {
  position: absolute; left: 0; bottom: 0;
  background: var(--ink); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  line-height: 1; padding: .5rem .7rem .45rem;
  border-radius: 0 var(--r-sm) 0 0;
  font-variant-numeric: tabular-nums;
}