/* AIX Outdoors — Direction A: Proof / Conversion
   Charcoal + brand blue (#204ebc). Commercial, bid-ready, no-nonsense. */

:root {
  --bg: #0b0b0b;
  --bg-elev: #121212;
  --bg-card: #1a1a1a;
  --bg-soft: #222222;
  --ink: #f2f2f2;
  --ink-muted: #b0b0b0;
  --line: #2e2e2e;
  --brand: #204ebc;
  --brand-bright: #2f63d6;
  --brand-deep: #183a8f;
  --muted-gray: #c8c8c8;
  --cream: #e8e4d8;
  --danger: #c45c3a;
  --ok: #4a8f6a;
  /* Legacy aliases → brand blue (olive/orange replaced) */
  --olive: var(--brand);
  --olive-bright: var(--brand-bright);
  --olive-deep: var(--brand-deep);
  --orange: var(--brand);
  --orange-hot: var(--brand-bright);
  --orange-deep: var(--brand-deep);
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --radius: 10px;
  --max: 1120px;
  --nav-h: 64px;
  --banner-h: 0px;
  --font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
  padding-top: calc(var(--banner-h) + var(--nav-h));
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: var(--olive-bright); text-decoration: none; }
a:hover { color: var(--orange-hot); }
.wrap { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }

/* sample banner removed for live domain */


/* Nav */
.nav {
  position: fixed; top: var(--banner-h); left: 0; right: 0; z-index: 999;
  height: var(--nav-h);
  background: rgba(11,11,11,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(1240px, calc(100% - 32px)); }
.wordmark {
  display: flex; align-items: center; gap: 10px; color: var(--ink);
}
.wordmark:hover { color: var(--ink); }
.mark {
  width: 38px; height: 38px; flex-shrink: 0;
}
.wordmark span { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: .12em; text-transform: uppercase; line-height: 1; }
.wordmark small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--muted-gray); margin-top: 3px; text-transform: none; }
.mark-logo {
  width: 40px; height: 40px; max-height: 40px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 0; background: transparent;
}
.wordmark-text { min-width: 0; }
.nav-links-scroll {
  display: contents;
}
.nav-cta-phone {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff !important;
  font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  padding: 10px 14px; border-radius: 4px; white-space: nowrap;
}
.nav-cta-phone:hover { background: var(--brand-bright); color: #fff !important; }
.hero-brand-mark {
  width: min(220px, 42vw); margin-bottom: 18px; opacity: .92;
  border-radius: 6px; border: 1px solid var(--line);
}
.flyer-sample {
  margin-top: 22px; display: grid; grid-template-columns: 140px 1fr; gap: 16px;
  align-items: center; background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px;
}
.flyer-sample img { width: 140px; height: auto; border-radius: 4px; border: 1px solid var(--line); }
.flyer-sample .partner-tag { margin-bottom: 6px; }
.benefit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 18px; }
.benefit-grid li { color: var(--ink-muted); padding: 8px 0 8px 28px; position: relative; list-style: none; }
.benefit-grid li::before { content: ""; position: absolute; left: 0; top: 14px; width: 14px; height: 8px; border-left: 2px solid var(--brand-bright); border-bottom: 2px solid var(--brand-bright); transform: rotate(-45deg); }
.sticky-call {
  position: fixed; z-index: 980; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  background: var(--brand); color: #fff !important; font-weight: 700; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; padding: 12px 16px; border-radius: 999px;
  box-shadow: var(--shadow); text-decoration: none;
}
.sticky-call:hover { background: var(--brand-bright); color: #fff !important; }
@media (max-width: 900px) {
  .mark-logo { width: 36px; height: 36px; max-height: 36px; }
  .flyer-sample, .benefit-grid { grid-template-columns: 1fr; }
  .nav-cta-phone { font-size: 11px; padding: 8px 10px; }
}
@media (max-width: 640px) {
  .sticky-call { display: none !important; } /* phone lives in compact nav */
  .wordmark span { font-size: 16px; }
  .wordmark small { display: none; }
  .hero-brand-mark { width: min(140px, 38vw); margin-bottom: 12px; }
}
.nav-links { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.nav-links a { color: var(--ink-muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--brand); color: #fff !important;
  font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  padding: 12px 18px; border-radius: 4px; border: 0; cursor: pointer;
  font-family: var(--font);
}
.btn:hover { background: var(--brand-bright); color: #fff !important; }
.btn-ghost {
  background: transparent; color: var(--ink) !important;
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--olive-bright); color: var(--olive-bright) !important; }
.btn-olive, .btn-brand { background: var(--brand-deep); }
.btn-olive:hover, .btn-brand:hover { background: var(--brand); }

/* Hero */
.hero {
  position: relative;
  min-height: 0;
  display: grid; align-items: end;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: saturate(.7) contrast(1.05);
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,11,11,.92) 0%, rgba(11,11,11,.55) 48%, rgba(11,11,11,.25) 100%),
    linear-gradient(0deg, rgba(11,11,11,.9) 0%, transparent 45%);
}
.hero-inner { position: relative; z-index: 1; padding: 40px 0 32px; width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted-gray); margin-bottom: 14px;
}
.kicker-accent { color: var(--brand-bright); }
h1, .h1 {
  font-family: var(--display); font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  font-size: clamp(42px, 7vw, 76px); line-height: .92; max-width: 16ch;
}
h2 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(28px, 4vw, 42px); line-height: 1.05;
}
h3 { font-size: 18px; font-weight: 700; letter-spacing: .02em; }
.lede { color: var(--ink-muted); font-size: 18px; max-width: 52ch; margin: 18px 0 28px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.proof-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border-top: 1px solid var(--line);
}
.proof-strip div {
  background: var(--bg-elev); padding: 14px 16px;
}
.proof-strip strong { display: block; font-family: var(--display); font-size: 20px; color: var(--ink); }
.proof-strip span { font-size: 12px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .08em; }

