/* ============================================================
   CKS Builders LLC - Homepage V3 (final assembly)
   Loads AFTER styles.css (V1 base). Self-contained: brings in
   the V2 components needed + the per-section custom modifications
   + the redesigned "Get in Touch" section.
   ============================================================ */

:root {
  --brass: var(--color-accent);
  --brass-light: #d8b782;
  --forest: var(--color-primary);
  --forest-deep: var(--color-bg-dark);
  --ink: var(--color-secondary);
  --hair: rgba(22, 40, 29, 0.12);
  --radius-img: 8px;   /* single standard for every content image */
  --paper: #f6f3ec;
  --shadow-e: 0 30px 70px -20px rgba(8, 38, 15, 0.30);
}

/* Content width: v2 */
.container { max-width: 1300px; padding: 0 40px; }
@media (max-width: 768px) { .container { padding: 0 22px; } }

/* ---------- Editorial header (from v2) ---------- */
.ed-head { position: relative; margin-bottom: clamp(2.4rem, 5vw, 4rem); max-width: 900px; }
.ed-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.ed-index-top { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(3.4rem, 8vw, 6.5rem); line-height: 0.9; color: transparent; -webkit-text-stroke: 1px rgba(193,146,86,0.4); margin-bottom: 0.6rem; }
.ed-kicker { display: inline-flex; align-items: center; gap: 0.85rem; font-family: var(--font-body); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--brass); }
.ed-kicker::before { content: ''; width: 34px; height: 1px; background: var(--brass); display: inline-block; }
.ed-head.center .ed-kicker { justify-content: center; }
.ed-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.06; letter-spacing: -0.02em; color: var(--ink); margin-top: 1rem; text-wrap: balance; }
.ed-lede { font-size: clamp(1.02rem, 1.4vw, 1.15rem); line-height: 1.7; color: var(--color-text-muted); margin-top: 1.2rem; max-width: 62ch; }
.ed-head.center .ed-lede { margin-left: auto; margin-right: auto; }

/* ---------- WHAT WE BUILD: v2 hover-index, 01 on top, left aligned ---------- */
.svc-index { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; margin-top: 1rem; }
.svc-sticky { position: static; }  /* homepage services index: intentionally NOT sticky
     (the pinned photo trailed the rows once overflow-x:clip revived sticky sitewide) */
.svc-preview { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-img); overflow: hidden; box-shadow: var(--shadow-e); background: var(--color-bg-alt); }
.svc-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 0.6s ease, transform 0.9s ease; }
.svc-preview img.active { opacity: 1; transform: scale(1); }
.svc-preview::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8,38,15,0.5)); pointer-events: none; }
.svc-preview-label { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 1.4rem 1.6rem; color: #fff; font-family: var(--font-display); font-size: 1.3rem; }
.svc-rows { border-top: 1px solid var(--hair); }
.svc-row { display: grid; grid-template-columns: auto 1fr; column-gap: clamp(1rem, 2vw, 2.2rem); align-items: start; padding: 1.7rem 0.4rem; border-bottom: 1px solid var(--hair); cursor: pointer; transition: padding-left 0.35s ease; text-decoration: none; }
.svc-row .n { font-family: var(--font-display); font-size: 0.95rem; color: var(--brass); font-weight: 600; padding-top: 0.5rem; }
.svc-row h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); transition: color 0.3s; }
.svc-row p { color: #59655d; font-size: 0.96rem; line-height: 1.6; margin-top: 0.55rem; max-width: 56ch; }
.svc-cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); opacity: 0.72; transition: gap 0.25s, opacity 0.25s; }
.svc-cta svg { width: 16px; height: 16px; }
.svc-row-img { display: none; grid-column: 1 / -1; width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius-img); margin-top: 1.1rem; }
.svc-row:hover, .svc-row.active { padding-left: 1.2rem; }
.svc-row:hover h3, .svc-row.active h3 { color: var(--forest); }
.svc-row:hover .svc-cta, .svc-row.active .svc-cta { opacity: 1; gap: 0.9rem; }

/* ---------- Shared list + callout (v2) ---------- */
.content-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 2rem; margin: 0 0 1.6rem; list-style: none; }
.content-list.cols-1 { grid-template-columns: 1fr; }
.content-list.cols-3 { grid-template-columns: repeat(3, 1fr); }
.content-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 1rem; font-weight: 600; color: var(--ink); padding-bottom: 0.85rem; border-bottom: 1px solid var(--hair); }
.content-list li svg { width: 18px; height: 18px; color: var(--brass); flex-shrink: 0; margin-top: 4px; }
.list-lead { font-weight: 700; color: var(--ink); margin: 0.4rem 0 1rem; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; }
.callout { background: #fff; border-left: 3px solid var(--brass); box-shadow: var(--shadow-e); border-radius: 0 4px 4px 0; padding: 1.5rem 1.8rem; margin: 1.8rem 0; }
.callout p { margin: 0; font-family: var(--font-display); font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.45; color: var(--ink); }

/* ---------- ed-split (Budgeting, Communication) ---------- */
.ed-split { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.ed-split .ed-head { position: sticky; top: 100px; margin-bottom: 0; }
.ed-split-body > p { color: #4b574f; margin-bottom: 1.1rem; font-size: 1.05rem; line-height: 1.75; }

/* ---------- WHAT WE BUILD header: index top + left ---------- */
#services .ed-head { max-width: none; }

/* ---------- OLDER HOMES: v2, headline+list row, then p + image row ---------- */
.older-v3 { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.older-row-1 { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.older-row-1 .ed-head { margin-bottom: 0; }
.older-row-1 .older-list-wrap .list-lead { margin-top: 0; }
.older-row-2 { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.older-row-2 .older-prose p { color: #4b574f; margin-bottom: 1.05rem; font-size: 1.03rem; line-height: 1.7; }
.older-row-2 .older-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-img); box-shadow: var(--shadow-e); }

/* ---------- START WITH AN IDEA: v1 center head, 2 stacked images left + content ---------- */
.idea-grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; margin-top: 2.6rem; }
.idea-media { display: grid; gap: 16px; position: sticky; top: 100px; }
.idea-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-img); box-shadow: var(--shadow-e); }
.idea-body .callout { margin-left: 0; margin-right: 0; }
.idea-body > p { color: #4b574f; margin-bottom: 1.1rem; font-size: 1.05rem; line-height: 1.72; }

/* ---------- OWNER-LED: v1, intro+list centered, then text + photo ---------- */
.owner-intro { max-width: 820px; margin: 2.4rem auto 0; text-align: center; }
.owner-intro > p { color: #4b574f; margin-bottom: 1.1rem; font-size: 1.06rem; line-height: 1.72; }
.owner-intro .list-lead { text-align: center; }
.owner-intro .content-list { justify-items: center; max-width: 760px; margin: 0 auto 1.6rem; }
.owner-intro .content-list li { justify-content: center; text-align: left; }
.owner-split { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; margin-top: 3rem; }
.owner-split .owner-text p { color: #4b574f; margin-bottom: 1.1rem; font-size: 1.04rem; line-height: 1.72; }
.owner-split .owner-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-img); box-shadow: var(--shadow-e); }

/* ---------- FEATURED PROJECT: v1 + 4-image grid ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 2.6rem 0; }
.feat-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-img); box-shadow: var(--shadow-e); aspect-ratio: 3/4; }
.feat-grid img:nth-child(1), .feat-grid img:nth-child(4) { margin-top: 2.4rem; }
.feat-story { max-width: 760px; margin: 0 auto; }
.feat-story p { color: #4b574f; margin-bottom: 1.05rem; line-height: 1.72; }
.feat-story p:first-child { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--ink); }

/* ---------- EXPERIENCE COMPLEX HOMES: v2 (image + heading/list) ---------- */
.split.reverse .split-media { order: 2; }

/* ---------- SERVING: v2 map ---------- */
.serving-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; margin-top: 1rem; }
.serving-left .list-lead { text-align: left; }
.area-grid { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.2rem 0 0; }
.area-tag { padding: 0.6rem 1.3rem; background: #fff; border: 1px solid var(--color-border-strong); border-radius: 100px; font-weight: 600; font-size: 0.94rem; color: var(--ink); transition: background 0.2s, color 0.2s, border-color 0.2s; }
.area-tag:hover { background: var(--forest); color: #fff; border-color: var(--forest); }
.area-note { color: var(--color-text-muted); margin: 1.6rem 0 0; }
.serving-map { border-radius: var(--radius-img); overflow: hidden; box-shadow: var(--shadow-e); }
.serving-map iframe { display: block; width: 100%; height: 470px; border: 0; }

/* ---------- WHY: v2 + staggered list animation ---------- */
.why-intro { font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: var(--ink); font-weight: 400; max-width: 40ch; margin: 0 auto 2.6rem; text-align: center; }
.why-list { max-width: 940px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.4rem; list-style: none; }
.why-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1.05rem; font-weight: 600; color: var(--ink); padding: 1rem 0; border-bottom: 1px solid var(--hair);
  opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.why-list.in li { opacity: 1; transform: translateY(0); }
.why-list.in li:nth-child(1) { transition-delay: 0.05s; } .why-list.in li:nth-child(2) { transition-delay: 0.1s; }
.why-list.in li:nth-child(3) { transition-delay: 0.15s; } .why-list.in li:nth-child(4) { transition-delay: 0.2s; }
.why-list.in li:nth-child(5) { transition-delay: 0.25s; } .why-list.in li:nth-child(6) { transition-delay: 0.3s; }
.why-list.in li:nth-child(7) { transition-delay: 0.35s; } .why-list.in li:nth-child(8) { transition-delay: 0.4s; }
.why-list.in li:nth-child(9) { transition-delay: 0.45s; } .why-list.in li:nth-child(10) { transition-delay: 0.5s; }
.why-list li svg { width: 24px; height: 24px; color: var(--brass); flex-shrink: 0; margin-top: 2px; }
.why-closing { max-width: 70ch; margin: 2.6rem auto 0; text-align: center; color: var(--color-text-muted); font-size: 1.05rem; }

/* ---------- CTA + REVIEWS CAROUSEL (symmetrical, read-more) ---------- */
.reviews-band { background: var(--forest-deep); color: #dfe7df; position: relative; overflow: hidden; }
.reviews-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(193,154,91,0.15), transparent 55%); }
.reviews-band .cta-strip-inner { position: relative; z-index: 2; }
.reviews-band h2 { color: #fff; }
.reviews-band .cta-strip-inner > p { color: #cfe0d3; }
.reviews-band .cta-phone { color: var(--brass-light); }
.review-rating-row { display: inline-flex; align-items: center; gap: 0.6rem; margin: 1.6rem 0 0; color: #dfe7df; font-weight: 600; }
.review-rating-row .stars { display: inline-flex; gap: 3px; color: var(--brass-light); }
.review-rating-row .stars svg { width: 20px; height: 20px; }

.review-slider { position: relative; z-index: 2; max-width: 860px; margin: 2.8rem auto 0; }
.review-viewport { overflow: hidden; }
.review-track { display: flex; align-items: stretch; transition: transform 0.55s cubic-bezier(0.22,1,0.36,1); }
.review-slide { min-width: 100%; box-sizing: border-box; padding: 0 clamp(0.5rem, 3vw, 2rem); display: flex; }
.review-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: clamp(1.8rem, 3vw, 2.6rem); width: 100%; display: flex; flex-direction: column; text-align: center; align-items: center; }
.review-stars { display: inline-flex; gap: 4px; margin-bottom: 1.2rem; color: var(--brass-light); }
.review-stars svg { width: 22px; height: 22px; }
.review-text { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.5; color: #fff; margin-bottom: 0.6rem; }
.review-text.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.review-more { background: none; border: none; color: var(--brass-light); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; margin-bottom: 1.2rem; }
.review-author { margin-top: auto; }
.review-author .name { font-weight: 700; color: #fff; font-size: 1.05rem; display: block; }
.review-author .loc { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-light); }
.review-controls { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: 2.2rem; }
.review-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); color: #fff; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); transition: background 0.2s, color 0.2s, border-color 0.2s; }
.review-arrow:hover { background: var(--brass); border-color: var(--brass); color: var(--forest-deep); }
.review-arrow svg { width: 22px; height: 22px; }
.review-dots { display: flex; gap: 0.55rem; }
.review-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.25); cursor: pointer; transition: background 0.2s, transform 0.2s; }
.review-dot.active { background: var(--brass-light); transform: scale(1.3); }

/* ---------- GET IN TOUCH (redesign per reference image) ---------- */
.contact-v3 { background: linear-gradient(180deg, #f2f6f2 0%, #eef4ee 100%); }
.contact-v3-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.contact-v3-left .ck { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); }
.contact-v3-left .ck::before { content: ''; width: 26px; height: 2px; background: var(--brass); }
.contact-v3-left h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin: 1.1rem 0 1.1rem; text-wrap: balance; }
.contact-v3-left .sub { color: var(--color-text-muted); font-size: 1.06rem; line-height: 1.7; max-width: 46ch; margin-bottom: 2.2rem; }
.contact-v3-info { display: grid; gap: 1.4rem; }
.contact-v3-info-row { display: flex; align-items: center; gap: 1rem; }
.contact-v3-ico { width: 46px; height: 46px; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(8,38,15,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-v3-ico svg { width: 22px; height: 22px; color: var(--forest); }
.contact-v3-info-row .lbl { font-size: 0.82rem; color: var(--color-text-muted); }
.contact-v3-info-row .val { font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.contact-v3-info-row a.val:hover { color: var(--forest); }
.contact-v3-card { background: #fff; border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(8,38,15,0.35); padding: clamp(1.8rem, 3vw, 2.6rem); }
.contact-v3-card .form-group { margin-bottom: 1.1rem; }
.contact-v3-card label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ink); margin-bottom: 0.45rem; }
.contact-v3-card input, .contact-v3-card textarea { width: 100%; padding: 0.9rem 1.1rem; font-size: 0.98rem; border: 1px solid transparent; border-radius: 12px; background: #f4f6f4; color: var(--color-text); transition: border-color 0.2s, background 0.2s; }
.contact-v3-card input:focus, .contact-v3-card textarea:focus { outline: 2px solid var(--forest); outline-offset: 1px; border-color: var(--forest); background: #fff; }
.contact-v3-card .btn-pill { width: 100%; border: none; border-radius: 100px; padding: 1.1rem; font-family: var(--font-body); font-weight: 700; font-size: 1rem; color: #fff; background: var(--forest); cursor: pointer; transition: background 0.2s, transform 0.2s; }
.contact-v3-card .btn-pill:hover { background: var(--forest-deep); transform: translateY(-2px); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .svc-index, .ed-split, .older-row-1, .older-row-2, .idea-grid, .owner-split, .serving-grid, .contact-v3-grid { grid-template-columns: 1fr; }
  .svc-sticky, .ed-split .ed-head, .idea-media { position: static; }
  .svc-preview { display: none; }
  .svc-row { grid-template-columns: auto 1fr; }
  .svc-row-img { display: block; }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .feat-grid img:nth-child(1), .feat-grid img:nth-child(4) { margin-top: 0; }
  .why-list { grid-template-columns: 1fr; }
  .idea-media { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .content-list, .content-list.cols-3 { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .idea-media { grid-template-columns: 1fr; }
  .contact-v3-info { gap: 1.1rem; }
}

/* ============================================================
   V3 DESIGN UPDATE PASS
   ============================================================ */

/* Remove all short line decorations (accent rules) site-wide */
.accent-rule { display: none !important; }

/* Section kickers: green (match About "Residential Construction"), no tick line */
.ed-kicker { color: var(--color-primary); }
.ed-kicker::before { display: none; }
.contact-v3-left .ck { color: var(--color-primary); }
.contact-v3-left .ck::before { display: none; }

/* What We Build: hide the big 01, and let the preview image slide */
.ed-index-top { display: none; }
.svc-preview { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }

/* Older Homes: image height symmetrical with the parallel text */
.older-row-2 { align-items: stretch; }
.older-row-2 .older-img { height: 100%; display: flex; }
.older-row-2 .older-img img { height: 100%; width: 100%; object-fit: cover; aspect-ratio: auto; }

/* Custom Home Experience: image height symmetrical with text */
#complex-homes .split { align-items: stretch; }
#complex-homes .split-media, #complex-homes .split-media.landscape { display: flex; }
#complex-homes .split-media img, #complex-homes .split-media.landscape img { height: 100%; width: 100%; object-fit: cover; aspect-ratio: auto; }

/* Owner-Led: list sits left with the "Specialized work" text; image symmetrical */
.owner-split { align-items: stretch; }
.owner-split .owner-text .content-list { justify-items: start; margin: 0.4rem 0 1.4rem; }
.owner-split .owner-text .content-list li { justify-content: flex-start; text-align: left; }
.owner-split .owner-text .list-lead { text-align: left; }
.owner-split .owner-photo { height: 100%; display: flex; }
.owner-split .owner-photo img { height: 100%; width: 100%; object-fit: cover; aspect-ratio: auto; }

/* Featured Project: 30px above the story text */
.feat-story { padding-top: 30px; }

/* How It Works: subtle animation on the process cards */
.process-step { transition: opacity 0.6s ease, transform 0.28s ease, box-shadow 0.28s ease; }
.process-step:hover { transform: translateY(-6px); box-shadow: 0 16px 40px -18px rgba(8, 38, 15, 0.28); }
.process-step:hover .step-number { color: var(--color-primary-dark); }

/* CTA bar: two columns (text left, reviews carousel right), slightly smaller type */
.reviews-band-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.reviews-cta { text-align: left; }
.reviews-band .reviews-cta h2 { font-size: clamp(1.55rem, 2.6vw, 2.1rem); text-align: left; }
.reviews-cta p { font-size: 0.98rem; line-height: 1.7; margin: 0.8rem 0 0; }
.reviews-band .reviews-cta .cta-phone { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 1.2rem; }
.reviews-cta .cta-actions { justify-content: flex-start; margin-top: 0.6rem; }
.reviews-cta .cta-note { margin: 1.4rem 0 0; text-align: left; }
.reviews-col .review-rating-row { margin-top: 0; }
.reviews-col .review-slider { margin: 1.4rem 0 0; max-width: none; }
.reviews-col .review-text { font-size: clamp(1rem, 1.35vw, 1.15rem); }
.reviews-col .review-card { padding: clamp(1.5rem, 2.5vw, 2rem); }
.reviews-col .review-quote-mark { display: none; }

@media (max-width: 1024px) {
  .reviews-band-grid { grid-template-columns: 1fr; }
  .reviews-cta, .reviews-band .reviews-cta h2 { text-align: center; }
  .reviews-cta .cta-actions { justify-content: center; }
  .reviews-cta .cta-note { text-align: center; }
}

/* Fix: let CTA grid columns shrink so the carousel stays inside its column */
.reviews-band-grid > * { min-width: 0; }

/* ===== UPDATE PASS 2 ===== */

/* Fix "frozen" CTA: the decorative overlay was intercepting clicks on the left column */
.reviews-band::before { pointer-events: none; }
.reviews-band-grid { position: relative; z-index: 2; }

/* Center the star / Verified Google Reviews row in the reviews column */
.reviews-col { text-align: center; }
.reviews-col .review-rating-row { display: flex; justify-content: center; }

/* Featured Project: symmetrical two-column text + CTA */
.feat-story { padding-top: 30px; max-width: 1040px; margin-left: auto; margin-right: auto; }
.feat-lead { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.4; color: var(--ink); text-align: center; max-width: 62ch; margin: 0 auto 1.9rem; padding-top: 0; }
.feat-cols { column-count: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
.feat-cols p { break-inside: avoid; color: #4b574f; margin: 0 0 1.05rem; line-height: 1.72; }
.feat-cta { text-align: center; margin-top: 2.4rem; }
@media (max-width: 768px) { .feat-cols { column-count: 1; } }

/* How It Works: proper cards (fixes the cramped hover) */
.process-step { background: #fff; border: 1px solid var(--color-border); border-top: 3px solid var(--color-accent); border-radius: 6px; padding: 1.9rem 1.7rem 1.8rem; box-shadow: 0 4px 14px rgba(8, 38, 15, 0.05); transition: opacity 0.6s ease, transform 0.28s ease, box-shadow 0.28s ease; }
.process-step .step-number { margin-bottom: 0.75rem; }
.process-step h3 { margin-bottom: 0.6rem; }
.process-step:hover { transform: translateY(-6px); box-shadow: 0 22px 46px -20px rgba(8, 38, 15, 0.3); }

/* Featured: keep the first column paragraph as body text (old :first-child rule was bleeding in) */
.feat-cols p:first-child { font-family: var(--font-body); font-size: 1rem; line-height: 1.72; color: #4b574f; }

/* Featured: widen the text to match the photo grid edges */
.feat-story { max-width: none; }

/* Featured CTA now sits below the last paragraph inside the columns */
.feat-cols .feat-cta { text-align: left; margin-top: 1.4rem; break-inside: avoid; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-lead { font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.32; color: var(--ink); margin: 1rem 0 1.4rem; }
.about-prose p { color: #4b574f; margin-bottom: 1.1rem; font-size: 1.04rem; line-height: 1.72; }
.about-prose p:last-child { margin-bottom: 0; }

/* Symmetrical split: image stretches to match the parallel text height */
.about-sym { align-items: stretch; }
.about-sym .split-media { display: flex; }
.about-sym .split-media img, .about-sym .split-media.landscape img { height: 100%; width: 100%; object-fit: cover; aspect-ratio: auto; }

/* Services recap cards */
.about-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 1.4rem 0 2rem; }
.about-svc-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #fff; border: 1px solid var(--color-border); border-top: 3px solid var(--color-accent); border-radius: 6px; padding: 1.2rem 1.4rem; font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.about-svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-e); }
.about-svc-card svg { width: 18px; height: 18px; color: var(--brass); flex-shrink: 0; }
@media (max-width: 900px) { .about-svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .about-svc-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SERVICE PAGE (lead-form hero, case study, prose)
   ============================================================ */
.svc-hero { position: relative; margin-top: var(--header-h); overflow: hidden; background: var(--forest-deep); }
.svc-hero > .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.svc-hero > .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, rgba(5,18,11,0.95) 0%, rgba(6,24,14,0.8) 45%, rgba(6,24,14,0.45) 100%); }
.svc-hero-inner { position: relative; z-index: 2; max-width: 1300px; margin: 0 auto; padding: clamp(3rem, 6vw, 5.5rem) 40px; display: flex; flex-wrap: wrap; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.svc-hero-left { flex: 1 1 440px; min-width: 0; color: #fff; }
.svc-breadcrumb { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; font-size: 0.82rem; color: rgba(255,255,255,0.7); margin-bottom: 1rem; }
.svc-breadcrumb a { color: rgba(255,255,255,0.7); }
.svc-breadcrumb a:hover { color: #fff; }
.svc-breadcrumb .sep { color: var(--brass-light); }
.svc-hero-left .section-label { color: var(--brass-light); }
.svc-hero-left h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem, 4.4vw, 3.5rem); line-height: 1.07; letter-spacing: -0.02em; color: #fff; margin: 1rem 0 1.2rem; }
.svc-hero-left .hero-subtitle { color: rgba(255,255,255,0.9); font-size: clamp(1.02rem, 1.4vw, 1.15rem); line-height: 1.7; max-width: 58ch; margin: 0; }
.svc-hero-form { flex: 0 1 470px; }
.svc-hero-form-card { background: #fff; border-radius: 8px; box-shadow: var(--shadow-e); overflow: hidden; border: 1px solid rgba(255,255,255,0.12); }
.svc-hero-form-card .form-head { background: var(--forest); color: #fff; padding: 1.5rem 1.8rem; border-top: 3px solid var(--brass); }
.svc-hero-form-card .form-head h3 { color: #fff; font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; }
.svc-hero-form-card .form-head p { color: rgba(255,255,255,0.85); font-size: 0.9rem; margin-top: 0.3rem; line-height: 1.5; }
.svc-hero-form-card form { padding: 1.6rem 1.8rem; }
.svc-hero-form-card .form-group input, .svc-hero-form-card .form-group select, .svc-hero-form-card .form-group textarea { background: var(--color-bg-alt); border-color: transparent; }
.svc-hero-form-card .form-group input:focus, .svc-hero-form-card .form-group select:focus, .svc-hero-form-card .form-group textarea:focus { background: #fff; border-color: var(--forest); }

.svc-hero-left .hero-underline { display: block; width: 66px; height: 3px; background: var(--color-accent); border-radius: 2px; margin: 0.1rem 0 1.5rem; }
.svc-prose { max-width: 820px; margin: 0 auto; }
.svc-prose p { color: #4b574f; margin-bottom: 1.1rem; font-size: 1.05rem; line-height: 1.75; }
.svc-prose p:last-child { margin-bottom: 0; }
.case-media { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1120px; margin: 2.6rem auto; }
.case-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-img); box-shadow: var(--shadow-e); }

@media (max-width: 860px) {
  .svc-hero-form { flex: 1 1 100%; max-width: 520px; }
  .case-media { grid-template-columns: 1fr; }
}

/* ============================================================
   SERVICES NAV DROPDOWN
   ============================================================ */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-dropdown-toggle { display: inline-flex !important; align-items: center; gap: 0.35rem; }
.nav-dropdown-toggle .chev { width: 13px; height: 13px; transition: transform 0.25s ease; }
.nav-dropdown:hover .nav-dropdown-toggle .chev, .nav-dropdown:focus-within .nav-dropdown-toggle .chev { transform: rotate(180deg); }
.nav-dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 258px; padding-top: 14px; opacity: 0; visibility: hidden; transition: opacity 0.2s ease; z-index: 1001; }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; }
.nav-dd-inner { background: #fff; border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 20px 50px -18px rgba(8, 38, 15, 0.28); padding: 0.5rem; }
.nav-dd-inner a { display: block; padding: 0.62rem 0.9rem; border-radius: 5px; font-size: 0.92rem; font-weight: 600; color: var(--color-secondary); white-space: nowrap; }
.nav-dd-inner a::after { display: none !important; }
.nav-dd-inner a:hover { background: var(--color-bg-alt); color: var(--color-primary); }
/* nested submenu (Areas We Serve) */
.nav-subdropdown { position: relative; }
.nav-subdropdown-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.62rem 0.9rem; border-radius: 5px; font-size: 0.92rem; font-weight: 600; color: var(--color-secondary); white-space: nowrap; cursor: pointer; }
.nav-subdropdown-toggle .chev-r { width: 13px; height: 13px; flex: 0 0 auto; opacity: 0.7; }
.nav-subdropdown:hover > .nav-subdropdown-toggle, .nav-subdropdown:focus-within > .nav-subdropdown-toggle { background: var(--color-bg-alt); color: var(--color-primary); }
.nav-subdropdown-menu { position: absolute; top: -0.5rem; left: 100%; padding-left: 10px; min-width: 200px; opacity: 0; visibility: hidden; transition: opacity 0.2s ease; z-index: 1002; }
.nav-subdropdown:hover > .nav-subdropdown-menu, .nav-subdropdown:focus-within > .nav-subdropdown-menu { opacity: 1; visibility: visible; }

/* Mobile services group (native details, no JS) */
.mobile-nav-group { border-bottom: 1px solid rgba(255,255,255,0.1); }
.mobile-nav-group > summary { list-style: none; cursor: pointer; font-size: 1.15rem; font-weight: 600; padding: 0.85rem 0; display: flex; align-items: center; justify-content: space-between; color: #fff; }
.mobile-nav-group > summary::-webkit-details-marker { display: none; }
.mobile-nav-group > summary::after { content: '+'; font-size: 1.5rem; line-height: 1; color: var(--brass-light); }
.mobile-nav-group[open] > summary::after { content: '\00d7'; }
.mobile-nav .mobile-nav-group a { display: block; font-size: 1rem; padding: 0.55rem 0 0.55rem 1rem; border-bottom: none; color: rgba(255,255,255,0.85); }
.mobile-nav .mobile-nav-group a:last-child { padding-bottom: 0.9rem; }
.mobile-nav-subgroup { border-bottom: none; margin-left: 1rem; }
.mobile-nav-subgroup > summary { font-size: 1rem; font-weight: 600; padding: 0.55rem 0; color: rgba(255,255,255,0.85); }
.mobile-nav-subgroup > summary::after { content: '+'; color: var(--brass-light); }
.mobile-nav-subgroup[open] > summary::after { content: '\00d7'; }
.mobile-nav .mobile-nav-subgroup a { padding-left: 2rem; }

/* Anchor scroll offset for fixed header */
section[id] { scroll-margin-top: 92px; }

/* ===== Before/After in the case study ===== */
.case-media .ba-figure { position: relative; margin: 0; border-radius: var(--radius-img); overflow: hidden; box-shadow: var(--shadow-e); }
.case-media .ba-figure img { display: block; width: 100%; height: 500px; object-fit: cover; aspect-ratio: auto; }
.ba-badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(20,32,26,0.92); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.4rem 0.85rem; border-radius: 3px; }
.ba-badge.after { background: var(--forest); }
@media (max-width: 860px) { .case-media .ba-figure img { height: 340px; } }

/* ============================================================
   PROJECTS PAGE
   ============================================================ */
.proj-lede { max-width: 760px; margin: 0 auto; text-align: center; }
.proj-grid { columns: 3; column-gap: 16px; margin-top: 3.2rem; }
.proj-grid .gallery-item { break-inside: avoid; display: block; width: 100%; margin: 0 0 16px; aspect-ratio: auto; border-radius: var(--radius-img); }
.proj-grid .gallery-item img { display: block; width: 100%; height: auto; }
.proj-grid .gallery-item .gallery-icon { top: 50%; }
@media (max-width: 900px) { .proj-grid { columns: 2; } }
@media (max-width: 560px) { .proj-grid { columns: 1; } }

/* ============================================================
   REVIEWS PAGE
   ============================================================ */
.rating-band { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; margin-top: 2.6rem; }
.rating-band .rating-score { font-family: var(--font-display); font-weight: 600; font-size: 3.4rem; line-height: 1; color: var(--forest); }
.rating-stars { display: inline-flex; gap: 5px; color: var(--brass); }
.rating-stars svg { width: 26px; height: 26px; }
.rating-meta { font-family: var(--font-body); font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.02em; }
.rating-band .btn { margin-top: 0.9rem; }
.reviews-masonry { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; margin-top: 3.4rem; align-items: stretch; }
.rev-card { grid-column: span 2; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hair); border-radius: 10px;
  padding: 1.9rem 1.8rem; box-shadow: var(--shadow-sm); }
.rev-card:nth-child(4) { grid-column: 2 / span 2; }
.rev-card:nth-child(5) { grid-column: 4 / span 2; }
.rev-card .rev-author { margin-top: auto; }
.rev-card .rev-stars { display: inline-flex; gap: 3px; color: var(--brass); margin-bottom: 1rem; }
.rev-card .rev-stars svg { width: 18px; height: 18px; }
.rev-card p { color: var(--color-text); line-height: 1.72; margin-bottom: 1.35rem; }
.rev-card .rev-text.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.7rem; }
.rev-more { align-self: flex-start; background: none; border: none; color: var(--forest); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer; padding: 0; margin: 0 0 1.2rem; transition: color 0.2s; }
.rev-more:hover { color: var(--brass); }
.rev-card .rev-author { display: flex; align-items: center; gap: 0.85rem; border-top: 1px solid var(--hair); padding-top: 1.15rem; }
.rev-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--forest); color: #fff; display: flex;
  align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.2rem; flex: 0 0 auto; }
.rev-author .rev-name { font-weight: 700; color: var(--ink); display: block; line-height: 1.2; }
.rev-author .rev-src { font-size: 0.82rem; color: var(--color-text-muted); }
@media (max-width: 900px) {
  .reviews-masonry { grid-template-columns: repeat(4, 1fr); }
  .rev-card:nth-child(4) { grid-column: span 2; }
  .rev-card:nth-child(5) { grid-column: 2 / span 2; }
}
@media (max-width: 680px) {
  .reviews-masonry { grid-template-columns: 1fr; }
  .rev-card, .rev-card:nth-child(4), .rev-card:nth-child(5) { grid-column: 1 / -1; }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-lede { max-width: 720px; margin: 0 auto; text-align: center; }
.contact-map-band { padding-top: 0; }
.contact-map-band iframe { display: block; width: 100%; height: 440px; border: 0; border-radius: 10px; box-shadow: var(--shadow-sm); }
@media (max-width: 640px) { .contact-map-band iframe { height: 340px; } }
.contact-map-full { line-height: 0; font-size: 0; }
.contact-map-full iframe { display: block; width: 100%; height: 480px; border: 0; }
@media (max-width: 640px) { .contact-map-full iframe { height: 340px; } }

/* ============================================================
   LOCATION PAGE
   ============================================================ */
.hero-content .hero-subtitle + .hero-subtitle { margin-top: -0.6rem; }
.loc-body { max-width: 940px; }
.loc-body .bstep-rail { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.loc-body .content-list { margin: 1.3rem 0 1.6rem; }
.loc-body > p + p { margin-top: 0.9rem; }
.loc-body > p + .list-lead { margin-top: 1.4rem; }
.loc-body .chip-cloud + p, .loc-body .content-list + p { margin-top: 0.2rem; }
.loc-split .about-text .content-list { margin: 1.2rem 0 1.4rem; }
.loc-split .split-media.landscape { align-self: start; position: sticky; top: 110px; }
@media (max-width: 1024px) { .loc-split .split-media.landscape { position: static; } }
/* two-column rows with symmetrical (equal-height) image */
.loc-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); }
.loc-row + .loc-row { margin-top: clamp(2.4rem, 5vw, 3.8rem); }
.loc-row-text { align-self: center; }
.loc-row-text .ed-title { margin-top: 0.9rem; }
.loc-row-text > .ed-title + p, .loc-row-text > .ed-title + .list-lead { margin-top: 0.75rem; }
.loc-row-text > p + p { margin-top: 0.9rem; }
.loc-row-text .list-lead { margin-top: 1.3rem; }
.loc-row-text .content-list { margin: 1rem 0 1.3rem; }
.loc-row-text .content-list:last-child, .loc-row-text > p:last-child { margin-bottom: 0; }
.loc-row-even { grid-template-columns: 1fr 1fr; }
.loc-media { position: relative; align-self: stretch; min-height: 360px; border-radius: var(--radius-img); overflow: hidden; box-shadow: var(--shadow-md); }
.loc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* before/after vertical stack that matches the parallel text height */
.loc-media-stack { align-self: stretch; display: grid; grid-template-rows: 1fr 1fr; gap: 14px; min-height: 460px; }
.loc-media-stack .ba-figure { position: relative; margin: 0; border-radius: var(--radius-img); overflow: hidden; box-shadow: var(--shadow-md); }
.loc-media-stack .ba-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* inline image inside a text column (image above, paragraphs below) */
.loc-inline-img { display: block; width: 100%; height: auto; border-radius: var(--radius-img); box-shadow: var(--shadow-md); margin-bottom: 1.5rem; }
/* image + paragraphs column, symmetrical (image grows to match the parallel text height) */
.loc-img-text { align-self: stretch; display: flex; flex-direction: column; }
.loc-img-text .loc-inline-img { flex: 1 1 auto; min-height: 260px; height: auto; object-fit: cover; }
.loc-img-text > p:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .loc-img-text .loc-inline-img { flex: 0 0 auto; height: 300px; } }

/* Knowledge, Vision & Craftsmanship: scannable cards + callouts */
.craft-lead { text-align: center; margin: clamp(2.6rem, 5vw, 3.6rem) 0 1.5rem; }
.craft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.craft-card { display: flex; align-items: center; gap: 0.75rem; background: #fff; border: 1px solid var(--hair);
  border-radius: 10px; padding: 1.05rem 1.2rem; box-shadow: var(--shadow-sm); }
.craft-card svg { width: 20px; height: 20px; color: var(--brass); flex: 0 0 auto; }
.craft-card span { font-weight: 600; color: var(--ink); line-height: 1.4; }
.craft-callouts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(2.6rem, 5vw, 3.6rem); }
.craft-callout { position: relative; background: #fff; border: 1px solid var(--hair); border-left: 3px solid var(--brass);
  border-radius: 10px; padding: 1.7rem 1.9rem; box-shadow: var(--shadow-sm); }
.craft-callout .craft-ico { display: inline-flex; margin-bottom: 0.9rem; color: var(--forest); }
.craft-callout .craft-ico svg { width: 26px; height: 26px; }
.craft-callout p { margin: 0; color: var(--color-text); }
.craft-closing { text-align: center; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem); color: var(--forest); max-width: none;
  margin: clamp(2.2rem, 4vw, 3rem) auto 0; }
@media (max-width: 900px) { .craft-grid { grid-template-columns: repeat(2, 1fr); } .craft-callouts { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .craft-grid { grid-template-columns: 1fr; } }

/* Honest and Transparent Project Planning: process cards + closing block */
.plan-lead { text-align: center; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 2.3vw, 1.6rem);
  color: var(--ink); max-width: 760px; margin: clamp(2.6rem, 5vw, 3.6rem) auto 0; }
.plan-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 1.9rem; }
.plan-card { background: var(--color-bg-alt); border: 1px solid var(--hair); border-radius: 12px; padding: 1.8rem; }
.plan-card .plan-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 11px; background: #fff; color: var(--forest); box-shadow: var(--shadow-sm); margin-bottom: 1.15rem; }
.plan-card .plan-ico svg { width: 25px; height: 25px; }
.plan-card p { margin: 0; color: var(--color-text); }
.plan-closing { max-width: 900px; margin: clamp(2.4rem, 4vw, 3.2rem) auto 0; text-align: center;
  background: var(--forest-deep); border-radius: 12px; padding: clamp(1.9rem, 4vw, 2.8rem); position: relative; overflow: hidden; }
.plan-closing::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(193,154,91,0.16), transparent 60%); }
.plan-closing p { position: relative; margin: 0; color: #eef3ee; font-size: clamp(1.05rem, 1.7vw, 1.2rem); line-height: 1.7; }
@media (max-width: 900px) { .plan-cards { grid-template-columns: 1fr; } }

/* Clear Communication: method cards + choice pills + note */
.comm-intro { text-align: center; max-width: 720px; margin: 1.4rem auto 0; }
.comm-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(2.4rem, 5vw, 3.2rem); }
.comm-method { display: flex; gap: 1.1rem; align-items: flex-start; background: #fff; border: 1px solid var(--hair); border-radius: 12px; padding: 1.7rem 1.8rem; box-shadow: var(--shadow-sm); }
.comm-method .comm-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 11px; background: var(--paper); color: var(--forest); }
.comm-method .comm-ico svg { width: 23px; height: 23px; }
.comm-method p { margin: 0; }
.comm-choices-lead { text-align: center; max-width: 840px; margin: clamp(2.4rem, 5vw, 3.2rem) auto 1.5rem; }
.comm-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 880px; margin: 0 auto; }
.comm-pill { background: #fff; border: 1px solid var(--hair); border-radius: 999px; padding: 0.55rem 1.15rem; font-weight: 600; font-size: 0.92rem; color: var(--ink); box-shadow: var(--shadow-sm); }
.comm-note { max-width: 780px; margin: clamp(2.2rem, 4vw, 3rem) auto 0; text-align: center; }
.comm-note p { margin: 0; }
.svc-intro { text-align: center; max-width: 700px; margin: 1.4rem auto 0; }
@media (max-width: 760px) { .comm-methods { grid-template-columns: 1fr; } }

/* Flexible Residential Construction Services: flagship card + icon-card grid */
.svc-feature { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1.3rem, 3vw, 2.3rem);
  margin-top: 1.4rem; background: #fff; border: 1px solid var(--hair); border-radius: 16px;
  padding: clamp(1.7rem, 3.4vw, 2.5rem); box-shadow: var(--shadow-md); text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.svc-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--brass); }
.svc-feature-ico { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 16px;
  background: var(--forest); color: #fff; flex: 0 0 auto; }
.svc-feature-ico svg { width: 33px; height: 33px; }
.svc-feature-body h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  color: var(--ink); margin: 0 0 0.55rem; }
.svc-feature-body p { margin: 0; color: var(--color-text); max-width: 68ch; }
.svc-feature-cta { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-body);
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass); white-space: nowrap; }
.svc-feature-cta svg { width: 17px; height: 17px; transition: transform 0.2s ease; }
.svc-feature:hover .svc-feature-cta svg { transform: translateX(4px); }

.svc-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.svc-mini { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--hair);
  border-radius: 12px; padding: 1.25rem 1.45rem; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.svc-mini:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brass); }
.svc-mini-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px;
  background: var(--paper); color: var(--forest); flex: 0 0 auto; }
