/* =========================================================
   Design v2 (Samara-inspired) — see DESIGN.md
   Loaded after every other stylesheet. Everything is scoped to
   html.v2, so ?old=1 on any URL shows the current design for a
   side-by-side comparison.
   ========================================================= */
html.v2 {
  --page: #f8f8f5;
  --ink: #232323;
  --ink-soft: #666666;
  --red: #a31f1a;
  --red-bright: #bc0f14;
  --off: #f8f8f5;
  --panel: #e6e6e6;
  --field: #ffffff;
  --line: rgba(0, 0, 0, 0.1);
  --sand: #f2eee6; /* beige test: review cards only */
  --r: 12px;
  --r-lg: 18px;
  --sh: 0 0.5px 2px rgba(0, 0, 0, 0.12);
  --sh-hover: 0 2px 10px rgba(0, 0, 0, 0.08);
}
html.v2 body { font-size: 17px; line-height: 1.5; }
html.v2 .wrap { max-width: calc(1280px + 2 * var(--pad-x)); }

/* ---------- Type: brand fonts, sentence case, light and tight ---------- */
html.v2 .h1 { font: 400 60px/1 var(--f-dm); letter-spacing: -0.035em; text-transform: none; }
html.v2 .h2 { font: 500 44px/1.05 var(--f-dm); letter-spacing: -0.03em; text-transform: none; }
html.v2 .hx-hero .h1 { font-size: 84px; line-height: 0.95; letter-spacing: -0.04em; }
html.v2 .eyebrow,
html.v2 .hx-label, html.v2 .hx-stepno, html.v2 .hx-hub-h, html.v2 .hx-per {
  font: 600 15px/1.2 var(--f-dg); letter-spacing: 0.06em; text-transform: uppercase; color: var(--red);
}
html.v2 .hx-per { color: rgba(248, 248, 245, 0.7); }
html.v2 .body { font-size: 17px; line-height: 1.5; }
html.v2 .hx-lead { font: 400 21px/1.45 var(--f-inter) !important; color: var(--ink-soft); margin-top: 20px !important; }
html.v2 .hx-h3, html.v2 .hx-q { font-weight: 500; letter-spacing: -0.02em; }
html.v2 .hx-h3 { font-size: 30px; line-height: 1.15; }

/* card and list titles: Satoshi, sentence case */
html.v2 .svc-list h3, html.v2 .proj-bottom h3, html.v2 .blog-card h3, html.v2 .num-card-head h3,
html.v2 .icon-card h3, html.v2 .faq-q h3, html.v2 .pj-img-title h3, html.v2 .so-card h3,
html.v2 .so-extra-card h3, html.v2 .hx-card h3, html.v2 .mv-copy h3 {
  font-family: var(--f-sat); font-weight: 500; letter-spacing: -0.01em; text-transform: none;
}
/* small DM Sans headings: sentence case, tight */
html.v2 .hx-proof b, html.v2 .hx-people b, html.v2 .hx-pay li b, html.v2 .md-name,
html.v2 .vd-card figcaption b, html.v2 .step-t, html.v2 .pd-specs dt, html.v2 .footer-cols h4,
html.v2 .post-body h2, html.v2 .hx-work-list b, html.v2 .hx-finish b {
  text-transform: none; letter-spacing: -0.02em;
}
html.v2 .md-spec, html.v2 .md-go, html.v2 .hx-hub-top span, html.v2 .hx-stepimgs figcaption {
  font-family: var(--f-sat); font-weight: 500; letter-spacing: -0.01em; text-transform: none;
}
html.v2 .hx-n { font-weight: 400; letter-spacing: -0.03em; }
html.v2 .hx-big { font: 400 64px/1 var(--f-dm); letter-spacing: -0.035em; }

/* ---------- Nav ---------- */
html.v2 .nav-link, html.v2 .drop-menu a, html.v2 .mobile-menu a {
  font-family: var(--f-sat); font-weight: 500; letter-spacing: -0.01em; text-transform: none;
}
html.v2 .nav-link { font-size: 16px; }
html.v2 .drop-menu { border-radius: var(--r); box-shadow: var(--sh-hover), 0 0 0 1px var(--line); }
html.v2 .mobile-menu a { font-size: 22px; }

/* ---------- Buttons ---------- */
html.v2 .btn {
  height: 46px; padding: 0 22px; border-radius: var(--r);
  font: 500 15px/1.2 var(--f-sat); letter-spacing: -0.01em; text-transform: none;
}
html.v2 .btn svg { width: 16px; height: 16px; }
html.v2 .btn-outline { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
html.v2 .btn-outline:hover { box-shadow: inset 0 0 0 1px var(--ink); }
html.v2 .btn-text { height: auto; border-radius: 0; }
html.v2 .send, html.v2 .modal-send {
  height: 48px; border-radius: var(--r); background: var(--red);
  font: 500 15px/1.2 var(--f-sat); letter-spacing: -0.01em; text-transform: none;
}
html.v2 .send:hover, html.v2 .modal-send:hover { background: var(--red-bright); }

/* segmented tabs become a pill switch */
html.v2 .hx-tabs { padding: 4px; gap: 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.05); box-shadow: none; }
html.v2 .hx-tabs button {
  height: 40px; border-radius: 999px; font: 500 15px/1 var(--f-sat); letter-spacing: -0.01em; text-transform: none;
}

