/* ══════════════════════════════════════════════════════════════════════
   Heavenly Homes Handyman
   Direction: blueprint / builder's ledger — graphite ground, warm bone
   paper, muted brass. Drawing-sheet numbering, hairline rules, graph grid.
   ══════════════════════════════════════════════════════════════════════ */

/* === defensive base — injected by harden_css.py; do not hand-edit === */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { scroll-padding-top: calc(var(--nav-h, 72px) + 1rem); }
img, svg, video, iframe, canvas, table { display: block; max-width: 100%; }
p, li, h1, h2, h3, h4, blockquote, td, dd, dt { overflow-wrap: anywhere; }
form[style*="min-height"] { align-content: center; }
/* === end defensive base === */

:root {
  /* ground */
  --ink:      #13161a;
  --ink-2:    #191d23;
  --ink-3:    #212832;
  --ink-4:    #2b333e;

  /* paper */
  --bone:     #f3efe7;
  --bone-2:   #e7e0d3;
  --bone-3:   #d6cdba;

  /* accent */
  --brass:    #c08a3e;
  --brass-hi: #dfae66;
  --brass-dk: #8d6224;

  /* text */
  --on-ink:      #f3efe7;
  --on-ink-mute: #9aa5b1;
  --on-bone:     #191d23;
  --on-bone-mute:#5c6672;

  --rule-l:  rgba(243, 239, 231, .13);
  --rule-d:  rgba(25, 29, 35, .14);

  --nav-h: 70px;

  --font-d: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --font-b: "Instrument Sans", "Helvetica Neue", sans-serif;
  --font-m: "Martian Mono", ui-monospace, monospace;

  --wrap: 1160px;
  --pad:  clamp(18px, 4.5vw, 48px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 760px) { :root { --nav-h: 62px; } }

/* ───────────────────────────── base ───────────────────────────────── */

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-b);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-d);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--brass); color: var(--ink); }

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

/* clipped rather than parked off-canvas — a negative `left` reads as
   horizontal page overflow */
.skip {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  z-index: 200;
  background: var(--brass);
  color: var(--ink);
  font-weight: 600;
}
.skip:focus {
  width: auto; height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  top: .5rem; left: .5rem;
  padding: .7rem 1.1rem;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

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

/* ─────────────────────── shared type atoms ────────────────────────── */

.eyebrow {
  font-family: var(--font-m);
  font-size: clamp(.6rem, .55rem + .18vw, .68rem);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-hi);
  display: flex;
  align-items: center;
  gap: .7em;
  margin: 0;
}
.eyebrow .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.3em;
  padding: .3em .5em;
  border: 1px solid currentColor;
  color: var(--brass);
  letter-spacing: .08em;
}
.eyebrow-dark { color: var(--ink); }

.sec-h2 {
  font-size: clamp(1.85rem, 1.1rem + 3.1vw, 3.5rem);
  margin-top: .5em;
}
.sec-lede {
  margin-top: 1.05rem;
  max-width: 54ch;
  color: var(--on-ink-mute);
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
}
.sec-bone .sec-lede { color: var(--on-bone-mute); }

/* ───────────────────────────── buttons ────────────────────────────── */

.btn {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .82em 1.5em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-b);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .005em;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-lg { padding: 1em 1.75em; font-size: 1rem; }