.svc-mini-ico svg { width: 22px; height: 22px; }
.svc-mini-name { flex: 1; font-weight: 700; color: var(--ink); line-height: 1.3; }
.svc-mini-arrow { width: 18px; height: 18px; color: var(--brass); flex: 0 0 auto; transition: transform 0.2s ease; }
.svc-mini:hover .svc-mini-arrow { transform: translateX(4px); }
.svc-closing { text-align: center; max-width: 760px; margin: clamp(2.4rem, 4vw, 3.2rem) auto 0; color: var(--color-text-muted); }
@media (max-width: 900px) { .svc-mini-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .svc-feature { grid-template-columns: 1fr; text-align: center; } .svc-feature-ico { margin: 0 auto; } .svc-feature-body p { margin-inline: auto; } .svc-feature-cta { justify-content: center; } .svc-mini-grid { grid-template-columns: 1fr; } }

/* scannable helpers reused across location sections */
.tag-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 940px; margin: 1.5rem auto 0; }
.tag-grid .tag { background: #fff; border: 1px solid var(--color-border-strong); border-radius: 999px; padding: 0.55rem 1.15rem; font-weight: 600; font-size: 0.9rem; color: var(--ink); box-shadow: var(--shadow-sm); }
.sec-note { text-align: center; max-width: 800px; margin: clamp(2.4rem, 4vw, 3.2rem) auto 0; color: var(--color-text-muted); }
.sec-note p { margin: 0; }
.sec-note p + p { margin-top: 0.85rem; }
.step-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-top: 1.9rem; }
.step-card { background: #fff; border: 1px solid var(--hair); border-radius: 12px; padding: 1.7rem; box-shadow: var(--shadow-sm); }
.step-card .step-n { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; background: var(--forest); color: #fff; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 1.1rem; }
.step-card p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--color-text); }
@media (max-width: 900px) { .step-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .step-cards { grid-template-columns: 1fr; } .tag-grid { justify-content: flex-start; } }

/* standardized check-card lists (adapt columns to available width) */
/* Compact editorial list: hairline rows, no boxes (was bulky cards) */
.check-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 0 2.2rem; margin: 1.1rem 0 1.3rem; }
.check-card { display: flex; align-items: flex-start; gap: 0.6rem; background: none; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; padding: 0.6rem 0 0.62rem; box-shadow: none; }
.check-card svg { width: 16px; height: 16px; color: var(--brass); flex: 0 0 auto; margin-top: 3px; }
.check-card span { font-weight: 600; color: var(--ink); font-size: 0.93rem; line-height: 1.45; }
.wh-list-single .check-cards, .ed-split-body .check-cards, .loc-body .check-cards { margin-left: auto; margin-right: auto; }
/* subtle staggered reveal on the lists */
.check-cards.fade-in-up { opacity: 1; transform: none; }
.check-card { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.check-cards.visible .check-card { opacity: 1; transform: translateY(0); }
.check-cards.visible .check-card:nth-child(1) { transition-delay: 0.04s; }
.check-cards.visible .check-card:nth-child(2) { transition-delay: 0.09s; }
.check-cards.visible .check-card:nth-child(3) { transition-delay: 0.14s; }
.check-cards.visible .check-card:nth-child(4) { transition-delay: 0.19s; }
.check-cards.visible .check-card:nth-child(5) { transition-delay: 0.24s; }
.check-cards.visible .check-card:nth-child(6) { transition-delay: 0.29s; }
.check-cards.visible .check-card:nth-child(7) { transition-delay: 0.34s; }
.check-cards.visible .check-card:nth-child(8) { transition-delay: 0.39s; }
.check-cards.visible .check-card:nth-child(9) { transition-delay: 0.44s; }
.check-cards.visible .check-card:nth-child(10) { transition-delay: 0.49s; }
.check-cards.visible .check-card:nth-child(n+11) { transition-delay: 0.54s; }
.check-card:hover { border-bottom-color: var(--brass); }
@media (prefers-reduced-motion: reduce) { .check-card { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .loc-media-stack { min-height: 0; grid-template-rows: auto auto; }
  .loc-media-stack .ba-figure img { height: 280px; }
}
.wh-list-single { max-width: 100%; margin: clamp(2.4rem, 5vw, 3.6rem) auto 0; text-align: center; }
.wh-list-single .list-lead { text-align: center; margin-bottom: 1.4rem; max-width: none; }
.wh-list-single .content-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem 2.4rem; width: 100%; max-width: 100%; margin: 0 auto; text-align: left; }
@media (max-width: 760px) { .wh-list-single .content-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .wh-list-single .content-list { grid-template-columns: 1fr; } }
.wh-list-single > p:last-child { max-width: 80ch; margin: 1.7rem auto 0; }
.loc-center-head { text-align: center; max-width: 860px; margin: 0 auto clamp(2.4rem, 5vw, 3.4rem); }
.loc-center-head .ed-kicker { justify-content: center; }
.loc-center-head .ed-title { margin-top: 0.9rem; }
.loc-center-head p { max-width: none; margin: 0 auto; }
.loc-center-head p + p { margin-top: 0.9rem; }
.qa-list { list-style: none; display: grid; gap: 0.7rem; margin: 1rem 0 1.4rem; }
.qa-list li { position: relative; padding-left: 1.5rem; color: var(--ink); font-weight: 500; }
.qa-list li::before { content: '\203A'; position: absolute; left: 0; top: -1px; color: var(--brass); font-weight: 700; font-size: 1.15rem; line-height: 1; }

/* Prevent orphan words (single word alone on the last line) on headings and paragraphs */
h1, h2, h3, h4, .ed-title, .section-heading, .hero-content h1, .form-head h3, .rating-meta { text-wrap: balance; }
p, .hero-subtitle, .list-lead, .ed-lede, .about-lead, li { text-wrap: pretty; }

/* CTA bars: reorder so the note text sits above the phone number */
.cta-strip-inner, .reviews-cta { display: flex; flex-direction: column; gap: 1.5rem; }
.cta-strip-inner { align-items: center; }
.reviews-cta { align-items: flex-start; }
.cta-strip-inner > *, .reviews-cta > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.cta-strip-inner > h2, .reviews-cta > h2 { order: 1; }
.cta-strip-inner > p:not(.cta-note), .reviews-cta > p:not(.cta-note) { order: 2; }
.cta-strip-inner > .cta-note, .reviews-cta > .cta-note { order: 3; }
.cta-strip-inner > .cta-phone, .reviews-cta > .cta-phone { order: 4; }
.cta-strip-inner > .cta-actions, .reviews-cta > .cta-actions { order: 5; }
@media (max-width: 900px) { .reviews-cta { align-items: center; } }
@media (max-width: 900px) {
  .loc-row { grid-template-columns: 1fr; gap: 1.8rem; }
  .loc-media { min-height: 260px; }
}

/* ===== Featured Project case study ===== */
.fp-intro {
  text-align: center;
  max-width: 760px;
  margin: 1.1rem auto 2.6rem;
  color: var(--ink);
  font-size: 1.06rem;
  line-height: 1.7;
}
.fp-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 auto 2.6rem;
}
.fp-ba-item { margin: 0; }
.fp-ba-media {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-img);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.fp-ba-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-ba-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(11, 77, 44, 0.94);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 6px 15px;
  border-radius: 999px;
}
.fp-ba-tag-after { background: var(--color-accent); color: #241500; }
.fp-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0 auto 2.8rem;
}
.fp-detail {
  display: flex;
  gap: 0.7rem;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.fp-detail:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.fp-detail svg { width: 20px; height: 20px; color: var(--color-accent); flex: 0 0 auto; margin-top: 2px; }
.fp-detail p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink); }
.fp-payoff {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: stretch;
  border-radius: var(--radius-img);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.fp-payoff-media { position: relative; min-height: 360px; }
.fp-payoff-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fp-payoff-text {
  display: flex;
  align-items: center;
  background: var(--color-primary);
  color: #fff;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.8rem, 3.5vw, 2.6rem);
}
.fp-closing {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.42;
  text-wrap: balance;
}
.fp-callout {
  background: var(--color-primary);
  color: #fff;
  border-radius: 16px;
  padding: clamp(2rem, 4vw, 2.9rem) clamp(1.8rem, 4vw, 3.2rem);
  text-align: center;
  box-shadow: var(--shadow-md);
}
.fp-callout .fp-closing { max-width: 840px; margin: 0 auto; }
@media (max-width: 860px) {
  .fp-details { grid-template-columns: repeat(2, 1fr); }
  .fp-payoff { grid-template-columns: 1fr; }
  .fp-payoff-media { min-height: 280px; }
}
@media (max-width: 560px) {
  .fp-ba { grid-template-columns: 1fr; }
  .fp-details { grid-template-columns: 1fr; }
}

/* ============================================================
   V4 editorial components — homepage long-content redesign
   ============================================================ */

/* Large serif statement (section lead line) */
.led-statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.22rem, 1.9vw, 1.48rem);
  line-height: 1.48;
  color: var(--ink);
  margin: 0 0 1.7rem;
  max-width: none;
  text-wrap: balance;
}

