/* SE Yard Solutions site styles. Generated by _build/build_site.py: edit the homepage template (theme),
   sitegen/inner.css (inner pages) or _build/assets/extra.css (additions), then rebuild. */
:root {
  --bg:#F7F6F2; --bg-2:#ECE9E2; --ink:#161412; --ink-60:rgba(22,20,18,.68); --ink-30:rgba(22,20,18,.44); --hairline:rgba(22,20,18,.14); --surface:rgba(22,20,18,.045); --media-bg:#E2DED6; --accent:#E8850F; --accent-hover:#F7931A;
  --font-display: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --text-hero: clamp(2.9rem, 9.2vw, 8.4rem);
  --text-display: clamp(2rem, 5.2vw, 4.1rem);
  --text-h3: clamp(1.3rem, 2.2vw, 1.75rem);
  --text-body: clamp(1rem, 1.05vw, 1.1rem);
  --text-micro: .72rem;
  --track-display: -0.045em;
  --space-section: clamp(72px, 9vh, 120px);
  --container: 1360px;
  --radius: 4px;
  --ease-heavy: cubic-bezier(.16, 1, .3, 1);
}
.band-dark { --bg:#0D0B09; --bg-2:#120F0C; --ink:#F5F0E8; --ink-60:rgba(245,240,232,.64); --ink-30:rgba(245,240,232,.36); --hairline:rgba(245,235,220,.12); --surface:rgba(255,236,214,.04); --media-bg:#1a1612; --accent:#F7931A; --accent-hover:#FFA43A; background: var(--bg); color: var(--ink); }
.band-light { --bg:#F7F6F2; --bg-2:#ECE9E2; --ink:#161412; --ink-60:rgba(22,20,18,.68); --ink-30:rgba(22,20,18,.44); --hairline:rgba(22,20,18,.14); --surface:rgba(22,20,18,.045); --media-bg:#E2DED6; --accent:#E8850F; --accent-hover:#F7931A; background: var(--bg); color: var(--ink); }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body {
  font-family: var(--font-display);
  font-size: var(--text-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; background: none; border: 0; font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* film grain (decorative overlay, not copy) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* type */
.display { font-size: var(--text-display); font-weight: 600; letter-spacing: -0.04em; line-height: .92; text-transform: uppercase; text-wrap: balance; }
.micro { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-30); }
.accent { color: var(--accent); }
.lede { color: var(--ink-60); max-width: 58ch; }
h3 { font-size: var(--text-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }

/* layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.pricing-grid > *, .addons > *, .about-grid > *, .area-grid > *, .card-grid > *, .quote-grid > *, .steps > *, .stats-row > *, .city-list > *, .proof-inner > *, .footer-grid > *, .ps-grid > *, .final-grid > *, .why-media > *, .gallery-grid > * { min-width: 0; }
section { padding-block: var(--space-section); background: var(--bg); color: var(--ink); }
.band-dark + .band-light, .band-light + .band-dark { border-top: 0; }
.section-head { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 44px; }
@media (min-width: 900px) { .section-head { grid-template-columns: 220px 1fr; align-items: end; } }
.section-head .micro { padding-top: 6px; }

/* reveals: transform only, text is visible at rest */
.reveal { transform: translateY(40px); transition: transform 1s var(--ease-heavy); will-change: transform; }
.reveal.is-in { transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal-image { overflow: hidden; }
.reveal-image img { transition: transform 1.4s var(--ease-heavy); }
.reveal-image.pre img { transform: scale(1.08) translateX(-2.5%); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 50px; padding: 14px 26px; border-radius: var(--radius); font-weight: 500; font-size: .98rem; transition: transform .35s var(--ease-heavy), background .3s, border-color .3s, color .3s; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { transform: translateY(-2px); background: var(--accent-hover); }
.btn-ghost { border: 1px solid var(--hairline); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-60); }
.btn .arrow { display: inline-block; transition: transform .35s var(--ease-heavy); }
.btn:hover .arrow { transform: translateX(4px); }

/* nav */
.nav { --bg:#0D0B09; --bg-2:#120F0C; --ink:#F5F0E8; --ink-60:rgba(245,240,232,.64); --ink-30:rgba(245,240,232,.36); --hairline:rgba(245,235,220,.12); --surface:rgba(255,236,214,.04); --media-bg:#1a1612; --accent:#F7931A; --accent-hover:#FFA43A; position: fixed; inset-inline: 0; top: 0; z-index: 100; color: var(--ink); transition: background .35s, border-color .35s; border-bottom: 1px solid transparent; }
.nav--scrolled { --bg:#F7F6F2; --bg-2:#ECE9E2; --ink:#161412; --ink-60:rgba(22,20,18,.68); --ink-30:rgba(22,20,18,.44); --hairline:rgba(22,20,18,.14); --surface:rgba(22,20,18,.045); --media-bg:#E2DED6; --accent:#E8850F; --accent-hover:#F7931A; background: rgba(247, 246, 242, .84); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--hairline); }
.nav--scrolled .nav-logo img { filter: none; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--container); margin-inline: auto; padding: 18px 24px; gap: 24px; }
.nav-logo { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -0.02em; font-size: 1.05rem; }
.nav-logo img { height: 38px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.nav-logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nav-logo span { white-space: nowrap; }
.nav-links { display: flex; gap: 30px; }
.nav-links a { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-60); transition: color .3s; }
.nav-links a:hover { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 24px; }
.nav-phone { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .04em; color: var(--ink-60); }
.nav-phone:hover { color: var(--ink); }
.nav-hamburger { display: none; flex-direction: column; gap: 6px; padding: 12px; min-width: 48px; min-height: 48px; justify-content: center; align-items: center; }
.nav-hamburger span { width: 22px; height: 1px; background: var(--ink); transition: transform .3s; }
.nav-overlay { --bg:#0D0B09; --bg-2:#120F0C; --ink:#F5F0E8; --ink-60:rgba(245,240,232,.64); --ink-30:rgba(245,240,232,.36); --hairline:rgba(245,235,220,.12); --surface:rgba(255,236,214,.04); --media-bg:#1a1612; --accent:#F7931A; --accent-hover:#FFA43A; position: fixed; inset: 0; z-index: 99; background: var(--bg); color: var(--ink); display: none; flex-direction: column; justify-content: center; padding: 24px; }
.nav-overlay.open { display: flex; }
.nav-overlay a { font-size: clamp(2rem, 9vw, 3.4rem); font-weight: 600; letter-spacing: -0.04em; text-transform: uppercase; line-height: 1.05; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.nav-overlay .btn { margin-top: 32px; align-self: flex-start; }

/* hero */
.hero { position: relative; min-height: min(92svh, 880px); display: flex; align-items: flex-end; padding-block: 140px clamp(56px, 8vh, 96px); overflow: hidden; }
.hero-bg { position: absolute; inset: -12% 0 0 0; background-size: cover; background-position: center 60%; z-index: 0; }
.hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(13,11,9,.86) 0%, rgba(13,11,9,.42) 50%, rgba(13,11,9,.1) 100%), linear-gradient(0deg, rgba(13,11,9,.96) 0%, rgba(13,11,9,0) 45%); }
.hero .container { position: relative; z-index: 2; }
.hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.hero-eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--accent); }
.hero-title { font-size: var(--text-hero); font-weight: 700; letter-spacing: var(--track-display); line-height: .86; text-transform: uppercase; max-width: 11ch; text-wrap: balance; }
.hero-subtitle { margin-top: 28px; max-width: 46ch; color: var(--ink-60); font-size: clamp(1.02rem, 1.2vw, 1.2rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.hero-side { position: absolute; right: 24px; bottom: clamp(56px, 8vh, 96px); z-index: 2; display: none; flex-direction: column; gap: 10px; text-align: right; }
@media (min-width: 1000px) { .hero-side { display: flex; } }
.hero-side .micro { color: var(--ink-60); }
.hero-side strong { font-family: var(--font-mono); font-weight: 500; font-size: .85rem; letter-spacing: .06em; color: var(--ink); }

/* proof bar */
.proof-bar { border-block: 1px solid var(--hairline); padding-block: 0; background: var(--bg-2); }
.band-mid { background: var(--bg-2); }
.proof-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof-item { padding: 24px 20px; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-60); display: flex; flex-direction: column; gap: 6px; }
.proof-item + .proof-item { border-left: 1px solid var(--hairline); }
.proof-item strong { color: var(--ink); font-weight: 500; font-size: 1.05rem; letter-spacing: 0; }
.stars { color: var(--accent); letter-spacing: .08em; }

/* problem / solution */
.ps-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--hairline); }
.ps-cell { padding: clamp(32px, 4.5vw, 60px); display: flex; flex-direction: column; gap: 20px; }
.ps-cell + .ps-cell { border-left: 1px solid var(--hairline); background: var(--surface); }
.ps-cell p { color: var(--ink-60); max-width: 52ch; }
.ps-cell .micro { color: var(--ink-30); }
.check-list { display: grid; gap: 10px; margin-top: 6px; }
.check-list li { display: flex; gap: 12px; align-items: baseline; color: var(--ink); font-size: .98rem; }
.check-list li::before { content: "\2014"; color: var(--accent); flex: 0 0 auto; }

/* shed styles */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.card { background: var(--bg); padding: 24px 24px 32px; display: flex; flex-direction: column; gap: 16px; transition: background .35s; position: relative; }
.card:hover { background: var(--surface); }
.card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--media-bg); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-heavy); }
.card:hover .card-media img { transform: scale(1.04); }
.card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card-from { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; color: var(--ink-60); font-variant-numeric: tabular-nums; }
.card-from b { color: var(--ink); font-weight: 500; }
.card p { color: var(--ink-60); font-size: .95rem; }
.card-link { margin-top: auto; font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); display: inline-flex; gap: 10px; align-items: center; }
.card-link .arrow { transition: transform .35s var(--ease-heavy); }
.card:hover .card-link .arrow { transform: translateX(4px); }