/* Sections */
.section { padding: 72px 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.section-head p { color: var(--ink-muted); max-width: 46ch; }
.muted { color: var(--ink-muted); }
.tiny { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-gray); font-family: var(--mono); }

/* Cards / grids */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.card img { width: 100%; height: 180px; object-fit: cover; }
.card-body { padding: 20px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-muted); font-size: 14.5px; }
.card .price {
  margin-top: 14px; font-family: var(--display); font-size: 22px; color: var(--orange);
}
.card .price small { font-size: 12px; color: var(--ink-muted); font-family: var(--font); letter-spacing: 0; text-transform: none; display: block; font-weight: 400; }
.tag {
  display: inline-block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--olive); color: var(--olive-bright); padding: 3px 8px; margin-bottom: 10px;
}

/* Split */
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.split img, .split .frame { width: 100%; height: 380px; object-fit: cover; border-radius: var(--radius); }
.checklist { list-style: none; margin-top: 18px; }
.checklist li { padding: 8px 0 8px 28px; position: relative; color: var(--ink-muted); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 14px; width: 14px; height: 8px; border-left: 2px solid var(--olive-bright); border-bottom: 2px solid var(--olive-bright); transform: rotate(-45deg); }

/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th, .table td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); }
.table th { color: var(--olive-bright); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.table td.num { font-family: var(--display); font-size: 20px; color: var(--ink); }
.note {
  margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--orange);
  background: var(--bg-elev); color: var(--ink-muted); font-size: 13px;
}

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gallery figure { position: relative; overflow: hidden; border-radius: 6px; background: var(--bg-card); }
.gallery img { width: 100%; height: 220px; object-fit: cover; }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.8));
  padding: 28px 12px 10px; font-size: 13px;
}

/* Process */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.step { background: var(--bg-card); border: 1px solid var(--line); padding: 22px; border-radius: var(--radius); }
.step .n { font-family: var(--display); font-size: 42px; color: var(--olive); line-height: 1; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--orange); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-muted); margin-top: 10px; max-width: 70ch; }

/* Forms */
form { display: grid; gap: 14px; }
label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
input, select, textarea {
  width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  padding: 12px 14px; border-radius: 4px; font: inherit;
}
textarea { min-height: 120px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Map */
.map-wrap { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.map-wrap svg { width: 100%; height: auto; display: block; }
.city-list { columns: 2; gap: 24px; margin-top: 18px; }
.city-list li { break-inside: avoid; padding: 6px 0; color: var(--ink-muted); list-style: none; }
.city-list li em { color: var(--ink-muted); font-style: normal; font-size: 12px; opacity: .7; }
.out { color: var(--danger) !important; text-decoration: line-through; }

/* Footer */
footer {
  border-top: 1px solid var(--line); background: #0b0b0b; padding: 40px 0 24px; margin-top: 40px;
}
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
footer h4 { font-family: var(--display); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; color: var(--olive-bright); }
footer a, footer p { color: var(--ink-muted); font-size: 14px; display: block; margin: 6px 0; }
.legal { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: #6e6c64; }

/* Page hero compact */
.page-hero { padding: 48px 0 28px; border-bottom: 1px solid var(--line); background: var(--bg-elev); }
.page-hero h1 { font-size: clamp(36px, 5vw, 58px); max-width: 22ch; }
.crumbs { font-size: 12px; color: var(--ink-muted); margin-bottom: 10px; }
.crumbs a { color: var(--ink-muted); }

.cta-band {
  background: linear-gradient(90deg, var(--brand-deep), #0b0b0b);
  border-top: 1px solid var(--brand); border-bottom: 1px solid var(--brand);
  padding: 36px 0;
}
.cta-band .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }

.svc-hero-img { width: 100%; height: 320px; object-fit: cover; border-bottom: 1px solid var(--line); }

/* Job catalog strip (home proof) */
.job-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border-bottom: 1px solid var(--line);
}
.job-strip figure { margin: 0; background: var(--bg-elev); position: relative; }
.job-strip img { width: 100%; height: 168px; object-fit: cover; }
.job-strip figcaption {
  padding: 10px 12px 14px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted); font-family: var(--mono);
}

/* Quote form — keep the brand CTA fully on-screen */
.quote-panel {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 24px 48px;
}
.quote-panel button.btn {
  width: 100%; min-height: 52px; margin-top: 6px; margin-bottom: 12px;
}
.quote-ok {
  background: var(--bg-card); border: 1px solid var(--olive);
  border-radius: var(--radius); padding: 40px 28px 52px;
}
.quote-ok h2 { color: var(--olive-bright); margin-bottom: 10px; }
.quote-section { padding-bottom: 96px; }

/* Before / after gallery */
.ba-list { display: grid; gap: 32px; }
.ba-job .illust {
  font-size: 11px; color: var(--orange); letter-spacing: .12em;
  text-transform: uppercase; font-family: var(--mono); margin: 6px 0 12px;
}
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ba-pair figure { position: relative; overflow: hidden; border-radius: 6px; background: var(--bg-card); margin: 0; }
.ba-pair img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; object-position: center; }
.ba-badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--orange); color: #fff;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; padding: 4px 8px;
}
.ba-badge.after { background: var(--olive); }
.ba-pair figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  padding: 32px 12px 10px; font-size: 13px;
}