/* Numbered scenario rows — sentences of one line split visually,
   numerals are CSS-only so the text stream stays verbatim */
.scn-rows { counter-reset: scn; margin: 0 0 1.7rem; }
.scn { counter-increment: scn; position: relative; padding: 1rem 0 1rem 3.3rem; border-top: 1px solid var(--hair); }
.scn:last-child { border-bottom: 1px solid var(--hair); }
.scn::before {
  content: "0" counter(scn);
  position: absolute; left: 0; top: 0.95rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.3rem; line-height: 1.5; color: var(--brass);
}
.scn p { margin: 0; color: #4b574f; font-size: 1.01rem; line-height: 1.66; max-width: none; }

/* Editorial rule-grid — numbered hairline entries, no boxes */
.rule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.6rem; counter-reset: rg; }
.rule-grid > div { counter-increment: rg; border-top: 1px solid var(--hair); padding: 1.1rem 0 1.3rem; }
.rule-grid > div.span2 { grid-column: 1 / -1; }
.rule-grid > div::before {
  content: "0" counter(rg);
  display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.05rem; color: var(--brass);
  margin-bottom: 0.4rem;
}
.rule-grid p { margin: 0; color: #4b574f; font-size: 0.98rem; line-height: 1.68; max-width: none; }
.rule-grid.no-num > div::before { content: none; }
.rule-grid.no-num > div { padding-top: 1.3rem; }
.rule-grid > div .tl-tag { display: block; margin-bottom: 0.4rem; }

/* Vertical story timeline */
.tl { position: relative; margin-top: 0.5rem; }
.tl::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(to bottom, var(--brass), var(--hair));
}
.tl-item { position: relative; padding: 0 0 1.65rem 2.3rem; }
.tl-item:last-child { padding-bottom: 0.2rem; }
.tl-item::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brass);
}
.tl-tag {
  display: block; font-family: var(--font-body);
  font-weight: 800; font-size: 0.7rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--forest);
  margin-bottom: 0.35rem;
}
.tl-item p { margin: 0; color: #4b574f; font-size: 1rem; line-height: 1.7; max-width: none; }

/* Pull-quote panel */
.pullq {
  position: relative;
  background: var(--color-bg-warm);
  border-left: 3px solid var(--brass);
  border-radius: 0 14px 14px 0;
  padding: 2rem 2.6rem 2rem 4.8rem;
  margin-top: 2.6rem;
}
.pullq::before {
  content: "\201C";
  position: absolute; left: 1.35rem; top: 0.5rem;
  font-family: var(--font-display);
  font-size: 4.4rem; line-height: 1; color: var(--brass);
}
.pullq p {
  margin: 0 0 0.95rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.52; color: var(--ink); max-width: none;
}
.pullq p:last-child { margin-bottom: 0; }

/* Renovation ledger — room tags + ghost numerals, hairline rows */
.ledger { max-width: 920px; margin: 2.8rem auto 0; counter-reset: lg; }
.ledger-row {
  display: grid; grid-template-columns: 168px 1fr; gap: 1.7rem;
  border-top: 1px solid var(--hair); padding: 1.35rem 0;
  counter-increment: lg;
}
.ledger-row:last-of-type { border-bottom: 1px solid var(--hair); }
.ledger-side::before {
  content: "0" counter(lg);
  display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: 2rem; line-height: 1; color: rgba(193, 154, 91, 0.55);
}
.ledger-tag {
  display: block; margin-top: 0.45rem;
  font-weight: 800; font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--forest);
}
.ledger-row > p { margin: 0; color: #4b574f; font-size: 1rem; line-height: 1.7; max-width: none; }
.ledger-close {
  text-align: center;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.18rem, 1.9vw, 1.42rem); line-height: 1.5;
  color: var(--ink);
  max-width: 700px; margin: 2.5rem auto 0;
  text-wrap: balance;
}