.btn-brass { --btn-bg: var(--brass); --btn-fg: #16120a; }
.btn-brass:hover { --btn-bg: var(--brass-hi); }

.btn-ghost {
  --btn-fg: var(--on-ink);
  border-color: var(--rule-l);
  background: rgba(243, 239, 231, .04);
}
.btn-ghost:hover { border-color: var(--brass); background: rgba(192, 138, 62, .12); }

.btn-ink { --btn-bg: var(--ink); --btn-fg: var(--bone); }
.btn-ink:hover { --btn-bg: var(--ink-3); }

.btn-outline-ink {
  --btn-fg: var(--ink);
  border-color: rgba(25, 29, 35, .32);
}
.btn-outline-ink:hover { border-color: var(--ink); background: rgba(25, 29, 35, .07); }

/* ─────────────────────────────── nav ──────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(19, 22, 26, .82);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--rule-l);
  transition: background .3s var(--ease);
}
.nav.is-stuck { background: rgba(19, 22, 26, .96); }

.nav-in {
  height: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand { display: flex; align-items: center; gap: .7rem; min-width: 0; }

.brand-mark {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border: 1px solid var(--brass);
  color: var(--brass-hi);
  font-family: var(--font-d);
  font-weight: 800;
  font-size: .93rem;
  line-height: 1;
  letter-spacing: -.03em;
}
.brand-mark span:first-child { justify-self: end; }
.brand-mark span:last-child  { justify-self: start; opacity: .62; }

.brand-txt { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand-1 {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: -.015em;
}
.brand-2 {
  font-family: var(--font-m);
  font-size: .54rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: .25em;
}

.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav-links > a:not(.btn) {
  font-size: .92rem;
  font-weight: 500;
  color: var(--on-ink-mute);
  position: relative;
  padding-block: .3rem;
  transition: color .2s var(--ease);
}
.nav-links > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav-links > a:not(.btn):hover { color: var(--on-ink); }
.nav-links > a:not(.btn):hover::after { transform: scaleX(1); }

.nav-cta { padding: .62em 1.15em; font-size: .88rem; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  flex: none;
  background: none;
  border: 1px solid var(--rule-l);
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
  place-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--on-ink);
  transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: grid; }

  /* closed by default via display:none — an [hidden] attr alone would lose
     to the .is-open display rule */
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--pad) 1.4rem;
    background: rgba(19, 22, 26, .985);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--rule-l);
  }
  .nav-links.is-open { display: flex; }
  .nav-links > a:not(.btn) {
    padding: .95rem 0;
    font-size: 1.05rem;
    color: var(--on-ink);
    border-bottom: 1px solid var(--rule-l);
  }
  .nav-links > a:not(.btn)::after { display: none; }
  .nav-cta { margin-top: 1.1rem; padding: .95em 1.2em; font-size: 1rem; }
}

/* ────────────────────────────── hero ──────────────────────────────── */

.hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  padding-block: clamp(2rem, 5vh, 4.5rem);
  padding-inline: var(--pad);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 88% 8%,  rgba(192, 138, 62, .16), transparent 58%),
    radial-gradient(90%  70% at 4%  94%, rgba(43, 51, 62, .55),   transparent 62%),
    var(--ink);
}

/* graph-paper grid + a soft vignette */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right,  var(--rule-l) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(to bottom, var(--rule-l) 0 1px, transparent 1px 34px);
  opacity: .34;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 25%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 50% 40%, #000 25%, transparent 78%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

/* size hero type against the COPY COLUMN, not the viewport — this is what
   keeps it from clipping the fold on a narrow phone */
.hero-copy {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1rem, 3.4cqi, 1.7rem);
  min-width: 0;
}

.hero-h1 {
  font-size: clamp(2.2rem, 10.4cqi, 4.7rem);
  line-height: .98;
  letter-spacing: -.035em;
  margin: 0;
}
.hero-h1 .hl {
  color: var(--brass-hi);
  position: relative;
  display: inline-block;
}
.hero-h1 .hl::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.11em;
  height: 2px;
  background: linear-gradient(to right, var(--brass), rgba(192, 138, 62, 0));
}

.hero-sub {
  font-size: clamp(.98rem, 3.9cqi, 1.16rem);
  color: var(--on-ink-mute);
  max-width: 46ch;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; }
.hero-cta .btn { flex: 1 1 auto; min-width: 0; }

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem clamp(.9rem, 3cqi, 1.6rem);
  font-family: var(--font-m);
  font-size: clamp(.58rem, 2.2cqi, .66rem);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--on-ink-mute);
}
.hero-proof li { display: flex; align-items: center; gap: .55em; }
.hero-proof li::before {
  content: "";
  width: 5px; height: 5px;
  flex: none;
  background: var(--brass);
  transform: rotate(45deg);
}

/* Fixed-ratio plate. A 9:16 shot at this column width would otherwise stand
   ~750px tall on its own and push the hero past the fold on a short laptop.
   The image fills the figure exactly and the caption overlays it, so the box
   never ends up taller than its image. Border is an inset outline so it adds
   no layout height. */
.hero-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: min(60svh, 600px);
  background: var(--ink-3);
  outline: 1px solid var(--rule-l);
  outline-offset: -1px;
}
.hero-shot::after {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: 46px; height: 46px;
  border-top: 2px solid var(--brass);
  border-right: 2px solid var(--brass);
  pointer-events: none;
  z-index: 2;
}
.hero-shot picture,
.hero-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.hero-shot figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: baseline;
  gap: .7em;
  padding: 2.6rem .95rem .85rem;
  font-family: var(--font-m);
  font-size: .58rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--bone);
  background: linear-gradient(to top, rgba(10, 12, 15, .92) 12%, rgba(10, 12, 15, 0));
  line-height: 1.4;
}