.svc-row { display: grid; grid-template-columns: 160px 1fr; min-height: 160px; }
.svc-row > img { height: 100%; object-fit: cover; }
.svc-stack { display: grid; gap: 16px; }

@media (max-width: 900px) {
  :root { --nav-h: 56px; }
  .grid-3, .grid-4, .steps, .proof-strip, .gallery, .split, .foot, .form-row { grid-template-columns: 1fr; }
  .nav { height: var(--nav-h); min-height: 0; }
  .nav .wrap {
    flex-wrap: nowrap; gap: 10px; padding: 0;
    align-items: center;
  }
  .wordmark-text { display: none; } /* logo only — stops the fixed bar from ballooning */
  .nav-links {
    display: flex; flex: 1; min-width: 0; order: 0;
    gap: 12px; padding: 0;
    flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; font-size: 12px; flex-shrink: 0; }
  .nav-cta-phone { flex-shrink: 0; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
  .hero { min-height: 0; }
  .hero-inner { padding: 28px 0 28px; }
  .city-list { columns: 1; }
  .job-strip { grid-template-columns: 1fr 1fr; }
  .quote-panel { padding: 22px 16px 44px; }
}

@media (max-width: 640px) {
  :root { --banner-h: 0px; --nav-h: 52px; }
  .svc-row { grid-template-columns: 1fr; }
  .svc-row > img { height: 140px; }
  .sample-banner {
    height: var(--banner-h); min-height: var(--banner-h); font-size: 10px;
    gap: 6px; flex-wrap: nowrap; padding: 0 10px;
    overflow: hidden;
  }
  .sample-banner-tools, .feed-toggle { display: none !important; } /* reclaim screen; feed still in rail/sheet */
  .job-strip, .ba-pair { grid-template-columns: 1fr; }
  .job-strip img { height: 180px; }
  /* ba-pair keeps 16:9 */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .mark-logo { width: 32px; height: 32px; max-height: 32px; }
  .nav-cta-phone {
    font-size: 10px; padding: 8px 10px;
    max-width: none;
  }
  .nav-cta-phone .cta-full { display: none; }
  .nav-cta-phone .cta-short { display: inline; }
  .hero-brand-mark { display: none; } /* logo already in nav; hero stays photo + copy */
}
.nav-cta-phone .cta-short { display: none; }



/* ===== Facebook Page Plugin rail / mobile placements ===== */
.layout-with-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
}
.layout-main { min-width: 0; }
.layout-main > .wrap,
.layout-main .section > .wrap,
.layout-main .quote-section > .wrap {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.fb-rail {
  width: 340px;
  max-width: 100%;
  padding: 28px 0 48px;
  position: sticky;
  top: calc(var(--banner-h) + var(--nav-h) + 12px);
  max-height: calc(100vh - var(--banner-h) - var(--nav-h) - 24px);
  overflow: auto;
}

.fb-after-hero {
  display: none;
  width: min(var(--max), calc(100% - 40px));
  margin: 18px auto 0;
}
.fb-after-hero .fb-page-mock { max-width: 500px; }

.fb-page-mock {
  position: relative;
  font-family: Helvetica, Arial, sans-serif;
}
.fb-sample-flag {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: var(--orange); color: #fff;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  font-weight: 700; padding: 3px 8px;
}
.fb-chrome {
  background: #fff;
  color: #1c1e21;
  border: 1px solid #dadde1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.fb-cover {
  height: 88px;
  background-size: cover;
  background-position: center;
  filter: saturate(.85);
}
.fb-page-hd {
  display: flex; gap: 10px; align-items: center;
  padding: 0 12px;
  margin-top: -22px;
  position: relative;
}
.fb-avatar, .fb-avatar .fb-mark, .fb-mark {
  width: 48px; height: 48px; display: block; flex-shrink: 0;
}
.fb-avatar {
  border: 2px solid #fff; border-radius: 8px; overflow: hidden;
  background: #204ebc; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.fb-page-name {
  font-weight: 700; font-size: 15px; line-height: 1.2; color: #050505;
  font-family: Helvetica, Arial, sans-serif;
}
.fb-page-meta { font-size: 12px; color: #65676b; margin-top: 2px; }
.fb-btns { display: flex; gap: 8px; padding: 10px 12px 8px; }
.fb-btns button {
  flex: 1; border: 0; border-radius: 6px; padding: 7px 8px;
  font-weight: 600; font-size: 13px; cursor: not-allowed; opacity: .85;
  font-family: Helvetica, Arial, sans-serif;
}
.fb-like { background: #1877f2; color: #fff; }
.fb-follow { background: #e4e6eb; color: #050505; }
.fb-tabs {
  display: flex; border-top: 1px solid #dadde1; border-bottom: 1px solid #dadde1;
  padding: 0 8px;
}
.fb-tabs span {
  font-size: 13px; font-weight: 600; color: #65676b;
  padding: 10px 12px; border-bottom: 3px solid transparent;
}
.fb-tabs span.on { color: #1877f2; border-bottom-color: #1877f2; }
.fb-timeline { max-height: 340px; overflow: auto; background: #fff; }
.fb-post { padding: 12px; border-bottom: 1px solid #e4e6eb; }
.fb-post-hd {
  display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
}
.fb-post-hd .fb-mark { width: 36px; height: 36px; border-radius: 8px; }
.fb-post-hd strong { display: block; font-size: 13px; color: #050505; }
.fb-post-hd span { font-size: 11px; color: #65676b; }
.fb-post p { font-size: 13px; line-height: 1.45; color: #050505; margin-bottom: 8px; }
.fb-post-img img { width: 100%; height: 140px; object-fit: cover; border-radius: 4px; }
.fb-post-actions {
  display: flex; justify-content: space-around;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid #e4e6eb;
  font-size: 12px; font-weight: 600; color: #65676b;
}
.fb-chrome-caption {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  color: var(--ink-muted); margin-top: 8px; text-transform: uppercase;
}

.fb-chip {
  display: none;
  position: fixed;
  z-index: 980;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--olive);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  box-shadow: var(--shadow);
  cursor: pointer;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.fb-chip:hover { background: var(--olive-bright); }
.fb-chip-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
}

.fb-sheet {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: flex-end;
}
.fb-sheet[hidden] { display: none !important; }
.fb-sheet-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.55);
}
.fb-sheet-panel {
  position: relative;
  width: 100%;
  max-height: min(88vh, 720px);
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  overflow: auto;
  z-index: 1;
}
.fb-sheet-hd {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 10px;
}
.fb-sheet-hd h2 {
  font-size: 22px; letter-spacing: .06em;
}
.fb-sheet-close {
  background: var(--bg-card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 8px 12px; font-weight: 700; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; font-family: var(--font);
}
.fb-sheet-close:hover { border-color: var(--orange); color: var(--orange); }
.fb-sheet-body .fb-page-mock { max-width: 500px; margin: 0 auto; }
body.fb-sheet-open { overflow: hidden; }

@media (min-width: 961px) {
  .fb-after-hero, .fb-chip, .fb-sheet { display: none !important; }
}

@media (max-width: 960px) {
  :root { --banner-h: 0px; }
  .layout-with-rail {
    grid-template-columns: minmax(0, 1fr);
    width: min(var(--max), calc(100% - 40px));
  }
  .fb-rail { display: none; }
  body[data-mobile-feed="hero"] .fb-after-hero { display: block; }
  body[data-mobile-feed="sheet"] .fb-chip { display: inline-flex; }
  body[data-mobile-feed="sheet"] { padding-bottom: 72px; }
  body.fb-sheet-open .fb-chip { display: none; }
  .sticky-call { display: none; }
}
@media (max-width: 640px) {
  :root { --banner-h: 0px; }
}

/* ===== Sample job-site partners (wordmarks, no brand logos) ===== */
.partner-strip-wrap {
  padding: 48px 0 40px;
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
}
.partner-strip-head {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto 22px;
  display: flex; justify-content: space-between; align-items: end;
  gap: 20px; flex-wrap: wrap;
}
.partner-strip-head p { color: var(--ink-muted); max-width: 52ch; font-size: 14.5px; }
.partner-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.partner-grid-svc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 36px;
}
.partner-tile {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 18px 16px 16px;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.partner-strip .partner-tile {
  border: 0;
  border-radius: 0;
  min-height: 156px;
  background: var(--bg);
}
.partner-tile.olive { box-shadow: inset 0 3px 0 var(--brand); }
.partner-tile.orange { box-shadow: inset 0 3px 0 var(--brand-bright); }
.partner-tile.char { box-shadow: inset 0 3px 0 #5c5a52; }
.partner-tag {
  display: inline-block;
  width: fit-content;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--orange);
  padding: 3px 7px;
  font-weight: 700;
}
.partner-wordmark {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--ink);
}
.partner-tile p.desc { font-size: 13px; color: var(--ink-muted); margin-top: auto; }
.partner-group { margin-bottom: 40px; }
.partner-group h3 { margin: 8px 0 14px; }

.why-matters {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 22px;
  align-items: center;
  margin-top: 36px;
  padding: 16px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.why-matters img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 6px;
}
.harvest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
.harvest-grid figure {
  margin: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.harvest-grid img { width: 100%; height: 280px; object-fit: cover; }
.harvest-grid figcaption {
  padding: 12px 14px 16px;
  font-size: 13px;
  color: var(--ink-muted);
}
.harvest-flag {
  position: absolute; top: 10px; left: 10px;
  background: var(--orange); color: #fff;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; padding: 4px 8px;
}

@media (max-width: 900px) {
  .partner-strip, .partner-grid, .partner-grid-svc { grid-template-columns: 1fr 1fr; }
  .why-matters, .harvest-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .partner-strip, .partner-grid, .partner-grid-svc { grid-template-columns: 1fr; }
}

/* Home conversion blocks (Brushworks-style architecture, original AIX copy) */
.pain-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.pain-col {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.pain-col h3 { margin: 8px 0 14px; }
.pain-col.out { box-shadow: inset 3px 0 0 var(--olive); }
.pain-col.ask { box-shadow: inset 3px 0 0 var(--orange); }
.stars-ph {
  color: var(--orange);
  letter-spacing: .12em;
  font-size: 18px;
}
.proof-lib {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: center;
}
.yt-ph {
  background: #0b0b0b;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 28px 20px;
  position: relative;
  overflow: hidden;
}
.yt-ph::before {
  content: "";
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .28;
  filter: saturate(.6);
}
.yt-ph > * { position: relative; z-index: 1; }
.yt-play {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--orange);
  display: grid; place-items: center;
  color: #fff; font-size: 22px;
  border: 0;
}
.yt-ph .partner-tag { margin: 0 auto; }
.home-faq .faq { margin-top: 8px; }

@media (max-width: 900px) {
  .pain-grid, .proof-lib { grid-template-columns: 1fr; }
}

/* ===== Direction A v2 — problem lists, differentiation, video strips,
   planning calculators, grouped gallery, journal, home problems band ===== */

/* Problem lists (per-service "sound familiar?") */
.problem-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 28px;
  margin-top: 18px;
}
.problem-list li {
  padding: 12px 0 12px 26px;
  position: relative;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.problem-list li::before {
  content: "";
  position: absolute; left: 2px; top: 18px;
  width: 10px; height: 10px;
  border-radius: 1px;
  background: var(--danger);
  transform: rotate(45deg);
}

/* "More than X" differentiation box */
.more-than-box {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: inset 3px 0 0 var(--orange);
}
.more-than-box h2 { margin: 6px 0 14px; }
.more-than-box > p.muted { max-width: 74ch; }
.honesty-note {
  margin-top: 22px;
  padding: 16px 18px;
  border-left: 3px solid var(--olive);
  background: var(--bg-elev);
  border-radius: 0 6px 6px 0;
}
.honesty-note p.tiny { margin-bottom: 6px; }
.honesty-note p:last-child { color: var(--ink-muted); font-size: 14px; max-width: 70ch; }

/* Per-service "Watch this work" video strip + gallery video grid */
.video-strip, .video-grid {
  display: grid;
  gap: 16px;
  margin-top: 10px;
}
.video-strip { grid-template-columns: repeat(2, 1fr); }
.video-grid { grid-template-columns: repeat(3, 1fr); }
.video-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--ink);
}
.video-card:hover { border-color: var(--olive-bright); color: var(--ink); }
.video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}
.video-thumb::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.55));
}
.video-thumb .partner-tag {
  position: absolute; top: 10px; left: 10px; z-index: 1;
}
.video-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--orange); color: #fff;
  display: grid; place-items: center;
  font-size: 15px; z-index: 1;
}
.video-cap { padding: 12px 14px 16px; font-size: 13.5px; color: var(--ink-muted); }
.video-cap strong { display: block; color: var(--ink); font-size: 14.5px; margin-bottom: 2px; font-weight: 700; }