/* Dark showcase panel */
.showcase-dark {
  background: linear-gradient(135deg, var(--forest-deep) 0%, #10391f 60%, var(--forest) 130%);
  border-radius: 20px;
  padding: clamp(2.2rem, 4.5vw, 3.6rem);
  display: grid; grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(1.8rem, 3.5vw, 3.2rem);
  align-items: center;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.showcase-dark .ed-kicker { color: var(--brass-light); }
.showcase-dark .ed-title { color: #fff; }
.showcase-lede {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.1rem, 1.6vw, 1.28rem); line-height: 1.5;
  color: #fff; margin: 1.3rem 0 1rem; max-width: none;
}
.showcase-dark p { color: rgba(255, 255, 255, 0.82); margin-bottom: 1.05rem; line-height: 1.7; max-width: none; }
.showcase-dark p:last-child { margin-bottom: 0; }
.showcase-dark .list-lead { color: #fff; margin: 1.3rem 0 0.9rem; }
.showcase-dark .content-list li { color: rgba(255, 255, 255, 0.92); border-bottom-color: rgba(255, 255, 255, 0.14); }
.showcase-dark .content-list li svg { color: var(--brass-light); }
.showcase-media { display: grid; gap: 14px; align-self: stretch; }
.showcase-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-img); display: block; min-height: 0; }
.showcase-media { grid-template-rows: 1.2fr 0.8fr; }

/* Budget stepper — connected vertical steps */
.bstep { position: relative; margin-top: 2.3rem; counter-reset: bs; }
.bstep::before {
  content: ""; position: absolute; left: 17px; top: 10px; bottom: 10px;
  width: 2px; background: var(--hair);
}
.bstep-item { position: relative; padding: 0 0 1.9rem 3.7rem; counter-increment: bs; }
.bstep-item:last-child { padding-bottom: 0; }
.bstep-item::before {
  content: counter(bs);
  position: absolute; left: 0; top: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; border: 2px solid var(--brass);
  color: var(--forest);
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  display: flex; align-items: center; justify-content: center;
}
.bstep-tag {
  display: block;
  font-weight: 800; font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--forest);
  margin: 0.5rem 0 0.4rem;
}
.bstep-item p { margin: 0; color: #4b574f; line-height: 1.7; max-width: none; }

/* Sticky-rail photo under ed-head */
.ed-head-img { margin-top: 1.8rem; }
.ed-head-img img { width: 100%; border-radius: var(--radius-img); box-shadow: var(--shadow-md); display: block; }

/* Selections closing notes */
.sel-notes { margin-top: 1.35rem; }
.sel-notes p { color: #4b574f; margin-bottom: 1.05rem; line-height: 1.7; max-width: none; }
.sel-notes .sel-styles {
  border-top: 1px solid var(--hair);
  padding-top: 1.2rem; margin-bottom: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.12rem; line-height: 1.55; color: var(--ink);
}

@media (max-width: 900px) {
  .rule-grid { grid-template-columns: 1fr; }
  .rule-grid > div.span2 { grid-column: auto; }
  .showcase-dark { grid-template-columns: 1fr; }
  .showcase-media { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .showcase-media img { aspect-ratio: 4/3; }
  .ledger-row { grid-template-columns: 1fr; gap: 0.55rem; }
  .ledger-side { display: flex; align-items: baseline; gap: 0.75rem; }
  .ledger-side::before { font-size: 1.4rem; }
  .ledger-tag { margin-top: 0; }
  .pullq { padding: 1.7rem 1.5rem 1.7rem 3.6rem; }
}
@media (max-width: 560px) {
  .showcase-media { grid-template-columns: 1fr; }
  .scn { padding-left: 2.7rem; }
}

/* About service menu -> site numbered/hairline language */
.svc-mini-grid { counter-reset: sm; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 2.2rem; margin-top: 2rem; }
.svc-mini {
  counter-increment: sm; position: relative;
  background: none; border: 0; border-top: 1px solid var(--hair); border-radius: 0; box-shadow: none;
  display: flex; align-items: center; gap: 0.75rem; padding: 0.95rem 0;
  transition: border-color 0.2s ease;
}
.svc-mini:hover { border-top-color: var(--brass); }
.svc-mini::before {
  content: "0" counter(sm);
  font-family: var(--font-display); font-weight: 500; font-size: 1.02rem;
  color: var(--brass); flex: 0 0 auto;
}
.svc-mini .svc-mini-ico { display: none; }
.svc-mini .svc-mini-name { font-weight: 600; color: var(--ink); font-size: 0.97rem; }
.svc-mini .svc-mini-arrow { margin-left: auto; color: var(--brass); }

.process-step p + p { margin-top: 0.85rem; }

/* 3-up process grid: final step spans the full width beneath the three columns */
.process-steps.process-steps-3up { grid-template-columns: repeat(3, 1fr); }
.process-steps.process-steps-3up > .process-step:nth-child(4) { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .process-steps.process-steps-3up { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .process-steps.process-steps-3up { grid-template-columns: 1fr; }
}


/* Reverse modifiers so image side can alternate down a page */
.tl-head.reverse { direction: rtl; }
.tl-head.reverse > * { direction: ltr; }
.owner-split.reverse { direction: rtl; }
.owner-split.reverse > * { direction: ltr; }


/* Section with a photographic background under a brand-green overlay */
.bg-media { position: relative; overflow: hidden; }
.bg-media > .bg-media-img {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
/* Decorative video standing in for .bg-media-img on the band. It sits in the
   same layer, under the tint, so the white text above keeps its contrast. */
.bg-media > .bg-media-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .bg-media > .bg-media-video { display: none; }
  .bg-media:has(> .bg-media-video) {
    background-image: url('/images/cks-builders-remodel-walkthrough-poster.webp');
    background-size: cover; background-position: center;
  }
}
.bg-media > .bg-media-tint {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(120deg, rgba(8,44,25,0.95) 0%, rgba(11,77,44,0.90) 55%, rgba(8,44,25,0.94) 100%);
}
.bg-media > .container { position: relative; z-index: 2; }
.bg-media .ed-kicker { color: var(--brass-light); }
.bg-media .ed-title { color: #fff; }
.bg-media p { color: rgba(255,255,255,0.88); }
.bg-media .list-lead { color: #fff; }
.bg-media .chip { background: rgba(255,255,255,0.96); border-color: transparent; color: var(--ink); }
.bg-media .chip:hover { background: #fff; border-color: var(--brass); }
/* hairline lists on a dark band */
.bg-media .content-list li,
.bg-media .check-card span { color: rgba(255,255,255,0.93); }
.bg-media .content-list li { border-bottom-color: rgba(255,255,255,0.20); }
.bg-media .check-card { border-bottom-color: rgba(255,255,255,0.20); }
.bg-media .content-list li svg,
.bg-media .check-card svg { color: var(--brass-light); }
.bg-media .led-statement, .bg-media .ed-lede { color: #fff; }
.bg-media .why-intro { color: #fff; }
.bg-media .why-list li { color: rgba(255,255,255,0.93); border-bottom-color: rgba(255,255,255,0.20); }
.bg-media .why-list li svg { color: var(--brass-light); }


/* ===== Brand-green header ===== */
.site-header {
  background: rgba(11, 77, 44, 0.97);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.site-header.scrolled { background: var(--forest); box-shadow: 0 6px 24px rgba(6, 30, 17, 0.28); }
.header-nav > a, .header-nav > .nav-dropdown > .nav-dropdown-toggle { color: rgba(255, 255, 255, 0.92); }
.header-nav a:hover, .header-nav .nav-dropdown-toggle:hover { color: #fff; }
.header-nav a::after { background: var(--brass-light); }
.header-phone { color: #fff; }
.header-phone:hover { color: var(--brass-light); }
.site-header .header-right .btn-primary {
  background: var(--brass); color: #23180a; border: 0; font-weight: 700;
}
.site-header .header-right .btn-primary:hover { background: var(--brass-light); color: #23180a; }
.mobile-menu-toggle span { background: #fff; }
/* dropdown panels stay light for readability */
.nav-dropdown-menu .nav-dd-inner, .nav-subdropdown-menu .nav-dd-inner { background: #fff; }
.nav-dropdown-menu a, .nav-subdropdown-menu a,
.nav-dropdown-menu .nav-subdropdown-toggle { color: var(--ink); }
.nav-dropdown-menu a:hover, .nav-subdropdown-menu a:hover,
.nav-dropdown-menu .nav-subdropdown-toggle:hover { color: var(--forest); }

/* ===== V4b compact components (short sections, less scrolling) ===== */

/* Section head row: text + photo side by side */
.tl-head { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; margin-bottom: 2.7rem; }
.tl-head-img img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; object-position: center 30%; border-radius: var(--radius-img); box-shadow: var(--shadow-md); display: block; }

/* Horizontal timeline rail — dots on a shared top rule */
.tl-rail { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.9rem 1.8rem; border-top: 2px solid var(--hair); padding-top: 1.5rem; }
.tl-stop { position: relative; }
.tl-stop::before { content: ""; position: absolute; top: calc(-1.5rem - 8px); left: 0; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--brass); }
.tl-stop .tl-tag { margin-bottom: 0.4rem; }
.tl-stop p { margin: 0; font-size: 0.93rem; line-height: 1.62; color: #4b574f; max-width: none; }

/* Horizontal numbered stepper rail */
.bstep-rail { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.8rem; counter-reset: bs; margin-top: 2.6rem; }
.bstep-rail::before { content: ""; position: absolute; top: 17px; left: 10px; right: 10px; height: 2px; background: var(--hair); }
.rs { counter-increment: bs; position: relative; padding-top: 3rem; }
.rs::before {
  content: counter(bs);
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 2px solid var(--brass);
  color: var(--forest); font-family: var(--font-display); font-weight: 600; font-size: 0.98rem;
  display: flex; align-items: center; justify-content: center;
}
.rs .bstep-tag { margin: 0 0 0.35rem; }
.rs p { margin: 0; font-size: 0.93rem; line-height: 1.62; color: #4b574f; max-width: none; }

/* Chip cloud — compact verbatim item lists */
.chip-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin: 0.9rem 0 1.3rem; }
.chip-cloud.center { justify-content: center; max-width: 900px; margin-left: auto; margin-right: auto; }
.chip {
  border: 1px solid var(--hair); background: #fff; border-radius: 999px;
  padding: 7px 15px; font-size: 0.88rem; font-weight: 600; color: var(--ink);
  line-height: 1.3; box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.chip:hover { border-color: var(--brass); transform: translateY(-1px); }

/* Budgeting compact top: intro+photo | factor chips */
.bgt-top { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(2rem, 4vw, 3.6rem); align-items: stretch; }
.bgt-intro > p { color: #4b574f; margin-top: 0.9rem; line-height: 1.7; max-width: none; }
.bgt-img { position: relative; align-self: stretch; min-height: 280px; border-radius: var(--radius-img); overflow: hidden; box-shadow: var(--shadow-md); }
.bgt-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bgt-top.reverse { grid-template-columns: 0.88fr 1.12fr; }
.bgt-top.reverse > .bgt-intro { order: 2; }
.bgt-top.reverse > .bgt-img { order: 1; }
@media (max-width: 900px) { .bgt-img { min-height: 320px; } }

@media (max-width: 900px) {
  .tl-head, .bgt-top { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .tl-rail { border-top: 0; padding-top: 0; grid-template-columns: 1fr; gap: 1.3rem; }
  .tl-stop { border-left: 2px solid var(--hair); padding-left: 1.1rem; }
  .tl-stop::before { display: none; }
  .bstep-rail, .loc-body .bstep-rail { grid-template-columns: 1fr; gap: 0; margin-top: 2rem; }
  .bstep-rail::before { top: 8px; bottom: 8px; left: 16px; right: auto; width: 2px; height: auto; }
  .rs { padding: 0 0 1.5rem 3.2rem; }
  .rs:last-child { padding-bottom: 0; }
}

/* ============================================================
   Kitchen page feature sections — "builder's spec sheet"
   Numbered schedule + island/peninsula comparative spread.
   ============================================================ */

/* ---- 1. Complete Kitchen Remodeling: the schedule ---- */
.ks-sched { position: relative; overflow: hidden; }
.ks-sched .container { position: relative; }

.ks-sched-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}
.ks-sched-head h2 { margin: 0.9rem 0 0; }
.ks-sched-lede {
  margin: 1.1rem 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.85vw, 1.42rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 30ch;
  text-wrap: balance;
}
/* photo breaks the grid: taller than its cell, lifted, hard brass edge */
.ks-photo {
  position: relative;
  margin: 0 0 clamp(-4rem, -5vw, -2.5rem);
  align-self: end;
}
.ks-photo img {
  display: block; width: 100%;
  aspect-ratio: 5 / 4; object-fit: cover;
  border-radius: var(--radius-img);
  box-shadow: var(--shadow-lg);
}
.ks-photo img { position: relative; z-index: 1; }
.ks-photo::after {
  content: ""; position: absolute; inset: auto -16px -16px auto;
  width: 58%; height: 58%;
  border-right: 2px solid var(--brass);
  border-bottom: 2px solid var(--brass);
  border-radius: 0 0 var(--radius-img) 0;
  z-index: 0;
}

/* measured rule that introduces the schedule */
.ks-rule {
  display: flex; align-items: center; gap: 1.1rem;
  margin: clamp(3.2rem, 6vw, 4.6rem) 0 1.6rem;
}
.ks-rule span {
  font-family: var(--font-body); font-weight: 800;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--forest); white-space: nowrap;
}
.ks-rule::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to right, var(--brass), var(--hair));
}

/* the schedule itself: numbered rows with dot leaders */
.ks-list {
  counter-reset: ks;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(1.8rem, 3.5vw, 3.4rem);
  margin: 0;
}
.ks-list li {
  counter-increment: ks;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: baseline;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--hair);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.25s ease;
}
.ks-list.fade-in-up { opacity: 1; transform: none; }
.ks-list.visible li { opacity: 1; transform: none; }
.ks-list.visible li:nth-child(1) { transition-delay: 0.03s; }
.ks-list.visible li:nth-child(2) { transition-delay: 0.06s; }
.ks-list.visible li:nth-child(3) { transition-delay: 0.09s; }
.ks-list.visible li:nth-child(4) { transition-delay: 0.12s; }
.ks-list.visible li:nth-child(5) { transition-delay: 0.15s; }
.ks-list.visible li:nth-child(6) { transition-delay: 0.18s; }
.ks-list.visible li:nth-child(7) { transition-delay: 0.21s; }
.ks-list.visible li:nth-child(8) { transition-delay: 0.24s; }
.ks-list.visible li:nth-child(9) { transition-delay: 0.27s; }
.ks-list.visible li:nth-child(10) { transition-delay: 0.30s; }
.ks-list.visible li:nth-child(11) { transition-delay: 0.33s; }
.ks-list.visible li:nth-child(12) { transition-delay: 0.36s; }
.ks-list.visible li:nth-child(13) { transition-delay: 0.39s; }
.ks-list.visible li:nth-child(14) { transition-delay: 0.42s; }
.ks-list.visible li:nth-child(15) { transition-delay: 0.45s; }
.ks-list.visible li:nth-child(16) { transition-delay: 0.48s; }
.ks-list.visible li:nth-child(17) { transition-delay: 0.51s; }
.ks-list.visible li:nth-child(18) { transition-delay: 0.54s; }
.ks-list li::before {
  content: counter(ks, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.92rem; color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.ks-list li span {
  font-size: 0.94rem; font-weight: 600; color: var(--ink); line-height: 1.4;
}
.ks-list li:hover { border-bottom-color: var(--brass); }

.ks-sched-note {
  margin: clamp(2.2rem, 4vw, 3rem) 0 0;
  padding-left: 1.3rem;
  border-left: 2px solid var(--brass);
  max-width: 62ch;
  color: #4b574f; line-height: 1.75;
}

/* ---- 2. Kitchen Islands and Peninsulas: comparative spread ---- */
.ks-compare .ed-head { margin-bottom: clamp(2.2rem, 4vw, 3rem); }
.ks-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
}
.ks-panel {
  border-radius: 18px;
  padding: clamp(1.9rem, 3.4vw, 2.9rem);
  display: flex; flex-direction: column;
}
.ks-panel-label {
  font-family: var(--font-body); font-weight: 800;
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.ks-panel h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15;
  margin: 0 0 1.2rem;
}

/* dark panel = the island */
.ks-panel-dark {
  background: linear-gradient(155deg, var(--forest-deep), #10391f 70%, var(--forest));
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.ks-panel-dark .ks-panel-label { color: var(--brass-light); }
.ks-panel-dark h3, .ks-panel-dark .list-lead { color: #fff; }
.ks-panel-dark .list-lead { font-size: 0.95rem; margin-bottom: 0.9rem; }
.ks-benefits { list-style: none; margin: 0 0 1.5rem; display: grid; gap: 0; }
.ks-benefits li {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.93);
  font-size: 0.95rem; font-weight: 600;
}
.ks-benefits li::before {
  content: ""; width: 14px; height: 1px; background: var(--brass-light); flex: 0 0 auto;
}
.ks-proof {
  margin: auto 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.94rem; line-height: 1.7;
}

/* paper panel = the peninsula */
.ks-panel-paper {
  background: var(--color-bg-warm);
  border: 1px solid var(--hair);
}
.ks-panel-paper .ks-panel-label { color: var(--forest); }
.ks-panel-paper p { color: #4b574f; line-height: 1.75; margin: 0 0 1rem; }
.ks-panel-paper p:last-child { margin-bottom: 0; }
.ks-panel-photo {
  position: relative; margin-top: 1.2rem; flex: 1 1 auto; min-height: 0;
  border-radius: var(--radius-img); overflow: hidden; box-shadow: var(--shadow-md);
}
.ks-panel-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 980px) { .ks-panel-photo { min-height: 240px; flex: none; height: 240px; } }

/* the pivot marker between panels */
.ks-or {
  align-self: center;
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: #fff; border: 1px solid var(--hair);
  box-shadow: var(--shadow-md);
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.95rem; color: var(--brass);
  position: relative; z-index: 2;
}

@media (max-width: 980px) {
  .ks-sched-head { grid-template-columns: 1fr; }
  .ks-photo { margin-bottom: 0; order: -1; }
  .ks-list { grid-template-columns: repeat(2, 1fr); }
  .ks-vs { grid-template-columns: 1fr; }
  .ks-or { justify-self: center; margin: -0.4rem 0; }
}
@media (max-width: 620px) {
  .ks-list { grid-template-columns: 1fr; }
  .ks-rule { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
  .ks-rule span { white-space: normal; }
  .ks-rule::after { width: 100%; flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-list li { opacity: 1; transform: none; }
}

/* Hover preview: image column that swaps with the hovered list item */
.hover-preview { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(2rem, 4vw, 3.4rem); align-items: stretch; margin-top: 2rem; }
.hp-media {
  position: relative; align-self: stretch; min-height: 340px;
  border-radius: var(--radius-img); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--color-bg-alt);
}
.hp-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.05);
  transition: opacity 0.55s ease, transform 0.9s ease;
}
.hp-media img.active { opacity: 1; transform: scale(1); }
.hp-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(8,38,15,0.45));
}
.hover-preview .svc-mini-grid { grid-template-columns: 1fr; margin-top: 0; display: flex; flex-direction: column; justify-content: space-between; }
/* 20px side inset so the number and the arrow sit clear of the row edges, and
   the 4px arrow slide on hover/active stays inside the row instead of
   overhanging it. Hairline rules keep their full width. */
.hover-preview .svc-mini { padding: 1.15rem 1.25rem; }
.hover-preview .svc-mini .svc-mini-name { font-size: 1.04rem; }
.hover-preview .svc-mini::before { font-size: 1.12rem; }
.hover-preview .svc-mini:last-child { border-bottom: 1px solid var(--hair); }
.hover-preview .svc-mini.active { border-top-color: var(--brass); }
.hover-preview .svc-mini.active .svc-mini-name { color: var(--forest); }
.hover-preview .svc-mini.active .svc-mini-arrow { transform: translateX(4px); }
.svc-mini-arrow { transition: transform 0.25s ease; }
@media (max-width: 900px) {
  .hover-preview { grid-template-columns: 1fr; }
  .hp-media { min-height: 300px; }
}

/* Editorial mosaic: staggered photo grid beside a two-column text block */
.ed-mosaic-wrap { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(2.2rem, 4.5vw, 4rem); align-items: start; }
.ed-mosaic { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; align-items: start; }
.ed-mosaic figure { margin: 0; border-radius: var(--radius-img); overflow: hidden; box-shadow: var(--shadow-md); }
.ed-mosaic figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ed-mosaic .em-1 { grid-column: 1 / 6;  margin-top: clamp(2.5rem, 5vw, 4.2rem); aspect-ratio: 4/3; }
.ed-mosaic .em-2 { grid-column: 6 / 13; aspect-ratio: 4/3; }
.ed-mosaic .em-3 { grid-column: 1 / 8;  aspect-ratio: 16/10; }
.ed-mosaic .em-4 { grid-column: 8 / 13; aspect-ratio: 3/4; margin-top: clamp(-3.5rem, -4vw, -2rem); }

.ed-mosaic-text h2 { margin: 0 0 1.6rem; }
.ed-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 2.6vw, 2.4rem); }
.ed-cols > div { padding-top: 1.2rem; border-top: 2px solid var(--brass); }
.ed-cols p { color: #4b574f; line-height: 1.75; margin: 0 0 1rem; max-width: none; }
.ed-cols p:last-child { margin-bottom: 0; }

@media (max-width: 1000px) {
  .ed-mosaic-wrap { grid-template-columns: 1fr; }
  .ed-mosaic-text { order: -1; }
}
@media (max-width: 620px) {
  .ed-cols { grid-template-columns: 1fr; }
  .ed-mosaic .em-1 { margin-top: 0; }
  .ed-mosaic .em-4 { margin-top: 0; }
}

/* ============================================================
   Sticky services scroller: one pinned image column, content
   blocks scroll beside it and swap the photo on entry.
   ============================================================ */
.svc-scroll { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(2.4rem, 5vw, 4.5rem); align-items: start; }

.svc-scroll-media {
  position: sticky; top: 104px;
  aspect-ratio: 4/5; border-radius: var(--radius-img);
  overflow: hidden; box-shadow: var(--shadow-lg); background: var(--color-bg-alt);
}
.svc-scroll-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: translateY(34px) scale(1.04);
  transition: opacity 0.55s ease, transform 0.85s cubic-bezier(0.22, 0.72, 0.2, 1);
  will-change: opacity, transform;
}
/* entering: flies up into place */
.svc-scroll-media img.active { opacity: 1; transform: translateY(0) scale(1); }
/* leaving: fades out where it stands, so the incoming one has room to fly in */
.svc-scroll-media img.leaving {
  opacity: 0; transform: translateY(0) scale(1.015);
  transition: opacity 0.4s ease, transform 0.7s ease;
}
@media (prefers-reduced-motion: reduce) {
  .svc-scroll-media img { transform: none; transition: opacity 0.25s ease; }
  .svc-scroll-media img.active { transform: none; }
  .svc-scroll-media img.leaving { transform: none; }
}
.svc-scroll-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(8,38,15,0.42));
}
/* running counter, bottom-left of the pinned photo */
.svc-scroll-count {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  padding: 1.2rem 1.5rem; color: #fff;
  font-family: var(--font-display); font-weight: 500; font-size: 1.05rem;
  letter-spacing: 0.04em;
}
.svc-scroll-count b { font-weight: 500; }
.svc-scroll-count span { opacity: 0.6; font-size: 0.86em; }

.svc-scroll-blocks > .svc-block { padding: clamp(2.6rem, 5vw, 4rem) 0; border-top: 1px solid var(--hair); }
.svc-scroll-blocks > .svc-block:first-child { padding-top: 0; border-top: 0; }
.svc-scroll-blocks > .svc-block:last-child { padding-bottom: 0; }
.svc-block .ed-title { margin-top: 0.75rem; }
.svc-block > p { color: #4b574f; line-height: 1.75; max-width: none; }
.svc-block > p + p { margin-top: 0.9rem; }
.svc-block .list-lead { margin-top: 1.3rem; }
/* the block being read gets a brass marker */
.svc-block { position: relative; transition: opacity 0.4s ease; }
.svc-block::before {
  content: ''; position: absolute; left: -1.5rem; top: clamp(2.6rem, 5vw, 4rem); width: 3px; height: 0;
  background: var(--brass); transition: height 0.5s ease;
}
.svc-block:first-child::before { top: 0; }
.svc-block.active::before { height: 2.2rem; }

/* inline per-block photo: hidden while the pinned column is in use */
.svc-block-photo { display: none; }

@media (max-width: 980px) {
  .svc-scroll { grid-template-columns: 1fr; gap: 0; }
  .svc-scroll-media { display: none; }
  .svc-scroll-blocks > .svc-block { padding: clamp(2.2rem, 5vw, 3rem) 0; }
  .svc-block::before { display: none; }
  /* each block carries its own inline photo once stacked */
  .svc-block-photo { display: block; margin: 1.5rem 0 0; border-radius: var(--radius-img); overflow: hidden; box-shadow: var(--shadow-md); }
  .svc-block-photo img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
}

/* ============================================================
   HOME ADDITIONS page — editorial long-content components
   (small extensions to the existing vocabulary; safe site-wide)
   ============================================================ */

/* Generic body paragraph inside a full-width section (no .loc-body wrapper) */
.ha-p {
  color: #4b574f;
  font-size: 1.03rem;
  line-height: 1.75;
  margin: 0 0 1.15rem;
  max-width: 78ch;
}
.ha-p:last-child { margin-bottom: 0; }

/* Long list lead: sentence-case, for leads too long to set in all caps */
.list-lead-lg {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 72ch;
  margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 1.2rem;
}

/* Consistent gap for a block that follows a split row / list */
.ha-after { margin-top: clamp(2.4rem, 5vw, 3.6rem); margin-bottom: 0; }

/* 3-up variant of the numbered hairline rule grid */
.rule-grid.cols-3 { grid-template-columns: repeat(3, 1fr); gap: 0 clamp(1.8rem, 3.5vw, 3rem); }
@media (max-width: 900px) { .rule-grid.cols-3 { grid-template-columns: 1fr; } }

/* Section head: kicker + title + serif lede inside .tl-head / .ed-head / mosaic */
.tl-head .ed-title { margin-top: 0.9rem; }
.tl-head .led-statement { margin: 1.2rem 0 0; }
.tl-head .led-statement + .ha-p { margin-top: 1.1rem; }
.ed-mosaic-text .ed-kicker + .ed-title { margin: 0.9rem 0 1.1rem; }
.ed-mosaic-text .led-statement { margin-bottom: 1.8rem; }
.ha-head-lede { margin: 1.2rem 0 0; }
.bgt-intro .ed-title { margin-top: 0.9rem; }
.bgt-intro .led-statement { margin: 1.1rem 0 0; }
.bgt-intro .list-lead { margin-top: 1.4rem; }
.loc-row-text .ed-kicker + .ed-title { margin-top: 0.9rem; }
.loc-row-text .led-statement { margin-bottom: 1.1rem; }

/* Inline statistic emphasis (keeps the sentence verbatim, lifts the number) */
.stat-hl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2em;
  color: var(--brass);
  letter-spacing: -0.01em;
}
.bg-media .stat-hl { color: var(--brass-light); }
.bg-media .ks-sched-note { border-left-color: var(--brass-light); margin-top: 1.6rem; }

/* Tagged caution callout (white panel, brass rule) */
.ha-callout { margin-top: clamp(2rem, 4vw, 2.8rem); max-width: 880px; }
.ha-callout-tag {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 0.7rem;
}

/* Comparative spread panels: 4-across benefit rows read better than 1 */
.ks-panel-paper .check-cards { margin: 0.4rem 0 1.2rem; }
.ks-panel-dark .ks-benefits li { line-height: 1.4; }

/* Icon detail cards used as a closing three-up under a split row */
.fp-details.ha-after { margin-bottom: 0; }
.fp-details.ha-after .fp-detail p { font-size: 0.96rem; line-height: 1.62; }

/* Craft callouts used as a two-up closing pair */
.craft-callouts.ha-after { margin-top: clamp(2.4rem, 5vw, 3.6rem); }

/* Numbered scenario rows sit full width under a spread */
.scn-rows.ha-after { margin-bottom: 0; }

/* Chip clouds that follow a full-width list lead */
.list-lead + .chip-cloud { margin-top: 0.2rem; }

/* Service hero: keep the lead-form card inside the viewport on small phones */
@media (max-width: 768px) {
  .svc-hero-inner { padding-left: 22px; padding-right: 22px; }
  .svc-hero-left, .svc-hero-form { min-width: 0; width: 100%; }
  .svc-hero-form-card .form-head,
  .svc-hero-form-card form { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* Fix: the reversed budgeting row kept its two columns on small screens
   because .bgt-top.reverse outranked the 900px collapse rule. */
@media (max-width: 900px) {
  .bgt-top.reverse { grid-template-columns: 1fr; }
}

/* Service-area chips sit in a left-aligned column: left-align them too
   (the V1 base centres .area-grid, which reads as accidental here). */
.serving-left .area-grid { justify-content: flex-start; max-width: none; margin: 1.2rem 0 0; }
.serving-left .area-note { text-align: left; }

/* Long hero CTA labels were clipped by the hero's overflow:hidden on phones */
@media (max-width: 560px) {
  .svc-hero-left .btn { white-space: normal; max-width: 100%; text-align: center; }
}

/* ===== WHOLE-HOME PAGE BLOCK ===== */
/* Whole-Home Remodeling service page only. All new selectors are .whr-*;
   the few unprefixed selectors below are scoped to this page's section ids
   so existing components can sit on this page's backgrounds. */

/* ---- 1. Create a Home That Works Better for You: mosaic closing note ---- */
.whr-mosaic-note { margin-top: clamp(1.6rem, 3vw, 2.2rem); }

/* ---- 2. Remodeling Older Homes: owner aside + section statement ---- */
.whr-owner-note {
  margin-top: clamp(2.4rem, 4.5vw, 3.4rem);
  padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.6rem, 3.2vw, 2.4rem);
  background: #fff;
  border: 1px solid var(--hair);
  border-top: 2px solid var(--brass);
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.6rem);
  align-items: start;
}
.whr-owner-label {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--forest);
  line-height: 1.5;
}
.whr-owner-note p {
  margin: 0;
  color: #4b574f;
  font-size: 1.01rem;
  line-height: 1.72;
  max-width: none;
}
.whr-sec-statement { margin-top: clamp(2.2rem, 4vw, 3rem); }
.whr-sec-statement .led-statement { margin: 0; }

/* ---- 3. What Can a Whole-Home Remodel Include? schedule on the green band ---- */
#scope .ed-head { max-width: 940px; }
#scope .whr-rule span { color: var(--brass-light); }
#scope .whr-rule::after { background: linear-gradient(to right, var(--brass-light), rgba(255,255,255,0.18)); }
#scope .whr-scope-list li { border-bottom-color: rgba(255,255,255,0.20); }
#scope .whr-scope-list li span { color: rgba(255,255,255,0.95); font-weight: 600; }
#scope .whr-scope-list li::before { color: var(--brass-light); }
#scope .whr-scope-list li:hover { border-bottom-color: var(--brass-light); }

/* ---- 5. Open Kitchens: photo with an overlapping paper card ---- */
.whr-frame { position: relative; }
.whr-frame-media {
  margin: 0;
  border-radius: var(--radius-img);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.whr-frame-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 62% 52%;
}
.whr-frame-card {
  position: absolute;
  z-index: 2;
  left: clamp(1.4rem, 3vw, 3rem);
  bottom: clamp(1.4rem, 3vw, 3rem);
  width: min(520px, 46%);
  margin: 0;
  background: var(--paper);
  border-radius: 4px;
  border-top: 2px solid var(--brass);
  padding: clamp(1.7rem, 3.2vw, 2.4rem);
  box-shadow: var(--shadow-lg);
}
.whr-frame-card .ed-title {
  font-size: clamp(1.7rem, 2.6vw, 2.15rem);
  margin: 0.85rem 0 1.1rem;
}
.whr-frame-card p {
  margin: 0 0 0.9rem;
  color: #4b574f;
  font-size: 0.99rem;
  line-height: 1.72;
  max-width: none;
}
.whr-frame-card p:last-child { margin-bottom: 0; }
.whr-kitchen-list { margin-top: clamp(2.6rem, 5vw, 3.8rem); }
.whr-kitchen-list .content-list { margin-bottom: 0; }
#kitchens .sec-note { margin-top: clamp(2.2rem, 4vw, 3rem); }

/* ---- 6. Bathroom and Laundry: relocation scenarios ---- */
.whr-relocate {
  max-width: 900px;
  margin: clamp(2.6rem, 5vw, 3.8rem) auto 0;
  text-align: center;
}
.whr-relocate-lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.18rem, 1.9vw, 1.42rem);
  line-height: 1.48;
  color: var(--ink);
  margin: 0 0 1.6rem;
  text-wrap: balance;
}
.whr-relocate .scn-rows { text-align: left; margin-bottom: 1.5rem; }
.whr-relocate-close { margin: 0; color: var(--color-text-muted); }

/* ---- 7. THE CENTREPIECE: A Whole-Home Remodeling Project ---- */
.whr-case {
  position: relative;
  overflow: hidden;
  background: var(--forest-deep);
  isolation: isolate;
}
.whr-case-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(1100px 520px at 76% 12%, rgba(193,154,91,0.16), transparent 62%),
    radial-gradient(900px 620px at 8% 84%, rgba(11,77,44,0.72), transparent 66%);
  pointer-events: none;
}
.whr-case > .container { position: relative; z-index: 1; }
.whr-case-head { max-width: 860px; }
.whr-case .ed-kicker { color: var(--brass-light); }
.whr-case .ed-kicker::before { background: var(--brass-light); }
.whr-case .ed-title { color: #fff; }
.whr-case-lead {
  margin: 1.4rem 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.48;
  color: rgba(255,255,255,0.9);
  max-width: 52ch;
  text-wrap: balance;
}

/* the before / after diptych: two frames that overlap on the seam */
.whr-ba {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  margin-top: clamp(2.6rem, 5vw, 4.2rem);
}
.whr-ba-item {
  margin: 0;
  position: relative;
  border-radius: var(--radius-img);
  overflow: hidden;
}
.whr-ba-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.whr-ba-before {
  grid-column: 1 / 7;
  grid-row: 1;
  margin-top: clamp(2rem, 5vw, 4.4rem);
  box-shadow: 0 18px 44px rgba(0,0,0,0.42);
}
.whr-ba-before img { filter: saturate(0.82) brightness(0.94); }
.whr-ba-after {
  grid-column: 6 / 13;
  grid-row: 1;
  z-index: 2;
  box-shadow: 0 0 0 clamp(6px, 0.85vw, 12px) var(--forest-deep), 0 34px 74px rgba(0,0,0,0.55);
}
.whr-ba-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(12,39,23,0.86);
  color: rgba(255,255,255,0.92);
  backdrop-filter: blur(4px);
}
.whr-ba-tag-after { background: var(--brass); color: #241500; }

/* the change ledger: numbered rows beside a standing photo */
.whr-case-body {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
  gap: clamp(2.2rem, 4.5vw, 4.4rem);
  align-items: start;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.whr-case-ledger { counter-reset: whrlg; }
.whr-lg {
  counter-increment: whrlg;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1rem, 2vw, 1.7rem);
  row-gap: 0.35rem;
  padding: clamp(1.2rem, 2.4vw, 1.7rem) 0;
  border-top: 1px solid rgba(255,255,255,0.16);
}
.whr-lg:last-child { border-bottom: 1px solid rgba(255,255,255,0.16); }
.whr-lg::before {
  content: counter(whrlg, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
  padding-top: 0.1rem;
}
.whr-lg-tag {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-light);
}
.whr-lg p {
  margin: 0;
  color: rgba(255,255,255,0.82);
  font-size: 1rem;
  line-height: 1.72;
  max-width: none;
}
.whr-case-photo {
  position: sticky;
  top: 110px;
  margin: 0;
  border-radius: var(--radius-img);
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(0,0,0,0.5);
}
.whr-case-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.whr-case-photo figcaption {
  padding: 0.85rem 1.1rem;
  background: rgba(255,255,255,0.06);
  border-top: 1px solid rgba(255,255,255,0.14);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-light);
}
.whr-case-close {
  margin-top: clamp(3rem, 5.5vw, 4.4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(255,255,255,0.16);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.4rem, 4vw, 3.4rem);
  align-items: center;
}
.whr-case-close p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.22rem, 2vw, 1.55rem);
  line-height: 1.44;
  color: #fff;
  max-width: 46ch;
  text-wrap: balance;
}
.whr-case-close .btn { white-space: nowrap; }

/* ---- 8. You Do Not Need Completed Plans: two paths ---- */
.whr-paths { margin-top: clamp(1rem, 2vw, 1.6rem); }
.whr-panel-p {
  color: rgba(255,255,255,0.9);
  font-size: 1rem;
  line-height: 1.72;
  margin: 0 0 1.2rem;
  max-width: none;
}
#no-plans .ks-panel-paper .ks-panel-photo { margin-top: 1.4rem; }

/* ---- 9. Detailed and Transparent Budgeting ---- */
.whr-budget-lede { margin: 1.3rem 0 0; max-width: 60ch; }
.whr-budget-head { margin-bottom: clamp(2rem, 3.6vw, 2.8rem); }
.whr-factor-lead { margin-bottom: 0.4rem; }
.whr-factors > div p { font-weight: 600; color: var(--ink); }
.whr-budget-rail { margin-top: clamp(2.8rem, 5vw, 4rem); }

/* ---- 10. Guidance With Materials and Selections ---- */
.whr-payoff { margin-top: clamp(2.6rem, 5vw, 3.8rem); grid-template-columns: 1fr 1.25fr; }
.whr-payoff .fp-payoff-media { order: 2; }
.whr-payoff .fp-payoff-text { order: 1; }
@media (max-width: 860px) {
  .whr-payoff .fp-payoff-media { order: 1; }
  .whr-payoff .fp-payoff-text { order: 2; }
}
.whr-materials-note { margin-top: clamp(2rem, 3.6vw, 2.8rem); }

/* ---- 11. Clear Communication During Construction ---- */
.whr-comm-lede {
  margin: 1.3rem auto 0;
  max-width: 58ch;
  text-align: center;
}
.whr-comm { max-width: 1140px; margin-inline: auto; }
.whr-comm .fp-detail { border-top: 2px solid var(--brass); border-radius: 4px; padding: 1.5rem 1.5rem 1.6rem; }
.whr-comm .fp-detail p { font-size: 0.98rem; line-height: 1.68; }

/* ---- 1 (fix): single-measure prose beside the mosaic ---- */
#create-home .ed-mosaic-wrap { align-items: center; grid-template-columns: 1.12fr 0.88fr; }
@media (max-width: 1080px) { #create-home .ed-mosaic-wrap { grid-template-columns: 1fr; } }

/* ---- 6 (fix): the bathroom photo column tracks the text height ---- */
#bathrooms .loc-media-stack { min-height: 0; height: 100%; grid-template-rows: 1fr 1fr; }
#bathrooms .loc-media-stack .ba-figure { position: relative; min-height: 0; }
#bathrooms .loc-media-stack .ba-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1024px) {
  #bathrooms .loc-media-stack { height: auto; }
  #bathrooms .loc-media-stack .ba-figure { aspect-ratio: 3 / 2; }
  #bathrooms .loc-media-stack .ba-figure img { height: 100%; }
}

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .whr-case-body { grid-template-columns: 1fr; }
  .whr-case-photo { position: static; }
  .whr-case-photo img { aspect-ratio: 16 / 10; }
}
@media (max-width: 900px) {
  .whr-owner-note { grid-template-columns: 1fr; gap: 0.7rem; }
  .whr-case-close { grid-template-columns: 1fr; align-items: start; }
  .whr-case-close .btn { justify-self: start; }
}
@media (max-width: 760px) {
  .whr-ba { grid-template-columns: 1fr; gap: 14px; }
  .whr-ba-before, .whr-ba-after { grid-column: 1 / -1; }
  .whr-ba-before { grid-row: 1; margin-top: 0; }
  .whr-ba-after { grid-row: 2; box-shadow: 0 20px 44px rgba(0,0,0,0.5); }
  .whr-frame-media img { aspect-ratio: 3 / 2; }
  .whr-frame-card { position: relative; left: auto; bottom: auto; width: 100%; margin: -2.2rem 0 0; }
}
@media (max-width: 560px) {
  .whr-frame-card { margin-top: -1.4rem; }
  .whr-relocate-lead { font-size: 1.14rem; }
}

/* ---- 12. OPENER REDESIGN: Create a Home That Works Better for You ----
   The first content section now runs as an editorial arc rather than a
   prose column: opening plate (mosaic + title), a survey of what older
   floor plans left behind, the turn, then how the work gets sized.
   Scoped to #create-home / .whr-open. */

/* the opening plate: the words stay short so the mosaic can breathe */
#create-home .ed-mosaic-wrap.whr-open {
  align-items: center;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(2.2rem, 4.5vw, 4.4rem);
}
.whr-open .ed-mosaic-text { max-width: 34rem; }
.whr-open .led-statement { margin-bottom: 1.9rem; }
.whr-open-setup {
  margin: 0;
  padding-top: 1.3rem;
  border-top: 2px solid var(--brass);
  color: #4b574f;
  font-size: 1.01rem;
  line-height: 1.75;
  max-width: none;
}

/* the survey: three paper plates carrying outlined brass numerals */
.whr-survey {
  list-style: none;
  margin: clamp(2.6rem, 5vw, 4rem) 0 0;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--paper);
  border: 1px solid var(--hair);
  border-top: 2px solid var(--brass);
  border-radius: 4px;
  counter-reset: whrsv;
}
.whr-survey li {
  counter-increment: whrsv;
  min-width: 0;
  padding: 0 clamp(1.5rem, 2.8vw, 2.4rem);
  border-left: 1px solid var(--hair);
}
.whr-survey li:first-child { border-left: 0; }
.whr-survey li::before {
  content: counter(whrsv, decimal-leading-zero);
  display: block;
  margin-bottom: clamp(0.75rem, 1.5vw, 1.05rem);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 3.8vw, 3.3rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(193, 154, 91, 0.78);
  font-variant-numeric: tabular-nums;
}
.whr-survey li p {
  margin: 0;
  max-width: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.04rem, 1.35vw, 1.2rem);
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}