@media (max-width: 980px) {
  /* the porch shot leads the Work section a screen later — hiding it here
     costs no content and guarantees the fold on a phone */
  .hero-shot { display: none; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-cta .btn { flex: 1 1 100%; }
  /* leave the trust strip peeking so there's something to scroll toward */
  .hero { min-height: calc(100svh - var(--nav-h) - 62px); }
}

/* ──────────────────────────── trust strip ─────────────────────────── */

.strip {
  background: var(--ink-2);
  border-block: 1px solid var(--rule-l);
}
/* dividers are per-cell borders, not a background showing through gaps —
   a background here would also paint the wrapper's own side padding */
.strip-in {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.strip-i {
  border-left: 1px solid var(--rule-l);
  padding: clamp(1.1rem, 2.4vw, 1.8rem) clamp(.85rem, 1.8vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
}
.strip-k {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2rem);
  color: var(--brass-hi);
  line-height: 1;
  letter-spacing: -.03em;
}
.strip-v {
  font-size: clamp(.78rem, .74rem + .2vw, .88rem);
  color: var(--on-ink-mute);
  line-height: 1.35;
}
.strip-i:first-child { border-left: 0; }

@media (max-width: 700px) {
  .strip-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip-i:nth-child(odd) { border-left: 0; }
  .strip-i:nth-child(n+3) { border-top: 1px solid var(--rule-l); }
}

/* ───────────────────────────── sections ───────────────────────────── */

.sec { padding-block: clamp(4rem, 9vw, 8rem); }
.sec-tight { padding-block: clamp(3.5rem, 7vw, 6.5rem); }

.sec-dark { background: var(--ink); }

.sec-bone {
  background: var(--bone);
  color: var(--on-bone);
  position: relative;
}
.sec-bone .eyebrow { color: var(--brass-dk); }
.sec-bone .eyebrow .num { color: var(--brass-dk); }

.sec-head { margin-bottom: clamp(2.4rem, 5vw, 3.8rem); }

/* ────────────────────────────── work ──────────────────────────────── */

.work { display: flex; flex-direction: column; gap: clamp(.75rem, 1.6vw, 1.15rem); }

.work-row { display: grid; gap: clamp(.75rem, 1.6vw, 1.15rem); }
.work-row-3    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work-row-note { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); }

.tile {
  position: relative;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--ink-3);
  border: 1px solid var(--rule-l);
}
.tile picture { display: block; }
.tile img { width: 100%; height: auto; }

.tile figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: baseline;
  gap: .7em;
  padding: 2.6rem .95rem .85rem;
  font-family: var(--font-m);
  font-size: clamp(.55rem, .5rem + .2vw, .63rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone);
  background: linear-gradient(to top, rgba(10, 12, 15, .9) 12%, rgba(10, 12, 15, 0));
  line-height: 1.4;
}
.fc-n {
  flex: none;
  color: var(--brass-hi);
  font-weight: 600;
}

.tile-feature { border-color: rgba(192, 138, 62, .32); }

/* note panel closing the grid */
.note {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid rgba(192, 138, 62, .3);
  background:
    linear-gradient(160deg, rgba(192, 138, 62, .09), transparent 62%),
    var(--ink-2);
  min-width: 0;
}
.note-k {
  font-family: var(--font-m);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--brass-hi);
}
.note-b { color: var(--on-ink-mute); font-size: .97rem; }
.note-cta {
  font-family: var(--font-m);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass-hi);
  display: inline-flex;
  gap: .6em;
  align-items: center;
  transition: gap .24s var(--ease);
}
.note-cta:hover { gap: 1.1em; }

@media (max-width: 860px) {
  .work-row-note { grid-template-columns: minmax(0, 1fr); }
}
/* the 3-up survives to tablet as a contact sheet — stacking it there turns
   three 9:16 shots into ~1400px of scrolling each */
@media (max-width: 600px) {
  .work-row-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ──────────────────────────── services ────────────────────────────── */

.svc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr));
  gap: 1px;
  background: var(--rule-d);
  border: 1px solid var(--rule-d);
}

.svc-card {
  background: var(--bone);
  padding: clamp(1.5rem, 2.8vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: .8rem;
  min-width: 0;
  position: relative;
  transition: background .3s var(--ease);
}
.svc-card:hover { background: var(--bone-2); }

.svc-n {
  font-family: var(--font-m);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--brass-dk);
}
.svc-card h3 {
  font-size: clamp(1.18rem, 1.05rem + .5vw, 1.45rem);
  letter-spacing: -.02em;
}
.svc-card > p { color: var(--on-bone-mute); font-size: .95rem; }