/* Planning calculators (project-tools.html) */
.calc-list { display: grid; gap: 24px; margin-top: 12px; }
.calc-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.calc-card h3 { font-size: 22px; font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; }
.calc-card > p.muted { margin: 8px 0 18px; max-width: 68ch; }
.calc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.calc-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.calc-grid label { display: block; margin-bottom: 6px; }
.calc-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.calc-result {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--bg-elev);
  border-left: 3px solid var(--olive);
  border-radius: 0 6px 6px 0;
}
.calc-result .big { font-family: var(--display); font-size: 26px; color: var(--orange); display: block; margin-bottom: 4px; }
.calc-result p { color: var(--ink-muted); font-size: 13.5px; margin-top: 4px; }
.calc-help {
  margin-top: 14px; padding: 12px 14px;
  border-left: 3px solid var(--line);
  color: var(--ink-muted); font-size: 13px;
}

/* Grouped gallery */
.gallery-jump {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 16px; margin: 8px 0 4px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
}
.gallery-jump a {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  font-family: var(--mono); color: var(--ink-muted);
  border: 1px solid var(--line); padding: 7px 12px; border-radius: 20px;
}
.gallery-jump a:hover { color: var(--orange); border-color: var(--orange); }
.gallery-group-block { margin-top: 52px; scroll-margin-top: calc(var(--banner-h) + var(--nav-h) + 16px); }
.gallery-group-block:first-child { margin-top: 28px; }
.gallery-group-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
  border-bottom: 1px solid var(--line); padding-bottom: 12px;
}
.gallery-group-head h2 { font-size: clamp(22px, 3vw, 30px); }