/* the turn: the thesis, then the range the work can run to */
.whr-turn {
  margin-top: clamp(2.8rem, 5vw, 4.2rem);
  padding-top: clamp(2rem, 3.8vw, 3rem);
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: start;
}
.whr-turn-lead {
  margin: 0;
  max-width: 28ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.28rem, 2vw, 1.66rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.whr-turn-intro {
  margin: 0;
  max-width: none;
  color: #4b574f;
  font-size: 1.01rem;
  line-height: 1.75;
}
.whr-scale {
  margin-top: clamp(1.5rem, 2.8vw, 2.1rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
}
.whr-scale-item {
  position: relative;
  min-width: 0;
  padding-top: 1.15rem;
}
.whr-scale-item::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  border-radius: 2px;
}
.whr-scale-item:first-child::before {
  background: linear-gradient(to right, var(--brass), rgba(193, 154, 91, 0.28));
}
.whr-scale-item:last-child::before {
  background: linear-gradient(to right, rgba(193, 154, 91, 0.6), var(--forest));
}
.whr-scale-item p {
  margin: 0;
  max-width: none;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink);
}
.whr-scale-item:last-child p { color: var(--forest); }
#create-home .ks-sched-note.whr-mosaic-note {
  margin-top: clamp(1.6rem, 3vw, 2.3rem);
  max-width: none;
}

/* ---- 12 responsive ---- */
@media (max-width: 1080px) {
  #create-home .ed-mosaic-wrap.whr-open { grid-template-columns: 1fr; }
  .whr-open .ed-mosaic-text { order: -1; max-width: none; }
  .whr-turn { grid-template-columns: 1fr; gap: 1.6rem; }
  .whr-turn-lead { max-width: 44ch; }
}
@media (max-width: 620px) {
  /* the shared mosaic drifts apart at phone width: square it up here only */
  .whr-open .ed-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .whr-open .ed-mosaic .em-1,
  .whr-open .ed-mosaic .em-2,
  .whr-open .ed-mosaic .em-3,
  .whr-open .ed-mosaic .em-4 {
    grid-column: auto;
    margin-top: 0;
    aspect-ratio: 4 / 3;
  }
  .whr-turn-lead { font-size: 1.2rem; }
}
@media (max-width: 900px) {
  .whr-survey { grid-template-columns: 1fr; padding: 0; }
  .whr-survey li {
    padding: clamp(1.3rem, 4vw, 1.7rem) clamp(1.3rem, 5vw, 1.8rem);
    border-left: 0;
    border-top: 1px solid var(--hair);
  }
  .whr-survey li:first-child { border-top: 0; }
  .whr-survey li::before { font-size: 2.1rem; margin-bottom: 0.6rem; }
  .whr-scale { grid-template-columns: 1fr; gap: 1.3rem; }
}

/* ============================================================
   KITCHEN PAGE BLOCK - kitchen-remodeling service page.
   Devices added to break the split-row metronome: two-column
   section head, cinematic banner, appliance spec grid, on-dark
   reveal grid, case-study photo pair, typographic agenda.
   ============================================================ */
/* Two-column section head: title block left, serif lead line right.
   Replaces the "h2 sitting on top of a split row" habit. */
.ktc-head-split {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(1.4rem, 4vw, 3.6rem);
  align-items: end;
  margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
}
.ktc-head-split .ed-title { margin-top: 0.9rem; }
.ktc-head-split > p.led-statement { margin: 0; padding-bottom: 0.3rem; }
@media (max-width: 860px) {
  .ktc-head-split { grid-template-columns: 1fr; gap: 1.1rem; align-items: start; }
  .ktc-head-split > p.led-statement { padding-bottom: 0; }
}

/* Cinematic full-width banner photo (used once, for the opened-up room) */
.ktc-banner {
  position: relative;
  margin: 0 0 clamp(2.2rem, 4vw, 3.2rem);
  aspect-ratio: 2 / 1;
  border-radius: var(--radius-img);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-bg-alt);
}
.ktc-banner img,
.ktc-banner video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
  display: block;
}
/* The banner frame is 2:1 and the walkthrough clip is 16:9, so the video is
   cropped to the frame rather than letterboxed. Honour a reduced-motion
   preference by holding the poster frame instead of looping. */
/* No caption sits on the video banner, so the scrim that existed to keep
   caption text legible is dropped here. */
.ktc-banner:has(video)::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  .ktc-banner video { display: none; }
  .ktc-banner:has(video) {
    background-image: var(--ktc-banner-poster);
    background-size: cover;
    background-position: center 55%;
  }
}
.ktc-banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,38,15,0.26) 0%, transparent 32%, transparent 60%, rgba(8,38,15,0.5) 100%);
}
.ktc-banner-tag {
  position: absolute; z-index: 2;
  left: clamp(1.1rem, 2.4vw, 1.8rem);
  bottom: clamp(0.9rem, 2.2vw, 1.4rem);
  font-family: var(--font-body); font-weight: 800;
  font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: #fff;
}
.ktc-banner-tag::before {
  content: ''; display: inline-block;
  width: 26px; height: 1px; background: var(--brass-light);
  margin-right: 0.7rem; vertical-align: middle;
}
@media (max-width: 720px) { .ktc-banner { aspect-ratio: 16 / 10; } }

/* Closing serif line beneath a two-column text body */
.ktc-close-line {
  margin: clamp(1.4rem, 2.6vw, 1.9rem) 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hair);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.06rem, 1.6vw, 1.24rem); line-height: 1.5;
  color: var(--ink); max-width: none;
}

/* Centred lead line under a centred section head */
.ktc-center-lede { max-width: 48ch; margin: 1.2rem auto 0; }
.ktc-lead-center { text-align: center; max-width: none; margin: 0 0 1.5rem; }
.ktc-plan .ed-head.center { margin-bottom: clamp(1.9rem, 3.5vw, 2.6rem); }

/* Appliance spec grid: line icon + label on hairline rows, three across */
.ktc-spec {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(1.6rem, 3.4vw, 3rem);
}
.ktc-spec > div {
  display: flex; align-items: center; gap: 0.9rem;
  border-top: 1px solid var(--hair);
  padding: 1.05rem 0;
  transition: border-color 0.2s ease;
}
.ktc-spec > div:hover { border-top-color: var(--brass); }
.ktc-spec svg { width: 26px; height: 26px; color: var(--brass); flex: 0 0 auto; }
.ktc-spec span { font-weight: 600; font-size: 0.98rem; line-height: 1.35; color: var(--ink); }
@media (min-width: 861px) {
  .ktc-spec > div:nth-last-child(-n+3) { border-bottom: 1px solid var(--hair); }
}
@media (max-width: 860px) { .ktc-spec { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ktc-spec { grid-template-columns: 1fr; } }

/* Numbered reveal grid, sits on the dark full-bleed band */
.ktc-reveal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 clamp(1.2rem, 2.6vw, 2.2rem);
  counter-reset: kr;
}
.ktc-reveal > div {
  counter-increment: kr;
  display: flex; align-items: baseline; gap: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.24);
  padding: 0.95rem 0;
}
.ktc-reveal > div::before {
  content: "0" counter(kr);
  font-family: var(--font-display); font-weight: 500; font-size: 1rem;
  color: var(--brass-light); flex: 0 0 auto;
}
.ktc-reveal span { color: rgba(255,255,255,0.94); font-weight: 600; font-size: 0.97rem; line-height: 1.4; }
@media (max-width: 900px) { .ktc-reveal { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ktc-reveal { grid-template-columns: 1fr; } }

/* Emphasised note line on the dark band */
.ktc-band-note {
  margin: clamp(2rem, 4vw, 2.8rem) 0 clamp(1.9rem, 3.5vw, 2.5rem);
  padding-left: clamp(1rem, 2vw, 1.4rem);
  border-left: 3px solid var(--brass-light);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.14rem, 1.8vw, 1.36rem); line-height: 1.45;
  color: #fff; max-width: 46ch;
}
/* on-dark corrections for shared components reused inside .bg-media */
.bg-media .ed-cols p { color: rgba(255,255,255,0.88); }
.bg-media .ed-cols > div { border-top-color: var(--brass-light); }

/* Case study: photo pair with corner tags, above the ledger */
.ktc-case .ed-head.center { margin-bottom: 0; }
.ktc-case-media {
  display: grid;
  grid-template-columns: 1.16fr 0.84fr;
  gap: 16px;
  margin-top: clamp(2.1rem, 4vw, 3rem);
}
.ktc-case-media figure {
  position: relative; margin: 0;
  border-radius: var(--radius-img); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--color-bg-alt);
}
.ktc-case-media figure:first-child { aspect-ratio: 16 / 10; }
.ktc-case-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ktc-case-media figure::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 56%, rgba(8,38,15,0.55));
}
.ktc-photo-tag {
  position: absolute; z-index: 2; left: 1.15rem; bottom: 1rem;
  font-family: var(--font-body); font-weight: 800;
  font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: #fff;
}
.ktc-case .ledger { margin-top: clamp(2.4rem, 4.5vw, 3.2rem); }
@media (max-width: 700px) {
  .ktc-case-media { grid-template-columns: 1fr; }
  .ktc-case-media figure, .ktc-case-media figure:first-child { aspect-ratio: 4 / 3; }
}

/* Planning agenda: editorial aside beside numbered serif topics */
.ktc-agenda {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(2rem, 5vw, 4.6rem);
  align-items: start;
}
.ktc-agenda-aside .ed-title { margin-top: 0.9rem; }
.ktc-agenda-aside .led-statement { margin: 1.25rem 0 1.1rem; }
.ktc-agenda-aside .ha-p { margin-bottom: 0; }
.ktc-agenda-main .list-lead { margin-top: 0.3rem; }
.ktc-agenda-list { counter-reset: ag; }
.ktc-agenda-list > div {
  counter-increment: ag;
  display: flex; align-items: baseline; gap: clamp(0.9rem, 2vw, 1.4rem);
  border-top: 1px solid var(--hair);
  padding: 0.95rem 0;
  transition: border-color 0.2s ease;
}
.ktc-agenda-list > div:last-child { border-bottom: 1px solid var(--hair); }
.ktc-agenda-list > div:hover { border-top-color: var(--brass); }
.ktc-agenda-list > div::before {
  content: "0" counter(ag);
  font-family: var(--font-display); font-weight: 500; font-size: 1.02rem;
  color: var(--brass); flex: 0 0 auto;
}
.ktc-agenda-q {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.02rem, 1.45vw, 1.2rem); line-height: 1.4;
  color: var(--ink);
}
@media (max-width: 900px) { .ktc-agenda { grid-template-columns: 1fr; gap: 1.9rem; } }

/* Finishes mosaic: taller zigzag column so the photos balance the
   two-column text beside them (the stock .ed-mosaic ran too short here). */
@media (min-width: 1001px) { .ktc-finishes { grid-template-columns: 0.96fr 1.04fr; } }
.ktc-finishes .ed-mosaic .em-1 { grid-column: 1 / 10; margin-top: 0; aspect-ratio: 4 / 3; }
.ktc-finishes .ed-mosaic .em-2 { grid-column: 4 / 13; aspect-ratio: 16 / 11; }
.ktc-finishes .ed-mosaic .em-3 { grid-column: 1 / 8;  aspect-ratio: 4 / 3; }
.ktc-finishes .ed-mosaic .em-4 { grid-column: 8 / 13; aspect-ratio: 3 / 4; margin-top: 0; }
@media (max-width: 720px) {
  .ktc-finishes .ed-mosaic .em-1 { grid-column: 1 / 11; }
  .ktc-finishes .ed-mosaic .em-2 { grid-column: 3 / 13; }
  .ktc-finishes .ed-mosaic .em-3 { grid-column: 1 / 10; }
  .ktc-finishes .ed-mosaic .em-4 { grid-column: 4 / 13; }
}

/* Kitchen page only: put the schedule photo on the left so the page's
   split images keep alternating around the full-bleed banner below. */
.ktc-sched .ks-sched-head { direction: rtl; }
.ktc-sched .ks-sched-head > * { direction: ltr; }
/* Grid blowout guard: 1fr tracks floor at the photo's intrinsic width
   on narrow screens without an explicit minimum. */
.ktc-finishes .ed-mosaic { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ktc-finishes .ed-mosaic figure { min-width: 0; }
/* mirror the rest of the schedule composition to match the flipped photo:
   brass corner accent to the bottom-left, measured rule label to the right */
.ktc-sched .ks-photo::after {
  inset: auto auto -16px -16px;
  border-right: 0;
  border-left: 2px solid var(--brass);
  border-radius: 0 0 0 var(--radius-img);
}
.ktc-sched .ks-rule::after { order: -1; background: linear-gradient(to left, var(--brass), var(--hair)); }


/* ---- 13. FIXES ---- */
/* em-4's negative pull lifted it into em-2's row: 247x42px of overlap */
#create-home .ed-mosaic .em-4 { margin-top: 0; }
/* the paper panel's photo was collapsing to ~85px against a long text column */
#no-plans .ks-panel-paper .ks-panel-photo {
  flex: 0 0 auto;
  aspect-ratio: 16 / 10;
  min-height: 220px;
}
/* below 980px .ks-panel-photo gets a fixed height; an aspect-ratio there
   resolves into a definite WIDTH and blows the .ks-vs track past the viewport */
@media (max-width: 980px) {
  #no-plans .ks-panel-paper .ks-panel-photo { aspect-ratio: auto; height: 240px; min-height: 240px; }
}

/* ===== CUSTOM-HOMES PAGE BLOCK ===== */
/* CUSTOM-HOMES service page only. Every new selector is .chm-*; the few
   unprefixed rules are scoped to this page's section ids so shared
   components can sit on this page's grounds.
   Devices added to break the split-row metronome: an opening cinematic
   banner, a numbered starting-points grid, a 3x3 serif question plate,
   a builder's scope index, a kitchen mosaic, and the page's signature:
   a full-bleed "blueprint paper" chapter for the waterfront project. */

/* ---- 1. Opening banner sits under the editorial split, not above it ---- */
.chm-open-banner { margin: clamp(2.6rem, 5vw, 4rem) 0 0; aspect-ratio: 2.4 / 1; }
@media (max-width: 720px) { .chm-open-banner { aspect-ratio: 16 / 10; } }
/* Remodel walkthrough video on the whole-home remodeling page. Kept at the
   clip's own 16:9 so the walkthrough is not cropped at any width. */
.whr-walk-banner { margin: clamp(2.4rem, 4.5vw, 3.6rem) 0 clamp(2.2rem, 4vw, 3.2rem); aspect-ratio: 16 / 9; }

/* ---- 2. You Do Not Need Completed Plans: numbered starting points ---- */
.chm-starts-wrap { margin-top: clamp(2.6rem, 5vw, 3.8rem); }
.chm-starts-wrap .list-lead { margin-bottom: 0.3rem; }
.chm-starts {
  list-style: none;
  margin: 0;
  counter-reset: cs;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(1.2rem, 2.6vw, 2.4rem);
}
.chm-starts li {
  counter-increment: cs;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: baseline;
  border-top: 1px solid var(--hair);
  padding: 0.95rem 0 1rem;
  transition: border-color 0.2s ease;
}
.chm-starts li:hover { border-top-color: var(--brass); }
.chm-starts li::before {
  content: counter(cs, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.92rem; color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.chm-starts span { font-weight: 600; font-size: 0.97rem; line-height: 1.42; color: var(--ink); }
.chm-narrow { max-width: 1000px; margin: clamp(2.4rem, 4.5vw, 3.4rem) auto 0; }
.chm-narrow .scn-rows { margin-bottom: 0; }

/* ---- 3 + 10. Two-column section head with a secondary line ---- */
.chm-head-split > div:last-child { padding-bottom: 0.25rem; }
.chm-head-split .led-statement { margin: 0; }
.chm-head-sub {
  margin: 0.9rem 0 0;
  color: #4b574f;
  font-size: 1.02rem;
  line-height: 1.72;
  max-width: 54ch;
}

/* ---- 3. Photo pair + the nine planning questions as a serif plate ---- */
.chm-pair {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(2.6rem, 4.5vw, 3.6rem);
}
.chm-pair figure {
  position: relative; margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-img); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--color-bg-alt);
}
.chm-pair figure:first-child { grid-column: 1 / 8; }
.chm-pair figure:last-child  { grid-column: 8 / 13; margin-top: clamp(2rem, 4.5vw, 3.6rem); }
.chm-pair img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.chm-pair figure::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 56%, rgba(8,38,15,0.55));
}
.chm-q-lead { margin-bottom: 0.35rem; }
.chm-questions {
  list-style: none; margin: 0;
  counter-reset: cq;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(1.6rem, 3.4vw, 3rem);
}
.chm-questions li {
  counter-increment: cq;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: baseline;
  border-top: 1px solid var(--hair);
  padding: 1.05rem 0 1.15rem;
  transition: border-color 0.2s ease;
}
.chm-questions li:hover { border-top-color: var(--brass); }
.chm-questions li::before {
  content: counter(cq, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.98rem; color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.chm-questions span {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1rem, 1.35vw, 1.14rem); line-height: 1.4;
  color: var(--ink);
}
@media (min-width: 901px) {
  .chm-questions li:nth-last-child(-n+3) { border-bottom: 1px solid var(--hair); }
}
#function .sec-note { margin-top: clamp(2.4rem, 4vw, 3.2rem); }

/* ---- 4. The build index: 28 numbered scope rows ---- */
.chm-scope-list { margin-top: 0; }
.chm-scope-note { max-width: 860px; }

/* ---- 5. Kitchen mosaic: photos left, prose right ---- */
@media (min-width: 1001px) { .chm-kitchen { grid-template-columns: 0.94fr 1.06fr; align-items: center; } }
.chm-kitchen .ed-mosaic { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.chm-kitchen .ed-mosaic figure { min-width: 0; }
.chm-kitchen .ed-mosaic .em-1 { grid-column: 1 / 6;  aspect-ratio: 3 / 4; margin-top: clamp(2.2rem, 4.5vw, 3.6rem); }
.chm-kitchen .ed-mosaic .em-2 { grid-column: 6 / 13; aspect-ratio: 4 / 3; margin-top: 0; }
.chm-kitchen .ed-mosaic .em-3 { grid-column: 1 / 8;  aspect-ratio: 16 / 10; }
.chm-kitchen .ed-mosaic .em-4 { grid-column: 8 / 13; aspect-ratio: 3 / 4; margin-top: clamp(-3.4rem, -4vw, -1.8rem); }
@media (max-width: 1000px) { .chm-kitchen .ed-mosaic-text { order: -1; } }
@media (max-width: 620px) {
  .chm-kitchen .ed-mosaic .em-1, .chm-kitchen .ed-mosaic .em-4 { margin-top: 0; }
}
.chm-kitchen-lead { margin: clamp(1.3rem, 2.4vw, 1.8rem) 0 0.3rem; }
.chm-kitchen-cols { margin-top: 1.4rem; }

/* ---- 6. Bathrooms: photo stack left, the suite note as a paper panel ---- */
#bathrooms .loc-media-stack { min-height: 0; height: 100%; grid-template-rows: 1fr 1fr; }
#bathrooms .loc-media-stack .ba-figure { position: relative; min-height: 0; }
#bathrooms .loc-media-stack .ba-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1024px) {
  #bathrooms .loc-media-stack { height: auto; }
  #bathrooms .loc-media-stack .ba-figure { aspect-ratio: 3 / 2; }
  #bathrooms .loc-media-stack .ba-figure img { position: absolute; height: 100%; }
}
.chm-panel {
  margin-top: clamp(2.4rem, 4.5vw, 3.4rem);
  background: #fff;
  border: 1px solid var(--hair);
  border-top: 2px solid var(--brass);
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.6rem, 3.2vw, 2.4rem);
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  gap: clamp(0.9rem, 3vw, 2.6rem);
  align-items: start;
}
.chm-panel-label {
  font-family: var(--font-body); font-weight: 800;
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--forest); line-height: 1.5;
}
.chm-panel-body p { margin: 0 0 0.95rem; color: #4b574f; font-size: 1.01rem; line-height: 1.72; max-width: none; }
.chm-panel-body p:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .chm-panel { grid-template-columns: 1fr; gap: 0.7rem; } }

/* ============================================================
   7. THE SIGNATURE: A Complex Waterfront Custom Home.
   A full-bleed chapter on warm drafting-paper stock, ruled like a
   plan sheet, with an edge-to-edge photograph across the middle.
   Deliberately breaks the white / bg-alt alternation.
   ============================================================ */
.chm-case {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(3.6rem, 7vw, 6.4rem) 0;
  background:
    radial-gradient(1100px 560px at 82% -14%, rgba(193,154,91,0.24), transparent 62%),
    linear-gradient(180deg, #f7f1e4 0%, #f1e9d9 46%, #e9dfcb 100%);
  border-top: 1px solid rgba(193,154,91,0.55);
  border-bottom: 1px solid rgba(193,154,91,0.55);
}
/* faint plan-sheet ruling, fading out down the page */
.chm-case::before {
  content: '';
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(22,40,29,0.05) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(90deg, rgba(22,40,29,0.05) 0 1px, transparent 1px 58px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.85), transparent 52%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.85), transparent 52%);
}
.chm-case-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(1.3rem, 4vw, 3.6rem);
  align-items: end;
}
.chm-case-head .ed-title {
  margin-top: 0.9rem;
  font-size: clamp(2.3rem, 5.2vw, 4.1rem);
}
.chm-case-lead {
  margin: 0; padding-bottom: 0.4rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.16rem, 1.9vw, 1.46rem);
  line-height: 1.46; color: var(--ink);
  max-width: 36ch; text-wrap: balance;
}
/* edge-to-edge photograph: sits outside .container, so no 100vw needed */
.chm-bleed {
  position: relative; margin: clamp(2.4rem, 5vw, 4rem) 0 clamp(2.6rem, 5vw, 4.4rem);
  overflow: hidden;
}
.chm-bleed img {
  display: block; width: 100%;
  height: clamp(300px, 40vw, 580px);
  object-fit: cover; object-position: center 44%;
}
.chm-bleed::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,38,15,0.16) 0%, transparent 34%, transparent 52%, rgba(8,38,15,0.62) 100%);
}
.chm-bleed figcaption { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(0.9rem, 2.2vw, 1.5rem); }
.chm-bleed figcaption span {
  display: block; max-width: 1300px; margin: 0 auto; padding: 0 40px;
  font-family: var(--font-body); font-weight: 800;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
}
.chm-bleed figcaption span::before {
  content: ''; display: inline-block; width: 26px; height: 1px;
  background: var(--brass-light); margin-right: 0.7rem; vertical-align: middle;
}
@media (max-width: 768px) { .chm-bleed figcaption span { padding: 0 22px; } }