/* ---------- Tags on photos become pills ---------- */
html.v2 .tag, html.v2 .pj-cat {
  padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 500 13px/18px var(--f-sat); letter-spacing: -0.005em; text-transform: none;
}
html.v2 .blog-meta, html.v2 .pj-label, html.v2 .sign .role { text-transform: none; font-size: 13px; }

/* ---------- Cards, images: soft 12px corners, barely-there shadows ---------- */
html.v2 .card-form, html.v2 .hx-quote, html.v2 .hx-card, html.v2 .hx-hub, html.v2 .md-card,
html.v2 .hx-finish figure, html.v2 .hx-tile, html.v2 .modal-card {
  border-radius: var(--r); overflow: hidden;
}
html.v2 .card-form, html.v2 .hx-card, html.v2 .hx-hub {
  background: #fff; box-shadow: var(--sh), 0 0 0 1px var(--line);
}
html.v2 .hx-solution { border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line); }
html.v2 .hx-price-main { border-radius: var(--r-lg); background: #000; }
html.v2 .md-card { box-shadow: 0 0 0 1px var(--line); }
html.v2 .md-card:hover { box-shadow: var(--sh-hover), 0 0 0 1px rgba(0, 0, 0, 0.18); }
html.v2 .hx-finish figure { box-shadow: 0 0 0 1px var(--line); }
html.v2 .hx-tile { box-shadow: 0 0 0 1px var(--line); }
@media (hover: hover) {
  html.v2 .hx-tile:hover { box-shadow: var(--sh-hover), 0 0 0 1px rgba(0, 0, 0, 0.18); }
  html.v2 .hx-tile:hover span { background: transparent; color: var(--red); }
}
/* beige test: review cards on warm sand, no shadow */
html.v2 .hx-quote { background: var(--sand); box-shadow: none; }

html.v2 .proj-card, html.v2 .blog-img, html.v2 .vd-frame, html.v2 .video-box, html.v2 .md-img { border-radius: var(--r); overflow: hidden; }
html.v2 .hx-hero-img { border-radius: var(--r-lg); }
html.v2 .hx-panel img, html.v2 .hx-solution-img, html.v2 .hx-stepimgs img, html.v2 .hx-final-img,
html.v2 .about-img-sm, html.v2 .about-img-lg, html.v2 .repeat-img, html.v2 .services-art { border-radius: var(--r); }
html.v2 .proj-card { height: 420px; }
html.v2 .proj-bottom h3 { font-size: 22px; }

/* ---------- Forms ---------- */
html.v2 .field, html.v2 .float-field, html.v2 .hx-sel select {
  background: #fff; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line);
}
html.v2 .field:focus-within, html.v2 .float-field:focus-within, html.v2 .hx-sel select:focus { box-shadow: inset 0 0 0 1px var(--ink); outline: none; }
html.v2 .hx-choice span, html.v2 .hx-choice-btn {
  border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--f-sat); font-weight: 500; letter-spacing: -0.01em;
}
@media (hover: hover) {
  html.v2 .hx-choice:hover span, html.v2 .hx-choice-btn:hover { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
}
html.v2 .hx-choice input:checked + span { background: var(--ink); color: #fafafa; box-shadow: none; }
html.v2 .form-done { border-radius: var(--r); }
html.v2 .hx-offer { border-radius: var(--r); }

/* ---------- Spacing: sections separated by space, not rules ---------- */
html.v2 .divider { display: none; }
html.v2 .hx-sec, html.v2 .projects { padding-top: 60px; padding-bottom: 60px; }
html.v2 .hx-hero { padding-top: 48px; padding-bottom: 72px; }
html.v2 .hx-proof > div { border-left-color: var(--line); }
html.v2 .hx-pay li { border-top: 1px solid var(--ink); }
html.v2 .proj-grid, html.v2 .hx-quotes, html.v2 .hx-cards3, html.v2 .md-row, html.v2 .vd-row { gap: 24px; }

/* ---------- Footer: black bookend ---------- */
html.v2 .footer-main, html.v2 .footer-bar { background: #000; color: var(--off); }
html.v2 .footer-bar { border-top: 1px solid rgba(255, 255, 255, 0.1); }
html.v2 .footer-cols h4 { font-weight: 500; color: #fff; }
html.v2 .footer-cols ul { color: rgba(248, 248, 245, 0.75); }
html.v2 .footer-cols a:hover { color: #fff; }
html.v2 .reach svg { fill: rgba(248, 248, 245, 0.75); }
html.v2 .socials svg { fill: rgba(248, 248, 245, 0.6); }
html.v2 .socials a:hover svg { fill: #fff; }

/* ---------- Tablet / phone ---------- */
@media (max-width: 1199px) {
  html.v2 .hx-hero .h1 { font-size: 64px; }
  html.v2 .h1 { font-size: 52px; }
  html.v2 .h2 { font-size: 38px; }
}
@media (max-width: 809px) {
  html.v2 .hx-hero .h1 { font-size: 48px; }
  html.v2 .h1 { font-size: 40px; }
  html.v2 .h2 { font-size: 32px; }
  html.v2 .hx-h3 { font-size: 24px; }
  html.v2 .hx-lead { font-size: 18px !important; }
  html.v2 .hx-big { font-size: 48px; }
  html.v2 .hx-sec, html.v2 .projects { padding-top: 40px; padding-bottom: 40px; }
  html.v2 .proj-card { height: 300px; }
  html.v2 .hx-tabs button { font-size: 14px; }
  html.v2 .hx-sticky .btn { height: 46px; }
}

/* =========================================================
   Inner pages (services, projects, custom homes, about,
   reviews, blog, FAQ/contact, ADU models)
   ========================================================= */
/* titles: sentence case, tight */
html.v2 .s2-card h3, html.v2 .ch-who-item h3, html.v2 .ar-value h3, html.v2 .bl-card-h, html.v2 .bl-row-h {
  font-family: var(--f-sat); font-weight: 500; letter-spacing: -0.01em; text-transform: none;
}
html.v2 .s2-compare-col h3, html.v2 .s2-svc-t, html.v2 .s2-addnow b, html.v2 .ch-big, html.v2 .ar-steps h3,
html.v2 .bl-h2, html.v2 .md-steps h3, html.v2 .pj-facts dd {
  text-transform: none; letter-spacing: -0.02em;
}
html.v2 .s2-svc-t { font-weight: 400; letter-spacing: -0.03em; }
html.v2 .ch-big { font-weight: 400; }

/* action links: Satoshi, sentence case */
html.v2 .s2-back, html.v2 .s2-svc-go, html.v2 .s2-ess a, html.v2 .ch-link, html.v2 .fc-more, html.v2 .post-body .bl-box-a {
  font-family: var(--f-sat); font-weight: 500; font-size: 16px; letter-spacing: -0.01em; text-transform: none;
}

/* filter buttons and jump links become pills */
html.v2 .pj-fbtn, html.v2 .fc-jump a {
  height: 42px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  font: 500 15px/1 var(--f-sat); letter-spacing: -0.01em; text-transform: none;
}
html.v2 .pj-fbtn.on { box-shadow: none; }
html.v2 .pj-rtag { border-radius: 999px; padding: 0 10px; font: 500 12px/1 var(--f-sat); letter-spacing: 0; text-transform: none; }

/* cards: 12px corners, light shadow + hairline */
html.v2 .s2-card, html.v2 .s2-compare-col, html.v2 .s2-notes > div, html.v2 .s2-svc, html.v2 .s2-rm, html.v2 .s2-visit,
html.v2 .s2-ess > div, html.v2 .s2-addnow, html.v2 .s2-finish figure, html.v2 .ch-who-item, html.v2 .ar-value, html.v2 .ar-facts,
html.v2 .ar-fq, html.v2 .ar-card, html.v2 .ar-ref p, html.v2 .bl-card, html.v2 .fc-way-phone, html.v2 .md-steps li, html.v2 .md-plan a {
  border-radius: var(--r); overflow: hidden;
}
html.v2 .s2-card, html.v2 .s2-svc, html.v2 .ch-who-item, html.v2 .ar-value, html.v2 .ar-facts, html.v2 .ar-fq, html.v2 .ar-card {
  box-shadow: var(--sh), 0 0 0 1px var(--line);
}
html.v2 .s2-svc:hover { box-shadow: var(--sh-hover), 0 0 0 1px rgba(0, 0, 0, 0.18); }
html.v2 .s2-compare-col.on { box-shadow: inset 0 0 0 2px var(--red); }
html.v2 .ch-who-item, html.v2 .ar-fq { border-top: 0; }
html.v2 .s2-bar-end { border-radius: var(--r); }

/* images */
html.v2 .pj-dimg img, html.v2 .pj-gi img, html.v2 .ch-hero-img, html.v2 .ar-hero-img, html.v2 .ar-team-img,
html.v2 .bl-card-img, html.v2 .s2-addnow img, html.v2 .md-plan img { border-radius: var(--r); }
html.v2 .bl-card-img { overflow: hidden; }
html.v2 .md-table { border-radius: var(--r); overflow: hidden; }

/* one content edge everywhere: nav, footer and blog line up with .wrap */
html.v2 { --edge: max(var(--pad-x), calc((100% - 1280px) / 2)); }
html.v2 .nav, html.v2 .bl-title, html.v2 .bl-list { padding-left: var(--edge); padding-right: var(--edge); }
html.v2 .bl-group { max-width: none; }
html.v2 .footer-inner, html.v2 .footer-bar-inner { max-width: none; padding-left: var(--edge); padding-right: var(--edge); }
html.v2 .ar-vquote { border-radius: var(--r); background: #000; }
html.v2 .pj-dspec { font: 500 18px/1.2 var(--f-sat); letter-spacing: -0.01em; text-transform: none; color: var(--ink-soft); }

/* ---------- Homepage hero: bigger photo ---------- */
html.v2 .page-home .hx-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; padding-right: var(--pad-x); }
html.v2 .page-home .hx-hero-img { aspect-ratio: 5 / 4; object-position: center 30%; }
@media (max-width: 1199px) { html.v2 .page-home .hx-hero { gap: 40px; } }
@media (max-width: 809px) { html.v2 .page-home .hx-hero { grid-template-columns: 1fr; gap: 28px; } }

html.v2 .howwork, html.v2 .sv-sec, html.v2 .sv-hero, html.v2 .sv-reviews, html.v2 .ptitle, html.v2 .pd-content,
html.v2 .pd-block, html.v2 .pd-gallery, html.v2 .rv-page, html.v2 .post, html.v2 .post-related {
  max-width: none; padding-left: var(--edge); padding-right: var(--edge);
}
html.v2 .post img { border-radius: var(--r); }

/* =========================================================
   Free guides (partials/packages.html)
   ========================================================= */
.v2-pk-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; padding: 56px; border-radius: var(--r-lg); background: var(--sand); }
.v2-pk-covers { display: flex; gap: 24px; margin-top: 32px; }
.v2-pk-covers figure { margin: 0; width: 200px; }
.v2-pk-covers img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08); background: #fff; }
.v2-pk-covers figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.v2-pk-covers b { font: 500 17px/1.2 var(--f-sat); letter-spacing: -0.01em; color: var(--ink); }
.v2-pk-covers span { font: 400 14px/1.4 var(--f-inter); color: var(--ink-soft); }
.v2-pk-form { padding: 32px; }
.v2-pk-form .lead-form { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
.v2-pk-pick { border: 0; padding: 4px 0 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.v2-pk-pick legend { padding: 0; margin-bottom: 8px; font: 600 14px/1 var(--f-dg); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.v2-pk-pick label { display: flex; align-items: center; gap: 10px; font: 500 16px/1.3 var(--f-sat); color: var(--ink); cursor: pointer; }
.v2-pk-pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--red); }
.v2-pk-note { font: 400 13px/1.45 var(--f-inter); color: var(--ink-soft); }

/* =========================================================
   Instagram block + marquee (partials/instagram.html)
   ========================================================= */
.v2-ig { padding: 80px 0 0; }
.v2-ig-in { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; align-items: stretch; }
.v2-ig-card { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 40px; border-radius: var(--r-lg); background: var(--sand); }
.v2-ig-h { font: 400 36px/1.08 var(--f-dm); letter-spacing: -0.03em; color: var(--ink); }
.v2-ig-card > p:not(.eyebrow) { font: 400 16px/1.5 var(--f-inter); color: var(--ink-soft); }
.v2-ig-card a:not(.btn) { color: var(--ink); font-weight: 600; }
.v2-ig-btn { align-self: flex-start; margin-top: 8px; background: #fff; }
.v2-ig-btn svg { width: 16px; height: 16px; fill: currentColor; }
.v2-ig-rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r-lg); }
.v2-ig-rail::-webkit-scrollbar { display: none; }
.v2-ig-post { position: relative; flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; border-radius: var(--r-lg); overflow: hidden; background: #111; }
.v2-ig-post > img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .5s ease; }
/* clean tile: handle at rest; caption + "Open on Instagram" slide up on hover/focus, always shown on touch */
.v2-ig-post:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.v2-ig-post:hover > img, .v2-ig-post:focus-visible > img { transform: scale(1.04); }
.v2-ig-meta { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 56px 16px 16px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72)); color: #fff; }
.v2-ig-who { display: flex; align-items: center; gap: 10px; }
.v2-ig-av { width: 28px; height: 28px; padding: 3px; border-radius: 50%; background: #fff; object-fit: contain; }
.v2-ig-who b { flex: 1; font: 500 14px/1 var(--f-sat); }
.v2-ig-who svg { width: 18px; height: 18px; fill: #fff; }
.v2-ig-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .35s ease, opacity .3s ease; }
.v2-ig-more > span { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.v2-ig-cap { margin-top: 12px; font: 400 14px/1.4 var(--f-inter); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-ig-open { font: 500 13px/1.2 var(--f-sat); text-decoration: underline; text-underline-offset: 3px; }
.v2-ig-post:hover .v2-ig-more, .v2-ig-post:focus-visible .v2-ig-more { grid-template-rows: 1fr; opacity: 1; }
@media (hover: none) { .v2-ig-more { grid-template-rows: 1fr; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .v2-ig-more, .v2-ig-post > img { transition: none; } }
.v2-ig-next { position: absolute; right: calc(var(--pad-x) - 18px); top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; box-shadow: var(--sh-hover), 0 0 0 1px var(--line); cursor: pointer; display: grid; place-items: center; }
.v2-ig-next svg { width: 18px; height: 18px; fill: var(--ink); }
.v2-marquee { overflow: hidden; margin-top: 64px; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.v2-marquee div { display: flex; align-items: center; gap: 40px; width: max-content; animation: tick 40s linear infinite; }
.v2-marquee span { font: 400 40px/1 var(--f-dm); letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.v2-marquee i { width: 12px; height: 12px; border-radius: 50%; background: var(--red); flex: none; }
@media (prefers-reduced-motion: reduce) { .v2-marquee div { animation: none; } }

@media (max-width: 1199px) {
  .v2-pk-in { grid-template-columns: 1fr; gap: 40px; padding: 40px; }
  .v2-ig-in { grid-template-columns: 1fr; }
  .v2-ig-post { flex-basis: calc((100% - 32px) / 3); }
  .v2-ig-next { top: auto; bottom: 0; transform: translateY(-50%); }
}
@media (max-width: 809px) {
  .v2-pk-in { padding: 24px 18px; border-radius: var(--r); }
  .v2-pk-covers { gap: 14px; }
  .v2-pk-covers figure { width: auto; flex: 1; }
  .v2-pk-form { padding: 22px 16px; }
  .v2-ig { padding-top: 48px; }
  .v2-ig-card { padding: 28px 22px; }
  .v2-ig-h { font-size: 28px; }
  .v2-ig-rail { margin: 0 calc(var(--pad-x) * -1); padding: 0 var(--pad-x); border-radius: 0; scroll-padding: 0 var(--pad-x); }
  .v2-ig-post { flex-basis: 72%; }
  .v2-ig-next { display: none; }
  .v2-marquee { margin-top: 40px; padding: 18px 0; }
  .v2-marquee span { font-size: 26px; }
}

/* =========================================================
   Round 3: hero video, swipe rails, path slider, menu lock,
   compare table, Instagram video lightbox
   ========================================================= */
/* hero video: the photo has the video's 16:9 shape, so nothing moves when it starts */
.v2-hero-media { position: relative; align-self: center; border-radius: var(--r-lg); overflow: hidden; background: #000; cursor: pointer; }
html.v2 .page-home .v2-hero-media .hx-hero-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 55%; border-radius: 0; transition: opacity .3s, transform .6s ease; }
.v2-hero-media:hover .hx-hero-img { transform: scale(1.02); }
.v2-hero-media::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.35)); pointer-events: none; transition: opacity .3s; }
.v2-play {
  position: absolute; z-index: 2; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 12px;
  padding: 7px 20px 7px 7px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(0,0,0,.18); color: var(--ink); text-align: left;
  transition: transform .25s ease, box-shadow .25s ease;
}
.v2-play-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--red); transition: background .2s, transform .25s ease; }
.v2-play-ico svg { width: 18px; height: 18px; margin-left: 3px; fill: #fff; }
.v2-play-txt { display: flex; flex-direction: column; gap: 2px; }
.v2-play-txt b { font: 500 16px/1.1 var(--f-sat, var(--f-dm)); letter-spacing: -0.01em; }
.v2-play-txt small { font: 400 13px/1.1 var(--f-inter); color: var(--muted, #666); }
.v2-hero-media:hover .v2-play, .v2-play:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.24); }
.v2-hero-media:hover .v2-play-ico { background: var(--red-hover, #bc0f14); transform: scale(1.06); }
.v2-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.v2-hero-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.v2-hero-media.playing { cursor: default; }
.v2-hero-media.playing .hx-hero-img, .v2-hero-media.playing .v2-play, .v2-hero-media.playing::after { opacity: 0; pointer-events: none; }
@media (max-width: 809px) { .v2-play { left: 12px; bottom: 12px; gap: 10px; padding-right: 16px; } .v2-play-ico { width: 38px; height: 38px; } .v2-play-txt b { font-size: 15px; } }

/* rails: native scrolling (Sep 28, 2026). The browser locks each swipe to one direction and adds momentum,
   so vertical swipes scroll the page and sideways swipes move the cards. No JS drag handling. */
.md-row, .vd-row, .hx-stepimgs, .v2-ig-rail, .v2-path-track, [data-rail] { touch-action: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.v2-ig-rail, .v2-path-track { overflow-y: hidden; }
@media (max-width: 809px) { .md-row:not(.md-row-grid), .vd-row, .hx-stepimgs { overflow-y: hidden; } } /* on desktop these are grids: don't clip shadows */
/* overflow-y: hidden matters: overflow-x:auto makes the row vertically scrollable too when a card is a few px taller
   (models/videos rows were 18px), and then a vertical swipe on a card scrolled the row instead of the page. */

/* popups (gallery, Instagram video, menu, call-back): the page behind is frozen by main.js loonaLock() */
.pj-lb, .v2-ig-lb, .modal { overscroll-behavior: contain; }

/* "Who is it for": swipeable slider synced with the tabs */
.v2-path-track { display: flex; margin-top: 40px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.v2-path-track::-webkit-scrollbar { display: none; }
.v2-path-track .hx-panel { flex: 0 0 100%; margin-top: 0; scroll-snap-align: start; }
.v2-path-track .hx-panel img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.v2-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.v2-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.18); transition: background .2s, width .2s; }
.v2-dots i.on { width: 22px; border-radius: 4px; background: var(--ink); }
@media (max-width: 809px) { .v2-path-track { margin-top: 24px; } .v2-path-track .hx-panel { gap: 20px; } }

/* mobile menu: page stays put while the menu is open */
html.menu-open, html.menu-open body { overflow: hidden; }
@media (max-width: 1199px) {
  html.v2 .mobile-menu { max-height: calc(100vh - 77px); max-height: calc(100dvh - 77px); overflow-y: auto; overscroll-behavior: contain; }
}

/* compare table: fits the phone, no sideways scroll */
@media (max-width: 809px) {
  .md-table-wrap { overflow-x: visible; }
  .md-table { min-width: 0; font-size: 14px; }
  .md-table th, .md-table td { padding: 12px 8px; }
  .md-table thead th { font-size: 12px; }
  .md-table th:nth-child(4), .md-table td:nth-child(4) { display: none; }
}

/* Instagram: video badge + lightbox */
.v2-ig-play { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.5); } /* no backdrop blur: it repaints on every frame while the rail scrolls on phones */
.v2-ig-play svg { width: 16px; height: 16px; margin-left: 2px; fill: #fff; }
.v2-ig-lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.85); }
.v2-ig-lb-in { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.v2-ig-lb video { max-width: min(420px, 92vw); max-height: 78vh; border-radius: var(--r); background: #000; }
.v2-ig-lb a { color: #fff; font: 500 15px/1 var(--f-sat); text-decoration: underline; text-underline-offset: 3px; }
.v2-ig-lb > button { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 26px; cursor: pointer; }

/* nav fits with the ADU models link: no wrapping, phone number shows only on wide screens */
html.v2 .nav-link { white-space: nowrap; }
html.v2 .nav-links { gap: clamp(18px, 2.2vw, 36px); }
@media (min-width: 1200px) and (max-width: 1439px) {
  html.v2 .nav { padding-left: 40px; padding-right: 40px; }
  html.v2 .nav-phone span { display: none; }
  html.v2 .nav-phone { margin-right: 14px; }
}

/* =========================================================
   v3 round 1 (site-wide fixes from the judge panel + QA)
   ========================================================= */
/* one red button per phone screen: the header CTA goes on phones, the sticky bar carries it
   (main.js hides the sticky bar while the page's own red button or the form is on screen) */
@media (max-width: 809px) { html.v2 .nav-cta { display: none; } }
/* /thanks and /404 (body.no-cta): no red header CTA, keep the phone icon on the right */
@media (max-width: 1199px) { html.v2 .no-cta .nav-phone { margin-left: auto; } }

/* ADU model cards: renderings are always labeled */
html.v2 .md-img { position: relative; }
html.v2 .md-rtag {
  position: absolute; top: 12px; left: 12px; z-index: 1; display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: 999px; background: rgba(250, 250, 250, 0.94); color: var(--ink); font: 500 13px/1 var(--f-sat); letter-spacing: -0.005em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); pointer-events: none;
}

/* lot-check form opened with a preselected type: "Project: Detached ADU  Change" above the step */
html.v2 .hx-picked { margin-top: 10px; font: 400 16px/1.4 var(--f-inter); color: var(--ink-soft); }
html.v2 .hx-picked b { font-weight: 700; color: var(--ink); }
html.v2 .hx-change {
  margin-left: 6px; padding: 10px 4px; border: 0; background: none; cursor: pointer;
  font: 500 16px/1 var(--f-sat); color: var(--red); text-decoration: underline; text-underline-offset: 3px;
}
html.v2 .hx-change:hover { color: var(--red-bright); }
.hx-picked[hidden] { display: none !important; }

/* city cards: 12px corners, hairline, readable size. The arrow is the svg in s2_macros.html (one arrow per card).
   Cards grow with their text so two-word names and the count line never overflow. */
html.v2 .city-card { border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); font-size: 16px; justify-content: space-between; height: auto; min-height: 58px; padding-block: 10px; gap: 8px; }
html.v2 .city-card:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
html.v2 .city-card span { min-width: 0; }
@media (max-width: 809px) { html.v2 .city-card { font-size: 16px; padding: 10px 14px; gap: 6px; } }

/* timeline bars: 12px corners, no red background (red is for actions only) */
html.v2 .s2-bars { gap: 6px; }
html.v2 .s2-bar { border-radius: var(--r); }
html.v2 .s2-bar:nth-child(3) { background: #555; }

/* loading state: image panels and the map read as panels, not empty white boxes */
html.v2 .proj-card, html.v2 .s2-addnow img, html.v2 .fc-map, html.v2 .md-img { background: var(--panel); }
html.v2 .ar-init { background: var(--panel); }

/* ADU model price table: prices never wrap on phones */
html.v2 .md-table td:last-child { white-space: nowrap; }

/* blog: card titles in ink, darker than the excerpt */
html.v2 .bl-card-h, html.v2 .bl-row-h { color: var(--ink); }

/* blog post headings: DM Sans never bold, h3 below h2 */
html.v2 .post-body h2 { font: 500 32px/1.15 var(--f-dm); letter-spacing: -0.02em; }
html.v2 .post-body h3 { font: 500 20px/1.3 var(--f-sat); letter-spacing: -0.01em; }
@media (max-width: 809px) { html.v2 .post-body h2 { font-size: 26px; } html.v2 .post-body h3 { font-size: 18px; } }

/* /thanks steps: numbers line up */
html.v2 .hx-next-steps b { min-width: 2.2ch; }

/* remodel pages: the "adding space instead?" button stays visible on phones (it is not red) */
@media (max-width: 809px) { html.v2 .s2-remodel .hx-hero .hero-actions .btn-outline { display: inline-flex; } }

/* pill link row (e.g. the 404 page): <div class="v2-pills"><a href="…">ADUs</a>…</div> */
html.v2 .v2-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
html.v2 .v2-pills a {
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); font: 500 15px/1 var(--f-sat); letter-spacing: -0.01em; color: var(--ink);
}
html.v2 .v2-pills a:hover { box-shadow: inset 0 0 0 1px var(--ink); }

/* remodel pages, "Before you remodel" section (templates/pages/service.html, #space): two real-photo cards */
html.v2 .s2-before-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
html.v2 .s2-before-card {
  display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 24px; background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--sh), 0 0 0 1px var(--line); color: var(--ink);
}
html.v2 .s2-before-card:hover { box-shadow: var(--sh-hover), 0 0 0 1px rgba(0, 0, 0, 0.18); }
html.v2 .s2-before-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--panel); }
html.v2 .s2-before-card small { font: 400 14px/1.5 var(--f-inter); color: var(--ink-soft); }
html.v2 .s2-before-card h3 { margin-top: 8px; font: 500 24px/1.15 var(--f-dm); letter-spacing: -0.02em; text-transform: none; }
html.v2 .s2-before-card p { font: 400 17px/1.5 var(--f-inter); }
html.v2 .s2-before-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font: 500 16px/1.3 var(--f-sat); color: var(--red); }
html.v2 .s2-before-go svg { width: 16px; height: 16px; fill: currentColor; }
html.v2 .s2-before-foot { margin-top: 24px; font: 400 17px/1.5 var(--f-inter); }
html.v2 .s2-before-foot a { color: var(--red); border-bottom: 1px solid currentColor; }
@media (max-width: 809px) { html.v2 .s2-before-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; } }

/* =========================================================
   v3 round 2 (site-wide fixes from the round-1 judge panel)
   ========================================================= */
/* blog post hero: the width/height attributes (kept to stop layout shift) must not beat aspect-ratio */
html.v2 .post-hero { height: auto; }

/* lot-check form: "Do you own the property?" matches the "City" and "When do you want to start?" labels
   (page rules like .page-contact .hx-sub made it 16-17px on phones) */
html.v2 .hx-own > legend.hx-sub { font: 400 14px/1.4 var(--f-inter); color: var(--ink-soft); }

/* /thanks and /404: text reads at a comfortable width, and an in-text call link looks tappable */
html.v2 .no-cta .ptitle .lead-16 { max-width: 62ch; }
html.v2 .ptitle .lead-16 a[data-call] {
  color: var(--red); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  padding-block: 6px; white-space: nowrap;
}
html.v2 .ptitle .lead-16 a[data-call]:hover { color: var(--red-bright); }

/* Video row: 4 explainers (Sep 28, 2026). 4 across on desktop, 2 x 2 on tablet; phone stays a swipe row */
@media (min-width: 810px) { html.v2 .vd-row { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; } }
@media (min-width: 1200px) { html.v2 .vd-row { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; } }

/* ---------- /thanks: confirmation page (Sep 29, 2026) ---------- */
html.v2 .thx { padding-top: 56px; padding-bottom: 32px; }
html.v2 .thx-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: start; }
html.v2 .thx-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--field); box-shadow: 0 0 0 1px var(--line); font: 500 14px/1 var(--f-sat, var(--f-dm)); color: var(--ink); }
html.v2 .thx-badge span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--red); }
html.v2 .thx-badge svg { width: 16px; height: 16px; fill: #fff; stroke: #fff; stroke-width: 8; }
html.v2 .thx .h1 { font-size: 56px; }
html.v2 .thx-lead { margin-top: 16px; max-width: 34ch; color: var(--ink-soft); }
html.v2 .thx-steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; }
html.v2 .thx-steps li { display: flex; gap: 18px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r); background: var(--field); box-shadow: 0 0 0 1px var(--line); }
html.v2 .thx-n { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--off); box-shadow: 0 0 0 1px var(--line); font: 500 15px/1 var(--f-dm); color: var(--red); }
html.v2 .thx-steps li:first-child .thx-n { background: var(--red); color: #fff; box-shadow: none; }
html.v2 .thx-steps small { display: block; font: 500 12px/1.2 var(--f-dg); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
html.v2 .thx-steps b { display: block; margin-top: 4px; font: 500 19px/1.25 var(--f-dm); color: var(--ink); }
html.v2 .thx-steps p { margin: 4px 0 0; font: 400 16px/1.45 var(--f-inter); color: var(--ink-soft); }
html.v2 .thx-fig { margin: 0; position: sticky; top: 110px; }
html.v2 .thx-fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); background: var(--panel); }
html.v2 .thx-fig figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
html.v2 .thx-fig figcaption b { font: 500 16px/1.3 var(--f-dm); }
html.v2 .thx-fig figcaption span { font: 400 14px/1.4 var(--f-inter); color: var(--ink-soft); }
html.v2 .thx-callcard { display: flex; align-items: center; gap: 20px; margin-top: 40px; padding: 22px 24px; border-radius: var(--r-lg); background: var(--ink); color: #fff; }
html.v2 .thx-callicon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.1); }
html.v2 .thx-callicon svg { width: 22px; height: 22px; fill: #fff; }
html.v2 .thx-calltext { flex: 1; display: flex; flex-direction: column; gap: 4px; }
html.v2 .thx-calltext b { font: 500 20px/1.25 var(--f-dm); }
html.v2 .thx-calltext span { font: 400 15px/1.45 var(--f-inter); color: rgba(255,255,255,.75); max-width: 60ch; }
html.v2 .thx-callactions { flex: none; display: flex; gap: 10px; }
html.v2 .thx-callactions .btn { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
html.v2 .thx-callactions .btn:hover { background: rgba(255,255,255,.1); }
html.v2 .thx-callactions .btn svg { width: 16px; height: 16px; fill: currentColor; }
html.v2 .thx-more { padding-top: 24px; padding-bottom: 80px; }
html.v2 .thx-more-h { font-size: 32px; }
html.v2 .thx-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
html.v2 .thx-link { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--field); box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: box-shadow .2s, transform .2s; }
html.v2 .thx-link:hover { box-shadow: 0 0 0 1px var(--line), var(--sh-hover); transform: translateY(-2px); }
html.v2 .thx-link img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--panel); }
html.v2 .thx-link span { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
html.v2 .thx-link b { font: 500 18px/1.25 var(--f-dm); }
html.v2 .thx-link small { font: 400 14px/1.4 var(--f-inter); color: var(--ink-soft); }
@media (max-width: 1199px) {
  html.v2 .thx-hero { grid-template-columns: 1fr; gap: 32px; }
  html.v2 .thx-fig { position: static; max-width: 640px; }
}
@media (max-width: 809px) {
  html.v2 .thx { padding-top: 28px; }
  html.v2 .thx .h1 { font-size: 40px; }
  html.v2 .thx-steps li { padding: 16px; gap: 14px; }
  html.v2 .thx-steps b { font-size: 18px; }
  html.v2 .thx-callcard { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
  html.v2 .thx-callactions { width: 100%; }
  html.v2 .thx-callactions .btn { flex: 1; justify-content: center; }
  html.v2 .thx-links { grid-template-columns: 1fr; gap: 12px; }
  html.v2 .thx-link { flex-direction: row; align-items: center; }
  html.v2 .thx-link img { width: 112px; flex: none; aspect-ratio: 1; }
  html.v2 .thx-link span { padding: 12px 16px; }
  html.v2 .thx-more-h { font-size: 26px; }
}