/* how it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--hairline); }
.step { padding: clamp(28px, 3.5vw, 48px); display: flex; flex-direction: column; gap: 16px; }
.step + .step { border-left: 1px solid var(--hairline); }
.step-n { font-family: var(--font-mono); font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--ink-30); }
.step p { color: var(--ink-60); font-size: .97rem; }
.step .micro { color: var(--ink-60); }

/* about */
.about-grid { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.about-media { aspect-ratio: 5 / 4; overflow: hidden; }
.about-media img { width: 100%; height: 100%; object-fit: cover; }
.about-copy { display: flex; flex-direction: column; gap: 24px; }
.about-copy p { color: var(--ink-60); max-width: 54ch; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--hairline); margin-top: 64px; }
.stat { padding: 28px 28px 24px; }
.stat + .stat { border-left: 1px solid var(--hairline); }
.stat-number { font-size: clamp(2.4rem, 4.6vw, 4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-label { margin-top: 10px; }

/* pricing */
.price-tabs { display: flex; gap: 0; border: 1px solid var(--hairline); border-bottom: 0; width: fit-content; }
.price-tab { padding: 14px 22px; font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-60); border-right: 1px solid var(--hairline); min-height: 48px; transition: color .3s, background .3s; }
.price-tab:last-child { border-right: 0; }
.price-tab[aria-selected="true"] { color: var(--ink); background: var(--surface); box-shadow: inset 0 -1px 0 var(--accent); }
.price-panel { border: 1px solid var(--hairline); overflow-x: auto; }
.price-panel[hidden] { display: none; }
.price-table { width: 100%; border-collapse: collapse; min-width: 560px; font-variant-numeric: tabular-nums; }
.price-table th { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-30); font-weight: 400; text-align: left; padding: 18px 24px; border-bottom: 1px solid var(--hairline); }
.price-table td { padding: 20px 24px; border-bottom: 1px solid var(--hairline); color: var(--ink-60); }
.price-table tr:last-child td { border-bottom: 0; }
.price-table td:first-child { color: var(--ink); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.02em; }
.price-table td:last-child { text-align: right; color: var(--ink); font-family: var(--font-mono); font-size: 1.05rem; }
.price-table th:last-child { text-align: right; }
.price-note { padding: 16px 24px; border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; color: var(--ink-30); }
.addons { margin-top: 40px; display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--hairline); }
.addon { padding: 18px 20px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .95rem; border-bottom: 1px solid var(--hairline); }
.addon:nth-child(2n) { border-left: 1px solid var(--hairline); }
.addon:nth-last-child(-n+2) { border-bottom: 0; }
.addon span:first-child { color: var(--ink-60); }
.addon span:last-child { font-family: var(--font-mono); font-size: .85rem; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pricing-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.pricing-aside { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 110px; }
.pricing-aside .media { aspect-ratio: 4 / 3; overflow: hidden; }
.pricing-aside .media img { width: 100%; height: 100%; object-fit: cover; }
.pricing-aside p { color: var(--ink-60); font-size: .97rem; }

/* service area */
.area-band { border-block: 1px solid var(--hairline); }
.area-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.area-copy { display: flex; flex-direction: column; gap: 20px; }
.area-copy p { color: var(--ink-60); max-width: 48ch; }
.city-list { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--hairline); }
.city { padding: 22px 20px; border-bottom: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 4px; transition: background .3s; }
.city:hover { background: var(--surface); }
.city:not(:nth-child(3n+1)) { border-left: 1px solid var(--hairline); }
.city:nth-last-child(-n+3) { border-bottom: 0; }
.city b { font-weight: 600; letter-spacing: -0.01em; font-size: 1.05rem; }
.city span { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-30); }
.permit-note { border: 1px solid var(--hairline); border-left: 2px solid var(--accent); padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; }
.permit-note b { font-weight: 600; }
.permit-note p { color: var(--ink-60); font-size: .95rem; max-width: none; }