.svc-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: auto;
  padding-top: .5rem;
}
.svc-card li {
  font-family: var(--font-m);
  font-size: .58rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-bone-mute);
  border: 1px solid var(--rule-d);
  padding: .42em .65em;
  background: rgba(255, 255, 255, .5);
}

.svc-cta {
  font-family: var(--font-m);
  font-size: .61rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass-dk);
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding-top: .9rem;
  border-top: 1px solid var(--rule-d);
  transition: gap .24s var(--ease), color .24s var(--ease);
}
.svc-cta:hover { gap: 1.05em; color: var(--ink); }

.svc-note {
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  text-align: center;
  color: var(--on-bone-mute);
  font-size: 1.02rem;
}
.svc-note strong { color: var(--on-bone); font-weight: 600; }
.svc-note a {
  color: var(--brass-dk);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

/* ─────────────────────────── how it works ─────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem);
  counter-reset: step;
}
.step {
  border-top: 2px solid var(--brass);
  padding-top: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-width: 0;
}
.step-n {
  font-family: var(--font-m);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--brass-hi);
}
.step h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem); }
.step p { color: var(--on-ink-mute); font-size: .97rem; }
.step p a { color: var(--brass-hi); border-bottom: 1px solid rgba(223, 174, 102, .45); }

.quote {
  margin: clamp(2.8rem, 6vw, 4.5rem) 0 0;
  padding: clamp(1.8rem, 4vw, 3rem);
  border: 1px solid var(--rule-l);
  border-left: 3px solid var(--brass);
  background: var(--ink-2);
}
.quote blockquote {
  margin: 0;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + 1.3vw, 1.85rem);
  line-height: 1.28;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.quote figcaption {
  margin-top: 1.2rem;
  font-family: var(--font-m);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass-hi);
}
.quote figcaption span { color: var(--on-ink-mute); }

/* ────────────────────────────── areas ─────────────────────────────── */

.areas-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: start;
}
.areas-grid .btn { margin-top: 1.8rem; }

.areas-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem);
}
.area-col h3 {
  font-family: var(--font-m);
  font-weight: 600;
  font-size: .63rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-dk);
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--rule-d);
  margin-bottom: .9rem;
}
.area-col li {
  padding: .32rem 0;
  color: var(--on-bone-mute);
  font-size: .96rem;
}

@media (max-width: 860px) {
  .areas-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  /* side-by-side lists of very different lengths leave a hole under the
     short one — stack them instead */
  .areas-cols { grid-template-columns: minmax(0, 1fr); gap: 1.9rem; }
}

/* ──────────────────────────── CTA band ────────────────────────────── */

.cta-band {
  background: var(--brass);
  color: var(--ink);
  padding-block: clamp(3.4rem, 7vw, 6rem);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right,  rgba(25, 29, 35, .1) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(to bottom, rgba(25, 29, 35, .1) 0 1px, transparent 1px 30px);
  pointer-events: none;
}
.cta-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
}
.cta-h {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  margin-top: .55em;
  color: var(--ink);
}
.cta-sub {
  margin-top: 1rem;
  max-width: 42ch;
  color: rgba(25, 29, 35, .78);
}
.cta-actions { display: flex; flex-direction: column; gap: .8rem; align-items: stretch; }
.cta-mail {
  font-family: var(--font-m);
  font-size: .68rem;
  letter-spacing: .08em;
  text-align: center;
  color: rgba(25, 29, 35, .92);
  word-break: break-all;
  padding-top: .45rem;
}
.cta-mail:hover { color: var(--ink); }

@media (max-width: 820px) {
  .cta-in { grid-template-columns: minmax(0, 1fr); }
}

/* ────────────────────────────── footer ────────────────────────────── */

.foot {
  background: var(--ink-2);
  border-top: 1px solid var(--rule-l);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}
.foot-in {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.8rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.foot-brand .brand-mark { margin-bottom: 1.1rem; }
.foot-name {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -.02em;
}
.foot-desc {
  margin-top: .7rem;
  color: var(--on-ink-mute);
  font-size: .92rem;
  max-width: 38ch;
}
.foot-col h3 {
  font-family: var(--font-m);
  font-weight: 600;
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.05rem;
}
.foot-col li { padding: .3rem 0; }
.foot-col a {
  color: var(--on-ink-mute);
  font-size: .93rem;
  transition: color .2s var(--ease);
}
.foot-col a:hover { color: var(--brass-hi); }

.foot-btm {
  border-top: 1px solid var(--rule-l);
  padding-block: 1.5rem;
  font-family: var(--font-m);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-ink-mute);
}