/* Home proof teaser inside proof-lib */
.proof-lib .job-strip figure {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.proof-lib .job-strip img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}
.proof-lib .job-strip figcaption {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--ink-muted);
}

/* Home "problems we fix" band */
.problems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.problem-tile {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 18px; box-shadow: inset 3px 0 0 var(--danger);
}
.problem-tile h3 { font-size: 15px; margin-bottom: 8px; }
.problem-tile p { font-size: 13.5px; color: var(--ink-muted); }

/* Journal (field notes) */
.journal-intro { max-width: 74ch; }
.journal-list { display: grid; gap: 26px; margin-top: 10px; }
.journal-post {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px;
}
.journal-meta {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--olive-bright); margin-bottom: 10px;
}
.journal-meta .jflag {
  background: var(--orange); color: #fff; padding: 2px 8px; font-weight: 700; letter-spacing: .12em;
}
.journal-post h2 { margin-bottom: 4px; }
.journal-post p { color: var(--ink-muted); margin-top: 14px; max-width: 76ch; font-size: 15px; }

@media (max-width: 900px) {
  .problem-list { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr 1fr; }
  .calc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .video-strip, .video-grid, .calc-grid, .calc-grid.cols-2, .problems-grid { grid-template-columns: 1fr; }
  .more-than-box, .journal-post, .calc-card { padding: 22px 18px; }
  .gallery-group-head { flex-direction: column; align-items: flex-start; }
}