.chm-case-body {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: start;
}
.chm-statement {
  margin: 0;
  padding-left: clamp(1rem, 2vw, 1.4rem);
  border-left: 3px solid var(--brass);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.14rem, 1.85vw, 1.4rem);
  line-height: 1.5; color: var(--ink);
  max-width: 46ch;
}
.chm-case-list .list-lead { margin: 0 0 0.35rem; }
.chm-manifest {
  list-style: none; margin: 0; counter-reset: cm;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 clamp(1.4rem, 3vw, 2.6rem);
}
.chm-manifest li {
  counter-increment: cm;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(0.9rem, 2vw, 1.5rem);
  align-items: baseline;
  border-top: 1px solid rgba(22,40,29,0.16);
  padding: 0.95rem 0 1rem;
  transition: border-color 0.2s ease;
}
.chm-manifest li:nth-child(4), .chm-manifest li:last-child { border-bottom: 1px solid rgba(22,40,29,0.16); }
.chm-manifest li:hover { border-top-color: var(--brass); }
.chm-manifest li::before {
  content: counter(cm, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1;
  color: rgba(193,154,91,0.9);
  font-variant-numeric: tabular-nums;
}
.chm-manifest span {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.06rem, 1.5vw, 1.24rem); line-height: 1.35;
  color: var(--ink);
}
.chm-case-shots {
  display: grid; grid-template-columns: 1.4fr 0.6fr;
  gap: 16px; align-items: stretch;
  margin-top: clamp(2.6rem, 5vw, 3.8rem);
}
.chm-case-shots .chm-shot:first-child { aspect-ratio: 16 / 9; }
.chm-case-shots .chm-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chm-case-shots .chm-shot:last-child img { object-position: center 42%; }
.chm-shot {
  position: relative; margin: 0;
  border-radius: var(--radius-img); overflow: hidden;
  box-shadow: 0 22px 50px rgba(35,26,10,0.22);
  background: #e6dcc8;
}
.chm-shot img { display: block; width: 100%; height: auto; }
.chm-shot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(8,38,15,0.55));
}
.chm-shot figcaption {
  position: absolute; z-index: 2; left: 1.15rem; bottom: 0.95rem;
  font-family: var(--font-body); font-weight: 800;
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
}
.chm-case-close {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  padding-top: clamp(1.8rem, 3.5vw, 2.6rem);
  border-top: 1px solid rgba(193,154,91,0.6);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.4rem, 4vw, 3.4rem);
  align-items: center;
}
.chm-case-close p { margin: 0; color: #4b574f; font-size: 1.03rem; line-height: 1.75; max-width: 72ch; }
.chm-case-close .btn { white-space: nowrap; }
@media (max-width: 980px) {
  .chm-case-head { grid-template-columns: 1fr; align-items: start; gap: 1.1rem; }
  .chm-case-lead { padding-bottom: 0; max-width: none; }
  .chm-case-body { grid-template-columns: 1fr; gap: clamp(1.6rem, 4vw, 2.4rem); }
}
@media (max-width: 640px) {
  .chm-case-shots { grid-template-columns: 1fr; }
  .chm-case-shots .chm-shot:first-child, .chm-case-shots .chm-shot:last-child { aspect-ratio: 4 / 3; }
  .chm-manifest { grid-template-columns: 1fr; }
  .chm-manifest li:nth-child(4) { border-bottom: 0; }
  .chm-case-close { grid-template-columns: 1fr; align-items: start; }
  .chm-case-close .btn { justify-self: start; }
}

/* ---- 9. Materials and Selections ---- */
.chm-sel-lede { margin: 1.1rem 0 0; }
#selections .bgt-intro > .list-lead { margin-top: 1.4rem; }
.chm-sel-close { margin-top: clamp(2.4rem, 4.5vw, 3.4rem); }
.chm-sel-close > div p { color: #4b574f; }
#selections .bgt-img img { object-position: center 42%; }

/* ---- 10. Communication ---- */
.chm-comm { margin-top: clamp(2.2rem, 4vw, 3rem); }
.chm-comm-note { margin-top: clamp(1.8rem, 3.2vw, 2.4rem); }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .chm-questions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chm-starts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chm-pair { grid-template-columns: 1fr; }
  .chm-pair figure, .chm-pair figure:first-child, .chm-pair figure:last-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; margin-top: 0; }
}
@media (max-width: 560px) {
  .chm-questions, .chm-starts { grid-template-columns: 1fr; }
  .chm-statement { font-size: 1.1rem; }
}

/* ===== ADU PAGE BLOCK ===== */
/* ADU Construction service page only. Every new selector is .adu-*;
   the handful of unprefixed rules are scoped inside .adu-* wrappers.
   Devices: numbered type index in a split row, layout spec grid under a
   framed photo, a two-column use index, and the page signature: a
   three-phase build schedule with real jobsite photography. */

/* ---- 01 | Opening mosaic: one prose measure, not two hairline columns ---- */
.ed-mosaic-wrap.adu-open { grid-template-columns: 0.84fr 1.16fr; align-items: center; }
.adu-open-prose > div { border-top: 2px solid var(--brass); padding-top: 1.35rem; }
.adu-open-prose p { color: #4b574f; line-height: 1.75; margin: 0 0 1rem; max-width: none; }
.adu-open-prose p:last-child { margin-bottom: 0; }
@media (max-width: 1000px) { .ed-mosaic-wrap.adu-open { grid-template-columns: 1fr; } }

/* ---- 02 | What Is an ADU?: numbered type index inside the split row ---- */
.adu-typelist { margin-top: 0.2rem; }
.adu-typelist > div { padding: 0.82rem 0; }
.adu-typelist .ktc-agenda-q { font-size: clamp(1rem, 1.35vw, 1.14rem); }
.loc-row-text > .adu-p {
  margin: 1.4rem 0 0;
  color: #4b574f;
  font-size: 1.02rem;
  line-height: 1.75;
  max-width: none;
}
.loc-row-text > .adu-p + .adu-p { margin-top: 0.9rem; }

/* ---- 03 | Detached ADUs: spec grid beneath the framed photo ---- */
.adu-layout { margin-top: clamp(2.6rem, 5vw, 3.8rem); }
.adu-layout .list-lead-lg { margin-top: 0; }

/* ---- 04 | Rental spread: the requirement list inside the paper panel ---- */
.adu-panel-list { margin-bottom: 1.1rem; }
.adu-panel-list li { font-size: 0.95rem; padding-bottom: 0.62rem; }
.adu-panel-list li svg { margin-top: 3px; }

/* ---- 06 | Guest houses: two-column index of possible uses ---- */
.adu-uses-lead { margin-top: clamp(1.8rem, 3.4vw, 2.6rem); }
.adu-uses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(2rem, 5vw, 4.4rem);
  counter-reset: aduuse;
}
.adu-uses > div {
  counter-increment: aduuse;
  display: flex;
  align-items: baseline;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  border-top: 1px solid var(--hair);
  padding: 0.95rem 0;
  transition: border-color 0.2s ease;
}
.adu-uses > div:hover { border-top-color: var(--brass); }
.adu-uses > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--hair); }
.adu-uses > div::before {
  font-family: var(--font-display); font-weight: 500; font-size: 1.02rem;
  color: var(--brass); flex: 0 0 auto;
}
.adu-close-cols { margin-top: clamp(1.6rem, 3vw, 2.2rem); }

/* ---- 07 | Planning agenda: the caution callout sits in the aside ---- */
.adu-aside-callout { margin: 1.5rem 0 1.4rem; max-width: none; }
.adu-aside-callout p { font-size: clamp(1.04rem, 1.5vw, 1.18rem); }
.adu-agenda-tail { margin-top: 1.1rem; }

/* ---- 08 | Green band: spacing for the reveal grid ---- */
.adu-band-p { margin-top: clamp(1.4rem, 2.6vw, 2rem); }
.adu-band-lead { margin-top: clamp(1.8rem, 3.2vw, 2.4rem); margin-bottom: 0.4rem; }

/* ---- 09 | THE SIGNATURE: three-phase build schedule ---------------------
   Ground, Structure, Finish. Each phase leads with a real jobsite photo,
   and the 24 scope items run as one continuous numbered schedule across
   the three columns. The columns step down to the right so the whole
   composition reads as a build sequence rather than three tidy cards. */
.adu-build .ed-head { max-width: 900px; margin-bottom: clamp(1.4rem, 2.6vw, 2rem); }
.adu-build-lede { margin: 1.2rem 0 0; max-width: 42ch; }
.adu-build-lead { margin: 0 0 0.6rem; }

.adu-phases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.2vw, 2.8rem);
  counter-reset: aduscope;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  align-items: start;
}
.adu-phase { display: flex; flex-direction: column; min-width: 0; }
.adu-phase:nth-child(2) { margin-top: clamp(1.4rem, 3vw, 2.8rem); }
.adu-phase:nth-child(3) { margin-top: clamp(2.8rem, 6vw, 5.6rem); }

.adu-phase-media {
  position: relative;
  margin: 0;
  border-radius: var(--radius-img);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-bg-alt);
}
.adu-phase-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.adu-phase-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(8, 38, 15, 0.34));
}
.adu-phase:nth-child(3) .adu-phase-media img { object-position: center 62%; }

.adu-phase-head {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-top: 1.3rem;
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--brass);
}
.adu-phase-n {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1;
  color: var(--brass);
  letter-spacing: 0.02em;
}
.adu-phase-t {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--forest);
}

.adu-scope { list-style: none; margin: 0; padding: 0; }
.adu-scope li {
  counter-increment: aduscope;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: baseline;
  padding: 0.68rem 0;
  border-bottom: 1px solid var(--hair);
  transition: border-color 0.2s ease;
}
.adu-scope li:hover { border-bottom-color: var(--brass); }
.adu-scope li::before {
  content: counter(aduscope, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.adu-scope li span {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

/* ---- two-digit numerals: the shared lists hard-code "0" + counter ---- */
.adu-numlist > div::before { content: counter(ag, decimal-leading-zero); }
.adu-numreveal > div::before { content: counter(kr, decimal-leading-zero); }
.adu-uses > div::before { content: counter(aduuse, decimal-leading-zero); }

/* ---- 11 | Budgeting: photo column on the left, prose column wider ---- */
.adu-bgt { grid-template-columns: 0.86fr 1.14fr; }
.adu-bgt .bgt-intro .ed-title { margin-top: 0.9rem; }
.adu-bgt .bgt-intro .led-statement { margin: 1.1rem 0 0; }
.adu-bgt .bgt-intro .list-lead { margin-top: 1.3rem; }
.adu-bgt .bgt-img { min-height: 380px; }

/* ---- responsive ---- */
@media (max-width: 1000px) {
  .adu-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adu-phase:nth-child(2) { margin-top: clamp(1.2rem, 2.6vw, 2.2rem); }
  .adu-phase:nth-child(3) { margin-top: 0; }
}
@media (max-width: 900px) {
  .adu-bgt { grid-template-columns: 1fr; }
  .adu-bgt .bgt-img { min-height: 300px; }
}
@media (max-width: 720px) {
  .adu-uses { grid-template-columns: 1fr; }
  .adu-uses > div:nth-last-child(-n+2) { border-bottom: 0; }
  .adu-uses > div:last-child { border-bottom: 1px solid var(--hair); }
}
@media (max-width: 640px) {
  .adu-phases { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 2.6rem); }
  .adu-phase:nth-child(2), .adu-phase:nth-child(3) { margin-top: 0; }
  .adu-phase-media img { aspect-ratio: 16 / 10; }
}

/* ===== BATHROOM PAGE BLOCK ===== */
/* ------------------------------------------------------------
   Bathroom Remodeling service page only.
   Every class here is prefixed .bth- except for scoped fixes to
   shared components used inside this page's own wrappers.
   ------------------------------------------------------------ */

/* ---- 01 | Opener: the one complaint that turns into a whole room ---- */
.bth-open {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: clamp(2rem, 4.5vw, 4.2rem);
  align-items: center;
}
.bth-open-text .ed-title { margin: 0.95rem 0 1.4rem; }
.bth-open-text .led-statement { margin: 0; }
.bth-open-media {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-img);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-bg-alt);
}
.bth-open-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the four complaints, split out of one sentence, numerals are CSS-only */
.bth-symptoms {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: clamp(1.7rem, 3vw, 2.2rem);
  counter-reset: sy;
}
.bth-symptoms > div {
  counter-increment: sy;
  position: relative;
  background: var(--color-bg-alt);
  border-top: 2px solid var(--brass);
  border-radius: 0 0 4px 4px;
  padding: 1.5rem 1.35rem 1.4rem;
}
.bth-symptoms > div::before {
  content: counter(sy, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--brass);
  margin-bottom: 0.75rem;
}
.bth-symptoms p {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.99rem;
  line-height: 1.55;
  max-width: none;
}
.bth-open-close { margin-top: clamp(2.3rem, 4.5vw, 3.2rem); }

/* ---- 02 | Complete Bathroom Remodeling: grouped scope board ---- */
.bth-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 clamp(1.5rem, 3.2vw, 3rem);
  align-items: start;
  border-top: 2px solid var(--hair);
  padding-top: 1.5rem;
}
.bth-board-col { position: relative; }
.bth-board-col::before {
  content: '';
  position: absolute;
  top: -1.5rem;
  left: 0;
  width: 46px;
  height: 2px;
  background: var(--brass);
}
.bth-board-tag {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.69rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 0.4rem;
}
.bth-board-col ul { list-style: none; margin: 0; padding: 0; }
.bth-board-col li {
  border-bottom: 1px solid var(--hair);
  padding: 0.72rem 0;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.bth-board-col li:hover { border-bottom-color: var(--brass); }
.bth-board-lead { align-self: end; text-align: right; margin: 0 0 0.35rem; }

/* ---- 03 | Tub-to-shower: media split + dotted conversion rail ---- */
.bth-convert {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 4vw, 3.8rem);
  align-items: center;
}
.bth-convert-media {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-img);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-bg-alt);
}
.bth-convert-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bth-convert-body .ed-title { margin: 0.9rem 0 1.3rem; }
.bth-convert-body > p:last-child { margin-bottom: 0; color: #4b574f; line-height: 1.75; }

.bth-seq-lead { margin: clamp(2.4rem, 4.5vw, 3.4rem) 0 1.6rem; }
.bth-seq {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.9rem clamp(1.1rem, 2.4vw, 2rem);
}
.bth-seq li {
  position: relative;
  border-top: 1px solid var(--hair);
  padding-top: 1.55rem;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
}
.bth-seq li::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--brass);
}
.bth-seq li:hover::before { background: var(--brass); }
.bth-after { margin-top: clamp(2.4rem, 4.5vw, 3.4rem); }

/* ---- 04 | Separate tubs and showers: compare spread ---- */
.bth-vs .ks-panel-dark .ed-kicker { color: var(--brass-light); }
.bth-vs .ks-panel-dark .ed-kicker::before { background: var(--brass-light); }
.bth-vs .ks-panel-dark .ed-title { color: #fff; margin: 0.95rem 0 1.3rem; }
.bth-vs .ks-panel-dark p { color: rgba(255, 255, 255, 0.88); line-height: 1.75; margin: 0 0 1rem; }
.bth-vs .ks-panel-dark p.ks-proof { color: rgba(255, 255, 255, 0.86); margin: auto 0 0; }
.bth-vs .ks-panel-paper .list-lead { margin-top: 1.3rem; }
/* the photo is the dark panel's balancing block: it eats the slack so the
   two panels finish level instead of the paper side running long */
.bth-vs .ks-panel-dark .ks-panel-photo { flex: 1 1 auto; min-height: 140px; margin: 1.7rem 0 1.9rem; }

/* ---- 05 | SIGNATURE: the layout chapter, drawn like a plan sheet ---- */
.bth-plan {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border-top: 1px solid rgba(193, 154, 91, 0.4);
  border-bottom: 1px solid rgba(193, 154, 91, 0.4);
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
.bth-plan::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(11, 77, 44, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 77, 44, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(193, 154, 91, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(193, 154, 91, 0.16) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px;
}
.bth-plan::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.75), transparent 60%);
}
.bth-plan > .container { position: relative; z-index: 2; }
.bth-plan-head { max-width: 780px; }
.bth-plan-head .ed-title { margin-top: 0.95rem; }

/* keep the plan / change the plan */
.bth-states {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.4vw, 1.8rem);
  margin-top: clamp(2rem, 4vw, 2.8rem);
}
.bth-state {
  position: relative;
  background: rgba(255, 255, 255, 0.82);
  border: 1px dashed rgba(11, 77, 44, 0.28);
  border-radius: 4px;
  padding: clamp(1.4rem, 2.8vw, 1.9rem) clamp(1.4rem, 2.8vw, 2rem);
}
.bth-state::before {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--forest);
  display: block;
  margin-bottom: 0.7rem;
}
.bth-state:nth-child(1)::before { content: 'Keep the Plan'; }
.bth-state:nth-child(2)::before { content: 'Change the Plan'; }
.bth-state:nth-child(2) {
  background: var(--forest);
  border-color: transparent;
  border-style: solid;
}
.bth-state:nth-child(2)::before { color: var(--brass-light); }
.bth-state:nth-child(2) p { color: #fff; }
.bth-state p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.04rem, 1.55vw, 1.24rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: none;
}

.bth-moves-lead { margin: clamp(2.2rem, 4vw, 3rem) 0 1.2rem; }
.bth-moves {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(1.6rem, 3.4vw, 3rem);
  counter-reset: mv;
}
.bth-moves li {
  counter-increment: mv;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 0;
  border-bottom: 1px dashed rgba(11, 77, 44, 0.24);
  font-weight: 600;
  font-size: 0.96rem;
  line-height: 1.42;
  color: var(--ink);
}
.bth-moves li::before {
  content: counter(mv, decimal-leading-zero);
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--brass);
  background: rgba(255, 255, 255, 0.9);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--forest);
}
.bth-moves li:hover::before { background: var(--brass); color: #fff; }

/* the built record */
.bth-asbuilt { margin-top: clamp(2.8rem, 5.5vw, 4.2rem); }
.bth-asbuilt-head {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 2.4vw, 1.8rem);
  border-top: 2px solid var(--brass);
  padding-top: 1.2rem;
  flex-wrap: wrap;
}
.bth-asbuilt-tag {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.69rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  flex: 0 0 auto;
}
.bth-asbuilt-lead {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.16rem, 2vw, 1.5rem);
  line-height: 1.42;
  color: var(--ink);
  max-width: 40ch;
}
.bth-plates {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  grid-auto-rows: clamp(290px, 31vw, 460px);
  gap: 16px;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
}
.bth-plates figure {
  position: relative;
  margin: 0;
  height: 100%;
  border-radius: var(--radius-img);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-bg-alt);
}
.bth-plates img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bth-plates figure::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(8, 38, 15, 0.6));
}
.bth-plate-tag {
  position: absolute;
  z-index: 2;
  left: 1.15rem;
  bottom: 1rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #fff;
}
.bth-plate-tag::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--brass-light);
  margin-right: 0.6rem;
  vertical-align: middle;
}
/* one sentence split three ways: the labels live in CSS so the copy stays whole */
.bth-story {
  list-style: none;
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 1.8rem);
  counter-reset: st;
}
.bth-story li {
  counter-increment: st;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--hair);
  border-top: 2px solid var(--forest);
  border-radius: 0 0 4px 4px;
  padding: 1.4rem clamp(1.2rem, 2.4vw, 1.6rem) 1.5rem;
}
.bth-story li::before {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 0.65rem;
}
.bth-story li:nth-child(1)::before { content: 'Upstairs'; }
.bth-story li:nth-child(2)::before { content: 'The Loft'; }
.bth-story li:nth-child(3)::before { content: 'Downstairs'; }
.bth-story p {
  margin: 0;
  color: #4b574f;
  font-size: 0.97rem;
  line-height: 1.68;
  max-width: none;
}
.bth-plan-close {
  margin: clamp(1.8rem, 3.4vw, 2.6rem) 0 0;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(11, 77, 44, 0.2);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.06rem, 1.6vw, 1.26rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: none;
}

/* ---- 06 | Vanity spec grid lead ---- */
.bth-spec-lead { margin: clamp(2.4rem, 4.5vw, 3.4rem) 0 1.2rem; }

