/* Renovation Sells Dallas — brand system from the 2023 Official Brand Guide.
   Type: PP Eiko (headlines) + ABC Marfa (body, subheads, pre-headers). Italic accent = Bodoni Moda (guide's Didone fallback for
   Eiko Italic), self-hosted since 2026-09-23 (SIL Open Font License, assets/fonts/BodoniModa-OFL.txt; Google Fonts latin subset).
   Color: Midnight, Reno Blue, Sand, Stone, Taupe, Wet Clay, Fresh, Terra Cotta accent, Action Blue for CTAs only. */
@font-face { font-family: 'PP Eiko'; src: url('/assets/fonts/PPEiko-Medium.woff2') format('woff2'), url('/assets/fonts/PPEiko-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Eiko'; src: url('/assets/fonts/PPEiko-Thin.woff2') format('woff2'), url('/assets/fonts/PPEiko-Thin.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'ABC Marfa'; src: url('/assets/fonts/ABCMarfa-Medium.woff2') format('woff2'), url('/assets/fonts/ABCMarfa-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'ABC Marfa'; src: url('/assets/fonts/ABCMarfa-MediumItalic.woff2') format('woff2'), url('/assets/fonts/ABCMarfa-MediumItalic.otf') format('opentype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'ABC Marfa'; src: url('/assets/fonts/ABCMarfa-Thin.woff2') format('woff2'), url('/assets/fonts/ABCMarfa-Thin.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'ABC Marfa'; src: url('/assets/fonts/ABCMarfa-ThinItalic.woff2') format('woff2'), url('/assets/fonts/ABCMarfa-ThinItalic.otf') format('opentype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('/assets/fonts/BodoniModa-Italic-latin.woff2') format('woff2'); font-weight: 400 500; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Stand-in while Bodoni loads: Georgia Italic scaled to Bodoni Moda's width, so an italic phrase wraps the same way before and
   after the swap (the luxury H1 jumped from 3 lines to 2 on slow phones, audit item 9). Android has no Georgia and uses serif. */
@font-face { font-family: 'Bodoni Fallback'; src: local('Georgia Italic'), local('Georgia-Italic'); font-weight: 400 500; font-style: italic; size-adjust: 95.5%; }

:root {
  --midnight: #121c24; --reno: #213342; --action: #193eff; --fresh: #d3e7ef; --sand: #ded9ca; --stone: #ebebeb;
  --taupe: #cacac5; --clay: #a99f8f; --terra: #A1684A; --white: #ffffff; --blue-2: #42687C; --blue-3: #DFF0F7; --blue-4: #EEFBFF;
  --paper: #f6f4ef; --ink: #1d2730; --muted: #55606a;
  --field-border: #7d858c; /* form field outlines: 3.75:1 on white (WCAG 1.4.11); Taupe stays for decorative dividers */
  --serif: 'PP Eiko', Georgia, 'Times New Roman', serif;
  --serif-italic: 'Bodoni Moda', 'Bodoni Fallback', Georgia, serif;
  --sans: 'ABC Marfa', 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --wrap: 1180px; --radius: 6px; --shadow: 0 12px 34px rgba(18, 28, 36, .10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; } /* keyboard focus and #anchors land below the sticky header */
[hidden] { display: none !important; }
body { margin: 0; font-family: var(--sans); font-weight: 500; font-size: 16.5px; line-height: 1.62; color: var(--ink); background: var(--white); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--reno); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2 { font-family: var(--serif); font-weight: 500; line-height: 1.1; margin: 0 0 .55em; color: var(--reno); letter-spacing: -.005em; }
h3, h4 { font-family: var(--sans); font-weight: 500; line-height: 1.25; margin: 0 0 .5em; color: var(--reno); }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.2rem); }
h2 { font-size: clamp(1.95rem, 3.4vw, 2.75rem); max-width: 24ch; }
h3 { font-size: 1.25rem; }
h1 em, h2 em { font-family: var(--serif-italic); font-style: italic; font-weight: 400; }
p { margin: 0 0 1em; }
.lead { font-size: 1.12rem; max-width: 62ch; color: var(--muted); }
.lead--light { color: rgba(255,255,255,.78); }
/* closing-band note, e.g. the one Notable line (2026-10-02); unlike .lead it stays visible on phones */
.cta-note { margin: .9rem 0 0; font-size: .95rem; }
.section--midnight .cta-note { color: rgba(255,255,255,.78); }
.section--midnight .cta-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--action); color: #fff; padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }
.kicker { font-weight: 500; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--terra); margin: 0 0 .9rem; }
.kicker--light { color: var(--fresh); }
.kicker--terra { color: var(--terra); }

/* buttons — Action Blue is reserved for true CTAs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 500; font-size: 1rem; padding: .85rem 1.4rem; border-radius: var(--radius); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease, color .15s ease; font-family: var(--sans); line-height: 1.2; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--action); color: #fff; border-color: var(--action); }
.btn-primary:hover { background: #1233d6; border-color: #1233d6; }
.btn-outline { background: transparent; color: var(--reno); border-color: var(--reno); }
.btn-outline:hover { background: var(--reno); color: #fff; }
.btn-sm { padding: .55rem 1rem; font-size: .92rem; }
.btn-block { width: 100%; }
.textlink { font-weight: 500; color: var(--action); text-decoration: none; }
.textlink::after { content: ' →'; }
.textlink:hover { text-decoration: underline; }
.textlink--light { color: var(--fresh); }
.section-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.5rem; }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--stone); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand img { width: 178px; height: auto; }
.brand-loc { font-family: var(--serif); font-size: 1.15rem; color: var(--terra); padding-left: .6rem; border-left: 1px solid var(--taupe); line-height: 1; }
.site-nav { display: flex; align-items: center; gap: 1.3rem; }
.site-nav a { text-decoration: none; font-weight: 500; font-size: .93rem; color: var(--ink); }
.site-nav a:hover { color: var(--action); }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 8px; cursor: pointer; }
.nav-toggle span:not(.sr-only) { display: block; height: 2px; background: var(--reno); margin: 6px 0; }

/* hero */
.hero { background: var(--midnight); color: #fff; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3.5rem; align-items: center; padding: 4rem 0 4.5rem; }
.hero h1 { color: #fff; margin-bottom: 1rem; }
/* The home H1 is nine words (audit item 34); at the default size it ran five lines and left the form column ~280px short */
@media (min-width: 861px) { .page-home .hero h1 { font-size: clamp(2.6rem, 3.9vw, 3.2rem); } }
.hero .lead { color: rgba(255,255,255,.84); font-size: 1.16rem; }
.hero-stat { font-family: var(--serif); font-weight: 200; font-size: 1.35rem; line-height: 1.35; color: var(--sand); border-left: 2px solid var(--terra); padding-left: 1rem; margin: 1.4rem 0 1.6rem; max-width: 34ch; }
.proof { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .92rem; color: rgba(255,255,255,.78); }
.proof li::before { content: '✓'; color: var(--terra); font-weight: 700; margin-right: .45rem; }
.hero-side { display: grid; gap: 1.2rem; }
.hero-media { border-radius: 8px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.35); aspect-ratio: 3 / 2; background: var(--reno); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.lead-form--mini { padding: 1.6rem; }
.mini-title { font-family: var(--serif); font-size: 1.6rem; margin: 0 0 .2rem; color: var(--reno); }
.mini-text { color: var(--muted); font-size: .95rem; margin-bottom: 1rem; }

/* stats strip */
.stats { background: var(--sand); }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; padding: 2.2rem 0; }
.stat { display: grid; gap: .25rem; border-left: 1px solid var(--clay); padding-left: 1.2rem; }
.stat-value { font-family: var(--serif); font-weight: 200; font-size: 2.6rem; line-height: 1; color: var(--midnight); }
.stat-label { font-size: .88rem; color: #3d4852; line-height: 1.4; }

/* sections */
.section { padding: 5.5rem 0; }
.section--sand { background: var(--sand); }
.section--sand h2, .section--sand h3 { color: var(--midnight); }
.section--sand .lead { color: #3d4852; }
.section--midnight { background: var(--midnight); color: var(--sand); }
.section--midnight h2 { color: #fff; }
.section--midnight h3 { color: #fff; }
.section--fresh { background: var(--blue-3); }
.cards { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { background: var(--paper); border: 1px solid var(--stone); border-radius: var(--radius); padding: 2rem 1.75rem; display: flex; flex-direction: column; }
.card h3 { margin-top: 0; }
.card p { flex: 1; color: var(--muted); }
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 2.5rem; }
.service-media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--stone); margin-bottom: 1.1rem; }
.service-media img { width: 100%; height: 100%; object-fit: cover; }
.service p { color: #3d4852; margin: 0; }
.steps { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 2.2rem 2.5rem; }
.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps li { border-top: 1px solid var(--clay); padding-top: 1.2rem; }
.step-num { font-family: var(--serif); font-weight: 200; font-size: 2.6rem; color: var(--terra); line-height: 1; display: block; margin-bottom: .6rem; }
.steps h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.steps p { margin: 0; color: var(--muted); font-size: .97rem; }

/* work */
.compare-wrap { margin: 2.5rem 0 3rem; }
.compare { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 8px; background: var(--reno); user-select: none; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-before, .compare-after { position: absolute; inset: 0; }
.compare-after { clip-path: inset(0 0 0 50%); }
.compare-label { position: absolute; top: 1rem; left: 1rem; background: rgba(18,28,36,.8); color: #fff; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 4px; }
.compare-label--after { left: auto; right: 1rem; }
.compare-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none; }
.compare-handle::after { content: '↔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--reno); display: grid; place-items: center; font-size: 1.1rem; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.compare input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare-wrap figcaption { color: var(--clay); font-size: .9rem; margin-top: .8rem; }
.projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.project-media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: rgba(255,255,255,.06); margin-bottom: 1.1rem; }
.project-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.project:hover .project-media img { transform: scale(1.03); }
.project-tag { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--terra); margin-bottom: .35rem; }
.project h3 { margin-bottom: .4rem; }
.project p:last-child { color: var(--muted); margin: 0; font-size: .97rem; } /* 6.4:1 on white (was Clay, 2.6:1) */
.section--sand .project p:last-child { color: #3d4852; }
.section--midnight .project p:last-child { color: var(--clay); }

/* reviews */
.reviews-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.google-badge { display: inline-flex; align-items: center; gap: .9rem; text-decoration: none; background: var(--paper); border: 1px solid var(--stone); border-radius: var(--radius); padding: .9rem 1.2rem; color: var(--ink); }
.google-badge span { display: grid; gap: .1rem; }
.google-badge strong { font-weight: 500; }
.google-badge em { font-style: normal; color: var(--action); font-size: .88rem; }
.google-g { font-family: var(--serif); font-size: 2rem; color: var(--reno); width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--taupe); display: grid !important; place-items: center; }
.stars { color: var(--terra); letter-spacing: .1em; font-size: .9rem; }
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.quote { margin: 0; padding: 2rem; border: 1px solid var(--stone); border-radius: var(--radius); background: var(--paper); }
.quote p { font-family: var(--serif); font-weight: 200; font-size: 1.22rem; line-height: 1.45; color: var(--midnight); }
.quote footer { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; font-size: .9rem; color: var(--muted); }
.quote footer strong { color: var(--reno); font-weight: 500; }
.quote footer strong a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }
.reviews-cta { margin-top: 2rem; color: var(--muted); }

/* instagram */
.ig-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.ig-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; margin-top: 2.2rem; }
.ig-post { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: var(--fresh); }
.ig-post img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ig-post:hover img { transform: scale(1.04); }

/* faq */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3.5rem; align-items: start; }
.faq details { border-top: 1px solid var(--taupe); padding: 1.1rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--taupe); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--serif); font-size: 1.6rem; color: var(--terra); line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq summary h3 { margin: 0; font-size: 1.08rem; }
.faq details p { margin: .8rem 0 0; color: var(--muted); max-width: 70ch; }

/* areas / sister */
.areas-grid, .sister-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.chips li { background: #fff; color: var(--reno); padding: .55rem 1rem; border-radius: 999px; font-size: .95rem; border: 1px solid var(--taupe); }
.sister-grid .btn { justify-self: end; }

/* contact + forms */
.contact { background: var(--sand); }
.contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3.5rem; align-items: start; }
.contact-list { list-style: none; padding: 0; margin: 1.5rem 0 0; line-height: 2; }
.contact-list a { color: var(--reno); }
.lead-form { background: #fff; padding: 2.2rem; border-radius: var(--radius); box-shadow: var(--shadow); }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { font-size: .85rem; color: var(--reno); }
.field input, .field select, .field textarea { font: inherit; padding: .72rem .85rem; border: 1px solid var(--field-border); border-radius: 4px; background: #fff; color: var(--ink); width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--action); outline-offset: 1px; border-color: var(--action); }
.hp { display: none !important; } /* spam trap: never displayed, so browser autofill leaves it alone */
.form-note { font-family: var(--sans); font-weight: 200; font-size: .8rem; color: var(--muted); margin: .9rem 0 0; }
.form-status { margin: .8rem 0 0; min-height: 1.5em; }
.form-status.ok { color: #1a7f4b; }
.form-status.err { color: #b3261e; }
.form-status .form-next { display: block; margin-top: .45rem; color: var(--midnight); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* footer + mobile CTA */
.site-footer { background: var(--midnight); color: var(--sand); padding: 4rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer-brand img { width: 200px; margin-bottom: 1rem; }
.site-footer h3 { color: #fff; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .8rem; }
.site-footer a { color: #fff; }
.site-footer p { color: var(--clay); font-size: .95rem; }
.footer-legal { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid rgba(222,217,202,.18); margin-top: 3rem; padding-top: 1.5rem; font-size: .85rem; }
.footer-legal p { margin: 0; }
.mobile-cta { display: none; }

/* responsive */
@media (max-width: 1000px) {
  .cards-3, .services, .projects, .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .ig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 1px); background: #fff; flex-direction: column; align-items: stretch; padding: 1rem 1.25rem 1.5rem; border-bottom: 1px solid var(--stone); box-shadow: var(--shadow); }
  .site-nav.open { display: flex; }
  .site-nav a { padding: .6rem 0; font-size: 1.05rem; }
  .hero-grid, .areas-grid, .sister-grid, .contact-grid, .faq-grid { grid-template-columns: 1fr; }
  .hero-grid { padding: 3rem 0 3.5rem; }
  .section { padding: 4rem 0; }
  .quotes { grid-template-columns: 1fr; }
  .sister-grid .btn { justify-self: start; }
  .mobile-cta { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; position: fixed; left: 0; right: 0; bottom: 0; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--stone); z-index: 40; }
  .mobile-cta .btn { width: 100%; }
  body { padding-bottom: 72px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .cards-3, .services, .projects, .steps-4, .stats-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .lead-form { padding: 1.5rem; }
  .brand img { width: 150px; }
  .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- inner pages / section renderer ---- */
.section { padding: 4.25rem 0; }
.hero--light { background: var(--sand); color: var(--ink); }
.hero--light h1 { color: var(--midnight); }
.hero--light .lead { color: #3d4852; }
.hero--light .hero-stat { color: var(--midnight); }
.hero--light .proof { color: #3d4852; }
.hero--single .hero-grid { grid-template-columns: minmax(0, 1fr); padding: 3.25rem 0; }
.hero--single .hero-copy { max-width: 760px; }
.hero-grid { padding: 3.25rem 0 3.75rem; }
.hero-media--sm { aspect-ratio: 16 / 9; margin-bottom: 0; }
.crumbs { font-size: .82rem; color: var(--clay); margin-bottom: 1rem; }
.crumbs a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; }
.crumbs a:hover { text-decoration-thickness: 2px; }
.hero .crumbs { color: rgba(255,255,255,.6); }
.hero--light .crumbs { color: #3d4852; } /* 6.6:1 on Sand (the white-on-dark shade read 1.2:1 here) */
.card--media { padding: 0; overflow: hidden; }
.card-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card--media:hover .card-media img { transform: scale(1.03); }
.card-body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.card-body h3 a { text-decoration: none; color: inherit; }
.card-body h3 a:hover { color: var(--action); }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery { display: grid; gap: 1rem; margin-top: 2rem; }
.gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--stone); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.prose-wrap { max-width: 760px; }
.prose p, .prose li { color: #3d4852; }
.prose h3 { margin-top: 1.6rem; }
.prose ul { padding-left: 1.2rem; }
.prose blockquote { margin: 1.5rem 0; padding-left: 1.2rem; border-left: 2px solid var(--terra); font-family: var(--serif); font-weight: 200; font-size: 1.2rem; color: var(--midnight); }
.media-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.media-text--reverse .media-text-copy { order: 2; }
.media-text-media { border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--stone); }
.media-text-media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band .cta-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: flex-end; }
.section--midnight .kicker { color: var(--terra); }
.section--midnight .lead { color: rgba(255,255,255,.78); }
.section--midnight .quote { background: rgba(255,255,255,.04); border-color: rgba(222,217,202,.22); }
.section--midnight .quote p { color: #fff; }
.section--midnight .quote footer strong { color: var(--sand); }
.section--sand .card { background: #fff; }
@media (max-width: 1000px) { .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .section { padding: 3.25rem 0; }
  .media-text, .cta-band .cta-grid { grid-template-columns: 1fr; }
  .media-text--reverse .media-text-copy { order: 0; }
  .cta-actions { justify-content: flex-start; }
  .gallery-3, .cards-2, .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid { padding: 2.5rem 0 3rem; }
}
@media (max-width: 600px) { .gallery-3, .gallery-2, .cards-2, .cards-4 { grid-template-columns: 1fr; } .stats-grid { padding: 1.6rem 0; gap: 1rem; } .stat-value { font-size: 2.1rem; } }

/* nav links never wrap inside themselves; desktop sizes and spacing live in the header block at the end of this file */
.site-nav a { white-space: nowrap; }
.header-row { gap: 1rem; }

/* ---- mobile density (Justin 2026-09-07: phone scrolls too long) ---- */
@media (max-width: 860px) {
  .hero-media, .hero-media--sm { display: none; }
  .hero--single .hero-media { display: block; aspect-ratio: 16 / 10; }
  .hero-grid { padding: 2rem 0 2.25rem; gap: 1.5rem; }
  .hero h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .hero .lead { font-size: 1.02rem; }
  .hero-stat { font-size: 1.12rem; margin: 1rem 0 1.1rem; }
  .proof { gap: .35rem 1rem; font-size: .86rem; margin-bottom: 1rem; }
  .lead-form--mini { padding: 1.25rem; }
  .mini-title { font-size: 1.4rem; }
  .section { padding: 2.75rem 0; }
  .section + .section { padding-top: 2.5rem; }
  h2 { font-size: clamp(1.7rem, 7vw, 2.1rem); }
  .lead { font-size: 1.02rem; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; padding: 1.5rem 0; }
  .stat-value { font-size: 1.9rem; }
  .stat-label { font-size: .8rem; }
  .cards { gap: .9rem; margin-top: 1.5rem; }
  .card { padding: 1.3rem 1.2rem 1.2rem; }
  .card p { font-size: .95rem; margin-bottom: .6rem; }
  .card-body { padding: 1.1rem 1.2rem 1.2rem; }
  .steps { margin-top: 1.5rem; gap: 1.1rem; }
  .step-num { font-size: 1.8rem; margin-bottom: .3rem; }
  .steps p { font-size: .93rem; }
  .projects { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .9rem; margin: 1.5rem -1.25rem 0; padding: 0 1.25rem .5rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .projects::-webkit-scrollbar { display: none; }
  .project { flex: 0 0 82%; scroll-snap-align: start; }
  .project-media { margin-bottom: .7rem; }
  .project p:last-child { font-size: .92rem; }
  .quotes { margin-top: 1.5rem; gap: .9rem; }
  .quote { padding: 1.3rem; }
  .quote p { font-size: 1.08rem; }
  .page-home .quotes .quote:nth-child(n+2) { display: none; }
  .reviews-head { gap: 1rem; }
  .google-badge { padding: .7rem .9rem; }
  .contact-grid { gap: 1.75rem; }
  .contact-list { margin-top: .75rem; line-height: 1.8; font-size: .95rem; }
  .lead-form { padding: 1.4rem; }
  .field { margin-bottom: .8rem; }
  .field textarea { rows: 3; min-height: 88px; }
  .compare-wrap { margin: 1.5rem 0 1.75rem; }
  .gallery { gap: .6rem; margin-top: 1.25rem; }
  .cta-band .cta-grid { gap: 1.25rem; }
  .site-footer { padding: 2.5rem 0 1.5rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .footer-brand p { display: none; }
  .footer-brand img { width: 160px; margin-bottom: 0; }
  .site-footer h3 { margin-bottom: .4rem; }
  .site-footer p { margin-bottom: .5rem; font-size: .92rem; }
  .footer-legal { margin-top: 1.5rem; padding-top: 1rem; font-size: .8rem; }
}
@media (max-width: 860px) {
  .hero-side .lead-form--mini { display: none; }
    .contact .field:has(#lf-timeline), .contact .field:has(#lf-address) { display: none; }
  .contact .field-row:has(#lf-timeline) { grid-template-columns: 1fr; }
}

/* ---- header lockup + CTA color (Justin 2026-09-07) ---- */
.header-row { min-height: 78px; }
.brand { gap: 0; align-items: center; }
.brand img { width: 172px; height: auto; display: block; }
.brand-loc { display: inline-flex; align-items: center; height: 26px; margin-left: 1.05rem; padding-left: 1.05rem; border-left: 1px solid var(--taupe); font-family: var(--serif); font-size: 1.22rem; line-height: 1; color: var(--terra); letter-spacing: .01em; transform: translateY(1px); }
.site-nav { align-items: center; }
.site-nav a { line-height: 1.1; padding: .35rem 0; }
.site-header .btn-primary, .mobile-cta .btn-primary { background: var(--blue-2); border-color: var(--blue-2); color: #fff; }
.site-header .btn-primary:hover, .mobile-cta .btn-primary:hover { background: var(--reno); border-color: var(--reno); }
@media (max-width: 600px) { .brand img { width: 140px; } .brand-loc { font-size: 1.05rem; height: 22px; margin-left: .7rem; padding-left: .7rem; } }
/* inner-page hero with a side form: keep the copy anchored to the top instead of floating mid-column */
.hero:not(.hero--single) .hero-grid { align-items: start; }
.hero:not(.hero--single) .hero-copy { padding-top: 1.25rem; }

/* ---- Sell / Stay path cards in the hero (Justin 2026-09-07: the first call to action) ---- */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin: 1.4rem 0 1.2rem; }
.path { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.15rem 1rem; border-radius: 8px; text-decoration: none; background: rgba(255,255,255,.06); border: 1px solid rgba(222,217,202,.28); color: #fff; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.path:hover { transform: translateY(-2px); background: rgba(255,255,255,.1); border-color: var(--sand); }
.path--primary { background: var(--action); border-color: var(--action); }
.path--primary:hover { background: #1233d6; border-color: #1233d6; }
.path-kicker { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fresh); }
.path--primary .path-kicker { color: rgba(255,255,255,.8); }
.path-title { font-family: var(--serif); font-size: 1.45rem; line-height: 1.1; }
.path-text { font-size: .9rem; line-height: 1.4; color: rgba(255,255,255,.82); }
.path-cta { margin-top: .35rem; font-size: .9rem; font-weight: 500; }
.hero--light .path { background: #fff; border-color: var(--taupe); color: var(--ink); }
.hero--light .path-kicker { color: var(--terra); }
.hero--light .path-text { color: var(--muted); }
.hero--light .path--primary { background: var(--action); border-color: var(--action); color: #fff; }
.hero--light .path--primary .path-text, .hero--light .path--primary .path-kicker { color: rgba(255,255,255,.85); }
.seg { border: 0; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.seg legend { font-size: .85rem; color: var(--reno); margin-bottom: .4rem; padding: 0; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: block; text-align: center; padding: .6rem .5rem; border: 1px solid var(--field-border); border-radius: 4px; font-size: .92rem; color: var(--reno); cursor: pointer; }
.seg input:checked + span { background: var(--reno); border-color: var(--reno); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 1px; }
.difference .card { text-align: left; }
.difference .card h3 { font-family: var(--serif); font-size: 1.45rem; }
@media (max-width: 600px) { .paths { grid-template-columns: 1fr; gap: .6rem; } .path-title { font-size: 1.3rem; } }

/* header: the brand never shrinks into the nav */
.brand { flex-shrink: 0; }

/* ---- journal ---- */
.byline { font-size: .9rem; color: var(--muted); margin: 1rem 0 0; }
.article { padding-top: 3rem; }
.article-figure { margin: 0 0 2rem; border-radius: 8px; overflow: hidden; }
.article-figure figcaption { font-size: .85rem; color: var(--muted); padding: .6rem 0 0; }
.article .prose { font-size: 1.05rem; }
.article .prose h2 { font-size: 1.7rem; margin-top: 2.2rem; }
.article .prose h3 { margin-top: 1.8rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--stone); }
.prose th { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--reno); }
.prose tr:nth-child(even) td { background: var(--paper); }
.sources { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--taupe); font-size: .9rem; color: var(--muted); }
.sources h2 { font-family: var(--sans); font-size: .8rem; font-weight: 500; line-height: 1.25; letter-spacing: .12em; text-transform: uppercase; color: var(--reno); margin: 0 0 .6rem; max-width: none; }
.sources li + li { margin-top: .4rem; }
.sources a { display: inline-block; padding: 3px 0; } /* 24px targets (WCAG 2.5.8) */
.sources ol { padding-left: 1.2rem; }
.post-meta { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--terra); margin-bottom: .4rem; }
.posts .card-body p:not(.post-meta) { font-size: .95rem; }
.table-wrap { overflow-x: auto; }
/* secondary button on dark bands must read as a button, not disabled text */
.btn-ghost { color: #fff; border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.06); }
.btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.cta-actions .btn { white-space: nowrap; }

/* project cards: the photo link must be a block, and titles must be white on dark sections */
.project-media { display: block; }
.card-media { display: block; }
.section--midnight .project h3 a, .section--midnight .project h3 { color: #fff; }
.section--midnight .project h3 a:hover { color: var(--fresh); }
.project h3 a { text-decoration: none; color: inherit; }
.project h3 a:hover { color: var(--action); }

/* owners' portrait under the contact details */
.contact-photo { margin: 1.75rem 0 0; max-width: 420px; }
.contact-photo img { border-radius: 8px; width: 100%; height: auto; }
.contact-photo figcaption { font-size: .85rem; color: var(--muted); margin-top: .5rem; }

/* projects filter */
.filter { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.5rem 0 0; }
.filter .chip { font: inherit; font-size: .9rem; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--taupe); background: #fff; color: var(--reno); cursor: pointer; }
.filter .chip.is-active { background: var(--reno); color: #fff; border-color: var(--reno); }
.projects--filterable { margin-top: 1.5rem; }
.project.is-hidden { display: none; }

.section--sand .compare-wrap figcaption { color: #3d4852; }
.section--sand .compare-wrap figcaption, .section:not(.section--midnight) .compare-wrap figcaption { color: #3d4852; }

/* AA contrast for small brand labels (Lighthouse): darker terra on light, lighter terra on dark.
   #804B31 measures 5.0:1 on Sand, 5.5 on Fresh, 5.9 on Stone, 7.1 on white (the earlier #8A5236 was 4.46 on Sand, under 4.5). */
.kicker, .project-tag, .post-meta, .path-kicker { color: #804B31; }
.hero .kicker--light { color: var(--fresh); }
.section--midnight .kicker, .section--midnight .project-tag, .section--midnight .kicker--terra, .hero:not(.hero--light) .path-kicker, .cta-band .kicker { color: #D3A98C; }
.hero--light .path-kicker { color: #804B31; }
.path--primary .path-kicker { color: rgba(255,255,255,.85); }
.stars { color: #804B31; }
.section--midnight .stars { color: #D3A98C; }

/* Cloudflare Turnstile (renders inside both lead forms when a site key is set) */
.cf-turnstile { margin: .2rem 0 .6rem; }
/* the widget is at least 300px wide: on 360-375px phones the form column is narrower, so center it over the card padding */
.cf-turnstile { margin-left: min(0px, calc((100% - 300px) / 2)); margin-right: min(0px, calc((100% - 300px) / 2)); }

/* Area chips link to the city pages */
.chips li a { color: inherit; text-decoration: none; }
.chips li a:hover { text-decoration: underline; }

/* ---- mobile pass 2 (Justin 2026-09-09: phone still scrolls too long) ----
   Phones get horizontal swipe rows instead of stacked cards and galleries, compact text cards, folded intro
   copy behind a Read more tap, closed FAQs, side-by-side Sell/Stay tiles, and a slimmer contact block.
   Desktop and tablet layouts are untouched. */
@media (max-width: 860px) {
  .section { padding: 2.4rem 0; }
  .section + .section { padding-top: 2.2rem; }
  /* swipe rows: one row, next card peeks in, bleeds to the screen edges */
  .gallery, .quotes, .cards:has(.card--media) { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .8rem; margin: 1.25rem -1.25rem 0; padding: 0 1.25rem .6rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .gallery::-webkit-scrollbar, .quotes::-webkit-scrollbar, .cards::-webkit-scrollbar { display: none; }
  .gallery figure { flex: 0 0 78%; scroll-snap-align: start; aspect-ratio: 4 / 3; }
  .cards:has(.card--media) .card { flex: 0 0 82%; scroll-snap-align: start; }
  .quote { flex: 0 0 86%; scroll-snap-align: start; }
  .page-home .quotes .quote:nth-child(n+2) { display: block; }
  /* browse pages keep a vertical grid, two across */
  .page-journal .cards:has(.card--media) { display: grid; grid-template-columns: 1fr; margin: 1.25rem 0 0; padding: 0; }
  .page-journal .cards:has(.card--media) .card { flex: none; }
  .page-projects .projects { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem .7rem; margin: 1.25rem 0 0; padding: 0; }
  .page-projects .project { flex: none; }
  .page-projects .project h3 { font-size: 1rem; }
  .page-projects .project p:last-child { display: none; }
  .gallery--grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 1rem 0 0; padding: 0; }
  .gallery--grid figure { flex: none; }
  /* text-only cards: compact rows; the areas hub becomes a two-column list of cities */
  .cards:not(:has(.card--media)) { gap: .6rem; margin-top: 1.25rem; }
  .cards:not(:has(.card--media)) .card { padding: .95rem 1rem .85rem; }
  .cards:not(:has(.card--media)) .card-body { padding: 0; } /* the card already pads; nested padding doubled it on phones */
  .cards:not(:has(.card--media)) .card h3 { font-size: 1.12rem; margin-bottom: .3rem; }
  .cards:not(:has(.card--media)) .card p { font-size: .92rem; margin-bottom: .35rem; line-height: 1.5; }
  .page-areas .cards:not(:has(.card--media)) { grid-template-columns: 1fr 1fr; }
  .page-areas .cards:not(:has(.card--media)) .card { padding: .8rem .9rem; }
  .page-areas .cards:not(:has(.card--media)) .card h3 { margin: 0; font-size: 1.05rem; }
  .page-areas .cards:not(:has(.card--media)) .card p, .page-areas .cards:not(:has(.card--media)) .card .textlink { display: none; }
  /* folded intro copy (site.js adds the Read more button on phones) */
  .prose.is-folded > :nth-child(n+2):not(.fold-keep):not(.readmore) { display: none; }
  .readmore { display: inline-block; background: none; border: 0; padding: 0; margin: -.3rem 0 .9rem; color: var(--action); font: inherit; font-weight: 500; cursor: pointer; }
  .readmore::after { content: ' +'; }
  .readmore.is-open::after { content: ' −'; }
  .media-text { gap: 1.25rem; }
  /* hero: Sell / Stay tiles side by side, titles only */
  .paths { grid-template-columns: 1fr 1fr; gap: .6rem; margin: 1rem 0 .9rem; }
  .path { padding: .8rem .85rem .75rem; gap: .2rem; }
  .path-title { font-size: 1.15rem; }
  .path-text { display: none; }
  .path-cta { margin-top: .15rem; font-size: .84rem; }
  /* contact block: no portrait on phones; the home page relies on the sticky Get a Free Estimate bar */
  .contact-photo { display: none; }
  .page-home .contact .lead-form { display: none; }
  .page-home .contact-grid { gap: .5rem; }
  .cta-band .cta-actions { gap: .6rem; }
  .cta-band .cta-actions .btn { flex: 1 1 45%; padding: .7rem .9rem; font-size: .95rem; }
}
/* mobile pass 2, round 2: swipe the home trio, clamp long card copy, two-column footer, leaner bands */
@media (max-width: 860px) {
  .page-home .cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .8rem; margin: 1.25rem -1.25rem 0; padding: 0 1.25rem .6rem; scrollbar-width: none; }
  .page-home .cards .card { flex: 0 0 82%; scroll-snap-align: start; }
  .quote p { font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
  .posts .card-body p:not(.post-meta) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .project p:last-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .section-cta { margin-top: 1.25rem; }
  .faq-grid > div:first-child .lead { display: none; }
  .cta-band .lead { display: none; }
  .cta-band h2 { margin-bottom: .2rem; }
  .media-text-media { aspect-ratio: 16 / 9; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; }
  .footer-brand { grid-column: 1 / -1; }
  .site-footer h3 { font-size: .72rem; }
  .site-footer p { font-size: .88rem; line-height: 1.5; }
  .footer-legal { gap: .4rem; }
}
@media (max-width: 860px) {
  .section-cta .btn { flex: 1 1 45%; padding: .7rem .9rem; font-size: .95rem; }
}
@media (max-width: 860px) { .faq-grid { gap: .75rem; } }

/* phones: the sticky bar already carries the phone number and the estimate button (Justin 2026-09-09), so the
   in-page duplicates go. The site footer at the bottom keeps its contact lines. */
@media (max-width: 860px) {
  .header-cta { display: none; }
  /* buttons that repeat the sticky bar carry data-dup (sections.mjs, audit item 14); a row left with nothing else goes too */
  .cta-actions [data-dup], .section-cta [data-dup], .hero-actions [data-dup] { display: none; }
  .cta-actions:not(:has(> :not([data-dup]))), .section-cta:not(:has(> :not([data-dup]))), .hero-actions:not(:has(> :not([data-dup]))) { display: none; }
  .contact-list li:has(a[href^="tel:"]) { display: none; }
  .hero .proof { margin-top: .2rem; }
}

/* three-tile stats strip (home, Justin 2026-09-09: 5.0 · 15–20% · 48 hrs) */
.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; padding: 1.3rem 0; }
  .stats-3 .stat { padding-left: .7rem; }
  .stats-3 .stat-value { font-size: 1.7rem; }
  .stats-3 .stat-label { font-size: .74rem; }
}

/* hero tile thumbnails (Justin 2026-09-09: images and color on the front page) */
.path-thumb { display: block; position: relative; margin: .85rem -1.15rem -1rem; aspect-ratio: 16 / 7; overflow: hidden; border-radius: 0 0 8px 8px; }
.path-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.path-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--midnight) 0%, rgba(18,28,36,0) 45%); opacity: .9; pointer-events: none; }
.path--primary .path-thumb::after { background: linear-gradient(to bottom, var(--action) 0%, rgba(25,62,255,0) 45%); }
.path:hover .path-thumb img { transform: scale(1.02); }
.path-thumb img { transition: transform .4s ease; }
@media (max-width: 860px) {
  .path-thumb { margin: .55rem -.85rem -.75rem; aspect-ratio: 16 / 9; border-radius: 0 0 8px 8px; }
}

/* ---- Fresh replaces Action Blue (Justin 2026-09-09: "the action blue is too bright") ----
   Backgrounds that were Action Blue are now Fresh #d3e7ef with Midnight text. Blue text, hovers and focus rings use
   the softer Reno-Blue tint #42687C so they stay readable on white. Header and sticky-bar buttons keep #42687C (9/7). */
.btn-primary { background: var(--fresh); border-color: var(--fresh); color: var(--midnight); }
.btn-primary:hover { background: #c3dde8; border-color: #c3dde8; color: var(--midnight); }
.path--primary, .hero--light .path--primary { background: var(--fresh); border-color: var(--fresh); color: var(--midnight); }
.path--primary:hover { background: #c3dde8; border-color: #c3dde8; }
.path--primary .path-kicker, .hero--light .path--primary .path-kicker { color: #804B31; }
.path--primary .path-text, .hero--light .path--primary .path-text { color: #3d4852; }
.path--primary .path-cta { color: var(--midnight); }
.path--primary .path-thumb::after { background: linear-gradient(to bottom, var(--fresh) 0%, rgba(211,231,239,0) 45%); }
/* Stay tile (option C, chosen 2026-09-17): Sand fill with a Terra Cotta kicker so it separates from the Midnight hero; Sell keeps Fresh and stays the lead. */
.hero:not(.hero--light) .path:not(.path--primary) { background: var(--sand); border-color: var(--sand); color: var(--midnight); }
.hero:not(.hero--light) .path:not(.path--primary):hover { background: #d4ceba; border-color: #d4ceba; }
.hero:not(.hero--light) .path:not(.path--primary) .path-kicker { color: #804B31; }
.hero:not(.hero--light) .path:not(.path--primary) .path-text { color: #3d4852; }
.hero:not(.hero--light) .path:not(.path--primary) .path-cta { color: var(--midnight); }
.hero:not(.hero--light) .path:not(.path--primary) .path-thumb::after { background: linear-gradient(to bottom, var(--sand) 0%, rgba(222,217,202,0) 45%); }
.textlink, .readmore, .google-badge em { color: var(--blue-2); }
.site-nav a:hover, .card-body h3 a:hover, .project h3 a:hover { color: var(--blue-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline-color: var(--blue-2); border-color: var(--blue-2); }
.seg input:focus-visible + span { outline-color: var(--blue-2); }
.skip { background: var(--reno); }
.section--midnight .project h3 a:hover { color: var(--fresh); }

/* hero proof row under the bullets (Justin 2026-09-09: fill the empty hero column with real outcomes) */
.hero-results { margin-top: 1.6rem; }
.hero-results-kicker { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); margin: 0 0 .7rem; }
.hero-results-kicker .stars { color: #D3A98C; letter-spacing: .08em; margin-right: .3rem; }
.hero-results-grid { display: grid; gap: .7rem; }
.hero-result { display: grid; grid-template-columns: 110px 1fr; gap: .9rem; align-items: center; padding: .55rem .9rem .55rem .55rem; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(222,217,202,.22); color: #fff; text-decoration: none; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.hero-result:hover { background: rgba(255,255,255,.1); border-color: var(--sand); transform: translateY(-1px); }
.hero-result-media { display: block; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--reno); }
.hero-result-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-result-body { display: grid; gap: .15rem; min-width: 0; }
.hero-result-body strong { font-weight: 500; font-size: 1rem; color: #fff; }
.hero-result-body span { font-size: .9rem; line-height: 1.4; color: rgba(255,255,255,.76); }
.hero--light .hero-result { background: #fff; border-color: var(--taupe); color: var(--ink); }
.hero--light .hero-result-body strong { color: var(--reno); }
.hero--light .hero-result-body span { color: var(--muted); }
.hero--light .hero-results-kicker { color: #3d4852; }
@media (max-width: 860px) { .hero-results { display: none; } }
/* proof row sizing: larger tiles so the copy column nearly matches the form column on desktop */
@media (min-width: 861px) {
  .hero-results { margin-top: 2rem; }
  .hero-results-grid { gap: .85rem; }
  .hero-result { grid-template-columns: 136px 1fr; gap: 1.1rem; padding: .7rem 1rem .7rem .7rem; }
  .hero-result-body strong { font-size: 1.08rem; }
  .hero-result-body span { font-size: .95rem; }
}
@media (min-width: 861px) { .hero-result { grid-template-columns: 150px 1fr; } .hero-results-grid { gap: .75rem; } }

/* ---- header tiers (Justin 2026-09-09: the nav text blends together) ----
   Desktop: "Start here" links in Reno Blue, a thin divider, then the "Learn more" links lighter and smaller; the current
   page carries a Terra Cotta underline. Phone menu: the same two groups under small labels. */
.nav-group { display: flex; align-items: center; gap: 1.05rem; }
.nav-group-label { display: none; }
.nav-divider { display: inline-block; width: 1px; height: 20px; background: var(--taupe); margin: 0 .35rem; }
.nav-group--start a { color: var(--reno); font-weight: 500; }
.nav-group--learn a { color: var(--muted); font-weight: 500; }
.nav-group--learn a:hover { color: var(--reno); }
/* the current page's underline is a text decoration, so its link box stays the height of the links beside it and its text
   sits on the same line (a shorter padding-bottom used to drop it 1.2px, QA 2026-09-27) */
.site-nav a[aria-current="page"] { color: var(--reno); text-decoration-line: underline; text-decoration-color: var(--terra); text-decoration-thickness: 2px; text-underline-offset: .45em; }
.nav-group--learn a[aria-current="page"] { color: var(--reno); }
@media (max-width: 860px) {
  .nav-group { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-group-label { display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #804B31; margin: .9rem 0 .25rem; }
  .nav-group--start .nav-group-label { margin-top: .2rem; }
  .nav-group--learn a { font-size: 1rem; color: var(--ink); }
  .nav-divider { display: none; }
  .site-nav a[aria-current="page"] { text-decoration: none; border-left: 2px solid var(--terra); padding-left: .6rem; }
}
@media (max-width: 860px) {
  .site-nav.open { align-items: stretch; }
  .nav-group { width: 100%; }
  .site-nav a { padding: .55rem 0; }
}
/* start-here links in the phone menu: short labels, a size up (Justin 2026-09-09: Sell · Agents · Stay). On desktop every
   nav link is one size since 2026-09-27 (header block at the end of this file). */
@media (max-width: 860px) { .nav-group--start a { font-size: 1.2rem; } }
/* small Terra Cotta bullets between the three start links (desktop only) */
@media (min-width: 861px) {
  .nav-group--start a { position: relative; }
  .nav-group--start a + a::before { content: '•'; position: absolute; top: 50%; transform: translateY(-52%); color: var(--terra); font-size: .85rem; line-height: 1; pointer-events: none; }
}

/* ---- overflow fixes (2026-09-11) ----
   360px phones: the contact column ran 5px past the viewport. (The 861–1000px header rules that hid the estimate button
   were replaced by the two-row header on 2026-09-27.) */
.contact-grid > * { min-width: 0; }
.contact-list a { overflow-wrap: anywhere; }
html { overflow-x: clip; }

/* Contact block (2026-09-19): source order is intro → form → details, so phones read one short introduction, then the
   form, then the phone / email / booking list and the portrait. Desktop keeps intro + details in the left column. */
.contact-grid { grid-template-areas: "intro form" "details form"; grid-template-rows: auto 1fr; row-gap: 0; }
.contact-intro { grid-area: intro; }
.contact .lead-form { grid-area: form; }
.contact-details { grid-area: details; }
.contact-intro h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); line-height: 1.05; margin: 0 0 .8rem; }
@media (max-width: 860px) {
  .contact-grid { grid-template-areas: "intro" "form" "details"; grid-template-rows: none; row-gap: 1.25rem; }
  .contact-intro .lead { margin-bottom: 0; }
  .page-contact .contact { padding-top: 2.25rem; }
  .page-contact .contact-photo { display: block; max-width: 100%; margin-top: 1.25rem; }
}
/* On the contact page the form is the page: the sticky bar keeps Call and drops the estimate button that would link to itself. */
@media (max-width: 860px) { .page-contact .mobile-cta a[href^="/contact/"] { display: none; } .page-contact .mobile-cta { grid-template-columns: 1fr; } }

/* ---- lead forms (2026-09-23 audit): optional-field labels, per-field errors, fallback links, what-happens-next ---- */
.field label .opt { color: var(--muted); font-weight: 200; }
.field-error { margin: .1rem 0 0; font-size: .85rem; line-height: 1.4; color: #b3261e; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #b3261e; }
.form-status a { color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.lead-form--mini textarea { min-height: 0; }
.contact-next { margin: 1.5rem 0 0; }
.contact-next-title { font-family: var(--sans); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--reno); margin: 0 0 .7rem; max-width: none; }
.contact-next-steps { list-style: none; counter-reset: next; padding: 0; margin: 0; display: grid; gap: .75rem; }
.contact-next-steps li { counter-increment: next; display: grid; grid-template-columns: 2rem 1fr; column-gap: .6rem; align-items: baseline; }
.contact-next-steps li::before { content: counter(next, decimal-leading-zero); grid-row: span 2; font-family: var(--serif); font-weight: 200; font-size: 1.35rem; line-height: 1; color: #804B31; }
.contact-next-steps strong { font-weight: 500; color: var(--midnight); }
.contact-next-steps span { color: #3d4852; font-size: .95rem; line-height: 1.5; }
@media (max-width: 860px) {
  .contact-next { margin-top: .25rem; }
  .contact-next-steps { gap: .6rem; }
  .contact-next-steps span { font-size: .9rem; }
}

/* ---- paid landing pages on phones (hero phoneForm / phonePhoto / phoneProof; Justin approved 2026-09-23) ----
   An exception to the 9/7 and 9/9 phone-density rules for the ad landing pages only: the hero photo sits under the H1,
   the one-line Google proof follows the bullets, and the estimate form shows after them. Desktop is unchanged. */
@media (max-width: 860px) {
  .hero--phone-form .hero-side .lead-form--mini { display: block; }
  .hero.hero--phone-photo .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero--phone-photo .hero-copy, .hero--phone-photo .hero-side { display: contents; }
  .hero--phone-photo .hero-copy > * { order: 2; }
  .hero--phone-photo .hero-copy > .crumbs, .hero--phone-photo .hero-copy > .kicker, .hero--phone-photo .hero-copy > h1 { order: 0; }
  .hero--phone-photo .hero-side .hero-media { display: block; order: 1; aspect-ratio: 16 / 9; margin: .15rem 0 1.1rem; box-shadow: 0 16px 34px rgba(0,0,0,.3); }
  .hero--phone-photo .hero-side .lead-form--mini { order: 3; margin-top: 1rem; }
  .hero.hero--phone-proof .hero-results { display: block; margin-top: .1rem; }
  .hero--phone-proof .hero-results-grid { display: none; }
  .hero--phone-proof .hero-results-kicker { margin: 0; line-height: 1.5; }
}

/* ---- audit fixes 2026-09-23: templates, accessibility, visual polish (items 9, 14, 17, 22, 27, 28, 29) ---- */
/* secondary buttons: the white ghost style is for dark bands; on a white or sand section or a light hero it turns Reno Blue */
.section:not(.section--midnight) .btn-ghost, .hero--light .btn-ghost { color: var(--reno); border-color: var(--reno); background: transparent; }
.section:not(.section--midnight) .btn-ghost:hover, .hero--light .btn-ghost:hover { background: var(--reno); border-color: var(--reno); color: #fff; }
/* hero buttons were flush against each other */
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: .4rem 0 1.4rem; }
/* light-band label colors: the Sell tile's kicker on Fresh, and the light text link on dark heroes */
.hero .path--primary .path-kicker { color: #804B31; }
.textlink.textlink--light { color: var(--fresh); }
.proof a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.proof a:hover { text-decoration-thickness: 2px; }
.hero-media picture { display: block; width: 100%; height: 100%; }
/* Frisco's four-photo gallery had no column rule and stacked one photo per row on desktop */
.gallery-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .gallery-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* before/after slider: the range input is invisible, so the frame and the handle show keyboard focus */
.compare:has(input:focus-visible) { outline: 3px solid var(--reno); outline-offset: 3px; }
.section--midnight .compare:has(input:focus-visible) { outline-color: var(--fresh); }
.compare:has(input:focus-visible) .compare-handle::after { box-shadow: 0 0 0 3px var(--reno), 0 0 0 5px #fff, 0 4px 14px rgba(0,0,0,.3); }
/* swipe rows become focusable regions on phones (site.js); show where focus is */
[data-swipe]:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 4px; }
.section--midnight [data-swipe]:focus-visible { outline-color: var(--fresh); }
/* area chips: the whole pill is the link (the tap target was only the text) */
.chips li { padding: 0; }
.chips li a { display: block; padding: .55rem 1rem; }
.chips li:not(:has(a)) { padding: .55rem 1rem; }
/* footer: long addresses break instead of pushing the page wider than a 320px screen */
.site-footer a { overflow-wrap: anywhere; }
/* quote attribution inside prose ("> — Justin & Emily Pate") */
.prose blockquote .quote-by { display: block; margin-top: .7rem; font-family: var(--sans); font-weight: 500; font-size: .88rem; letter-spacing: .02em; color: var(--muted); }
/* journal index: the newest post as a full-width feature above the three-across grid */
.card--feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); margin-top: 2.5rem; }
.card--feature .card-media { aspect-ratio: 3 / 2; height: 100%; }
.card--feature .card-body { padding: 2.2rem 2.4rem; justify-content: center; }
.card--feature .post-title { font-family: var(--serif); font-size: clamp(1.6rem, 2.3vw, 2.05rem); line-height: 1.15; margin-bottom: .6rem; }
.card--feature .card-body p { flex: none; }
.card--feature .card-body p:not(.post-meta) { font-size: 1.02rem; }
.posts-featured .posts { margin-top: 1.5rem; }
.card .post-meta { flex: none; } /* only the excerpt stretches, so the titles line up across the grid (the meta row was stretching too) */
/* header logo: the brand guide's 35px minimum height (150px wide) and half-icon clear space before the "Dallas" divider */
.brand-loc { margin-left: 1.25rem; }
@media (max-width: 600px) { .brand img { width: 150px; } .brand-loc { margin-left: 1.1rem; padding-left: .8rem; } }
@media (max-width: 860px) {
  /* keyboard focus never lands under the sticky header or the call / estimate bar */
  html { scroll-padding-top: 90px; scroll-padding-bottom: 96px; }
  /* sticky bar: both labels on one line from 360px up (the number used to split as "(469) 500-" / "3602") */
  .mobile-cta .btn { white-space: nowrap; padding-left: .5rem; padding-right: .5rem; font-size: .875rem; }
  /* swipe rows snap the first card to the 1.25rem gutter instead of the screen edge */
  .projects, .gallery, .quotes, .cards:has(.card--media), .page-home .cards { scroll-padding-inline: 1.25rem; }
  .card--feature { grid-template-columns: 1fr; margin-top: 1.25rem; }
  .card--feature .card-media { aspect-ratio: 16 / 10; }
  .card--feature .card-body { padding: 1.1rem 1.2rem 1.2rem; }
  .card--feature .post-title { font-size: 1.45rem; }
  .posts-featured .posts { margin-top: .9rem; }
}
/* prose h2s in an untitled section (Privacy, Terms) and in articles: section-sized, not page-title-sized */
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.7rem); line-height: 1.2; margin: 2rem 0 .6rem; max-width: none; }
.prose > h2:first-child { margin-top: 0; }
/* closing band on desktop: buttons fill the action column, so a two-row stack (For Agents, the three-button neutral pages) lines up */
@media (min-width: 861px) { .cta-actions .btn { flex: 1 1 auto; } }
/* the smallest phones (320–350px, or 400% zoom): a slightly smaller sticky bar so neither label is clipped */
@media (max-width: 350px) {
  .mobile-cta { gap: .4rem; padding-left: .5rem; padding-right: .5rem; }
  .mobile-cta .btn { font-size: .8rem; padding-left: .35rem; padding-right: .35rem; }
}
/* tables (journal posts, and the flooring page since 2026-09-26): row labels are row headers (th scope=row); they keep the body-cell look */
.prose th[scope="row"] { font-size: inherit; letter-spacing: normal; text-transform: none; color: #3d4852; font-weight: 500; }
.prose tr:nth-child(even) th[scope="row"] { background: var(--paper); }

/* ---- build and SEO pass 2026-09-23 (audit items 31, 45, 48) ---- */
/* project pages: "Project at a glance" facts beside "Keep exploring" links, then two sibling projects */
.project-more-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.project-more-title { font-family: var(--sans); font-size: .8rem; font-weight: 500; line-height: 1.25; letter-spacing: .14em; text-transform: uppercase; color: var(--reno); margin: 0 0 1rem; max-width: none; }
.facts { margin: 0; display: grid; border-top: 1px solid var(--taupe); }
.facts > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--taupe); }
.facts dt { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #804B31; padding-top: .15rem; }
.facts dd { margin: 0; color: var(--midnight); line-height: 1.5; }
.related-links { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .45rem; }
.related-links a { display: inline-block; padding: .15rem 0; }
.related-cards { display: grid; gap: .7rem; }
.related-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1rem; align-items: center; padding: .5rem .9rem .5rem .5rem; border: 1px solid var(--taupe); border-radius: 8px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.related-card:hover { border-color: var(--reno); transform: translateY(-1px); }
.related-card-media { display: block; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--stone); }
.related-card-media img { width: 100%; height: 100%; object-fit: cover; }
.related-card-body { display: grid; gap: .15rem; min-width: 0; }
.related-card-tag { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #804B31; }
.related-card-body strong { font-weight: 500; font-size: 1.02rem; color: var(--reno); }
.section--sand .facts, .section--sand .facts > div { border-color: var(--clay); }
.section--sand .related-links .textlink { color: var(--reno); } /* Blue-2 reads 4.2:1 on Sand; Reno Blue clears AA */
@media (max-width: 860px) {
  .project-more-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .facts > div { grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; padding: .55rem 0; }
  .facts dd { font-size: .95rem; }
  .related-links { margin-bottom: 1rem; gap: .2rem; }
  .related-cards { gap: .5rem; }
  .related-card { grid-template-columns: 88px minmax(0, 1fr); gap: .8rem; padding: .4rem .7rem .4rem .4rem; }
  .related-card-body strong { font-size: .95rem; }
}
/* journal: linked byline and the author box after the sources */
.byline a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.author-box { margin-top: 2.25rem; padding: 1.4rem 1.5rem; border: 1px solid var(--stone); border-radius: var(--radius); background: var(--paper); }
.author-box h2 { font-family: var(--sans); font-size: .8rem; font-weight: 500; line-height: 1.25; letter-spacing: .12em; text-transform: uppercase; color: var(--reno); margin: 0 0 .7rem; max-width: none; }
.author-name { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; margin: 0 0 .45rem; }
.author-name a { font-family: var(--serif); font-size: 1.35rem; color: var(--midnight); text-decoration: none; }
.author-name a:hover { text-decoration: underline; }
.author-name span { font-size: .88rem; color: var(--muted); }
.author-box p:not(.author-name) { color: #3d4852; font-size: .98rem; }

/* ---- review fixes 2026-09-23 ---- */
/* ad landing pages on phones (audit item 19): kicker, H1, photo, the one-line Google proof, the lead, then the form, with the
   three bullets under the form, so the proof and the form's heading sit above the sticky bar on a 390x844 phone. The
   breadcrumb trail hides here (its BreadcrumbList JSON-LD stays); nothing else is removed. */
@media (max-width: 860px) {
  .hero--phone-form.hero--phone-photo .hero-copy > .crumbs { display: none; }
  .hero--phone-form.hero--phone-photo .hero-copy > * { order: 3; }
  .hero--phone-form.hero--phone-photo .hero-copy > .kicker, .hero--phone-form.hero--phone-photo .hero-copy > h1 { order: 0; }
  .hero--phone-form.hero--phone-photo .hero-copy > .hero-results { order: 2; margin: 0 0 .9rem; }
  .hero--phone-form.hero--phone-photo .hero-side .lead-form--mini { order: 4; margin-top: .25rem; }
  .hero--phone-form.hero--phone-photo .hero-copy > .proof { order: 5; margin: 1.1rem 0 0; }
  /* the phone estimate form on these pages: name, phone, email and the message; the optional address and the role select
     (which keeps the page's default and still submits) stay off the phone form, as on /contact/ */
  .hero--phone-form .lead-form--mini .field:has([name="address"]), .hero--phone-form .lead-form--mini .field:has(select[name="role"]) { display: none; }
}
/* phoneProof: on phones one line, "5.0 from 23 Google reviews", replaces the tiles' label (a caption with nothing under it) */
.hero-results-phone { display: none; }
.hero-results-phone a { color: rgba(255,255,255,.86); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hero-results-phone .stars { color: #D3A98C; letter-spacing: .08em; margin-right: .35rem; }
.hero--light .hero-results-phone a { color: #3d4852; }
.hero--light .hero-results-phone .stars { color: #804B31; }
@media (max-width: 860px) {
  .hero--phone-proof .hero-results-kicker { display: none; }
  .hero--phone-proof .hero-results-phone { display: block; margin: 0; font-size: .9rem; line-height: 1.5; }
}
/* the owners' portrait: faces sit high in the frame, so crops keep the top (About on phones, the luxury pages' mediaText) */
img[src*="/justin-emily-"] { object-position: 50% 18%; }
@media (max-width: 860px) { .page-about .hero--phone-photo .hero-side .hero-media { aspect-ratio: 4 / 3; } }
/* home on phones: the first sentence of the definition; the Sell / Stay tiles and the stats band carry the rest */
@media (max-width: 860px) { .hero .lead-more { display: none; } }
/* city page H1s ("Kitchen, Bath & Pre-Sale Renovation in <City>", item 33) run long: the home page's size, balanced lines */
/* (a touch larger than the home H1: these are shorter, and three lines keep the copy column close to the form's height) */
@media (min-width: 861px) { [class*="page-areas-"] .hero h1 { font-size: clamp(2.6rem, 4.2vw, 3.7rem); text-wrap: balance; } }
/* kickers never leave one word alone on a second line */
.kicker { text-wrap: balance; }
/* journal byline on phones: author and dates only */
@media (max-width: 860px) { .byline-read { display: none; } }
/* a list item that opens with a bold label ("Light prep:", "Pre-sale refresh, three to six weeks:") reads as a label */
.section:not(.section--midnight) .prose li > strong:first-child { color: var(--midnight); }
/* 2026-09-26 review: a paragraph that opens with a bold label ("Living areas first.") reads as a label, like the list items above,
   and outside the journal a table's row labels (the flooring decision table) sit darker than their cells, not lighter */
.section:not(.section--midnight) .prose p > strong:first-child { color: var(--midnight); }
.section:not(.section--midnight):not(.article) .prose th[scope="row"] { color: var(--midnight); }

/* ---- header and footer polish (Justin approved 2026-09-27; replaces the 9/9–9/23 header width patches) ----
   Header: no phone number (the footer, the contact page and the phone call bar keep it). Every desktop nav link is one size;
   the "Start here" links stand apart by Reno Blue and their Terra Cotta bullets, not by size. The "Dallas" label shows at
   every width. 1220px and up (a full 1180px row): logo, links and the estimate button on one line. 861–1219px: the logo
   and the estimate button share the first row and the links take a second row under a hairline, so nothing is hidden and
   nothing runs past the row. */
.header-row { column-gap: 1.5rem; }
.brand { flex: none; }
.header-cta { flex: none; white-space: nowrap; }
.site-header a:focus-visible, .nav-toggle:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 3px; border-radius: 2px; }
@media (min-width: 861px) {
  .site-nav { gap: 1rem; }
  .site-nav a { font-size: .875rem; letter-spacing: 0; }
  .nav-group { gap: 1.2rem; }
  .nav-group--start { gap: 1.4rem; }
  .nav-group--start a + a::before { left: -.9rem; }
  .nav-divider { flex: none; width: 1px; margin: 0; }
  .header-cta { font-size: .875rem; padding: .55rem 1rem; }
  /* one lockup size at every desktop width, so the logo doesn't jump when the header changes from two rows to one */
  .brand img { width: 160px; }
  .brand-loc { height: 24px; margin-left: 1.15rem; padding-left: .95rem; font-size: 1.12rem; }
}
@media (min-width: 1220px) {
  .site-nav { margin-left: auto; }
}
@media (min-width: 861px) and (max-width: 1219px) {
  .header-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand cta" "nav nav"; align-items: center; row-gap: 0; min-height: 0; }
  .brand { grid-area: brand; justify-self: start; padding: .7rem 0; }
  .header-cta { grid-area: cta; }
  .site-nav { grid-area: nav; border-top: 1px solid var(--stone); padding: .4rem 0; }
  html { scroll-padding-top: 124px; } /* the two-row header is about 105px tall */
}
/* phone menu: the button turns into an X while the menu is open, and the panel starts at the header's bottom edge */
@media (max-width: 860px) {
  .site-nav { top: calc(100% + 1px); }
  .nav-toggle span:not(.sr-only) { transition: transform .2s ease, opacity .2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) { .nav-toggle span:not(.sr-only) { transition: none; } }
/* the smallest phones (320–350px): a tighter "Dallas" lockup so the logo, the label and the menu button share one row */
@media (max-width: 350px) {
  .header-row { column-gap: .5rem; }
  .brand-loc { margin-left: .75rem; padding-left: .65rem; font-size: 1rem; height: 20px; }
}

/* Footer: link lists (services, cities, legal) wrap as whole names, and the dots between them sit in the gaps: each item's
   dot hangs in the gap before it, and the first item of every line pushes its dot past the list's clipped left edge, so no
   line starts or ends with a separator. The padding and matching negative margins leave room for the focus outline. */
.footer-list { list-style: none; display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 1.1rem; row-gap: .1rem; overflow: hidden; margin: -4px -4px .9rem -6px; padding: 4px 4px 4px 6px; font-size: .95rem; line-height: 1.62; color: var(--clay); }
.footer-list li { position: relative; margin-left: -1.1rem; padding-left: 1.1rem; white-space: nowrap; }
.footer-list li::before { content: '·'; content: '·' / ''; position: absolute; left: 0; width: 1.1rem; text-align: center; color: var(--clay); }
.footer-legal { align-items: center; }
.footer-legal p { margin: 0; }
.footer-legal .footer-list { font-size: inherit; margin: -4px -4px -4px -6px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { text-decoration: underline; }
.site-footer a:focus-visible { outline: 2px solid var(--fresh); outline-offset: 2px; border-radius: 2px; }
/* four-column footer (1001px and up): the "Find us" column is never narrower than its longest link, so "Renovation Sells
   national site" and "Instagram @renosellsdallas" never leave a word alone on a second line (they need about 215px, which a
   1fr share only reaches above about 1110px). --col is the old 1fr share of 1.4fr 1fr 1fr 1fr (three 2.5rem gaps); Contact
   and "Where we work" keep exactly that width, and the brand column takes what is left, so only the brand text gives up
   the few pixels "Find us" needs. Above about 1110px this is the same layout as before. */
@media (min-width: 1001px) { .footer-grid { --col: calc((100% - 7.5rem) / 4.4); grid-template-columns: minmax(0, 1fr) var(--col) var(--col) minmax(max-content, var(--col)); } }
/* the closing band turns Reno Blue when the footer follows it, so the two dark blocks read as two */
main > .cta-band.section--midnight:last-child { background: var(--reno); }
@media (max-width: 860px) {
  .footer-list { font-size: .88rem; line-height: 1.5; margin-bottom: .5rem; }
  /* the phone call bar covers the footer's last 59px; the footer's own color runs under it (no white strip above the bar) */
  body { padding-bottom: 0; }
  .site-footer { padding-bottom: calc(1.5rem + 3.7rem + env(safe-area-inset-bottom, 0px)); }
}
/* phones: one column, so the contact and social links read on one line each */
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.2rem; }
}
/* ---- footer tidy (2026-10-08, Justin: "clean this up a bit and still have the content") ----
   Four labeled columns: the brand line, Services, Where we work, Contact + Find us. Lists stack one link per line, and the
   twelve cities sit in even columns (read down, then across) instead of wrapping into dot rows. Placement is by grid area,
   so each width only changes the template: four across from 1101px; the brand line on top of three columns from 721px; two
   columns with the cities full width from 601px; one column on phones. */
.footer-stack { list-style: none; margin: 0; padding: 0; font-size: .95rem; line-height: 1.62; color: var(--clay); }
.footer-stack li { break-inside: avoid; white-space: nowrap; }
.footer-areas { columns: 2; column-gap: 1.75rem; }
.footer-col--contact p { margin-bottom: 1.1rem; }
.footer-col--contact p:last-child { margin-bottom: 0; }
.footer-brand { grid-area: brand; }
.footer-col--services { grid-area: services; }
.footer-col--areas { grid-area: areas; }
.footer-col--contact { grid-area: contact; }
.footer-brand, .footer-col { min-width: 0; }
@media (min-width: 1101px) {
  .footer-grid { grid-template-columns: minmax(15rem, 1fr) max-content max-content max-content; grid-template-areas: "brand services areas contact"; column-gap: clamp(2.5rem, 4.5vw, 4.5rem); }
  .footer-brand p { max-width: 24rem; }
}
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: repeat(3, max-content); grid-template-areas: "brand brand brand" "services areas contact"; justify-content: space-between; gap: 1.6rem 2rem; }
  .footer-brand p { max-width: 34rem; }
}
@media (max-width: 860px) {
  .footer-grid { gap: 1.4rem 1.5rem; }
  .footer-stack { font-size: .88rem; line-height: 1.5; }
  .footer-areas { column-gap: 1.2rem; }
  .footer-col--contact p { margin-bottom: .8rem; }
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "brand brand" "services contact" "areas areas"; justify-content: normal; }
  .footer-areas { columns: 3; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "services" "areas" "contact"; gap: 1.3rem; }
  .footer-services, .footer-areas { columns: 2; column-gap: 1.2rem; }
}
.footer-brand .nowrap { white-space: nowrap; }
/* ---- five-step process graphic (Justin's design, 2026-10-18) ----
   From 861px the steps section shows his desktop image, below it his mobile image. The heading and the list, which the images
   repeat, stay for screen readers and search. Each image's "Get Started" button is made real by a transparent link over it. */
.steps-graphic { display: none; position: relative; background: #fff; }
.steps-graphic img { display: block; width: 100%; height: auto; }
.steps-graphic-btn { position: absolute; border-radius: 999px; }
.steps-graphic-btn:hover { box-shadow: 0 0 0 3px rgba(25, 62, 255, .25); }
.steps-graphic-btn:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.steps-graphic-all .steps-head, .steps-graphic-all .steps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }
@media (max-width: 860px) {
  /* the mobile design has its own 24px margins, so it runs edge to edge */
  .steps-graphic-all .steps-graphic--mobile { display: block; margin-inline: -1.25rem; }
  .steps-graphic-all .section-cta { margin-top: 1.25rem; }
}
@media (min-width: 861px) {
  .steps-has-graphic .steps-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .steps-has-graphic .steps { display: none; }
  .steps-has-graphic .steps-graphic--desktop { display: block; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
  .steps-has-graphic .section-cta { margin-top: 1.5rem; }
}