/* Real job video embeds (forestry mulching etc.) */
.job-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.job-video {
  margin: 0;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.job-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  background: #000;
  max-height: none;
}
.job-video figcaption {
  padding: 12px 14px 14px;
  font-size: 14px;
  color: var(--ink-muted);
}
.job-video figcaption strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
@media (max-width: 700px) {
  .job-video-grid { grid-template-columns: 1fr; }
}
/* Netflix-style uniform rows on gallery */
@media (min-width: 1000px) {
  .gallery-job-videos.job-video-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}




/* Tap-only job video player — no native chrome */
.job-video-player {
  position: relative;
  display: block;
  width: 100%;
  background: #000;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.job-video-player video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  background: #000;
  pointer-events: auto;
}
.job-video-playbtn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 68px;
  height: 68px;
  border: 0;
  border-radius: 999px;
  background: rgba(11, 11, 11, 0.55);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.35);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: opacity .2s ease, transform .15s ease, background .15s ease;
  z-index: 2;
}
.job-video-playbtn:hover { background: rgba(11, 11, 11, 0.72); transform: scale(1.04); }
.job-video-playbtn-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}
.job-video-player.is-playing .job-video-playbtn {
  opacity: 0;
  pointer-events: none;
}
.job-video-player.is-playing:hover .job-video-playbtn,
.job-video-player.is-playing:focus-within .job-video-playbtn {
  /* stay hidden while playing — tap video itself to pause */
  opacity: 0;
}

/* Landing service features with embedded job video */
.svc-feature {
  margin: 0 0 48px;
  padding: 28px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.svc-feature-copy { margin-bottom: 20px; max-width: 62ch; }
.svc-feature-copy h3 {
  font-family: var(--display);
  font-size: clamp(26px, 3.5vw, 36px);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 8px 0 12px;
}
.svc-feature-videos { margin-top: 8px; }
.svc-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .svc-mini-grid { grid-template-columns: 1fr 1fr; }
  .svc-feature { padding: 18px; }
}
@media (max-width: 640px) {
  .svc-mini-grid { grid-template-columns: 1fr; }
}