/* ---- 07 | Tile: drawn swatches, no stock photo needed ---- */
.bth-tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.9rem, 2vw, 1.4rem);
  margin-bottom: clamp(2.4rem, 4.5vw, 3.4rem);
}
.bth-tile { text-align: left; }
.bth-swatch {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-img);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  background-color: #e5ded1;
}
.bth-tile:hover .bth-swatch {
  border-color: var(--brass);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.bth-tile-name {
  display: block;
  margin-top: 0.75rem;
  font-weight: 600;
  font-size: 0.93rem;
  line-height: 1.4;
  color: var(--ink);
}
/* running bond subway: drawn as an inline SVG so the courses really offset */
.bth-sw-1 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='36' shape-rendering='crispEdges'%3E%3Crect width='68' height='36' fill='%23e5ded1'/%3E%3Cg fill='%23fbf9f4'%3E%3Crect width='68' height='2'/%3E%3Crect y='18' width='68' height='2'/%3E%3Crect width='2' height='18'/%3E%3Crect x='34' width='2' height='18'/%3E%3Crect x='17' y='18' width='2' height='18'/%3E%3Crect x='51' y='18' width='2' height='18'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 68px 36px;
}
/* penny round */
.bth-sw-2 {
  background-color: #fbf9f4;
  background-image:
    radial-gradient(circle at 50% 50%, #ddd4c2 45%, transparent 47%),
    radial-gradient(circle at 50% 50%, #ddd4c2 45%, transparent 47%);
  background-size: 17px 17px, 17px 17px;
  background-position: 0 0, 8.5px 8.5px;
}
/* wide plank */
.bth-sw-3 {
  background-color: #ded3bf;
  background-image:
    linear-gradient(0deg, #fbf9f4 2px, transparent 2px),
    linear-gradient(90deg, #fbf9f4 2px, transparent 2px),
    linear-gradient(90deg, #fbf9f4 2px, transparent 2px);
  background-size: 100% 15px, 92px 30px, 92px 30px;
  background-position: 0 0, 0 0, 46px 15px;
}
/* stacked square */
.bth-sw-4 {
  background-image:
    linear-gradient(0deg, #fbf9f4 2px, transparent 2px),
    linear-gradient(90deg, #fbf9f4 2px, transparent 2px);
  background-size: 20px 20px;
}
/* diagonal lattice */
.bth-sw-5 {
  background-image:
    repeating-linear-gradient(45deg, #fbf9f4 0 2px, transparent 2px 17px),
    repeating-linear-gradient(-45deg, #fbf9f4 0 2px, transparent 2px 17px);
}
/* vertical stack */
.bth-sw-6 {
  background-image:
    linear-gradient(90deg, #fbf9f4 2px, transparent 2px),
    linear-gradient(0deg, #fbf9f4 2px, transparent 2px);
  background-size: 15px 30px;
}
.bth-style-lead {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.22rem, 1.9vw, 1.48rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: none;
}

/* ---- 08 | Older homes: what demolition turns up ---- */
.bth-reveal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.bth-reveal > div {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border-strong);
  border-radius: 6px;
  padding: 0.95rem 1.1rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.bth-reveal > div:hover { border-color: var(--brass); background: #fff; }
.bth-reveal > div::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brass);
}
.bth-reveal span {
  font-weight: 600;
  font-size: 0.94rem;
  line-height: 1.4;
  color: var(--ink);
}
.bth-reveal-note {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding-left: clamp(0.9rem, 2vw, 1.3rem);
  border-left: 3px solid var(--brass);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 42ch;
}

/* ---- 09 | Bathroom additions: banner + triggers ---- */
.bth-banner {
  position: relative;
  margin: 0 0 clamp(2rem, 4vw, 2.9rem);
  aspect-ratio: 21 / 9;
  border-radius: var(--radius-img);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-bg-alt);
}
.bth-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bth-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(8, 38, 15, 0.5));
}
.bth-banner-tag {
  position: absolute;
  z-index: 2;
  left: 1.3rem;
  bottom: 1.05rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #fff;
}
.bth-banner-tag::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--brass-light);
  margin-right: 0.65rem;
  vertical-align: middle;
}
@media (max-width: 700px) { .bth-banner { aspect-ratio: 16 / 10; } }

/* ---- 12 | The order of work: a numbered build schedule ---- */
.bth-order {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 clamp(1.5rem, 3.2vw, 3rem);
  counter-reset: od;
  border-top: 2px solid var(--hair);
}
.bth-order li {
  counter-increment: od;
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  border-bottom: 1px solid var(--hair);
  padding: 0.92rem 0;
  font-weight: 600;
  font-size: 0.96rem;
  line-height: 1.4;
  color: var(--ink);
  transition: border-color 0.2s ease;
}
.bth-order li:hover { border-bottom-color: var(--brass); }
.bth-order li::before {
  content: counter(od, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--brass);
}
.bth-payoff .fp-payoff-text > div { width: 100%; }
.bth-payoff .fp-payoff-text p {
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.72;
  max-width: none;
}
.bth-payoff .fp-payoff-text p:last-child { margin-bottom: 0; }
.bth-payoff .fp-payoff-text p:first-child {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.12rem, 1.8vw, 1.34rem);
  line-height: 1.45;
  color: #fff;
}

/* ---- 13 | Communication: one selection pulls the next ---- */
.bth-comm-intro > p { margin: 0 0 0.9rem; color: #4b574f; line-height: 1.75; max-width: none; }
.bth-comm-intro > p:last-child { margin-bottom: 0; }
.bth-chain-lead {
  margin: 0 0 1.3rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.16rem, 1.9vw, 1.42rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: none;
}
.bth-chain {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 1.7rem);
}
.bth-link {
  position: relative;
  background: var(--color-bg-alt);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--brass);
  border-radius: 0 6px 6px 0;
  padding: clamp(1.3rem, 2.6vw, 1.7rem);
}
.bth-link svg { width: 24px; height: 24px; color: var(--forest); display: block; margin-bottom: 0.85rem; }
.bth-link p {
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: none;
}
.bth-chain-close { margin-top: clamp(2rem, 3.6vw, 2.8rem); }

/* ---- responsive ---- */
@media (max-width: 1040px) {
  .bth-tiles { grid-template-columns: repeat(3, 1fr); }
  .bth-seq { grid-template-columns: repeat(3, 1fr); }
  .bth-board { grid-template-columns: repeat(2, 1fr); gap: 0 clamp(1.4rem, 3vw, 2.4rem); }
  .bth-board-col { margin-bottom: 2rem; }
  .bth-order { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .bth-open { grid-template-columns: 1fr; gap: 1.8rem; }
  .bth-open-media { aspect-ratio: 16 / 10; order: -1; }
  .bth-convert { grid-template-columns: 1fr; gap: 1.8rem; }
  .bth-convert-media { order: -1; }
  .bth-symptoms { grid-template-columns: repeat(2, 1fr); }
  .bth-moves { grid-template-columns: repeat(2, 1fr); }
  .bth-story { grid-template-columns: 1fr; }
  .bth-chain { grid-template-columns: 1fr; }
  .bth-reveal { grid-template-columns: repeat(2, 1fr); }
  .bth-plates { grid-template-columns: 1fr; grid-auto-rows: clamp(210px, 52vw, 330px); }
  .bth-order { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .bth-tiles { grid-template-columns: repeat(2, 1fr); }
  .bth-seq { grid-template-columns: repeat(2, 1fr); }
  .bth-states { grid-template-columns: 1fr; }
  .bth-board { grid-template-columns: 1fr; }
  .bth-symptoms { grid-template-columns: 1fr; }
  .bth-moves { grid-template-columns: 1fr; }
  .bth-order { grid-template-columns: 1fr; }
  .bth-reveal { grid-template-columns: 1fr; }
  .bth-asbuilt-head { display: block; }
  .bth-asbuilt-tag { display: block; margin-bottom: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bth-tile:hover .bth-swatch { transform: none; }
}

/* ===== PORT HADLOCK PAGE BLOCK (agent-ph) ===== */
/* Scoped to the Port Hadlock location page. All classes prefixed .phd-.
   Uses the shipped tokens only: --ink --paper --hair --brass --brass-light
   --forest --forest-deep --color-bg-alt --radius-img --font-display --font-body. */

/* ------------------------------------------------------------------
   1. Sticky services scroller: only the two nudges the shared
   component needs for Port Hadlock's longer blocks (a Q&A list and a
   19-chip block). Everything else is inherited from .svc-scroll.
   ------------------------------------------------------------------ */
/* .phd-svc scopes these to Port Hadlock only; Sequim shares #services-detail. */
.phd-svc .svc-block .ed-title + p { margin-top: 0.85rem; }
.phd-svc .svc-block .qa-list { margin: 0.85rem 0 1.35rem; }
.phd-svc .svc-block .qa-list li { line-height: 1.6; }
.phd-svc .svc-block .chip-cloud + p { margin-top: 0.35rem; }
.phd-svc .svc-block .list-lead + .chip-cloud { margin-top: 0; }
.phd-svc .svc-block .check-cards + p { margin-top: 0.35rem; }
/* the custom home sits low in its source frame: lift the 4/5 crop off the gravel */
.phd-svc .svc-scroll-media img:nth-of-type(4) { object-position: center 38%; }

/* ------------------------------------------------------------------
   2. Owner background: portrait column + numbered chapters
   ------------------------------------------------------------------ */
.phd-story {
  display: grid;
  grid-template-columns: 0.84fr 1.16fr;
  grid-template-areas: "aside head" "aside main";
  grid-template-rows: auto 1fr;
  column-gap: clamp(2.2rem, 5vw, 4.6rem);
  align-items: start;
}
.phd-story-head { grid-area: head; margin-bottom: clamp(1.7rem, 3.5vw, 2.5rem); }
.phd-story-head .ed-title { margin-top: 1rem; }
.phd-story-aside { grid-area: aside; position: sticky; top: 104px; align-self: start; }
.phd-story-main { grid-area: main; }

.phd-portrait {
  margin: 0;
  border-radius: var(--radius-img);
  overflow: hidden;
  box-shadow: var(--shadow-e);
  background: var(--color-bg-alt);
}
.phd-portrait img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%;
}
/* the two-decades line rides up over the portrait so the man and the
   claim read as one unit rather than a caption */
.phd-story-statement {
  position: relative; z-index: 1;
  margin: -3.4rem clamp(0.6rem, 1.6vw, 1.2rem) 0 clamp(1.4rem, 3.4vw, 2.8rem);
  background: var(--paper);
  border-left: 3px solid var(--brass);
  padding: clamp(1.25rem, 2.6vw, 1.7rem) clamp(1.25rem, 2.6vw, 1.8rem);
  box-shadow: var(--shadow-e);
}
.phd-story-statement p {
  margin: 0; max-width: none;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.02rem, 1.45vw, 1.24rem); line-height: 1.45;
  letter-spacing: -0.01em; color: var(--ink);
}

.phd-chapters { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--hair); }
.phd-chapter {
  display: grid; grid-template-columns: auto 1fr;
  column-gap: clamp(1rem, 2.2vw, 1.9rem);
  padding: clamp(1.15rem, 2.4vw, 1.55rem) 0;
  border-bottom: 1px solid var(--hair);
}
.phd-ch-n {
  font-family: var(--font-display); font-weight: 600; line-height: 1;
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  color: transparent; -webkit-text-stroke: 1px rgba(193, 154, 91, 0.95);
  padding-top: 0.1rem;
}
.phd-ch-tag {
  display: block; font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--forest); margin-bottom: 0.5rem;
}
.phd-ch-body p { margin: 0; max-width: none; color: #4b574f; font-size: 1rem; line-height: 1.72; }

.phd-craft { margin-top: clamp(1.9rem, 4vw, 2.7rem); }
.phd-craft .list-lead { margin: 0 0 0.9rem; }
.phd-traits {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.2rem, 3vw, 2.4rem);
}
.phd-traits li {
  position: relative; padding: 0.68rem 0 0.68rem 1.5rem;
  border-bottom: 1px solid var(--hair);
  font-weight: 600; font-size: 0.97rem; color: var(--ink);
}
.phd-traits li::before {
  content: ''; position: absolute; left: 0; top: 1.1rem;
  width: 7px; height: 7px; background: var(--brass); transform: rotate(45deg);
}
.phd-story-close {
  margin: clamp(1.8rem, 3.5vw, 2.4rem) 0 0;
  padding-top: clamp(1.3rem, 2.6vw, 1.7rem);
  border-top: 2px solid var(--brass-light);
  max-width: none;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.12rem, 1.9vw, 1.45rem); line-height: 1.4;
  letter-spacing: -0.01em; color: var(--ink);
}
/* the five steps, on one brass spine that rises out of the cost sheet above */

/* ------------------------------------------------------------------
   4. Responsive
   ------------------------------------------------------------------ */
@media (max-width: 980px) {
  .phd-story {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "aside" "main";
    grid-template-rows: auto;
    row-gap: clamp(1.6rem, 4vw, 2.2rem);
  }
  .phd-story-head { margin-bottom: 0; }
  .phd-story-aside { position: static; max-width: 520px; }
  .phd-portrait img { aspect-ratio: 4 / 3; object-position: center 22%; }
}
@media (max-width: 620px) {
  .phd-traits { grid-template-columns: minmax(0, 1fr); }
  .phd-story-statement { margin-left: clamp(0.9rem, 4vw, 1.6rem); margin-right: 0; }
  .phd-chapter { column-gap: 0.9rem; }
}
/* ===== END PORT HADLOCK PAGE BLOCK (agent-ph) ===== */

/* ===== KITCHEN PAGE BLOCK V2 (agent-kt) ===== */
/* Kitchen remodeling page, second pass. Scope: the finishes section
   ("Countertops, Backsplashes, and Flooring") rebuilt as a full-width
   material triptych, plus one photo-framing correction on the opening
   banner. Every new selector is .ktx-*. */

/* Opening banner: the replacement frame is upright, so hold the crop on
   the counter and dining line instead of the default centre band. */
.ktx-banner-open img { object-position: center 62%; }

/* Peninsula panel: the replacement frame is upright and the peninsula sits
   low in it, so hold the crop there rather than on the wall cabinets. */
.ktx-pen-fig img { object-position: center 38%; }

/* Finishes: three material frames across the full measure, each followed
   by a hairline row carrying a brass index numeral and its copy. The row
   geometry deliberately repeats the .rule-grid cells used further up the
   page, so the section reads as the same family, not a new component. */
.ktx-fin .ktc-head-split { margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }

.ktx-mat {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.8vw, 2.4rem);
  align-items: start;
  counter-reset: ktxm;
}
.ktx-mat-item { margin: 0; min-width: 0; }
/* keystone: the outer frames drop so the centre one leads the row */
@media (min-width: 901px) {
  .ktx-mat-item:nth-child(odd) { margin-top: clamp(1.4rem, 2.6vw, 2.4rem); }
}

.ktx-mat-fig {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-img);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-bg-alt);
}
.ktx-mat-fig img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.9s ease;
}
.ktx-fig-a img { object-position: 50% 45%; }
.ktx-fig-b img { object-position: 50% 55%; }
.ktx-fig-c img { object-position: 42% 100%; }
.ktx-mat-item:hover .ktx-mat-fig img { transform: scale(1.035); }

.ktx-mat-item p {
  margin: clamp(1.1rem, 2vw, 1.5rem) 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--hair);
  color: #4b574f;
  font-size: 0.98rem;
  line-height: 1.68;
  max-width: none;
  transition: border-color 0.2s ease;
}
.ktx-mat-item p::before {
  counter-increment: ktxm;
  content: counter(ktxm, decimal-leading-zero);
  display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.05rem; color: var(--brass);
  margin-bottom: 0.4rem;
}
.ktx-mat-item:hover p { border-top-color: var(--brass); }

/* closing pair: the practical note, then the serif line that ends the section */
.ktx-fin-foot {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(1.4rem, 4vw, 3.4rem);
  align-items: start;
  margin-top: clamp(2.6rem, 5vw, 3.8rem);
}
.ktx-fin-note {
  margin: 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hair);
  color: #4b574f;
  font-size: 0.98rem;
  line-height: 1.68;
  max-width: none;
}
.ktx-fin-foot .ktc-close-line { margin-top: 0; }

@media (max-width: 900px) {
  .ktx-mat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.2rem; }
  .ktx-mat-item:last-child { grid-column: 1 / -1; }
  .ktx-mat-item:last-child .ktx-mat-fig { aspect-ratio: 16 / 10; }
}
@media (max-width: 620px) {
  .ktx-mat { grid-template-columns: 1fr; gap: 2rem; }
  .ktx-mat-item:last-child .ktx-mat-fig { aspect-ratio: 4 / 5; }
  .ktx-fin-foot { grid-template-columns: 1fr; gap: 1.6rem; }
}
/* ===== END KITCHEN PAGE BLOCK V2 (agent-kt) ===== */

/* ===== BATHROOM PAGE BLOCK V2 (agent-bt) ===== */
/* ------------------------------------------------------------
   Bathroom Remodeling page, second pass. Three sections rebuilt:
     02  Complete Bathroom Remodeling  -> staged scope ledger
     04  Separate Tubs and Showers     -> two-photo either/or spread
     08  Bathroom Remodeling in Older Homes -> evidence + written survey
   Every selector is prefixed .btx- or scoped inside a .btx- wrapper,
   so nothing here can reach another page's components.
   ------------------------------------------------------------ */

/* ---- 02 | Complete Bathroom Remodeling: the staged scope ledger ----
   The old four-column board left one column two rows deep and another
   seven, so a quarter of the section read as an unfinished table.
   Re-set as four stage bands down a shared spine: each band sizes to
   its own content and the items wrap row-major inside it.            */
.btx-scope-head { margin-bottom: clamp(1.5rem, 3vw, 2.3rem); }
.btx-scope-lead { margin: 0 0 1.1rem; }

.btx-scope {
  border-top: 2px solid var(--hair);
  counter-reset: btxstage;
}
.btx-stage {
  display: grid;
  grid-template-columns: minmax(190px, 252px) 1fr;
  gap: 0 clamp(1.4rem, 3vw, 2.8rem);
  align-items: stretch;
  counter-increment: btxstage;
  border-bottom: 1px solid var(--hair);
  padding: clamp(1.5rem, 2.8vw, 2.1rem) 0;
}
/* the spine: a full-height hairline between the stage label and its items */
.btx-stage-rail {
  padding-right: clamp(1rem, 2vw, 1.6rem);
  border-right: 1px solid var(--hair);
}
.btx-stage-rail::before {
  content: counter(btxstage, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 3.5vw, 3rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin-bottom: 0.7rem;
  color: transparent;
  -webkit-text-stroke: 1px rgba(193, 154, 91, 0.65);
  transition: -webkit-text-stroke-color 0.25s ease;
}
@supports not ((-webkit-text-stroke: 1px currentColor)) {
  .btx-stage-rail::before { color: var(--brass); }
}
.btx-stage:hover .btx-stage-rail::before { -webkit-text-stroke-color: var(--brass); }
.btx-stage-rail .bth-board-tag { margin-bottom: 0; }

.btx-stage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 0 clamp(1.2rem, 2.6vw, 2.4rem);
  align-content: start;
}
.btx-stage-list li {
  display: flex;
  align-items: baseline;
  gap: 0.72rem;
  padding: 0.48rem 0;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
  min-width: 0;
}
.btx-stage-list li::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brass);
  transform: translateY(-1px);
}

/* ---- 04 | Separate Tubs and Showers: one photo per outcome ----
   The dark panel now carries only the cramped case; the paper panel
   carries the roomier case, its list, and the planning caveat that
   belongs to it. A photo on each side makes the either/or literal.  */
.btx-vs .ks-panel-dark .ks-panel-photo {
  margin: 1.6rem 0 0;
  flex: 1 1 auto;
  min-height: 240px;
}
.btx-vs .ks-panel-dark .btx-vs-eval {
  margin: 1.4rem 0 0;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.75;
}
@media (max-width: 980px) {
  .btx-vs .ks-panel-dark .ks-panel-photo { flex: none; height: 240px; }
}
.btx-vs .ks-panel-paper .btx-vs-photo {
  flex: 0 0 auto;
  aspect-ratio: 16 / 10;
  margin: 1.3rem 0 0;
  box-shadow: var(--shadow-md);
}
/* the lead-in is a sentence, not a label: sentence case, body weight */
.btx-vs .ks-panel-paper .btx-vs-lead {
  margin: 1.5rem 0 0.4rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: none;
}
/* the caveat closes the roomier case; the list's own last rule divides it,
   so this carries no second hairline of its own */
.btx-vs .ks-panel-paper .btx-vs-close {
  margin: 1.35rem 0 0;
  font-size: 0.94rem;
  line-height: 1.7;
  color: #4b574f;
}

/* ---- 08 | Older homes: photographic evidence beside the survey ----
   Previously the text column ran out halfway down the photo stack and
   left a hole. The demolition findings now sit inside that column, so
   evidence and survey finish level.                                  */
.btx-older {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: clamp(2rem, 4vw, 3.8rem);
  align-items: stretch;
}
.btx-older-media {
  display: grid;
  grid-template-rows: 1.06fr 0.94fr;
  gap: 14px;
  min-height: 460px;
}
.btx-older-media figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius-img);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-bg-alt);
}
.btx-older-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.btx-older-media figure:first-child img { object-position: center 46%; }

.btx-older-text { align-self: start; }
.btx-older-text .ed-title { margin-top: 0.9rem; }
.btx-older-text .led-statement { margin: 1.1rem 0 1.1rem; }
.btx-older-text > p:not(.led-statement) {
  color: #4b574f;
  line-height: 1.75;
  margin: 0 0 0.9rem;
  max-width: none;
}
.btx-survey {
  margin-top: clamp(1.6rem, 3vw, 2.3rem);
  padding-top: clamp(1.3rem, 2.4vw, 1.8rem);
  border-top: 2px solid var(--brass);
}
.btx-survey .list-lead { margin: 0 0 1rem; }
.btx-survey .bth-reveal { grid-template-columns: repeat(2, 1fr); }
.btx-survey .bth-reveal-note {
  margin-top: clamp(1.3rem, 2.4vw, 1.7rem);
  max-width: none;
}
.btx-older-owner { margin-top: clamp(2.4rem, 4.5vw, 3.4rem); }

/* ---- image fit corrections for the swapped photos ---- */
.btx-add-banner img { object-position: center 58%; }
.btx-tl-img img { object-position: center 52%; }

/* ---- responsive ---- */
@media (max-width: 1040px) {
  .btx-stage { grid-template-columns: minmax(170px, 220px) 1fr; }
}
/* Once .ks-vs collapses to one column the shared rule gives .ks-panel-photo a
   definite height. An aspect-ratio on top of that resolves into a definite
   WIDTH, which becomes the track's min-content and blows the grid past the
   viewport. Drop the ratio here and let the fixed height stand alone. */
@media (max-width: 980px) {
  .btx-vs .ks-panel { min-width: 0; }
  .btx-vs .ks-panel-paper .btx-vs-photo {
    aspect-ratio: auto;
    height: 260px;
    min-height: 260px;
    width: 100%;
  }
}
@media (max-width: 900px) {
  .btx-older { grid-template-columns: 1fr; gap: 1.8rem; }
  .btx-older-media { min-height: 0; grid-template-rows: auto auto; }
  .btx-older-media figure { aspect-ratio: 16 / 11; }
  .btx-older-text { align-self: auto; }
}
@media (max-width: 760px) {
  .btx-stage {
    grid-template-columns: 1fr;
    gap: 0.85rem 0;
    padding: 1.4rem 0 1.5rem;
  }
  .btx-stage-rail {
    border-right: 0;
    padding-right: 0;
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
  }
  .btx-stage-rail::before { margin-bottom: 0; font-size: 1.75rem; }
}
@media (max-width: 620px) {
  .btx-stage-list { grid-template-columns: 1fr; }
  .btx-survey .bth-reveal { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .btx-stage-rail::before { transition: none; }
}
/* ===== END BATHROOM PAGE BLOCK V2 (agent-bt) ===== */

/* ===== HOME ADDITIONS PAGE BLOCK (agent-ha) ===== */

/* ---- 02 | Add the Space Your Home Is Missing ----------------------------
   Editorial masthead (title left, serif statement right on a brass rule)
   over a staggered four-photo mosaic paired with hairline note entries.  */
.hax-open-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.76fr);
  gap: clamp(1.4rem, 5vw, 4.5rem);
  align-items: end;
  margin-bottom: clamp(2.2rem, 4.6vw, 3.4rem);
}
.hax-open-head .ed-title {
  margin: 0.95rem 0 0;
  font-size: clamp(2.25rem, 5.1vw, 4.05rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.hax-open-lede {
  margin: 0;
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  line-height: 1.52;
  color: #3d4a42;
}

.hax-open-body {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(2rem, 4.4vw, 4rem);
  align-items: start;
}

.hax-mosaic {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.hax-mos-col { display: grid; gap: 16px; align-content: start; }
.hax-mos-b { margin-top: clamp(1.2rem, 2.4vw, 2.4rem); }
.hax-mosaic figure {
  margin: 0;
  border-radius: var(--radius-img);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-bg-alt);
}
.hax-mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hax-mosaic .hm-1 { aspect-ratio: 4 / 3; }
.hax-mosaic .hm-2 { aspect-ratio: 1 / 1; }
.hax-mosaic .hm-3 { aspect-ratio: 3 / 4; }
.hax-mosaic .hm-4 { aspect-ratio: 1 / 1; }

.hax-notes { display: grid; }
.hax-note {
  position: relative;
  padding: 1.25rem 0 1.4rem 3.1rem;
  border-top: 1px solid var(--hair);
}
.hax-note:first-child { border-top: 2px solid var(--brass); }
.hax-note:last-child { padding-bottom: 0; }
.hax-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2rem;
  width: 22px;
  height: 2px;
  background: var(--brass);
}
.hax-note p {
  margin: 0;
  color: #4b574f;
  font-size: 1.02rem;
  line-height: 1.75;
  max-width: 58ch;
}

@media (max-width: 1080px) {
  .hax-open-body { grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 2.8rem); }
  .hax-notes { max-width: 70ch; }
  /* full-width mosaic: flatten the crops so the photo block stays in proportion */
  .hax-mosaic .hm-1 { aspect-ratio: 3 / 2; }
  .hax-mosaic .hm-2 { aspect-ratio: 3 / 2; }
  .hax-mosaic .hm-3 { aspect-ratio: 1 / 1; }
  .hax-mosaic .hm-4 { aspect-ratio: 3 / 2; }
}
@media (max-width: 860px) {
  .hax-open-head { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; }
  .hax-open-lede { max-width: 58ch; }
}
@media (max-width: 560px) {
  .hax-mosaic { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hax-mos-col { gap: 10px; }
  .hax-mos-b { margin-top: 0; }
  .hax-mosaic .hm-1,
  .hax-mosaic .hm-2,
  .hax-mosaic .hm-3,
  .hax-mosaic .hm-4 { aspect-ratio: 1 / 1; }
  .hax-note { padding-left: 2.3rem; }
  .hax-note::before { width: 15px; }
}

/* ---- 10 | Making the Addition Feel Like Part of the Original Home -------
   A white panel overlapping the photo along a brass seam (the joint between
   old and new), then the attention points set as a ruled finish schedule. */
.hax-seam {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);
  align-items: center;
}
.hax-seam-media {
  position: relative;
  align-self: stretch;
  min-height: 420px;
  border-radius: var(--radius-img);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.hax-seam-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hax-seam-panel {
  position: relative;
  z-index: 2;
  margin-left: clamp(-4.5rem, -4vw, -2.4rem);
  background: #fff;
  border-radius: 0 var(--radius-img) var(--radius-img) 0;
  box-shadow: var(--shadow-e);
  padding: clamp(1.9rem, 3.4vw, 2.9rem) clamp(1.6rem, 3.2vw, 2.7rem);
}
/* the seam: a single brass joint line running past the panel, top and bottom */
.hax-seam-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: -16px;
  bottom: -16px;
  width: 3px;
  background: var(--brass);
  border-radius: 2px;
}
.hax-seam-panel .ed-title { margin: 0.9rem 0 0; }
.hax-seam-panel .led-statement { margin: 1.15rem 0 0; }
.hax-seam-panel .ha-p { margin: 1.05rem 0 0; max-width: none; }

.hax-sched-rule { margin-top: clamp(2.8rem, 5.4vw, 4.2rem); }
.hax-sched {
  list-style: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-top: 2px solid var(--brass);
  border-radius: 5px;
  overflow: hidden;
}
.hax-sched li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--paper);
  padding: 1.05rem 1.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.hax-sched li::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 2px;
  background: var(--brass);
  transition: width 0.25s ease;
}
.hax-sched li:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(193, 154, 91, 0.4); }
.hax-sched li:hover::before { width: 24px; }

.hax-caveat { margin-top: clamp(2rem, 4vw, 2.8rem); }

@media (max-width: 1120px) {
  .hax-sched { grid-template-columns: repeat(3, 1fr); }
  .hax-sched li { padding: 1rem 1.1rem; font-size: 0.92rem; gap: 0.7rem; }
}
@media (max-width: 820px) {
  .hax-sched { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hax-seam { grid-template-columns: 1fr; }
  .hax-seam-media { align-self: auto; min-height: clamp(265px, 62vw, 400px); }
  .hax-seam-panel {
    margin-left: 0;
    margin-top: clamp(-3rem, -4vw, -1.8rem);
    border-radius: 0 var(--radius-img) var(--radius-img) 0;
  }
}
@media (max-width: 560px) {
  .hax-sched { grid-template-columns: 1fr; }
  .hax-sched li { padding: 0.9rem 1.1rem; font-size: 0.92rem; }
}

/* ===== END HOME ADDITIONS PAGE BLOCK (agent-ha) ===== */

/* ===== ADU PAGE BLOCK V2 (agent-adu) ===== */
/* Second pass on three ADU sections: the definition (02), the small-space
   plan (07), and material guidance (12). All selectors are .adx-*.
   Devices are variants of the page's existing vocabulary: the hairline
   rule-grid, the brass-cornered photo plate, the paper panel, and the
   numbered schedule that carries the build section. */

/* ---- 02 | The definition: photo plate + display definition line ---- */
.adx-def {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 4.4vw, 4rem);
  align-items: center;
}
.adx-plate { position: relative; margin: 0; }
.adx-plate img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-img);
  box-shadow: var(--shadow-lg);
}
.adx-plate::after {
  content: "";
  position: absolute;
  inset: auto auto -16px -16px;
  width: 58%;
  height: 58%;
  border-left: 2px solid var(--brass);
  border-bottom: 2px solid var(--brass);
  border-radius: 0 0 0 var(--radius-img);
  z-index: 0;
}
.adx-def-body .ed-title { margin-top: 0.9rem; }
.adx-def-line {
  margin: 1.5rem 0 0;
  padding-left: clamp(1.1rem, 2.2vw, 1.6rem);
  border-left: 3px solid var(--brass);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.38rem, 2.3vw, 2rem);
  line-height: 1.36;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 26ch;
}