/* testimonials */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.quote { background: var(--bg); padding: clamp(28px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 24px; min-height: 100%; }
.quote-mark { font-size: 3rem; line-height: .6; color: var(--accent); font-weight: 700; font-family: Georgia, serif; }
.quote p { font-size: 1.08rem; line-height: 1.5; letter-spacing: -0.01em; }
.quote footer { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.quote footer b { font-weight: 600; font-size: .95rem; }

/* final cta */
.final-cta { border-top: 1px solid var(--hairline); position: relative; overflow: hidden; }
.final-cta .display { max-width: 18ch; font-size: clamp(2.4rem, 7vw, 6rem); }
.final-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 900px) { .final-grid { grid-template-columns: 8fr 4fr; align-items: end; } }
.final-cta .friction { margin-top: 18px; color: var(--ink-30); font-size: .92rem; }
.contact-block { border: 1px solid var(--hairline); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.contact-block a { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; }
.contact-block a:hover { color: var(--accent); }
.contact-block .micro { color: var(--ink-60); }

/* footer */
.footer { border-top: 1px solid var(--hairline); padding-block: 64px 0; overflow: hidden; background: var(--bg); color: var(--ink); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 64px; }
.footer-grid ul { display: grid; gap: 10px; }
.footer-grid li, .footer-grid p { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; color: var(--ink-60); text-transform: none; }
.footer-grid .head { color: var(--ink-30); letter-spacing: .12em; text-transform: uppercase; font-size: var(--text-micro); margin-bottom: 4px; }
.footer a:hover { color: var(--ink); }
.footer-ghost { font-size: clamp(3.4rem, 11vw, 10rem); font-weight: 700; letter-spacing: var(--track-display); text-transform: uppercase; color: var(--ink-30); opacity: .16; line-height: .8; transform: translateY(20%); white-space: nowrap; }
.footer-legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid var(--hairline); }

/* captions on media */
.cap { position: absolute; left: 16px; bottom: 14px; padding: 6px 10px; background: rgba(13,11,9,.74); color: #F5F0E8; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }

/* why: build-day media pair */
.why-media { display: grid; grid-template-columns: 8fr 4fr; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-bottom: 0; }
.why-media figure { position: relative; overflow: hidden; background: var(--media-bg); }
.why-media .wide { aspect-ratio: 3 / 2; }
.why-media .tall { aspect-ratio: 4 / 5; }
.why-media img { width: 100%; height: 100%; object-fit: cover; }

/* recent builds gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.gallery-grid figure { background: var(--bg); display: flex; flex-direction: column; }
.g-media { flex: 1 1 auto; overflow: hidden; background: var(--media-bg); }
.g-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-heavy); }
.gallery-grid figure:hover img { transform: scale(1.04); }
.gallery-grid figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60); }
.gallery-grid figcaption span:last-child { color: var(--ink-30); text-align: right; }
.g-7 { grid-column: span 7; } .g-5 { grid-column: span 5; } .g-4 { grid-column: span 4; }
.g-7 .g-media { aspect-ratio: 3 / 2; } .g-5 .g-media { aspect-ratio: 1 / 1; } .g-4 .g-media { aspect-ratio: 1 / 1; }

/* customer faces marquee (transform-only motion, images not copy) */
.faces { overflow: hidden; border: 1px solid var(--hairline); background: var(--hairline); margin-bottom: 44px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.faces-track { display: flex; width: max-content; animation: faces-scroll 56s linear infinite; }
.faces:hover .faces-track { animation-play-state: paused; }
.faces figure { flex: 0 0 auto; width: clamp(150px, 16vw, 220px); aspect-ratio: 4 / 5; overflow: hidden; background: var(--media-bg); margin-right: 1px; }
.faces img { width: 100%; height: 100%; object-fit: cover; }
@keyframes faces-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* area photo */
.area-photo { position: relative; grid-column: 2; aspect-ratio: 2 / 1; overflow: hidden; background: var(--media-bg); }
.area-grid .area-copy { grid-row: span 2; }
.area-photo img { width: 100%; height: 100%; object-fit: cover; }

/* final cta photo backdrop */
.cta-bg { position: absolute; inset: 0; background-size: cover; background-position: center 55%; z-index: 0; }
.cta-scrim { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(13,11,9,.94) 0%, rgba(13,11,9,.8) 55%, rgba(13,11,9,.62) 100%); }
.final-cta .container { position: relative; z-index: 1; }

/* responsive */
@media (max-width: 1100px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-aside { position: static; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--hairline); }
}
@media (max-width: 900px) {
  .about-grid, .ps-grid, .area-grid { grid-template-columns: 1fr; }
  .why-media { grid-template-columns: 1fr; }
  .why-media .tall { aspect-ratio: 4 / 3; }
  .area-grid .area-copy { grid-row: auto; }
  .area-photo { grid-column: auto; aspect-ratio: 16 / 10; }
  .ps-cell + .ps-cell { border-left: 0; border-top: 1px solid var(--hairline); }
  .steps { grid-template-columns: 1fr; }
  .step + .step { border-left: 0; border-top: 1px solid var(--hairline); }
  .quote-grid { grid-template-columns: 1fr; }
  .proof-inner { grid-template-columns: repeat(2, 1fr); }
  .proof-item:nth-child(3) { border-left: 0; }
  .proof-item:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .city-list { grid-template-columns: repeat(2, 1fr); }
  .city:not(:nth-child(3n+1)) { border-left: 0; }
  .city:nth-child(2n) { border-left: 1px solid var(--hairline); }
  .city:nth-last-child(-n+3) { border-bottom: 1px solid var(--hairline); }
  .city:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 768px) {
  .nav-links, .nav-right .btn, .nav-phone { display: none; }
  .nav-hamburger { display: flex; }
  .hero { min-height: min(88svh, 760px); }
  .hero-bg { background-position: 62% 60%; }
  .card-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--hairline); }
  .proof-inner { grid-template-columns: 1fr; }
  .proof-item + .proof-item { border-left: 0; border-top: 1px solid var(--hairline); }
  .footer-grid { grid-template-columns: 1fr; }
  .price-tabs { width: 100%; }
  .price-tab { flex: 1; text-align: center; padding-inline: 8px; font-size: .66rem; letter-spacing: .08em; line-height: 1.25; padding-block: 12px; }
  .price-table { min-width: 0; }
  .price-table th { padding: 12px 14px; }
  .price-table td { padding: 14px; }
  .price-table td:first-child { font-size: 1rem; }
  .price-table td:last-child { font-size: .92rem; }
  .addons { grid-template-columns: 1fr; }
  .addon:nth-child(2n) { border-left: 0; }
  .addon:nth-last-child(-n+2) { border-bottom: 1px solid var(--hairline); }
  .addon:last-child { border-bottom: 0; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .g-7, .g-5, .g-4 { grid-column: span 1; }
  .g-7:first-child { grid-column: span 2; }
  .g-media, .g-5 .g-media, .g-4 .g-media { aspect-ratio: 1 / 1; }
  .g-7:first-child .g-media { aspect-ratio: 3 / 2; }
  .gallery-grid figcaption { padding: 10px 12px; flex-direction: column; gap: 2px; }
  .gallery-grid figcaption span:last-child { text-align: left; }
  .cap { left: 12px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-image img { transform: none; transition: none; }
  .card-media img, .btn, .card-link .arrow { transition: none; }
}

/* ---- inner pages (sitegen) ---- */
/* sitegen inner-page styles. Tokens in {braces} are replaced with this theme's real CSS vars. */
.sg-inner-page { }
.sg-page-hero { position: relative; min-height: clamp(440px, 58vh, 640px) !important; height: auto !important; max-height: none !important; display: flex; align-items: flex-end; padding: calc(96px + 4vh) 0 clamp(40px, 6vh, 72px) !important; overflow: hidden; }
.sg-page-hero > .sg-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; transform: scale(1.04); }
.sg-page-hero > .sg-hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,.72) 100%); }
.sg-page-hero .sg-hero-inner { position: relative; z-index: 2; display: grid; gap: 22px; max-width: 980px; }
.sg-crumbs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: inherit; opacity: .78; }
.sg-crumbs a { color: inherit; text-decoration: none; } .sg-crumbs a:hover { color: var(--accent, #E8850F); }
.sg-crumbs span[aria-hidden] { opacity: .5; }
.sg-page-hero h1 { font-family: var(--font-display, inherit); font-size: clamp(2.4rem, 6.4vw, 5.4rem); line-height: .98; letter-spacing: -0.03em; font-weight: 600; max-width: 18ch; margin: 0; }
.sg-page-hero .sg-lede { font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.55; max-width: 62ch; color: var(--ink-60, color-mix(in srgb, currentColor 68%, transparent)); margin: 0; }
.sg-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.sg-band { padding: var(--space-section, clamp(72px, 9vh, 120px)) 0; }
.sg-band + .sg-band.sg-tight { padding-top: 0; }
.sg-container { width: 100%; max-width: var(--container, 1360px); margin-inline: auto; padding-inline: 24px; }
.sg-head { display: grid; gap: 18px; margin-bottom: 44px; max-width: 1100px; }
.sg-eyebrow { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60, color-mix(in srgb, currentColor 68%, transparent)); display: block; }
.sg-head h2 { font-family: var(--font-display, inherit); font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 600; margin: 0; max-width: 22ch; }
.sg-prose { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 960px) { .sg-prose { grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: 64px; } .sg-prose > .sg-head { position: sticky; top: 96px; align-self: start; margin-bottom: 0; } }
.sg-copy { max-width: 70ch; font-size: clamp(1.02rem, 1.12vw, 1.15rem); line-height: 1.68; }
.sg-copy > * + * { margin-top: 1.15em; }
.sg-copy h3 { font-family: var(--font-display, inherit); font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.18; letter-spacing: -0.02em; font-weight: 600; margin-top: 2em; }
.sg-copy h3:first-child { margin-top: 0; }
.sg-copy h4 { font-size: 1.05rem; font-weight: 600; margin-top: 1.6em; }
.sg-copy a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent, #E8850F); text-underline-offset: 3px; }
.sg-copy a:hover { color: var(--accent, #E8850F); }
.sg-copy ul, .sg-copy ol { padding-left: 1.3em; display: grid; gap: .5em; }
.sg-copy li::marker { color: var(--accent, #E8850F); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.sg-copy figure { margin: 2em 0; }
.sg-copy figure img, .sg-figure img { width: 100%; height: auto; display: block; border-radius: var(--radius, 4px); background: var(--hairline, color-mix(in srgb, currentColor 14%, transparent)); }
.sg-copy figcaption, .sg-cap { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-60, color-mix(in srgb, currentColor 68%, transparent)); margin-top: 10px; }
.sg-copy table, .sg-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.sg-copy th, .sg-copy td, .sg-table th, .sg-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--hairline, color-mix(in srgb, currentColor 14%, transparent)); vertical-align: top; }
.sg-copy th, .sg-table th { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60, color-mix(in srgb, currentColor 68%, transparent)); font-weight: 500; }
.sg-copy blockquote, .sg-pull { border-left: 2px solid var(--accent, #E8850F); padding-left: 22px; font-size: 1.15em; line-height: 1.5; }
.sg-copy blockquote footer, .sg-pull footer { margin-top: .8em; font-size: .85rem; color: var(--ink-60, color-mix(in srgb, currentColor 68%, transparent)); }
.sg-cards { display: grid; grid-template-columns: repeat(var(--sg-cols, 3), minmax(0, 1fr)); gap: 1px; background: var(--hairline, color-mix(in srgb, currentColor 14%, transparent)); border: 1px solid var(--hairline, color-mix(in srgb, currentColor 14%, transparent)); }
.sg-cards-loose { background: transparent; border: 0; gap: 14px; } .sg-cards-loose .sg-card { border: 1px solid var(--hairline, color-mix(in srgb, currentColor 14%, transparent)); border-radius: var(--radius, 4px); }
.sg-card { background: var(--bg, #ffffff); padding: 28px 26px 32px; display: flex; flex-direction: column; gap: 14px; }
.sg-card h3 { font-family: var(--font-display, inherit); font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; margin: 0; }
.sg-card p, .sg-card li { color: var(--ink-60, color-mix(in srgb, currentColor 68%, transparent)); font-size: .98rem; line-height: 1.6; margin: 0; }
.sg-card ul { padding-left: 1.2em; display: grid; gap: .4em; }
.sg-card .sg-n { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .72rem; letter-spacing: .14em; color: var(--accent, #E8850F); }
.sg-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border-radius: var(--radius, 4px); }
.sg-card .sg-more { margin-top: auto; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: inherit; text-decoration: none; display: inline-flex; gap: 10px; align-items: center; }
.sg-steps { display: grid; gap: 0; border-top: 1px solid var(--hairline, color-mix(in srgb, currentColor 14%, transparent)); }
.sg-step { display: grid; grid-template-columns: 72px 1fr; gap: 22px; padding: 30px 0; border-bottom: 1px solid var(--hairline, color-mix(in srgb, currentColor 14%, transparent)); }
.sg-step .sg-n { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; color: var(--accent, #E8850F); font-variant-numeric: tabular-nums; }
.sg-step h3 { font-family: var(--font-display, inherit); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 10px; }
.sg-step p, .sg-step li { color: var(--ink-60, color-mix(in srgb, currentColor 68%, transparent)); line-height: 1.6; margin: 0; max-width: 64ch; }
.sg-step p + p, .sg-step ul { margin-top: .7em; } .sg-step ul { padding-left: 1.2em; display: grid; gap: .35em; }
.sg-faq { border-top: 1px solid var(--hairline, color-mix(in srgb, currentColor 14%, transparent)); max-width: 900px; }
.sg-faq details { border-bottom: 1px solid var(--hairline, color-mix(in srgb, currentColor 14%, transparent)); }
.sg-faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font-family: var(--font-display, inherit); font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 600; letter-spacing: -0.01em; position: relative; }
.sg-faq summary::-webkit-details-marker { display: none; }
.sg-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); color: var(--accent, #E8850F); font-size: 1.3rem; transition: transform .3s; }
.sg-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.sg-faq .sg-a { padding: 0 0 24px; color: var(--ink-60, color-mix(in srgb, currentColor 68%, transparent)); line-height: 1.65; max-width: 68ch; }
.sg-gallery { columns: 3 260px; column-gap: 14px; }
.sg-gallery figure { break-inside: avoid; margin: 0 0 14px; }
.sg-gallery img { width: 100%; height: auto; display: block; border-radius: var(--radius, 4px); background: var(--hairline, color-mix(in srgb, currentColor 14%, transparent)); }
.sg-cta { position: relative; overflow: hidden; }
.sg-cta .sg-cta-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.sg-cta .sg-cta-scrim { position: absolute; inset: 0; z-index: 0; background: rgba(0,0,0,.6); }
.sg-cta .sg-container { position: relative; z-index: 1; display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .sg-cta .sg-container { grid-template-columns: 1.4fr 1fr; align-items: end; } }
.sg-cta h2 { font-family: var(--font-display, inherit); font-size: clamp(2rem, 4.8vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 600; margin: 14px 0 22px; max-width: 20ch; }
.sg-cta p { color: var(--ink-60, color-mix(in srgb, currentColor 68%, transparent)); max-width: 56ch; }
.sg-cta .sg-friction { font-size: .9rem; margin-top: 18px; }
.sg-contact { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .sg-contact { grid-template-columns: 1fr 1fr; } }
.sg-contact-list { display: grid; gap: 18px; align-content: start; }
.sg-contact-list a { font-family: var(--font-display, inherit); font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 600; letter-spacing: -0.02em; text-decoration: none; color: inherit; }
.sg-contact-list a:hover { color: var(--accent, #E8850F); }
.sg-map { aspect-ratio: 4/3; border: 1px solid var(--hairline, color-mix(in srgb, currentColor 14%, transparent)); border-radius: var(--radius, 4px); overflow: hidden; background: var(--hairline, color-mix(in srgb, currentColor 14%, transparent)); }
.sg-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.sg-form { display: grid; gap: 14px; }
.sg-form label { display: grid; gap: 6px; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-60, color-mix(in srgb, currentColor 68%, transparent)); }
.sg-form input, .sg-form textarea { font: inherit; color: inherit; background: transparent; border: 1px solid var(--hairline, color-mix(in srgb, currentColor 14%, transparent)); border-radius: var(--radius, 4px); padding: 14px 16px; min-height: 50px; width: 100%; }
.sg-form textarea { min-height: 130px; resize: vertical; }
.sg-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 50px; padding: 14px 26px; border-radius: var(--radius, 4px); font-weight: 500; font-size: .98rem; text-decoration: none; border: 1px solid transparent; transition: transform .35s; }
.sg-btn:hover { transform: translateY(-2px); }
.sg-btn-primary { background: var(--accent, #E8850F); color: #fff; }
.sg-btn-ghost { border-color: var(--hairline, color-mix(in srgb, currentColor 14%, transparent)); color: inherit; }
.sg-quote-band blockquote { margin: 0; max-width: 900px; font-family: var(--font-display, inherit); font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: 1.25; letter-spacing: -0.02em; }
.sg-quote-band footer { margin-top: 20px; color: var(--ink-60, color-mix(in srgb, currentColor 68%, transparent)); font-size: .95rem; }
.sg-hero-media { position: relative; z-index: 2; margin-top: 32px; }
.sg-hero-media img { width: 100%; height: auto; display: block; border-radius: var(--radius, 4px); max-height: 62vh; object-fit: cover; }
.sg-note { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60, color-mix(in srgb, currentColor 68%, transparent)); }
@media (max-width: 900px) { .sg-cards { grid-template-columns: 1fr 1fr; } .sg-figs-2, .sg-figs-3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sg-cards { grid-template-columns: 1fr; } .sg-step { grid-template-columns: 52px 1fr; gap: 14px; } .sg-page-hero { padding-top: 112px !important; } }
@media (prefers-reduced-motion: reduce) { .sg-btn, .sg-faq summary::after { transition: none; } }
.sg-head-side { display: grid; gap: 14px; margin-bottom: 0; }
.sg-head-side h2 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.08; letter-spacing: -0.025em; text-transform: none; max-width: 16ch; overflow-wrap: normal; word-break: normal; }
.sg-figs { display: grid; gap: 14px; margin: 2em 0; } .sg-figs-2 { grid-template-columns: 1fr 1fr; } .sg-figs-3 { grid-template-columns: repeat(3, 1fr); }
.sg-figs figure { margin: 0; } .sg-figs img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border-radius: var(--radius, 4px); }
.sg-copy .sg-actions { margin-top: 1.6em; }
.sg-hero-grid { display: grid; gap: 32px; align-items: end; }
@media (min-width: 900px) { .sg-has-side .sg-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); } }
.sg-hero-side { margin: 0; position: relative; z-index: 2; overflow: hidden; border-radius: var(--radius, 4px); }
.sg-hero-side img { width: 100%; height: auto; max-height: 52vh; object-fit: cover; display: block; }
.sg-has-side { align-items: center; }

/* embeds: hosted lead forms + video */
.sg-embed-form{border-radius:var(--radius, 4px);overflow:hidden;background:#fff}
.sg-embed-form iframe{display:block;width:100%;border:0;min-height:900px}
.sg-video{position:relative;aspect-ratio:16/9;border-radius:var(--radius, 4px);overflow:hidden;background:#000}
.sg-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* headingless prose (intros, legal pages) reads at full measure */
@media (min-width: 960px) { .sg-prose.sg-prose-solo { grid-template-columns: minmax(0, 1fr); } }
.sg-prose-solo .sg-copy { max-width: 72ch; }
/* "Title | Tail" h1s: the tail drops to a quieter second line */
.sg-h1-sub { display: block; font-size: .42em; font-weight: 500; letter-spacing: 0; line-height: 1.25; margin-top: .45em; }
.sg-meta { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin: .9em 0 0; }

/* ---- additions (_build/assets/extra.css) ---- */
/* Geist and Geist Mono, self-hosted (Phase 3 perf, D-14 f): the same files and @font-face rules Google Fonts served
   (Geist v5, Geist Mono v6, variable fonts, one file per subset; fetched 2026-10-12 from the css2 URL the head used).
   Same origin and preloaded, so on a normal connection the text is drawn in Geist from the first paint and nothing
   moves when it swaps in. SIL Open Font License 1.1. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-cyrillic-ext-e05ad86b.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-cyrillic-c71bf42e.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-vietnamese-8ce1f5e0.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-latin-ext-66a33f6a.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-latin-9d846db8.woff2) format("woff2"); 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; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/geist-cyrillic-ext-e05ad86b.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/geist-cyrillic-c71bf42e.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/geist-vietnamese-8ce1f5e0.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/geist-latin-ext-66a33f6a.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/geist-latin-9d846db8.woff2) format("woff2"); 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; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/geist-cyrillic-ext-e05ad86b.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/geist-cyrillic-c71bf42e.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/geist-vietnamese-8ce1f5e0.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/geist-latin-ext-66a33f6a.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/geist-latin-9d846db8.woff2) format("woff2"); 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; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/geist-cyrillic-ext-e05ad86b.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/geist-cyrillic-c71bf42e.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/geist-vietnamese-8ce1f5e0.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/geist-latin-ext-66a33f6a.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/geist-latin-9d846db8.woff2) format("woff2"); 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; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-mono-cyrillic-ext-e79d03bf.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-mono-cyrillic-c2458988.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-mono-symbols2-55e5a488.woff2) format("woff2"); unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-mono-vietnamese-7881dbe7.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-mono-latin-ext-fbd56f5f.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-mono-latin-0e04bb6e.woff2) format("woff2"); 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; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/geist-mono-cyrillic-ext-e79d03bf.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/geist-mono-cyrillic-c2458988.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/geist-mono-symbols2-55e5a488.woff2) format("woff2"); unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/geist-mono-vietnamese-7881dbe7.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/geist-mono-latin-ext-fbd56f5f.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/geist-mono-latin-0e04bb6e.woff2) format("woff2"); 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; }

/* fallback faces sized to Geist's widths, so text keeps its line breaks when the web font swaps in (no layout shift) */
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 100.5%; }
@font-face { font-family: "Geist Fallback Caps"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 95.5%; }
@font-face { font-family: "Geist Mono Fallback"; src: local("Menlo"), local("Courier New"); }
:root { --font-display: 'Geist', 'Geist Fallback', 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'Geist Mono', 'Geist Mono Fallback', 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; --accent-ink: #161412; }
.display, .hero-title, .nav-overlay a, .footer-ghost { font-family: 'Geist', 'Geist Fallback Caps', 'Inter', system-ui, -apple-system, sans-serif; }

/* contrast: the theme used --accent-ink without defining it (button text fell back to the band colour), and its
   faintest text tone sat near 3:1. Both now clear WCAG AA (4.5:1) on their backgrounds. */
.band-dark, .nav, .nav-overlay { --ink-30: rgba(245,240,232,.58); }
:root, .band-light, .nav--scrolled { --ink-30: rgba(22,20,18,.62); }

/* every photo carries width/height attributes; height:auto keeps them fluid wherever CSS only sets the width */
img { height: auto; }

/* walkthrough videos (our-sheds hub): portrait clips, three across */
.sx-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 2em; }
.sx-video { margin: 0; }
.sx-video video { width: 100%; height: auto; aspect-ratio: 9 / 16; display: block; object-fit: cover; background: #0D0B09; border-radius: var(--radius); }
@media (max-width: 640px) { .sx-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* a section heading with no eyebrow label takes the full row instead of the 220px label column */
.section-head > :only-child { grid-column: 1 / -1; }

/* homepage hero: a third gradient keeps the nav readable over bright photos */
.hero-scrim { background: linear-gradient(180deg, rgba(13,11,9,.62) 0%, rgba(13,11,9,0) 22%), linear-gradient(90deg, rgba(13,11,9,.86) 0%, rgba(13,11,9,.42) 50%, rgba(13,11,9,.1) 100%), linear-gradient(0deg, rgba(13,11,9,.96) 0%, rgba(13,11,9,0) 45%); }
@media (max-width: 768px) {
  .hero-bg { background-position: 86% 60%; }
  .hero-scrim { background: linear-gradient(0deg, rgba(13,11,9,.97) 0%, rgba(13,11,9,.82) 36%, rgba(13,11,9,.34) 66%, rgba(13,11,9,.6) 100%); }
}

/* ================= landing pages: city pages, /areas-we-serve/, /hiring/ (render_cities.py, custom/) ================= */
.lp-hero { min-height: min(86svh, 800px); }
.lp-hero .sg-crumbs { margin-bottom: 26px; color: var(--ink-60); opacity: 1; }
.lp-hero .sg-crumbs a:hover { color: var(--ink); }
.lp-title { font-size: clamp(2.3rem, 5.6vw, 5rem); max-width: 17ch; line-height: .9; }
.lp-title-sub { display: block; margin-top: .55em; font-size: .36em; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; text-transform: none; color: var(--ink-60); max-width: 34ch; }
/* the live H1 reads "Title | Tagline": the separator stays in the H1's text for crawlers, while the tagline shows on
   its own line (lp-title-sub, sg-h1-sub), so the separator itself is not drawn */
.h1-sep { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.lp-hero .hero-subtitle { max-width: 56ch; }
.lp-hero--side, .lp-hero--plain { min-height: 0; align-items: center; padding-block: 150px clamp(56px, 8vh, 88px); }
.lp-hero--side .container { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.lp-hero-figure { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: 560px; width: 100%; overflow: hidden; background: var(--media-bg); }
.lp-hero-figure img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .lp-hero--side .container { grid-template-columns: 1fr; }
  .lp-hero-figure { aspect-ratio: 4 / 3; max-height: none; }
  .lp-hero--side, .lp-hero--plain { padding-top: 120px; }
}

.lp-sec .section-head { margin-bottom: 36px; }
.lp-sub, .lp-tail, .lp-body { max-width: 68ch; }
.lp-sub { margin: -8px 0 40px; }
.lp-tail { margin-top: 36px; }
.lp-sub p, .lp-tail p { color: var(--ink-60); }
.lp-sub p + p, .lp-tail p + p { margin-top: 1em; }
@media (min-width: 900px) { .lp-sub, .lp-tail, .lp-body { margin-left: 240px; } }   /* lines up with the heading column (220px label + 20px gap) */
.lp-copy { display: flex; flex-direction: column; gap: 20px; }
.lp-copy p { color: var(--ink-60); max-width: 60ch; }
.lp-copy h3 { margin-top: 10px; }
.lp-copy > .micro + .display { margin-top: -4px; }
.lp-split .lp-copy .display { font-size: clamp(1.8rem, 3.4vw, 2.9rem); }
.lp-lead { font-size: clamp(1.12rem, 1.5vw, 1.36rem); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink) !important; }
.lp-copy a:not(.btn):not(.card-link), .lp-card p a, .lp-sub a, .lp-tail a, .lp-cta-copy a, .sg-a a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.lp-copy a:not(.btn):hover, .lp-card p a:hover, .lp-sub a:hover, .lp-tail a:hover, .sg-a a:hover { color: var(--accent); }
.lp-actions { margin-top: 8px; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-chips li { border: 1px solid var(--hairline); padding: 8px 12px; font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-60); }

/* photo + copy */
.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.lp-split.lp-flip > :first-child { order: 2; }
.lp-media { position: relative; margin: 0; aspect-ratio: 5 / 4; overflow: hidden; background: var(--media-bg); }
.lp-media img { width: 100%; height: 100%; object-fit: cover; }
.lp-media-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.lp-media-2 .lp-media { aspect-ratio: 4 / 5; }
.lp-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); margin-top: 56px; }
.lp-shot { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: var(--media-bg); }
.lp-shot img { width: 100%; height: 100%; object-fit: cover; }
.lp-wide { position: relative; margin: 0 0 1px; aspect-ratio: 21 / 9; overflow: hidden; background: var(--media-bg); border: 1px solid var(--hairline); border-bottom: 0; }
.lp-wide img { width: 100%; height: 100%; object-fit: cover; }
.lp-visit { align-items: stretch; }
.lp-visit .sg-map { aspect-ratio: auto; min-height: 380px; border-radius: 0; }
@media (max-width: 900px) { .lp-split { grid-template-columns: 1fr; } .lp-split.lp-flip > :first-child { order: 0; } }

/* card grids: borders on the cells, so a short last row leaves no filled gap */
.lp-cards, .lp-steps, .lp-towns { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.lp-card, .lp-steps .step, .lp-towns .city { border: 0; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.lp-card { padding: clamp(24px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 14px; }
.lp-card h3 { font-size: clamp(1.12rem, 1.5vw, 1.36rem); }
.lp-card p, .lp-card li { color: var(--ink-60); font-size: .97rem; }
.lp-card .lp-n { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .12em; color: var(--accent); }
.lp-card .lp-price { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.lp-card .card-link { margin-top: auto; padding-top: 6px; }
.lp-card h3 a:hover { color: var(--accent); }
.lp-steps .step + .step { border-left: 0; border-top: 0; }
.lp-towns { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.lp-towns .city { padding: 20px; }
.lp-towns .city:not(:nth-child(3n+1)), .lp-towns .city:nth-child(2n) { border-left: 0; }
.lp-towns .city:nth-last-child(-n+3), .lp-towns .city:nth-last-child(-n+2) { border-bottom: 1px solid var(--hairline); }
.lp-photo-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
.lp-card-media { display: block; }
.lp-faq { max-width: none; }
.lp-cta-copy { margin-top: 22px; display: grid; gap: 10px; max-width: 58ch; color: var(--ink-60); }
.lp-page .pricing-aside p { max-width: 46ch; }
@media (max-width: 1100px) { .lp-cards, .lp-steps, .lp-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lp-cards, .lp-steps, .lp-photo-grid { grid-template-columns: 1fr; } }
.lp-media.lp-contain { background: #E2DED6; }   /* same matte the build lays cut-out photos on */
.lp-contain img { object-fit: contain; }
.lp-hero .hero-scrim { background: linear-gradient(180deg, rgba(13,11,9,.62) 0%, rgba(13,11,9,0) 22%), linear-gradient(90deg, rgba(13,11,9,.92) 0%, rgba(13,11,9,.66) 46%, rgba(13,11,9,.16) 100%), linear-gradient(0deg, rgba(13,11,9,.96) 0%, rgba(13,11,9,0) 50%); }
.lp-hero .sg-crumbs, .lp-hero .hero-eyebrow { color: rgba(245,240,232,.78); }
.lp-h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin-top: 8px; }
.lp-h4 + p, .lp-h4 + ul { margin-top: -10px; }
.lp-h4 a { text-decoration: none !important; }
.lp-photo-grid .card-meta { flex-wrap: wrap; }
.lp-photo-grid .card h3 { font-size: clamp(1.1rem, 1.5vw, 1.35rem); }
@media (max-width: 768px) { .lp-hero .hero-scrim { background: linear-gradient(0deg, rgba(13,11,9,.97) 0%, rgba(13,11,9,.84) 40%, rgba(13,11,9,.4) 70%, rgba(13,11,9,.62) 100%); } .lp-hero .hero-bg { background-position: center 60%; } }
.lp-split-cards { align-items: stretch; gap: clamp(24px, 3vw, 48px); }
.lp-split-cards .lp-media { aspect-ratio: auto; min-height: 320px; }
@media (max-width: 1100px) { .lp-split-cards .lp-cards { grid-template-columns: 1fr; } }

/* hiring */
.lp-title--xl { font-size: clamp(2.9rem, 8.2vw, 7.2rem); max-width: 9ch; line-height: .86; }
.lp-hiring-hero .container { align-items: end; }
.lp-ticket { background: var(--surface); gap: 16px; align-self: end; }
.lp-ticket-title { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.lp-ticket .card-link { font-size: var(--text-micro); font-weight: 400; letter-spacing: .12em; margin-top: 4px; }
.lp-facts { border: 1px solid var(--hairline); margin: 0; }
.lp-facts > div { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 16px; padding: 15px 20px; border-bottom: 1px solid var(--hairline); }
.lp-facts > div:last-child { border-bottom: 0; }
.lp-facts dt { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-30); padding-top: 4px; }
.lp-facts dd { color: var(--ink); font-size: .97rem; margin: 0; }
.lp-facts--bare { border: 0; border-top: 1px solid var(--hairline); }
.lp-facts--bare > div { padding-inline: 0; grid-template-columns: 92px minmax(0, 1fr); }
.lp-facts--bare > div:last-child { border-bottom: 1px solid var(--hairline); }
.lp-role { margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.lp-lists .check-list li { font-size: .95rem; color: var(--ink-60); }
.lp-pull { margin-top: 40px; max-width: 46ch; font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.lp-pull a, .lp-steps .step a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.lp-pull a:hover, .lp-steps .step a:hover { color: var(--accent); }
@media (min-width: 900px) { .lp-pull { margin-left: 240px; } }
@media (max-width: 480px) { .lp-facts > div { grid-template-columns: 1fr; gap: 4px; } }

/* build-day photo pair: the tall photo fills the row instead of stopping short of the wide one */
@media (min-width: 901px) { .why-media .tall { aspect-ratio: auto; } .why-media .tall img { position: absolute; inset: 0; } }

/* the oversized footer wordmark is decoration: drawn from a data attribute so it is not read (or contrast-tested) as text */
.footer-ghost::before { content: attr(data-text); }

/* quote form anchor: /contact/#quote lands with the form clear of the fixed nav (its bottom edge is at 90px on a
   desktop). The wrapper holds 760px (the embed's data-height) before the form loads; the embed script then sets
   the iframe's own height, so the sitegen 900px minimum is cancelled here. */
#quote { scroll-margin-top: 100px; min-height: 760px; }
#quote iframe { height: 760px; min-height: 0; }
/* the form gate sets the iframe's src on the production hostnames only. Until then the iframe stays out of the way:
   without JavaScript the <noscript> copy shows the form instead, and on other hosts the gate's note fills the box */
#quote iframe[data-src]:not([src]) { display: none; }
#quote > p { margin: 0; padding: 24px; }
/* mobile menu holds seven links plus phone and button: let it scroll on short screens */
.nav-overlay { overflow-y: auto; justify-content: flex-start; padding-top: 88px; }
.nav-overlay > :first-child { margin-top: auto; }
.nav-overlay > :last-child { margin-bottom: auto; }
/* the quote button in the mobile menu keeps button type, not the menu's display size */
.nav-overlay a.btn { font-size: 1.05rem; letter-spacing: 0; line-height: 1.2; text-transform: none; border-bottom: 0; padding: 16px 28px; }

/* ================= hero photos and FAQ questions as real elements (phase 2, D-10, D-16) ================= */
/* a hero photo is an img (build_site.hero_images), filling exactly the box its CSS background filled: the homepage and
   city hero starts 12% above its header and is 12% taller (.hero-bg inset), the inner-page hero fills its header;
   object-position repeats every background-position set for the class at each breakpoint */
.hero-bg-picture { display: contents; }
img.hero-bg { width: 100%; height: 112%; max-width: none; object-fit: cover; object-position: center 60%; }
img.sg-hero-bg { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
@media (max-width: 768px) {
  img.hero-bg { object-position: 86% 60%; }
  .lp-hero img.hero-bg { object-position: center 60%; }
  .hero-bg-picture > img.hero-bg { object-position: center; }   /* the phone crop, centred as the old swap style had it */
}
/* an FAQ question is an h3 inside its summary; it reads exactly as the summary text did */
.sg-faq summary > .sg-q { display: inline; margin: 0; padding: 0; font: inherit; letter-spacing: inherit; line-height: inherit;
  color: inherit; text-transform: inherit; text-wrap: inherit; }

/* ================= homepage: the live homepage's content inside the redesign (phase 2, plan 02-02, D-03 D-05) ================= */
/* hero: the live H1 is nine words, so the title steps down a size and widens; it stays the one display line */
.home-hero .hero-title { font-size: clamp(2.45rem, 6.2vw, 5.9rem); max-width: 15ch; }
.hero-btn-stack { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; line-height: 1.15; }
.hero-btn-sub { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60); }
.hero-text-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-60); }
.hero-text-link:hover { color: var(--ink); }
.home-hero .hero-side .stars { margin-right: 6px; }
/* the rating line shows on every width: below the buttons under 1000px, bottom right above it */
@media (max-width: 999px) {
  .home-hero { flex-wrap: wrap; align-content: flex-end; }
  .home-hero .hero-side { display: flex; position: relative; right: auto; bottom: auto; width: 100%; max-width: var(--container); margin: 28px auto 0; padding-inline: 24px; text-align: left; gap: 6px; }
}

/* supporting line under a section heading (a redesign headline the live heading replaced, or a live intro) */
.home-sub { font-size: clamp(1.02rem, 1.2vw, 1.15rem); }

/* why: the three live value cards under the problem / solution grid */
.home-values { margin-top: 48px; }

/* story and build-quality videos: portrait clips in a narrower row; one row you swipe on phones */
.home-videos { margin-top: 0; max-width: 920px; }
@media (min-width: 900px) { .home-videos { margin-left: 240px; } }
@media (max-width: 640px) {
  .home-videos { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin-inline: -24px; padding-inline: 24px; }
  .home-videos .sx-video { flex: 0 0 64%; scroll-snap-align: start; }
}
.sx-yt .yt-facade { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--radius); background: #0D0B09; }
.sx-yt .yt-facade img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-heavy); }
.sx-yt .yt-facade:hover img { transform: scale(1.03); }
.yt-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); background: var(--accent); border-radius: 12px; }
.yt-play::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent var(--accent-ink); }
.sx-yt .yt-frame { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border: 0; border-radius: var(--radius); background: #0D0B09; }

/* about: the live "15+ Years Experience" badge on the photo, and the four live bullets */
.home-about .about-media { position: relative; }
.about-badge { position: absolute; left: 16px; bottom: 16px; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); }
.about-badge strong { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.about-badge span { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .1em; text-transform: uppercase; }
.home-about .about-copy p a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.home-about .about-copy p a:hover { color: var(--accent); }
.about-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
/* counters: each number is an h2 (live has them as h2) that reads exactly like the stat number it was */
.stats-row h2.stat-number { margin: 0; }

/* styles: live card names are longer, so the price drops under the name when needed; each card keeps its pricing link */
.home-styles .card-meta { flex-wrap: wrap; row-gap: 4px; }
.card-link + .card-link-2 { margin-top: -6px; color: var(--ink-60); }
.card-link-2:hover { color: var(--ink); }

/* pricing: the live add-ons heading over the add-on grid */
.addons-title { margin: 40px 0 16px; font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.addons-title + .addons { margin-top: 0; }

/* build quality: buttons and the call line under the videos, on the heading column */
.home-offset { margin-top: 36px; }
@media (min-width: 900px) { .home-offset { margin-left: 240px; } }
.home-offset .hero-actions { margin-top: 0; }
.home-call { margin-top: 16px; color: var(--ink-60); font-size: .95rem; }
.home-call a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* areas and blog: photo cards three across; on phones one row you swipe instead of a wall of cards */
.home-cities, .home-blog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-cities .card-media, .home-blog .card-media { display: block; }
.home-blog .card h3 a:hover, .home-cities .card h3 a:hover { color: var(--accent); }
@media (max-width: 640px) {
  .home-cities, .home-blog { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1px; margin-inline: -24px; border-inline: 0; }
  .home-cities > .card, .home-blog > .card { flex: 0 0 82%; scroll-snap-align: start; }
  .home-cities > .card:first-child, .home-blog > .card:first-child { margin-left: 24px; }
  .home-cities > .card:last-child, .home-blog > .card:last-child { margin-right: 24px; }
}
.home-areas-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
@media (min-width: 900px) { .home-areas-foot { margin-left: 240px; } }
.home-areas-foot .micro { color: var(--ink-60); }

/* closing band: the live heading in full, its two sentences and the inventory link under them */
.final-cta .cta-line { margin-top: 18px; color: var(--ink); font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 600; letter-spacing: -0.01em; max-width: 34ch; }
.final-cta .cta-copy { margin-top: 18px; color: var(--ink-60); max-width: 52ch; }
.final-cta .cta-copy a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.final-cta .cta-copy + .hero-actions { margin-top: 20px; }

/* visual review fixes (plan 02-02 task 3) */
/* supporting lines read as secondary copy, like the lead paragraphs elsewhere */
.home-sub { color: var(--ink-60); }
/* name above the price / county line, the same on every card (four across, the price used to wrap on two of four) */
.home-cities .card-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
@media (min-width: 1101px) { .home-styles .card-meta { flex-direction: column; align-items: flex-start; gap: 6px; } }
.home-cities .card-from { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-30); }
/* swipe rows start on the page margin, not flush with the screen edge */
@media (max-width: 640px) { .home-videos { scroll-padding-inline: 24px; } }
/* phone hero: the four buttons take three rows (quote, builder + inventory, phone) and the copy sits on a darker scrim */
@media (max-width: 640px) {
  .home-hero .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 32px; }
  .home-hero .hero-actions .btn { justify-content: center; padding-inline: 12px; }
  .home-hero .hero-actions .btn-primary, .home-hero .hero-actions a[href^="tel:"] { grid-column: 1 / -1; }
  .home-hero .hero-btn-stack { align-items: center; }
  .home-hero .hero-scrim { background: linear-gradient(0deg, rgba(13,11,9,.97) 0%, rgba(13,11,9,.9) 46%, rgba(13,11,9,.55) 72%, rgba(13,11,9,.62) 100%); }
}

/* ================= live blog sidebars and footer Service Areas links (phase 2, plan 02-03, D-09 D-12) ================= */
/* build_site.page_extras(): the live sidebar widgets as lp-cards at the end of a post; link lists, the quote button at
   its own width, the phone line and the sidebar photo. Scoped to sx-aside / sx-areas, which no other block uses */
.sx-aside .sx-links, .sx-aside .sx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sx-aside .sx-links a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.sx-aside .sx-links a:hover { color: var(--accent); }
.sx-aside .lp-card .btn { align-self: flex-start; margin-top: 6px; }
.sx-aside .sx-phone { font-family: var(--font-mono); font-size: .9rem; letter-spacing: .04em; color: var(--ink); align-self: flex-start; }
.sx-aside .sx-phone:hover { color: var(--accent); }
.sx-aside .sx-photo { margin: 0; }
.sx-aside .sx-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 360px; object-fit: cover; display: block; border-radius: var(--radius); background: var(--media-bg); }
.sx-aside .sx-photo figcaption { margin-top: 10px; color: var(--ink-60); font-size: .88rem; }
/* a short last row: the last card takes the leftover columns (desktop), or the full row on two-column tablets */
@media (min-width: 1101px) { .sx-aside .sx-last { grid-column: span var(--span, 1); } }
@media (min-width: 641px) and (max-width: 1100px) { .sx-aside-odd .lp-card:last-child { grid-column: 1 / -1; } }
/* Service Areas: a compact band of town links where the live footer listed city pages the shared footer does not */
.sx-areas.sg-band { padding: clamp(56px, 7vh, 88px) 0; }
.sx-areas .section-head { margin-bottom: 28px; }

/* ================= blog posts: live heading levels and numbered headings (phase 2, plan 02-03, D-10) ================= */
/* an article subheading that is an h3 on live but was an h2 here (Quick Answer, Table of Contents): it keeps the look
   it had as an h2 inside .sg-copy (the browser's h2 size and weight, the copy's line height and spacing) */
.sg-copy h3.sx-h2 { font-family: inherit; font-size: 1.5em; font-weight: 700; letter-spacing: inherit; line-height: inherit; text-wrap: wrap; margin-top: 1.15em; }
.sg-copy h3.sx-h2:first-child { margin-top: 0; }
/* a numbered step list whose h3s carry the live number ("1. Waterproofing", "Step 1: ..."): the number is in the
   heading, set like the numeral it replaces, and the numeral column closes */
.sx-steps-named .sg-step { grid-template-columns: minmax(0, 1fr); }
.sx-steps-named .sx-hn { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-weight: 500; font-size: .82em; letter-spacing: 0; color: var(--accent, #E8850F); font-variant-numeric: tabular-nums; margin-right: .2em; }
/* the live financing bar of the metal-vs-wood post, as a line under the hero buttons */
.sx-offer { margin-top: 18px; font-size: .92rem; color: var(--ink-60); }
.sx-offer strong { color: var(--ink); font-weight: 600; }
.sx-offer a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.sx-offer a:hover { color: var(--accent); }

/* ================= sitegen pages: live heading levels without a visual change (phase 2, plan 02-03, D-10) ================= */
/* contact: Location / Phone / Email are h2 on live; they read exactly as the .sg-copy h3 they were */
.sg-copy h2.sx-h3 { font-family: var(--font-display, inherit); font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.18; letter-spacing: -0.02em; font-weight: 600; text-wrap: balance; margin-top: 2em; }
.sg-copy h2.sx-h3:first-child { margin-top: 0; }
/* a page-header label that is an h2 on live (WHO WE ARE, PRIVACY POLICY ...): the last breadcrumb item, unchanged */
.sg-crumbs h2.sx-crumb { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; margin: 0; }
/* a live page-header h2 with no breadcrumb twin (/our-sheds/): a small label above the h1, set as the eyebrow */
.sg-hero-inner h2.sx-label { font-weight: 500; line-height: 1.5; margin: 0; }
/* the town grid: as many columns as gives balanced rows (build_site sets --cols), three on tablets, two on phones; a town
   left alone on the last row takes the whole row (visual review, plan 02-03) */
.sx-areas .lp-towns { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
@media (max-width: 900px) { .sx-areas .lp-towns { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sx-areas.sx-r3 .lp-towns .city:last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .sx-areas .lp-towns { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sx-areas .lp-towns .city { padding: 16px 14px; }
  .sx-areas.sx-r3 .lp-towns .city:last-child { grid-column: auto; } .sx-areas.sx-odd .lp-towns .city:last-child { grid-column: 1 / -1; } }

/* ================= city pages and the areas hub: live text through render_cities.py (phase 2, plan 02-04, D-01 D-09 D-10) ================= */
/* the live hero trust line replaces the redesigned strip wording; the phone is a call link */
.lp-proof-live .proof-item strong a { color: inherit; }
.lp-proof-live .proof-item strong a:hover { color: var(--accent); }
/* the live line above the H1 leads the eyebrow beside the accent rule; the redesigned kicker sits under it, quieter
   (one run-on line read as a single label at 1440, and the rule was stranded on its own row at 390: visual review) */
.lp-hero .lp-eyebrow-2 { display: grid; grid-template-columns: 40px minmax(0, max-content); column-gap: 14px; row-gap: 6px; align-items: center; justify-content: start; }
.lp-hero .lp-eyebrow-2 .lp-kicker { grid-column: 2; color: rgba(245,240,232,.5); }
/* the hub's live page-header h2: a small label above the eyebrow, not a second title */
.lp-hero h2.lp-hero-h2 { margin: 0 0 14px; font-weight: 500; line-height: 1.5; color: rgba(245,240,232,.78); }
/* numbered live step titles ("1. Talk it through") hold their number in the h3; it takes the accent */
.lp-steps-named .step h3::first-letter { color: var(--accent); }
/* the live price heading at the top of its panel, set as a small label under the tab row */
.price-panel .lp-panel-h { margin: 0; padding: 18px 24px 0; font-family: var(--font-mono); font-size: var(--text-micro); font-weight: 400;
  letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; color: var(--ink-60); }
@media (max-width: 640px) { .price-panel .lp-panel-h { padding: 14px 14px 0; } }
/* a photo card's live price line ("Starting at $2,860") sits under the card name */
.lp-photo-grid .card-meta:has(> .card-from) { flex-direction: column; align-items: flex-start; gap: 6px; }
/* closing band: the live call line under the buttons, the live city line under it, the design center in the contact block */
.final-cta .lp-call { margin-top: 20px; color: var(--ink-60); }
.final-cta .lp-call a { color: var(--ink); font-weight: 600; white-space: nowrap; }
.final-cta .lp-call a:hover { color: var(--accent); }
.final-cta .lp-serving { margin-top: 12px; font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-30); }
.contact-block .lp-visit-at { display: grid; gap: 2px; color: var(--ink-60); font-size: .95rem; }
.contact-block .lp-visit-at strong { color: var(--ink); font-weight: 600; }
/* ---- keyboard access (Phase 3, D-08 and D-09) ---- */
/* skip link: the first Tab stop on every page. Moved out of sight (still in the tab order) until it is focused, then it
   shows top left, above the fixed nav and the grain overlay */
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 10000; display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 18px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 1rem; line-height: 1.2;
  transform: translateY(calc(-100% - 16px)); }
.skip-link:focus { transform: none; }
/* its ring sits inside its own dark box, so it reads the same over a dark hero and a light page */
.skip-link:focus-visible { outline: 2px solid var(--bg); outline-offset: -5px; }
/* focus ring: the theme's accent ring is near 2:1 on the light band. --ink flips with the band (.band-dark, .nav and
   .nav-overlay redefine it), so this ring is 3:1 or better on light and dark alike. Videos with controls take focus too */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, video:focus-visible, audio:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* homepage phone rows (cities, posts, videos) snap card by card; a keyboard focus scroll that lands between two snap
   points was pulled back, leaving the focused card off-screen. While a row holds keyboard focus it does not snap and
   keeps 24 px clear at its edges, so the focused card and its ring stay in view */
@media (max-width: 640px) {
  .home-cities:has(:focus-visible), .home-blog:has(:focus-visible), .home-videos:has(:focus-visible) { scroll-snap-type: none; scroll-padding-inline: 24px; }
  /* the video row scrolls sideways, so it also clips top and bottom: 5 px of top room (taken back by the margin, nothing
     moves) lets a focused video's ring show above it, as the existing 6 px bottom padding does below */
  .home-videos { padding-top: 5px; margin-top: -5px; }
}
/* accent-coloured text on a light band (Lighthouse color-contrast, Phase 3 D-07): the brand orange is 2.2 to 2.5:1 on the
   light backgrounds, so text there takes a darker shade of the same hue; dark bands keep the brand orange.
   --accent-text for large display words (3:1 or better), --accent-text-sm for small labels (4.5:1 or better) */
:root, .band-light { --accent-text: #C26F0D; --accent-text-sm: #9B590A; }
.band-dark { --accent-text: var(--accent); --accent-text-sm: var(--accent); }
.band-light .accent { color: var(--accent-text); }
.lp-card .lp-n { color: var(--accent-text-sm); }

/* Closing band photo (Phase 3 perf, D-14): the build names it in --cta-bg rather than as a background, so it is not
   fetched with the hero; extra.js adds .bg-in when the band comes within 1200 px of the screen. Without scripting it
   shows straight away. Same photo, same position and size as before. */
.cta-bg.bg-in { background-image: var(--cta-bg); }
@media (scripting: none) { .cta-bg { background-image: var(--cta-bg); } }

/* Video posters (Phase 3 perf): the build names each poster in data-poster and --poster; extra.js sets the poster when
   the video comes within 1200 px of the screen. Without scripting the same image is painted here, drawn the way a
   poster is (cover, centred) on the video's own dark background. */
@media (scripting: none) { video[data-poster] { background: var(--poster) center / cover no-repeat #0D0B09; } }

/* ================= phone visual review fixes (Phase 3, plan 03-03; ledger 03-VISUAL-QA.md) ================= */
/* V-001 and the other city grids: a revealed card in a 1 px-gap card grid drops the theme's will-change. As its own
   compositing layer Chrome snapped it over the hairline gap at fractional row positions, so two cards read as one */
.card-grid > .card.reveal { will-change: auto; }
/* V-005: a card of size / price / badge fragments (render_cities.py tags each line) reads as three tiles */
.lp-card--figures { gap: 0; }
.lp-card--figures .lp-fig-size { margin-top: 18px; color: var(--ink-60); font-size: .92rem; }
.lp-card--figures .lp-fig-size ~ .lp-fig-size { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.lp-card--figures .lp-fig-price { margin-top: 2px; font-family: var(--font-mono); font-size: 1.3rem; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.lp-card--figures .lp-fig-tag { margin-top: 6px; font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .12em; color: var(--accent-text-sm); }
/* V-014, V-019: on phones the city hero's crumbs and eyebrow sat where the scrim was weakest (.4), so small text broke
   up over bright siding and trim; the top third of the scrim is darker */
@media (max-width: 768px) { .lp-hero .hero-scrim { background: linear-gradient(0deg, rgba(13,11,9,.97) 0%, rgba(13,11,9,.84) 40%, rgba(13,11,9,.64) 70%, rgba(13,11,9,.68) 100%); } }
/* V-020 and the other sitegen closing bands: no one-word last line in the band's copy or heading (V-040), nor in the
   side headings (V-026) */
.sg-cta .sg-copy p { text-wrap: pretty; }
.sg-cta h2, .sg-head-side h2 { text-wrap: balance; }
/* V-022, V-027: a price list split into two tables keeps one set of column widths, and its closing note row runs
   across the table instead of squeezing into the first column */
.sg-copy table:has(+ table), .sg-copy table + table { table-layout: fixed; }
.sg-copy :is(table:has(+ table), table + table) :is(th, td):is(:first-child, :last-child) { width: 28%; }
.sg-copy :is(table:has(+ table), table + table) td:only-child { white-space: nowrap; border-bottom: 0; }
/* V-035, V-038: links inside sitegen card paragraphs read as links (the lp-card rule, on sg-card) */
.sg-card p a:not(.btn) { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.sg-card p a:not(.btn):hover { color: var(--accent); }
/* V-039: colour swatch graphics show whole, not cropped to the card's 4:3 photo frame */
.sg-card img.sx-swatch { aspect-ratio: auto; object-fit: contain; }
/* sweep warning (upscaled): a figure whose source file is about 640 px wide is shown at about that size, centred, instead
   of stretched to the 1312 px column; the image keeps width: 100% of its figure, so its box is reserved before it loads */
.sg-figure.sx-fig-small { max-width: 640px; margin-inline: auto; }
/* sweep warnings (small tap targets, 390 wide): hit areas of 40 px or more with nothing moved. Block links get padding
   and the same negative margin; inline links take vertical padding, which does not change the line box */
.nav-logo { padding-block: 1px; margin-block: -1px; }
.contact-block > a:not(.card-link) { padding-block: 8px; margin-block: -8px; }
.final-cta .lp-call a, .final-cta .cta-copy a { padding-block: 10px; }

/* /hiring/ (2026-11-11): the live page's hero photo, job facts and application. The dialog and the phone sticky bar keep the
   live markup hooks (sbj-*), which /hiring/apply.js runs; they are drawn with the site's own tokens and buttons */
.lp-hiring-hero .lp-hero-figure { aspect-ratio: 3 / 2; max-height: none; }
.lp-hiring-hero .lp-chips { margin-top: 20px; }
.lp-hiring-note { margin-top: 14px; font-size: .9rem; color: var(--ink-60); }
.lp-hiring-facts h3 { margin-bottom: 16px; }
.lp-hiring .lp-copy h3 { margin: 28px 0 12px; }
html.sbj-lock { overflow: hidden; }
.sbj-dialog { width: min(640px, calc(100vw - 32px)); max-width: none; max-height: min(780px, calc(100dvh - 32px)); margin: auto; padding: 0; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--bg); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); overflow: hidden; }
.sbj-dialog[open] { display: flex; flex-direction: column; }
.sbj-dialog::backdrop { background: rgba(13, 11, 9, .75); }
.sbj-dialog-head { flex: 0 0 auto; padding: 16px 20px 0; background: #161412; color: #F5F0E8; }
.sbj-dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sbj-dialog-title { margin: 0; font-size: 1rem; font-weight: 600; color: #F5F0E8; }
.sbj-dialog-count { margin: 4px 0 0; font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 240, 232, .64); }
.sbj-x { flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid rgba(245, 235, 220, .25); border-radius: var(--radius); background: transparent; color: #F5F0E8; font-size: 24px; line-height: 1; cursor: pointer; }
.sbj-x:hover { background: rgba(255, 255, 255, .1); }
.sbj-progress { height: 4px; margin: 14px -20px 0; background: rgba(245, 235, 220, .15); }
.sbj-progress-bar { width: 0; height: 100%; background: var(--accent); transition: width .3s ease; }
.sbj-dialog-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 30px 28px 24px; }
.sbj-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.sbj-q { display: block; width: 100%; margin: 0 0 8px; padding: 0; font-size: clamp(1.3rem, 3.2vw, 1.6rem); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); outline: none; }
.sbj-hint { margin: 0 0 20px; font-size: .95rem; color: var(--ink-60); }
.sbj-input { display: block; width: 100%; padding: 14px 16px; border: 1px solid var(--ink-30); border-radius: var(--radius); background: #fff; color: var(--ink); font: inherit; font-size: 1.1rem; }
textarea.sbj-input { min-height: 150px; resize: vertical; line-height: 1.5; }
.sbj-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232, 133, 15, .25); }
.sbj-input[aria-invalid="true"] { border-color: #b42318; }
.sbj-opts { display: grid; gap: 10px; }
.sbj-opt { position: relative; display: block; margin: 0; cursor: pointer; }
.sbj-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sbj-opt-box { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px; border: 1px solid var(--ink-30); border-radius: var(--radius); background: #fff; color: var(--ink); font-size: 1rem; font-weight: 500; line-height: 1.35; }
.sbj-opt:hover .sbj-opt-box { border-color: var(--ink-60); }
.sbj-mark { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--ink-60); border-radius: 50%; background: #fff; }
.sbj-opt input[type="checkbox"] + .sbj-opt-box .sbj-mark { border-radius: 3px; }
.sbj-opt input:checked + .sbj-opt-box { border-color: var(--accent); background: rgba(232, 133, 15, .08); }
.sbj-opt input:checked + .sbj-opt-box .sbj-mark { border-color: var(--accent); background: var(--accent); }
.sbj-opt input:checked + .sbj-opt-box .sbj-mark::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink); transform: translateY(-1px) rotate(-45deg); }
.sbj-opt input:focus-visible + .sbj-opt-box { outline: 2px solid var(--ink); outline-offset: 2px; }
.sbj-error { display: none; margin: 16px 0 0; color: #b42318; font-size: .95rem; font-weight: 600; }
.sbj-error.is-on { display: block; }
.sbj-dialog-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); background: var(--bg-2); }
.sbj-dialog .btn, .sbj-sticky .btn { margin-top: 0; justify-content: center; }
.sbj-dialog button.btn { border: 0; font: inherit; font-weight: 500; cursor: pointer; }
.sbj-dialog button.btn-ghost { border: 1px solid var(--hairline); }
.sbj-back { min-height: 50px; padding: 10px 14px; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; }
.sbj-back:hover { background: var(--surface); }
.sbj-back[hidden] { display: inline-block !important; visibility: hidden; }
.sbj-next { min-width: 170px; }
.sbj-next[disabled] { opacity: .7; cursor: progress; }
.sbj-x:focus-visible, .sbj-dialog-foot button:focus-visible, .sbj-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sbj-review { margin: 0; border: 1px solid var(--hairline); border-radius: var(--radius); background: #fff; overflow: hidden; }
.sbj-review div { padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
.sbj-review div:last-child { border-bottom: 0; }
.sbj-review dt { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-60); }
.sbj-review dd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 2px 0 0; color: var(--ink); }
.sbj-review-val { flex: 1; min-width: 0; white-space: pre-line; overflow-wrap: anywhere; }
.sbj-review-val.is-empty { color: var(--ink-60); font-style: italic; }
.sbj-edit { flex: 0 0 auto; min-height: 40px; padding: 6px 10px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sbj-consent { margin: 16px 0 0; font-size: .9rem; color: var(--ink-60); }
.sbj-panel { padding: 20px 4px 8px; text-align: center; }
.sbj-panel-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; background: #e7f7ee; color: #137a43; font-size: 30px; }
.sbj-panel--fail .sbj-panel-icon { background: #fdecea; color: #b42318; }
.sbj-panel p { color: var(--ink-60); }
.sbj-panel a:not(.btn) { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sbj-panel .sbj-btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.sbj-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.sbj-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(13, 11, 9, .97); box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); transform: translateY(110%); transition: transform .25s ease; }
.sbj-sticky .btn { flex: 1; min-height: 50px; }
.sbj-sticky .btn-ghost { flex: 0 0 auto; border-color: rgba(245, 235, 220, .3); color: #F5F0E8; }
@media (max-width: 991.98px) {
  .sbj-sticky { display: flex; }
  body.sbj-sticky-on .sbj-sticky { transform: translateY(0); }
}
@media (max-width: 575.98px) {
  .sbj-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .sbj-dialog-body { padding: 24px 18px 20px; }
  .sbj-next { min-width: 0; flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .sbj-dialog *, .sbj-sticky { transition: none !important; } }