/* Home services strip — brand blue links to service pages */
.svc-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
  padding: 14px 0 16px;
}
.svc-strip-label {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.svc-strip-links {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}
.svc-strip-links a {
  color: var(--brand-bright) !important;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(15px, 1.8vw, 20px);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.svc-strip-links a:hover {
  color: #fff !important;
  border-bottom-color: var(--brand-bright);
}
@media (max-width: 640px) {
  .svc-strip { padding: 12px 0 14px; }
  .svc-strip-links { gap: 6px 14px; }
  .svc-strip-links a { font-size: 14px; }
}

.gallery-job-videos { margin-top: 18px; }

/* Google Business Profile reviews (SAMPLE until live Place ID) */
.gmb-reviews { background: var(--bg); border-bottom: 1px solid var(--line); }
.gmb-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 20px;
  align-items: start;
}
.gmb-profile-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.gmb-profile-top { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.gmb-g-badge {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: #4285f4; font-weight: 800; font-size: 22px;
  display: grid; place-items: center; font-family: var(--display);
  flex-shrink: 0;
}
.gmb-biz-name { margin: 0; font-weight: 700; font-size: 18px; }
.gmb-biz-meta { margin: 2px 0 0; font-size: 12px; color: var(--ink-muted); }
.gmb-rating-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.gmb-score { font-family: var(--display); font-size: 28px; color: var(--ink); line-height: 1; }
.gmb-stars, .gmb-stars-sm { color: #fbbc04; letter-spacing: 1px; font-size: 14px; }
.gmb-stars-sm { font-size: 12px; margin-left: auto; }
.gmb-count { font-size: 12px; color: var(--ink-muted); }
.gmb-note { font-size: 13px; color: var(--ink-muted); margin: 0 0 12px; line-height: 1.45; }
.gmb-embed-slot {
  border: 1px dashed var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #0b0b0b;
  min-height: 180px;
  margin-bottom: 12px;
}
.gmb-embed-placeholder {
  min-height: 180px; padding: 20px; display: grid; align-content: center; gap: 4px;
  text-align: center; color: var(--ink-muted); font-size: 13px;
}
.gmb-embed-placeholder strong { color: var(--ink); font-size: 14px; }
.gmb-embed-hint { color: var(--brand-bright); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-top: 8px !important; }
.gmb-maps-iframe { width: 100%; height: 220px; border: 0; display: block; }
.gmb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gmb-actions .btn { padding: 10px 12px; font-size: 11px; }
.gmb-review-list { display: grid; gap: 12px; }
.gmb-review {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.gmb-review header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.gmb-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand); color: #fff; font-weight: 700;
  display: grid; place-items: center; font-size: 14px; flex-shrink: 0;
}
.gmb-review header strong { display: block; font-size: 14px; }
.gmb-when { display: block; font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; }
.gmb-review p { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 800px) {
  .gmb-layout { grid-template-columns: 1fr; }
}

/* Ultra-slim home hero — wordmark only, centered desktop + mobile */
.hero.hero-slim {
  min-height: 0;
  align-items: center;
  background: var(--bg);
  text-align: center;
}
.hero.hero-slim .hero-media { display: none !important; }
.hero.hero-slim .hero-inner {
  padding: 12px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.hero.hero-slim .hero-wordmark {
  display: block;
  width: min(360px, 100%);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  image-rendering: auto;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  margin-left: auto;
  margin-right: auto;
}
.hero.hero-slim .hero-slim-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  width: 100%;
}
.hero.hero-slim .hero-actions {
  gap: 8px;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}
.hero.hero-slim .hero-actions .btn {
  padding: 8px 12px;
  font-size: 11px;
}
@media (max-width: 640px) {
  .hero.hero-slim .hero-inner {
    padding: 8px 0;
    align-items: center;
  }
  .hero.hero-slim .hero-wordmark { width: min(100%, 240px); margin-left: auto; margin-right: auto; }
  .hero.hero-slim .hero-slim-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .hero.hero-slim .hero-actions {
    width: 100%;
    justify-content: center;
  }
}

.job-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.job-photo {
  margin: 0;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.job-photo img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #111;
}
.job-photo figcaption {
  padding: 10px 12px 12px;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.4;
}
.job-photo figcaption strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: var(--display);
}
.gallery-job-photos { margin-top: 18px; }
@media (min-width: 1000px) {
  .gallery-job-photos.job-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .job-photo-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .job-photo-grid { grid-template-columns: 1fr; }
  /* job-photo keeps 16:9 */
}


.seo-prose { max-width: 68ch; color: var(--ink-muted); font-size: 15px; line-height: 1.55; }
.seo-prose p { margin: 0 0 14px; }
.price-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.price-tier {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}
.price-tier strong {
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 18px;
  color: var(--brand-bright);
  margin-bottom: 6px;
}
.price-tier span { display: block; color: var(--ink); font-size: 14px; margin-bottom: 8px; }
.price-tier em { display: block; font-style: normal; color: var(--ink-muted); font-size: 13px; }
@media (max-width: 800px) {
  .price-tiers { grid-template-columns: 1fr; }
}

/* Service area ZIP check + lead */
.zip-check-panel {
  background: var(--panel, #141414);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px 24px;
  max-width: 640px;
}
.zip-form label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px; }
.zip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.zip-row input {
  flex: 1 1 160px;
  min-width: 140px;
  background: #0b0b0b;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 12px 14px;
  border-radius: 4px;
  font-size: 18px;
  font-family: var(--font-mono, var(--font));
  letter-spacing: .08em;
}
.zip-result {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #101010;
}
.zip-result.zip-yes { border-color: #204ebc; background: rgba(32,78,188,.12); }
.zip-result.zip-edge { border-color: #2f63d6; background: rgba(47,99,214,.1); }
.zip-result.zip-no { border-color: #c45c3a; background: rgba(196,92,58,.1); }
.zip-result.zip-bad { border-color: #666; }
.zip-status { margin: 0 0 6px; font-size: 16px; }
.lead-panel { max-width: 720px; }

/* Interactive coverage map */
.page-hero-slim { padding-bottom: 28px; }
.page-hero-slim .lede { font-size: 15px; }
.coverage-map-shell {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #101010;
}
.coverage-map-toolbar {
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.coverage-zip-form { margin: 0; }
.coverage-hint { margin: 10px 0 0; font-size: 13px; }
.coverage-map {
  width: 100%;
  height: 480px;
  min-height: 480px;
  background: #1a1a1a;
  position: relative;
  z-index: 0;
}
.coverage-map-shell .zip-result { margin-top: 12px; }
.seo-coverage-details {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 18px;
  background: #101010;
}
.seo-coverage-details summary {
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--ink);
}
.seo-city-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: 24px;
  font-size: 13px;
  color: var(--ink-muted);
}
.seo-city-list li {
  break-inside: avoid;
  padding: 3px 0;
}
.seo-city-list .seo-zips {
  font-size: 11px;
  opacity: .65;
  font-family: var(--font-mono, monospace);
}
@media (max-width: 900px) {
  .seo-city-list { columns: 2; }
}
@media (max-width: 560px) {
  .seo-city-list { columns: 1; }
  .coverage-map { height: 360px; min-height: 360px; }
}

/* Leaflet: sitewide img{max-width:100%} collapses map tiles */
.leaflet-container {
  width: 100%;
  height: 100%;
  background: #1a1a1a;
  font: inherit;
}
.leaflet-container img,
.leaflet-container svg {
  max-width: none !important;
}
.coverage-map {
  width: 100%;
  height: 480px;
  min-height: 480px;
  background: #1a1a1a;
  position: relative;
  z-index: 0;
}
@media (max-width: 560px) {
  .coverage-map { height: 360px; min-height: 360px; }
}

/* Solo estimate form (no FB rail, mobile-first) */
.quote-wrap {
  width: min(640px, calc(100% - 40px));
  margin: 0;
  margin-right: auto;
}
.quote-panel-solo {
  width: 100%;
  max-width: none;
  margin: 0;
}
.btn-block { width: 100%; }
.photo-upload { margin-top: 4px; }
.photo-upload input[type="file"] {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 4px;
  background: #0b0b0b;
  color: var(--ink-muted);
  font-family: var(--font);
  font-size: 14px;
}
.photo-upload-hint { margin-top: 8px; font-size: 13px; }
.photo-preview {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: 13px;
  color: var(--ink-muted);
}
.photo-preview li {
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 640px) {
  .quote-wrap { width: calc(100% - 24px); }
  .quote-panel-solo { padding: 18px 14px 28px; }
  .page-hero-slim h1 { font-size: clamp(28px, 9vw, 40px); }
}

/* Estimate page — left rail (call + form), mobile-first */
.estimate-rail-section {
  padding: 28px 0 96px;
}
.estimate-rail {
  width: min(560px, 100%);
  margin: 0;
  max-width: 560px;
}
.estimate-rail-title {
  font-size: clamp(32px, 6vw, 48px);
  margin: 0 0 14px;
  max-width: none;
  line-height: 1.05;
}
.estimate-rail-call {
  margin: 0 0 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}
.estimate-rail .quote-panel-solo {
  margin: 0;
  max-width: none;
  width: 100%;
}
.estimate-rail .crumbs { margin-bottom: 12px; }
@media (max-width: 640px) {
  .estimate-rail-section { padding: 18px 0 72px; }
  .estimate-rail { width: 100%; max-width: none; }
  .estimate-rail-call .btn,
  .estimate-rail .btn-block { width: 100%; }
  .estimate-rail .form-row { grid-template-columns: 1fr; }
}

.photo-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
  list-style: none;
  padding: 0;
}
.photo-preview[hidden] { display: none !important; }
.photo-preview figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: #0b0b0b;
}
.photo-preview img {
  width: 100%;
  height: 88px;
  object-fit: cover;
  display: block;
  max-width: none !important;
}
.photo-preview figcaption {
  font-size: 10px;
  padding: 4px 6px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .photo-preview { grid-template-columns: repeat(2, 1fr); }
  .photo-preview img { height: 110px; }
}

/* Facebook — promo + live timeline (posts visible by default) */
.fb-promo {
  background: #121212;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 14px 14px;
  color: var(--ink);
}
.fb-promo-top {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.fb-promo-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex: 0 0 auto;
  border: 1px solid var(--line);
}
.fb-promo-kicker {
  margin: 0 0 2px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
}
.fb-promo-name {
  margin: 0;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .02em;
}
.fb-promo-meta {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ink-muted);
}
.fb-promo-copy {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.45;
}
.fb-promo-btn { width: 100%; }
.fb-live-wrap {
  background: transparent;
  border-radius: 8px;
  overflow: visible;
}
.fb-visit { display: none; }
@media (max-width: 960px) {
  .fb-after-hero {
    display: block !important;
    margin: 16px auto 12px;
    padding: 0 0 8px;
  }
  body[data-mobile-feed="sheet"] .fb-after-hero { display: block !important; }
}

/* Who we are — black block, color circle logo (no square), white type */
.about-section {
  padding-top: 36px;
  padding-bottom: 12px;
}
.about-card {
  background: #0b0b0b !important;
  color: #f2f2f2 !important;
  border-radius: 12px;
  padding: 36px 40px 40px;
  border: 1px solid var(--line);
  box-shadow: none;
}
.about-brand {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.about-brand-copy .tiny { color: #b0b0b0 !important; }
.about-brand-copy h2 { color: #f2f2f2 !important; }
.about-lede {
  margin: 0 0 14px;
  color: #c8c8c8 !important;
  font-size: 16px;
  line-height: 1.5;
}
.about-brand-copy .seo-prose,
.about-brand-copy .seo-prose p {
  max-width: none;
  color: #c8c8c8 !important;
}
.about-brand-mark {
  margin: 0;
  width: 100%;
  max-width: 300px;
  justify-self: start;
  line-height: 0;
  background: transparent !important;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.about-brand-mark img {
  width: 100%;
  height: auto;
  display: block;
  background: transparent !important;
  border-radius: 0;
}
.about-pillars .problem-tile {
  background: #1a1a1a !important;
  border-color: #2e2e2e !important;
  color: #f2f2f2 !important;
}
.about-pillars .problem-tile h3 { color: #f2f2f2 !important; }
.about-pillars .problem-tile p { color: #b0b0b0 !important; }
@media (max-width: 800px) {
  .about-card { padding: 28px 20px 32px; }
  .about-brand {
    grid-template-columns: 1fr;
    gap: 24px;
    justify-items: center;
  }
  .about-brand-mark {
    justify-self: center;
    max-width: 240px;
  }
  .about-brand-copy { width: 100%; text-align: left; }
  .about-brand-copy .section-head { text-align: left; }
}


/* Gallery Netflix rows — shared tile rhythm */
.gallery-group-block .job-video-grid,
.gallery-group-block .job-photo-grid,
.gallery-group-block .ba-pair {
  gap: 16px;
}
.gallery-group-block .ba-pair figure {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
}