@media (max-width: 820px) {
  .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}

/* ──────────────────────── contact page ────────────────────────────── */

.page-head {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem);
  background:
    radial-gradient(100% 80% at 80% 0%, rgba(192, 138, 62, .15), transparent 60%),
    var(--ink);
  border-bottom: 1px solid var(--rule-l);
}
.page-h1 {
  font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.9rem);
  margin-top: .45em;
  letter-spacing: -.035em;
}
.page-lede {
  margin-top: 1.1rem;
  max-width: 52ch;
  color: var(--on-ink-mute);
  font-size: clamp(1rem, .95rem + .3vw, 1.13rem);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

.form-card {
  background: var(--ink-2);
  border: 1px solid var(--rule-l);
  border-top: 3px solid var(--brass);
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
  min-width: 0;
}
.form-card > .eyebrow { margin-bottom: 1rem; }
.form-card h2 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.95rem);
  margin-bottom: 1.6rem;
}

#estimate-form { display: grid; gap: 1.05rem; }

.field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.field label {
  font-family: var(--font-m);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-ink-mute);
}
.field input,
.field textarea {
  font-family: var(--font-b);
  font-size: 1rem;
  color: var(--on-ink);
  background: rgba(243, 239, 231, .045);
  border: 1px solid var(--rule-l);
  border-radius: 2px;
  padding: .85rem .95rem;
  width: 100%;
  min-width: 0;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 128px; line-height: 1.55; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(154, 165, 177, .55); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brass);
  background: rgba(192, 138, 62, .08);
}
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.05rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: minmax(0, 1fr); } }

#estimate-form .btn { width: 100%; }
#estimate-form .btn[disabled] { opacity: 1; cursor: default; transform: none; }
#estimate-form .btn.is-sent {
  --btn-bg: transparent;
  --btn-fg: var(--brass-hi);
  border-color: rgba(192, 138, 62, .5);
  letter-spacing: .06em;
}

.form-status {
  font-size: .96rem;
  line-height: 1.5;
  padding: .9rem 1rem;
  border-radius: 2px;
  border: 1px solid transparent;
}
.form-status.is-ok {
  color: var(--bone);
  background: rgba(192, 138, 62, .13);
  border-color: rgba(192, 138, 62, .45);
}
.form-status.is-err {
  color: #ffd7cf;
  background: rgba(190, 66, 46, .14);
  border-color: rgba(190, 66, 46, .45);
}
.form-status a { color: var(--brass-hi); border-bottom: 1px solid currentColor; }

.form-fine {
  font-family: var(--font-m);
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(154, 165, 177, .7);
  line-height: 1.7;
}

/* direct-contact rail */
.reach { display: flex; flex-direction: column; gap: 1px; background: var(--rule-l); border: 1px solid var(--rule-l); }
.reach-i {
  background: var(--ink-2);
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
  transition: background .25s var(--ease);
}
a.reach-i:hover { background: var(--ink-3); }
.reach-k {
  font-family: var(--font-m);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
}
.reach-v {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.reach-s { font-size: .87rem; color: var(--on-ink-mute); }

/* ────────────────────────── scroll reveal ─────────────────────────── */
/* below-the-fold only — never on hero/header (an opacity:0 LCP element
   can't paint until JS runs) */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

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

/* Cloudflare Turnstile widget (injected by ensure_turnstile.py) */
.turnstile-box { margin-bottom: 1.25rem; min-height: 65px; }

/* === site credit (injected by credit_footer.py); do not hand-edit === */
.site-credit {
  margin: 2.25rem 0 0;
  padding-inline: 1.25rem;
  font-size: .73rem;
  line-height: 1.5;
  letter-spacing: .06em;
  text-align: center;
  opacity: .65;
}
.site-credit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(128, 128, 128, .5);
  border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  transition: border-bottom-color .25s ease;
}
.site-credit a:hover,
.site-credit a:focus-visible { border-bottom-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .site-credit a { transition: none; }
}

/* Shares the footer's own copyright row: sits opposite it rather than adding a
   third line under the page. The parent is reached with :has() so no client
   class name has to be guessed, and the rule cannot fire on a footer that has
   no inline credit in it. */
.site-credit--inline {
  margin: 0;
  padding: 0;
  text-align: right;
}
footer :has(> .site-credit--inline) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .35rem 1.5rem;
}
/* === end site credit === */