/* the eight kinds of ADU, set wide as a specimen strip */
.adx-typeblock { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.adx-type-lead { margin: 0 0 0.5rem; }
.adx-types {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(1.6rem, 3.2vw, 2.8rem);
  border-bottom: 1px solid var(--hair);
  counter-reset: adxt;
}
.adx-types > div {
  counter-increment: adxt;
  border-top: 1px solid var(--hair);
  padding: 1.05rem 0 1.35rem;
  transition: border-color 0.2s ease;
}
.adx-types > div:hover { border-top-color: var(--brass); }
.adx-types > div::before {
  content: counter(adxt, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.55rem;
}
.adx-type-t {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.38;
  color: var(--ink);
}

.adx-def-close {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: clamp(1.4rem, 3.4vw, 3rem);
  align-items: start;
  margin-top: clamp(2.2rem, 4.2vw, 3rem);
  padding-top: 1.5rem;
  border-top: 2px solid var(--brass);
}
.adx-close-line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.65vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: none;
}
.adx-def-close .ha-p { margin: 0; max-width: none; }

/* ---- 07 | Planning a small space: caution rail beside the plan key ---- */
.adx-plan-head { align-items: end; }
.adx-plan {
  display: grid;
  grid-template-columns: 0.4fr 0.6fr;
  gap: clamp(2rem, 4.6vw, 4.2rem);
  align-items: start;
}
.adx-plan-callout { margin-top: 0; max-width: none; }
.adx-plan-callout p { font-size: clamp(1.04rem, 1.5vw, 1.18rem); }
.adx-plan-note { margin: 1.5rem 0 0; max-width: none; }
.adx-plan-lead { margin: 0 0 0.5rem; }

/* the plan key: brass tick rules instead of numerals, so this list reads
   differently from the numbered indices elsewhere on the page */
.adx-key {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.6rem, 3vw, 2.8rem);
  border-bottom: 1px solid var(--hair);
}
.adx-key > div {
  display: flex;
  align-items: baseline;
  gap: clamp(0.75rem, 1.6vw, 1.05rem);
  border-top: 1px solid var(--hair);
  padding: 0.92rem 0;
  transition: border-color 0.2s ease;
}
.adx-key > div::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 1px;
  background: var(--brass);
  transform: translateY(-0.34em);
  transition: width 0.25s ease;
}
.adx-key > div:hover { border-top-color: var(--brass); }
.adx-key > div:hover::before { width: 27px; }
.adx-key span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 1.35vw, 1.1rem);
  line-height: 1.4;
  color: var(--ink);
}

.adx-plan-close { margin-top: clamp(2.2rem, 4.2vw, 3.1rem); }
.adx-goal-line {
  margin: 0;
  padding-top: 1.4rem;
  border-top: 2px solid var(--brass);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.16rem, 1.9vw, 1.44rem);
  line-height: 1.46;
  color: var(--ink);
  max-width: 34ch;
}
.adx-plan-tail { margin: 1.1rem 0 0; max-width: 62ch; }

/* ---- 12 | Material guidance: staggered plates + selection schedule ---- */
.adx-mat {
  display: grid;
  grid-template-columns: 0.9fr 0.55fr 0.55fr;
  gap: clamp(1.2rem, 2.8vw, 2.4rem);
  align-items: start;
}
.adx-mat-text { padding-top: clamp(0.6rem, 2.4vw, 2.6rem); }
.adx-mat-text .ed-title { margin-top: 0.9rem; }
.adx-mat-lede { margin: 1.2rem 0 0; max-width: 34ch; }
.adx-mat-plate { margin: 0; }
.adx-mat-plate img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-img);
  box-shadow: var(--shadow-lg);
}
.adx-mat-plate-2 { margin-top: clamp(2rem, 4.2vw, 3.6rem); }

.adx-sheet { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.adx-sheet-lead { margin: 0 0 1rem; }
.adx-sel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(1.6rem, 3.4vw, 3rem);
  counter-reset: adxsel;
  background: #fff;
  border: 1px solid var(--hair);
  border-top: 2px solid var(--brass);
  border-radius: 4px;
  padding: clamp(0.6rem, 1.6vw, 1rem) clamp(1.5rem, 3.2vw, 2.4rem) clamp(1.1rem, 2.4vw, 1.6rem);
  box-shadow: var(--shadow-sm);
}
.adx-sel > div {
  counter-increment: adxsel;
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  border-bottom: 1px solid var(--hair);
  padding: 0.74rem 0;
  transition: border-color 0.2s ease;
}
.adx-sel > div:hover { border-bottom-color: var(--brass); }
.adx-sel > div::before {
  content: counter(adxsel, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.adx-sel span {
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1.4;
  color: var(--ink);
}

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .adx-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .adx-def { grid-template-columns: 1fr; gap: 1.9rem; }
  .adx-def-line { max-width: none; }
  .adx-plate::after { inset: auto auto -12px -12px; }
  .adx-mat { grid-template-columns: 1fr 1fr; }
  .adx-mat-text { grid-column: 1 / -1; padding-top: 0; }
  .adx-mat-lede { max-width: none; }
  .adx-mat-plate img { aspect-ratio: 4 / 5; }
}
@media (max-width: 900px) {
  .adx-plan { grid-template-columns: 1fr; gap: 2rem; }
  .adx-plan-note { max-width: 72ch; }
  .adx-sel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .adx-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adx-def-close { grid-template-columns: 1fr; gap: 1.2rem; }
  .adx-goal-line { max-width: none; }
}
@media (max-width: 620px) {
  /* single column: the numeral returns to the row, matching the page's
     other one-column indices and saving a line of height per item */
  .adx-types { grid-template-columns: 1fr; }
  .adx-types > div {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.9rem 0;
  }
  .adx-types > div::before { margin-bottom: 0; }
  .adx-key { grid-template-columns: 1fr; }
  .adx-sel { grid-template-columns: 1fr; }
  .adx-mat { grid-template-columns: 1fr; gap: 1.4rem; }
  .adx-mat-plate-2 { margin-top: 0; }
  .adx-mat-plate img { aspect-ratio: 4 / 3; }
}

/* ---- follow-up fixes ---- */
/* em-4's negative pull lifted it into em-2's row */
.adu-open .ed-mosaic .em-4 { margin-top: 0; }
/* the closing line now sits under the photos, full width */
.adu-open-close {
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  padding-top: clamp(1.2rem, 2.2vw, 1.7rem);
  border-top: 1px solid var(--hair);
  color: #4b574f;
  line-height: 1.75;
  max-width: none;
}
/* the rental panel carried an 11-row list plus a photo: split the list */
.ks-panel-paper .adu-panel-list { column-gap: 1.6rem; }
.ks-panel-dark .ks-panel-photo { margin-top: auto; }

/* ===== END ADU PAGE BLOCK V2 (agent-adu) ===== */

/* ===== CUSTOM HOMES PAGE BLOCK (agent-ch) ===== */
/* Two redesigned sections on the custom-homes service page only:
     #scope         "What Custom Home Construction Can Include"
     #communication "Communication Throughout Construction"
   Every new selector is .chx-*. Shared components (.ks-list, .ed-cols,
   .ed-head, .led-statement, .list-lead-lg, .stat-hl, .ks-sched-note) are
   reused as-is so the page keeps the site's component vocabulary. */

/* ---- 4. Scope of work: editorial head split, photograph on the right ---- */
.chx-scope-head {
  display: grid;
  grid-template-columns: 1.28fr 0.72fr;
  gap: clamp(2rem, 4vw, 3.6rem);
  align-items: center;
  margin-bottom: clamp(2.6rem, 4.6vw, 3.8rem);
}
.chx-scope-intro .ed-title { margin-top: 1rem; }
.chx-scope-lede { margin: 1.35rem 0 0; max-width: 46ch; }
.chx-scope-media {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-img);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-bg-alt);
}
.chx-scope-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  display: block;
}

/* The lead-in is a sentence, so it is set as one: sentence case at body
   size, carrying the site's brass measuring rule instead of a caps kicker. */
.chx-index-lead {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.6rem);
  max-width: none;
  margin: 0 0 1.6rem;
}
.chx-index-lead::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--brass), var(--hair));
}

/* 28 entries resolve into a complete 4 x 7 index, no orphan row */
.chx-scope-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(1.3rem, 2.5vw, 2.3rem);
}
.chx-scope-list li { padding: 0.78rem 0; }

.chx-scope-close { margin-top: clamp(2.4rem, 4.5vw, 3.4rem); }

/* ---- 10. Communication: the routine channel and the urgent one ---- */
/* A sibling of .ed-cols: same brass top rules, made asymmetric because the
   two channels are not equals (email is routine, the phone call is the
   exception), and marked with the icon set the header and footer already use. */
.chx-channels {
  display: grid;
  grid-template-columns: 1.38fr 0.62fr;
  gap: clamp(1.8rem, 3.6vw, 3.4rem);
  margin-top: 0;
}
.chx-channel {
  border-top: 2px solid var(--brass);
  padding-top: clamp(1.1rem, 2vw, 1.55rem);
}
.chx-channel-ico {
  display: block;
  color: var(--brass);
  margin-bottom: clamp(0.9rem, 1.8vw, 1.25rem);
}
.chx-channel-ico svg { width: 27px; height: 27px; display: block; }
.chx-channel-lead { margin: 0; max-width: none; text-wrap: pretty; }
.chx-channel-alt p {
  margin: 0;
  color: #4b574f;
  font-size: 1.06rem;
  line-height: 1.72;
  max-width: none;
}

/* The waiting period, set into warm paper so it reads as a held note */
.chx-timeline {
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--radius-img);
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.6rem, 3.2vw, 2.6rem);
}
.chx-timeline > div:first-child { padding-right: clamp(1.6rem, 3.4vw, 3rem); }
.chx-timeline > div + div {
  border-left: 1px solid var(--hair);
  padding-left: clamp(1.6rem, 3.4vw, 3rem);
}
.chx-timeline p { margin: 0; color: #4b574f; line-height: 1.75; max-width: none; }

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .chx-scope-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .chx-scope-head { grid-template-columns: 1fr; gap: clamp(1.6rem, 4vw, 2.2rem); }
  .chx-scope-media { aspect-ratio: 4 / 3; }
  .chx-scope-media img { object-position: 50% 28%; }
  .chx-scope-lede { max-width: none; }
  .chx-scope-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chx-channels { grid-template-columns: 1fr; gap: clamp(1.6rem, 3.5vw, 2.2rem); }
  .chx-timeline { grid-template-columns: 1fr; }
  .chx-timeline > div:first-child {
    padding-right: 0;
    padding-bottom: clamp(1.2rem, 3vw, 1.6rem);
  }
  .chx-timeline > div + div {
    border-left: 0;
    border-top: 1px solid var(--hair);
    padding-left: 0;
    padding-top: clamp(1.2rem, 3vw, 1.6rem);
  }
}
@media (max-width: 620px) {
  .chx-scope-list { grid-template-columns: minmax(0, 1fr); }
  .chx-index-lead { display: block; }
  .chx-index-lead::after { display: block; width: 100%; margin-top: 0.75rem; }
}
/* ===== END CUSTOM HOMES PAGE BLOCK (agent-ch) ===== */

/* ============================================================
   ACCESSIBILITY: brass reads 2.61:1 on white, below AA.
   Darken it wherever it carries text on a light ground.
   Brass on dark already passes at 6.10:1 and is untouched.
   ============================================================ */
.ks-or { color: #8a6a37; }
.step-number { color: #8a6a37; }


/* ---- V4 homepage: service-area list left-aligns full width ---- */
body.home .area-grid { justify-content: flex-start; max-width: none; }
body.home .area-note { text-align: left; max-width: none; }

/* ============================================================
   V4 HOMEPAGE CONSOLIDATION PASS
   19 sections -> 12. Establishes a deliberate vertical rhythm:
   dense editorial sections alternate with quieter breathing room,
   instead of every section shouting at the same volume.
   ============================================================ */

/* ---- Sectional rhythm: vary padding so sections don't drone ---- */
#about { padding-top: clamp(4.5rem, 9vw, 7.5rem); padding-bottom: clamp(4.5rem, 9vw, 7.5rem); }
#where-projects-begin { padding-top: clamp(5rem, 10vw, 8.5rem); }
#feature { padding-top: clamp(5rem, 10vw, 8.5rem); }

/* ---- ABOUT: owner-led, absorbed the old owner-led section ---- */
.about-text .ed-title { margin-top: 0.85rem; }
.about-quote {
  margin: 1.9rem 0 0;
  padding: 1.15rem 0 1.15rem 1.5rem;
  border-left: 2px solid var(--brass, var(--color-accent));
}
.about-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.about-signature { margin-top: 2rem; }

/* ---- WHERE PROJECTS BEGIN: asymmetric split, sticky media ---- */
.begin-split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}
.begin-media { position: sticky; top: 110px; }
.begin-media img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: var(--radius-img);
  box-shadow: var(--shadow-e, var(--shadow-md));
  display: block;
}
/* Stat card overlaps the image edge — deliberate grid-break */
.begin-stat {
  position: relative;
  margin: -3.2rem 0 0 auto;
  width: min(88%, 300px);
  background: var(--color-primary);
  color: #fff;
  padding: 1.4rem 1.5rem;
  border-radius: var(--radius-img);
  box-shadow: 0 22px 48px -20px rgba(8, 38, 15, 0.55);
}
.begin-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1;
  color: var(--color-accent);
}
.begin-stat-lbl {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}
.begin-body > p { color: #4b574f; line-height: 1.72; margin-bottom: 1.05rem; max-width: 68ch; }
.begin-sub {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 0.9rem;
}
.begin-body .begin-sub:not(:first-child) {
  margin-top: 2.6rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--hair);
}
.begin-note {
  font-size: 0.96rem;
  color: var(--color-text-muted);
  border-left: 2px solid var(--hair);
  padding-left: 1.1rem;
  margin: 1.4rem 0 0;
}
.begin-body .content-list { margin: 1.2rem 0 1.5rem; }

/* ---- FEATURED PROJECT: secondary case study ---- */
.case-second {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 3.5vw, 3rem);
  align-items: center;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--hair);
}
.case-second-media img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-img);
  box-shadow: var(--shadow-e, var(--shadow-md));
  display: block;
}
.case-second-tag {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.8rem;
}
.case-second-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 1rem;
}
.case-second-body p { color: #4b574f; line-height: 1.72; margin-bottom: 1rem; }
.case-second-note {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: 0 !important;
}
.feat-cta { display: flex; gap: 0.9rem; flex-wrap: wrap; justify-content: center; margin-top: clamp(2.4rem, 5vw, 3.4rem); }

/* ---- HOW WE WORK: two-column process rail ---- */
.proc-rail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--hair);
}
.proc-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: start;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--hair);
}
.proc-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-accent);
  min-width: 2.1rem;
  padding-top: 0.15rem;
}
.proc-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.7vw, 1.32rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 0.45rem;
}
.proc-body p { font-size: 0.97rem; line-height: 1.65; color: #4b574f; margin: 0; }

/* Budget + communication notes, side by side under the rail */
.work-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 3.5vw, 3rem);
  margin-top: clamp(2.6rem, 5vw, 3.8rem);
}
.work-note {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-img);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
}
.work-note h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  color: var(--ink);
  margin: 0 0 0.9rem;
}
.work-note p { color: #4b574f; line-height: 1.7; margin-bottom: 0.9rem; font-size: 0.99rem; }
.work-note p:last-child { margin-bottom: 0; }
.work-note-em {
  border-left: 2px solid var(--color-accent);
  padding-left: 1rem;
  color: var(--ink) !important;
  font-weight: 500;
}

/* ---- Gallery head spacing now that it uses ed-head ---- */
#gallery .gallery-grid { margin-top: 0; }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .proc-rail { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .begin-split { grid-template-columns: 1fr; }
  .begin-media { position: static; }
  .begin-stat { margin-left: auto; margin-right: 0; }
  .case-second { grid-template-columns: 1fr; }
  .case-second-media { order: 2; }
  .work-notes { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .begin-stat { width: 100%; margin-top: -2.4rem; }
  .proc-step { grid-template-columns: auto 1fr; gap: 0.9rem; padding: 1.3rem 0; }
  .feat-cta { flex-direction: column; }
  .feat-cta .btn { width: 100%; text-align: center; }
}

/* ---- V4 fixes found in visual review ---- */

/* About badge: num and label were running together inline */
body.home .about-badge { max-width: 236px; padding: 1.25rem 1.5rem; }
/* global: the number and its label must stack, or they run together as "20years of…" */
.about-badge .num { display: block; }
.about-badge .lbl { display: block; font-size: 0.86rem; line-height: 1.4; }

/* About: media column was ending short of the text column */
#about .split { align-items: stretch; }
#about .split-media { display: flex; }
#about .split-media img { height: 100%; aspect-ratio: auto; min-height: 520px; }

/* Where projects begin: balance the sticky column against tall body copy */
.begin-media img { aspect-ratio: 4/5; }

/* Featured second case: image was dwarfing its text block */
.case-second { align-items: center; }
.case-second-media img { aspect-ratio: 16/11; }

@media (max-width: 900px) {
  #about .split-media img { min-height: 0; aspect-ratio: 4/5; }
}

/* Badge must not hang off-canvas on narrow screens */
@media (max-width: 900px) {
  body.home .about-badge { left: 0; bottom: -18px; max-width: min(236px, calc(100% - 2rem)); }
}
@media (max-width: 520px) {
  /* the badge returns to normal flow here, so the media column must stop being
     a flex row or the badge becomes a sibling column and lands off-canvas */
  body.home #about .split-media { display: block; }
  body.home .about-badge { position: static; margin-top: 1.2rem; max-width: none; }
}

/* ============================================================
   V5 SYMMETRY PASS
   Services -> 3x2 card grid. "Where projects begin" -> two equal
   cards. Project detail -> 2x3 grid. All built on equal-height
   grid cells so nothing sits ragged.
   ============================================================ */

/* ---- SERVICES: 3 across, 2 rows ---- */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 1.8vw, 1.7rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.svc-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-img);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease, border-color 0.32s ease;
}
.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px -22px rgba(8, 38, 15, 0.42);
  border-color: var(--color-primary);
}
.svc-card-media { overflow: hidden; }
.svc-card-media img {
  width: 100%;
  aspect-ratio: 16/11;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc-card:hover .svc-card-media img { transform: scale(1.05); }
.svc-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(1.2rem, 2vw, 1.6rem);
}
.svc-card-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.6rem;
  transition: color 0.28s;
}
.svc-card:hover .svc-card-body h3 { color: var(--color-primary); }
.svc-card-body p {
  color: #59655d;
  font-size: 0.95rem;
  line-height: 1.62;
  margin: 0 0 1.1rem;
  flex: 1 1 auto;   /* pushes the CTA to a shared baseline */
}
.svc-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  transition: gap 0.25s ease;
}
.svc-card-cta svg { width: 15px; height: 15px; }
.svc-card:hover .svc-card-cta { gap: 0.85rem; }
.svc-cards-note {
  margin: clamp(1.6rem, 3vw, 2.2rem) auto 0;
  text-align: center;
  max-width: 74ch;
  color: var(--color-text-muted);
  font-size: 0.97rem;
  line-height: 1.65;
}
.svc-cards-note a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- WHERE PROJECTS BEGIN: stat band + two equal cards ---- */
.begin-stat-band {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
  background: var(--color-primary);
  border-radius: var(--radius-img);
  padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1.5rem, 3vw, 2.4rem);
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.begin-stat-band .begin-stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 600;
  line-height: 1;
  color: var(--color-accent);
  flex-shrink: 0;
}
.begin-stat-band .begin-stat-lbl {
  color: rgba(255, 255, 255, 0.93);
  font-size: clamp(0.97rem, 1.3vw, 1.06rem);
  line-height: 1.6;
  margin: 0;
  max-width: 76ch;
}
.begin-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 2.2vw, 1.9rem);
  align-items: stretch;
}
.begin-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-img);
  overflow: hidden;
}
.begin-card-media img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.begin-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(1.4rem, 2.4vw, 2rem);
}
.begin-card-tag {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.7rem;
}
.begin-card-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.9rem;
}
.begin-card-body p { color: #4b574f; line-height: 1.7; margin: 0 0 1rem; font-size: 0.99rem; }
.begin-card-body p:last-child { margin-bottom: 0; margin-top: auto; padding-top: 0.4rem; }
.begin-card-lead {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.78rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.8rem !important;
}
.begin-card .content-list { margin: 0 0 1.2rem; gap: 0.6rem 1.4rem; }
.begin-card .content-list li { font-size: 0.93rem; padding-bottom: 0.7rem; }
.begin-footnote {
  margin: clamp(1.5rem, 3vw, 2.2rem) auto 0;
  max-width: 82ch;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.96rem;
  line-height: 1.65;
}

/* ---- PROJECT DETAIL: 2x3 equal cards, replaces the old ledger ---- */
.work-done {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.8vw, 1.6rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.work-done-item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-img);
  padding: clamp(1.3rem, 2.2vw, 1.7rem);
  display: flex;
  flex-direction: column;
}
.work-done-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: 0.7rem;
}
.work-done-item h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 0.6rem;
}
.work-done-item p { color: #4b574f; font-size: 0.95rem; line-height: 1.65; margin: 0; }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .svc-cards { grid-template-columns: repeat(2, 1fr); }
  .work-done { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .begin-cards { grid-template-columns: 1fr; }
  .begin-stat-band { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
  .begin-card-body p:last-child { margin-top: 0; }
}
@media (max-width: 620px) {
  .svc-cards { grid-template-columns: 1fr; }
  .work-done { grid-template-columns: 1fr; }
  .begin-card .content-list, .begin-card .content-list.cols-2 { grid-template-columns: 1fr 1fr; }
}

/* Begin cards: lock media to one shared height so both headings align */
.begin-card-media { flex: 0 0 auto; height: clamp(200px, 22vw, 280px); overflow: hidden; }
.begin-card-media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; display: block; }

/* Feature gallery: drop the staggered offset so it aligns with the grid below */
.feat-grid img:nth-child(1), .feat-grid img:nth-child(4) { margin-top: 0; }
.feat-grid img { aspect-ratio: 4/5; }

/* ============================================================
   V6: centered section heads + green process boxes
   ============================================================ */

/* All section heads now centered — keep the lede readable, not full-bleed */
.ed-head.center .ed-lede { max-width: 68ch; }

/* ---- HOW WE WORK: green boxes instead of an open rail ---- */
.proc-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  border-top: 0;   /* rail lines no longer apply */
}
.proc-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  background: var(--color-primary);
  border: 0;
  border-bottom: 0;
  border-radius: var(--radius-img);
  padding: clamp(1.3rem, 2.2vw, 1.75rem);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease;
}
.proc-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px -20px rgba(8, 38, 15, 0.55);
}
.proc-num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--color-accent);
  min-width: 0;
  padding-top: 0;
  margin-bottom: 0.85rem;
}
.proc-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.2;
  color: #fff;
  margin: 0 0 0.55rem;
}
.proc-body p {
  font-size: 0.93rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
}

@media (max-width: 1100px) {
  .proc-rail { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .proc-rail { grid-template-columns: 1fr; }
}

/* Honeypot: off-screen decoy field. Bots fill it, people never see it.
   form-relay silently rejects any submission where _honey has a value.
   Kept out of the tab order and hidden from assistive tech. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}