/* Loona Construction — homepage (1:1 copy of the Framer site) */
:root {
  --page: #fafafa;
  --ink: #232323;
  --ink-soft: #303030;
  --red: #a31f1a;
  --red-bright: #bc0f14;
  --off: #f8f8f5;
  --field: rgba(230, 230, 230, 0.8);
  --line: rgba(20, 20, 20, 0.1);
  --divider: #959595;
  --icon-blue: #014670;
  --meta-blue: #0a4463;
  --dark-btn: #242424;
  --pad-x: 80px;
  --f-dm: "DM Sans", "DM Sans Placeholder", system-ui, sans-serif;
  --f-inter: "Inter", "Inter Placeholder", system-ui, sans-serif;
  --f-dg: "Darker Grotesque", "Darker Grotesque Placeholder", system-ui, sans-serif;
  --f-sat: "Satoshi", "Satoshi Placeholder", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--f-inter);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p, ul { margin: 0; }
button { font: inherit; }

/* ---------- Type ---------- */
.eyebrow { font: 400 18px/1.4 var(--f-inter); color: var(--red-bright); }
.h1 { font: 500 44px/1.2 var(--f-dm); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); }
.h2 { font: 500 32px/1.2 var(--f-dm); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); }
.body { font: 400 16px/1.4 var(--f-inter); color: var(--ink); }
.body b { font-weight: 700; }
.body-sat { font: 400 18px/1.4 var(--f-sat); letter-spacing: -0.01em; color: var(--ink-soft); }
.red { color: var(--red-bright); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 21px 0 24px; height: 37px;
  font: 600 14px/1.2 var(--f-dg); letter-spacing: 0.05em; text-transform: uppercase;
  border: 0; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.btn svg { width: 21px; height: 21px; flex: none; fill: currentColor; }
.btn .tilt { transform: rotate(-45deg); }
.btn-red { background: var(--red); color: #fafafa; }
.btn-red:hover { background: var(--red-bright); }
.btn-dark { background: var(--ink); color: #fafafa; }
.btn-dark:hover { background: #000; }
.btn-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px #222; }
.btn-outline:hover { background: var(--ink); color: #fafafa; }
.btn-text { background: transparent; color: var(--ink); padding: 0; }
.btn-text svg { width: 15px; height: 15px; }
.btn img.logo-in-btn { width: 55px; height: 22px; object-fit: cover; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: 75px; background: var(--page);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
}
.nav-logo img { width: 127px; height: 45px; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-link {
  font: 600 15px/1 var(--f-dg); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink); transition: color .2s;
}
.nav-link:hover, .nav-link.active { color: var(--red-bright); }
.nav-drop { position: relative; }
.nav-drop > button {
  display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer;
}
.nav-drop > button svg { width: 14px; height: 14px; fill: currentColor; transition: transform .2s; }
.nav-drop:hover > button svg, .nav-drop.open > button svg { transform: rotate(45deg); }
.drop-menu {
  position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
  width: 276px; padding: 20px; background: var(--page);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
  display: flex; flex-direction: column; gap: 16px;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.drop-menu::before { content: ""; position: absolute; inset: -30px 0 100% 0; }
.nav-drop:hover .drop-menu, .nav-drop.open .drop-menu { opacity: 1; visibility: visible; }
.drop-menu a { font: 600 15px/23px var(--f-dg); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); }
.drop-menu a:hover { color: var(--red-bright); }
.nav-cta { font-size: 14px; }
.nav-burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink); }
.nav-burger svg { width: 24px; height: 24px; display: block; }
.mobile-menu { display: none; }

.spacer { height: 120px; }

/* ---------- Shared section frame ---------- */
.wrap { max-width: 1440px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.divider { max-width: 1440px; margin: 0 auto; padding: 25px 40px; }
.divider span { display: block; height: 1px; background: var(--divider); }
.stack-10 > * + * { margin-top: 10px; }

/* ---------- Hero ---------- */
.hero { padding-top: 40px; padding-bottom: 70px; padding-right: calc(var(--pad-x) + 20px); display: grid; grid-template-columns: minmax(0, 660fr) minmax(0, 500fr); gap: 100px; align-items: start; }
.hero-copy .body { margin-top: 10px; }
.hero-copy .h1 { margin-top: 10px; }
.hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 27px; flex-wrap: wrap; }
.hero-rated { margin-top: 89px; }
.rating-logos { display: grid; grid-template-columns: repeat(4, 165px); margin-top: 1px; }
.rating-logos img { width: 165px; height: 122px; object-fit: contain; }

.card-form {
  background: #fff; padding: 30px;
  box-shadow: 0 0.3px 0.6px -0.1px rgba(0,0,0,.01), 0 1px 2px -0.3px rgba(0,0,0,.02), 0 3px 8px -0.6px rgba(0,0,0,.03), 0 10px 25px -1px rgba(0,0,0,.05);
}
.card-form h2 { font: 500 32px/1.2 var(--f-dm); color: var(--ink); }
.card-form > p { margin-top: 10px; }

/* Lead forms */
.lead-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 25px; }
.field { background: var(--field); height: 50px; display: flex; align-items: center; }
.field.full { grid-column: 1 / -1; }
.field input, .field textarea {
  width: 100%; height: 100%; border: 0; background: transparent; outline: none;
  font: 400 16px/1.4 var(--f-inter); color: var(--ink); padding: 0 14px;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(35, 35, 35, 0.6); }
.field.area { height: 110px; }
.field.area textarea { padding: 10px 10px 10px 14px; resize: vertical; }
.field:focus-within { box-shadow: inset 0 0 0 1px var(--ink); }
.consent { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; font: 400 13px/1.35 var(--f-inter); color: var(--ink); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--ink); }
.send { grid-column: 1 / -1; margin-top: 10px; height: 40px; border: 0; background: var(--dark-btn); color: var(--off); font: 400 16px/1.6 var(--f-inter); cursor: pointer; transition: background .2s; }
.send:hover { background: #000; }
.form-done { grid-column: 1 / -1; padding: 16px; background: var(--off); font: 400 16px/1.4 var(--f-inter); }

/* ---------- Video ---------- */
.video-sec { padding-top: 80px; padding-bottom: 100px; display: grid; grid-template-columns: minmax(0, 501fr) minmax(0, 716fr); gap: 63px; align-items: start; }
.video-sec ul { margin-top: 10px; padding-left: 20px; }
.video-box { position: relative; aspect-ratio: 716 / 380; background: #141414; overflow: hidden; }
.video-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play { position: absolute; left: 50%; top: 50%; width: 125px; height: 125px; transform: translate(-50%, -50%); border: 0; background: none; padding: 0; cursor: pointer; }
.video-play svg { width: 100%; height: 100%; }
.video-box.playing .video-play { display: none; }

/* ---------- About ---------- */
.about { padding-top: 80px; padding-bottom: 80px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px; }
.about .h2 { margin-top: 10px; }
.about .body.copy { margin-top: 30px; }
.about .btn { margin-top: 30px; }
.about-img-sm { margin-top: 49px; width: 100%; aspect-ratio: 615 / 402; object-fit: cover; }
.about-img-lg { width: 100%; height: 975px; object-fit: cover; }

/* ---------- Services ---------- */
.services { padding-top: 80px; padding-bottom: 80px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px; }
.services-art { width: 100%; aspect-ratio: 615 / 632; object-fit: contain; }
.services .h2 { margin-top: 10px; }
.progress { position: relative; height: 2px; margin-top: 21px; background: var(--line); }
.progress i { position: absolute; inset: 0 auto 0 0; width: 0; background: #141414; border-radius: 26px; transition: width 1.4s cubic-bezier(.2,.7,.2,1); }
.progress.in i { width: 100%; }
.services .body-sat { margin-top: 36px; }
.svc-list { list-style: none; padding: 0; margin-top: 36px; }
.svc-list li { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.svc-list li + li { margin-top: 16px; }
.svc-list .ico { width: 18px; height: 18px; flex: none; fill: var(--red-bright); }
.svc-list .plus { width: 18px; height: 18px; flex: none; fill: var(--icon-blue); margin-left: auto; transition: transform .25s; }
.svc-list li:hover .plus { transform: rotate(90deg); }
.svc-list h3 { font: 500 20px/1.2 var(--f-sat); letter-spacing: -0.03em; text-transform: uppercase; color: var(--ink-soft); flex: 1; padding-right: 10px; }
.services .btn { margin-top: 37px; }

/* ---------- Projects ---------- */
.projects { padding-top: 80px; padding-bottom: 80px; }
.projects-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.projects-head > div { max-width: 625px; }
.projects-head .h2 { margin-top: 10px; }
.projects-head .body-sat { margin-top: 10px; }
.proj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 50px; }
.proj-card { position: relative; display: block; height: 346px; overflow: hidden; background: #fff; }
.proj-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.proj-card:hover > img { transform: scale(1.04); }
.proj-top { position: absolute; inset: 0 0 auto 0; height: 76px; background: linear-gradient(rgba(20,20,20,.34), rgba(18,18,18,0)); display: flex; align-items: flex-start; gap: 26px; padding: 14px 18px; }
.tag { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/18px var(--f-sat); text-transform: uppercase; color: var(--off); }
.tag svg { width: 12px; height: 16px; fill: #fafafa; }
.proj-bottom { position: absolute; inset: auto 0 0 0; height: 94px; background: linear-gradient(rgba(255,255,255,0), #141414); display: flex; align-items: flex-end; justify-content: center; padding: 0 20px 20px; }
.proj-bottom h3 { font: 500 20px/1.2 var(--f-sat); letter-spacing: -0.03em; text-transform: uppercase; color: var(--off); text-align: center; }
.ticker { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); overflow: hidden; opacity: 0; transition: opacity .3s; pointer-events: none; }
.ticker div { display: flex; gap: 10px; width: max-content; animation: tick 12s linear infinite; }
.ticker span { font: 500 24px/1.4 var(--f-sat); letter-spacing: 0.01em; text-transform: uppercase; color: var(--off); white-space: nowrap; }
.ticker span::after { content: "·"; margin-left: 10px; opacity: .6; }
.proj-card:hover .ticker, .blog-card:hover .ticker { opacity: 1; }
.proj-card::after, .blog-img::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.25); opacity: 0; transition: opacity .3s; }
.proj-card:hover::after, .blog-card:hover .blog-img::after { opacity: 1; }
.ticker { z-index: 2; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.projects-more { display: flex; justify-content: center; margin-top: 50px; }

/* ---------- Repeat business ---------- */
.repeat { max-width: 1440px; margin: 0 auto; padding: 100px 120px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 114px; align-items: center; }
.repeat-img { width: 100%; aspect-ratio: 543 / 470; object-fit: cover; }
.repeat .h2 { margin-top: 20px; }
.checks { list-style: none; padding: 0; margin-top: 30px; display: flex; flex-direction: column; gap: 24px; max-width: 543px; }
.checks li { display: flex; gap: 8px; align-items: flex-start; }
.checks svg { width: 30px; height: 30px; flex: none; fill: var(--ink); }
.checks p { font: 400 16px/1.4 var(--f-inter); }
.checks b { font-weight: 700; }

/* ---------- YouTube ---------- */
.yt { max-width: 1440px; margin: 0 auto; padding: 100px 100px 110px; }
.yt-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.yt-head > div { max-width: 605px; }
.yt-head .h2 { margin-top: 10px; }
.yt-head .body-sat { margin-top: 11px; }
.yt-row { display: flex; justify-content: center; gap: 10px; margin-top: 60px; }
.yt-row .short { width: 300px; aspect-ratio: 300 / 533; background: #000; flex: none; }
.yt-row iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Testimonials ---------- */
.reviews { padding: 76px 0 70px; display: flex; flex-direction: column; align-items: center; }
.slider { width: 952px; max-width: calc(100vw - 40px); height: 350px; overflow: hidden; position: relative; }
.slider-track { display: flex; height: 100%; transition: transform .8s cubic-bezier(.4,0,.2,1); }
.slide { flex: 0 0 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 38px; text-align: center; }
.slide blockquote { margin: 0; font: 400 22px/1.4 var(--f-inter); color: var(--ink); }
.slide .who { display: flex; align-items: center; gap: 10px; font: 400 18px/1.4 var(--f-inter); }
.slide .who svg { width: 20px; height: 20px; fill: #5f5f5f; }
.reviews .btn { margin-top: 38px; }

/* ---------- Contact ---------- */
.contact { padding-top: 80px; padding-bottom: 80px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: start; }
.map { width: 100%; height: 400px; border: 0; display: block; }
.contact .body { margin-top: 10px; }
.contact .lead-form { margin-top: 20px; }

/* ---------- Blog ---------- */
.blog { padding-top: 41px; padding-bottom: 1px; }
.blog .h2 { margin-top: 10px; }
.blog .intro { margin-top: 11px; max-width: 896px; }
.blog-grid { margin-top: 29px; background: var(--off); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; row-gap: 10px; }
.blog-card { display: block; min-height: 472px; }
.blog-img { position: relative; height: 320px; background: #fff; overflow: hidden; }
.blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.blog-card:hover .blog-img img { transform: scale(1.04); }
.blog-card h3 { margin: 23px 10px 0; font: 500 20px/1.2 var(--f-sat); letter-spacing: -0.03em; text-transform: uppercase; color: var(--ink-soft); }
.blog-meta { display: flex; align-items: center; gap: 10px; margin: 19px 10px 0; font: 500 12px/18px var(--f-sat); text-transform: uppercase; color: rgba(48,48,48,.8); }
.blog-meta span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.blog-meta svg { width: 18px; height: 18px; fill: var(--meta-blue); }
.blog-meta i { flex: 1; height: 1px; background: var(--line); }

/* ---------- Footer ---------- */
.footer { margin-top: 222px; }
.footer-main { background: rgba(230, 230, 230, 0.5); }
.footer-inner { max-width: 1440px; margin: 0 auto; padding: 80px 40px 80px; }
.footer-cta { font: 400 74px/1.2 var(--f-dm); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); }
.footer-actions { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 30px; }
.footer-rule { height: 1px; background: var(--divider); margin-top: 75px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 75px; }
.footer-cols h4 { margin: 0 0 20px; font: 500 18px/1.2 var(--f-dm); text-transform: uppercase; }
.footer-cols ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10.4px; font: 400 16px/1.4 var(--f-inter); }
.footer-cols a:hover { color: var(--red-bright); }
.footer-cols .ext svg { width: 13px; height: 20px; fill: currentColor; vertical-align: -4px; margin-left: 4px; }
.reach li { display: flex; gap: 5px; align-items: flex-start; }
.reach svg { width: 20px; height: 20px; flex: none; fill: var(--ink); }
.footer-bar { background: var(--field); }
.footer-bar-inner { max-width: 1440px; margin: 0 auto; height: 120px; padding: 0 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font: 400 14px/1.4 var(--f-inter); }
.socials { display: flex; justify-content: flex-end; gap: 30px; }
.socials svg { width: 20px; height: 20px; fill: #5f5f5f; display: block; transition: fill .2s; }
.socials a:hover svg { fill: var(--red-bright); }

/* ---------- Call-back modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.modal.open { opacity: 1; visibility: visible; }
.modal-card { width: 500px; max-width: 100%; max-height: calc(100vh - 40px); overflow: auto; background: var(--page); }
.modal-top { height: 150px; background: rgba(163, 31, 26, 0.44); display: flex; justify-content: space-between; align-items: stretch; padding-left: 30px; }
.modal-top .ph { align-self: center; }
.modal-top small { font: 400 14px/1.4 var(--f-inter); display: block; margin-bottom: 9px; }
.modal-top a { font: 500 24px/1.2 var(--f-inter); }
.modal-top img { width: 201px; height: 150px; object-fit: contain; object-position: right bottom; }
.modal-body { padding: 50px 30px 30px; }
.modal-body .body { margin-top: 10px; }
.float-field { position: relative; background: #eaeaea; height: 52px; margin-top: 22px; }
.float-field input { width: 100%; height: 100%; border: 0; background: transparent; outline: none; padding: 18px 15px 4px; font: 400 16px/1.4 var(--f-dm); color: #000; }
.float-field label { position: absolute; left: 11px; top: 19px; font: 400 14px/1 var(--f-dm); color: #999; pointer-events: none; transition: all .15s; }
.float-field input:focus + label, .float-field input:not(:placeholder-shown) + label { top: 7px; font-size: 11px; }
.modal-body .consent { margin-top: 26px; }
.modal-send { width: 100%; height: 50px; margin-top: 26px; border: 0; background: var(--ink); color: #fafafa; font: 600 15px/1.2 var(--f-dm); letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; }
.modal-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 20px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; font-size: 22px; line-height: 1; }

/* ---------- Reveal on scroll (content stays visible without JS) ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .ticker div { animation: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
  :root { --pad-x: 40px; }
  .nav-links { gap: 22px; }
  .hero { gap: 50px; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
  .rating-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rating-logos img { width: 100%; }
  .about-img-lg { height: 100%; min-height: 700px; }
  .repeat { padding: 80px 40px; gap: 50px; }
  .yt { padding: 80px 40px; }
  .yt-row { overflow-x: auto; justify-content: flex-start; }
  .footer-cta { font-size: 56px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 809px) {
  :root { --pad-x: 20px; }
  .nav { height: 77px; padding: 0 20px; }
  .nav-logo img { width: 97px; height: 34px; }
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; margin-right: 12px; }
  .nav-burger { display: block; }
  .mobile-menu { display: flex; position: fixed; top: 77px; left: 0; right: 0; z-index: 49; flex-direction: column; gap: 18px; padding: 24px 20px 30px; background: var(--page); box-shadow: 0 10px 20px rgba(0,0,0,.06); transform: translateY(-120%); transition: transform .3s ease; }
  .mobile-menu.open { transform: none; }
  .mobile-menu a { font: 600 18px/1.2 var(--f-dg); letter-spacing: 0.05em; text-transform: uppercase; }
  .mobile-menu .sub { padding-left: 14px; display: flex; flex-direction: column; gap: 14px; }
  .mobile-menu .sub a { font-size: 16px; color: #555; }
  .spacer { height: 80px; }

  .eyebrow { font-size: 16px; }
  .h1 { font-size: 28px; }
  .h2 { font-size: 20px; }
  .body { font-size: 14px; }
  .body-sat { font-size: 17px; }

  .hero { grid-template-columns: 1fr; gap: 60px; padding-right: var(--pad-x); padding-top: 50px; padding-bottom: 60px; }
  .hero-copy .body { font-size: 14px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .btn { width: 100%; }
  .hero-rated { margin-top: 50px; text-align: center; }
  .rating-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rating-logos img { width: 100%; height: 90px; }
  .card-form { padding: 30px 15px; }
  .card-form h2 { font-size: 20px; }
  .card-form > p { font-size: 14px; }
  .lead-form { grid-template-columns: 1fr; }

  .video-sec { grid-template-columns: 1fr; gap: 30px; padding-top: 40px; padding-bottom: 40px; }
  .video-sec ul { padding-left: 18px; }
  .about, .services, .contact { grid-template-columns: 1fr; gap: 30px; padding-top: 40px; padding-bottom: 40px; }
  .about .body.copy { font-size: 16px; }
  .about-img-sm { margin-top: 30px; }
  .about-img-lg { height: 300px; min-height: 0; }
  .divider { padding: 15px 20px; }
  .progress { margin-top: 16px; }
  .projects { padding-top: 40px; padding-bottom: 40px; }
  .projects-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .proj-grid { grid-template-columns: 1fr; margin-top: 30px; }
  .repeat { grid-template-columns: 1fr; padding: 50px 20px; gap: 40px; }
  .repeat-img { order: 2; }
  .checks p { font-size: 14px; }
  .yt { padding: 50px 20px; }
  .yt-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .yt-row { margin-top: 40px; scroll-snap-type: x mandatory; }
  .yt-row .short { width: 80%; scroll-snap-align: center; }
  .reviews { padding: 40px 20px; }
  .slider { height: 520px; }
  .slide blockquote { font-size: 20px; }
  .slide .who { font-size: 16px; }
  .map { height: 320px; }
  .blog { padding-top: 40px; }
  .blog-grid { grid-template-columns: 1fr; margin-top: 30px; }
  .blog-img { height: 255px; }
  .blog-card { min-height: 0; padding-bottom: 30px; }
  .footer { margin-top: 60px; }
  .footer-inner { padding: 50px 20px; }
  .footer-cta { font-size: 36px; }
  .footer-actions { flex-direction: column; gap: 12px; }
  .footer-actions .btn { width: 100%; }
  .footer-rule, .footer-cols { margin-top: 40px; }
  .footer-cols { grid-template-columns: 1fr; gap: 36px; }
  .footer-bar-inner { height: auto; padding: 24px 20px; grid-template-columns: 1fr; gap: 12px; justify-items: center; text-align: center; }
  .socials { justify-content: center; }
}

/* =========================================================
   Shared inner-page components
   ========================================================= */
.ptitle { max-width: 1440px; margin: 0 auto; padding: 80px 40px 100px; }
.ptitle .h1 { max-width: 952px; }
.ptitle .lead { margin-top: 31px; max-width: 1360px; }
.ptitle-actions { display: flex; align-items: center; gap: 30px; margin-top: 29px; flex-wrap: wrap; }

.banner { position: relative; height: 400px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.28); }
.banner p { position: relative; z-index: 1; font: 700 60px/1.2 var(--f-dm); color: #fff; text-align: center; padding: 0 20px; }

.vision4 { padding-bottom: 80px; }
.vision4-in { max-width: 1440px; margin: 0 auto; padding: 68px 40px 68px; background: var(--page); }
.vision4 .h2 { margin-top: 10px; }
.vision4-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 50px; margin-top: 50px; }
.vision4-grid h3 { font: 600 25px/1.2 var(--f-dm); margin-bottom: 20px; }
.vision4-grid .body + .body { margin-top: 0; }

/* Mission & Vision */
.mv-dark { background: #141414; display: grid; grid-template-columns: 695px minmax(0, 1fr); min-height: 675px; }
.mv-light { background: var(--page); display: grid; grid-template-columns: minmax(0, 1fr) 695px; min-height: 535px; }
.mv-art { position: relative; overflow: hidden; }
.mv-art img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.mv-light .mv-art img { width: 653px; height: 502px; margin: 174px 0 0 21px; }
.mv-dark .mv-art img { width: 692px; height: 672px; margin: 14px 0 0 2px; }
.word-ticker { position: absolute; inset: 0; overflow: hidden; }
.word-ticker.dark { opacity: .5; }
.word-ticker div { display: flex; flex-direction: column; animation: vtick 30s linear infinite; }
.word-ticker span { display: block; font: 900 173px/1 var(--f-sat); letter-spacing: -10px; text-transform: uppercase; white-space: nowrap; }
.word-ticker.dark span { color: rgba(48, 48, 48, 0.5); }
.word-ticker.light span { font-size: 212px; letter-spacing: -12px; color: #ececea; }
@keyframes vtick { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.mv-copy { padding: 176px 40px 60px 148px; max-width: 588px; }
.mv-copy h3 { font: 500 20px/1.2 var(--f-sat); text-transform: uppercase; color: rgba(248, 248, 245, 0.8); }
.mv-copy p { margin-top: 10px; font: 400 18px/1.4 var(--f-sat); color: rgba(248, 248, 245, 0.8); }
.mv-copy.light { padding: 104px 40px 60px 208px; max-width: 625px; }
.mv-copy.light h3 { color: var(--red-bright); }
.mv-copy.light p { color: #141414; }
.sign { display: flex; align-items: center; gap: 16px; margin-top: 50px; }
.sign img { width: 63px; height: 63px; object-fit: cover; border-radius: 50%; }
.sign .sig { margin: 0; font: 400 22px/1.2 "Homemade Apple", cursive; color: var(--off); }
.sign .role { margin: 2px 0 0; font: 500 12px/18px var(--f-sat); text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }

/* How we work / accordion */
.howwork { max-width: 1440px; margin: 0 auto; padding: 80px 40px 125px; }
.howwork .h2 { margin-top: 10px; }
.howwork > .body { margin-top: 21px; }
.acc { margin-top: 50px; }
.acc-item { border-bottom: 1px solid rgba(20, 20, 20, 0.1); }
.acc-head { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 31px 30px; background: none; border: 0; cursor: pointer; text-align: left; color: var(--ink); }
.acc-n { font: 400 14px/1.4 var(--f-inter); margin-top: 2px; }
.acc-t { flex: 1; font: 600 25px/1.2 var(--f-dm); margin-top: 2px; }
.acc-ico { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink); display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; }
.acc-ico svg { width: 16px; height: 16px; fill: currentColor; transform: rotate(45deg); transition: transform .25s; }
.acc-body { display: none; padding: 0 50px 50px; }
.acc-item.open { background: #e6e6e6; border-bottom-color: transparent; }
.acc-item.open .acc-head { padding: 50px 50px 20px; }
.acc-item.open .acc-body { display: block; }
.acc-item.open .acc-ico { background: var(--ink); color: #fafafa; }
.acc-item.open .acc-ico svg { transform: rotate(-45deg); }

@media (max-width: 1199px) {
  .mv-dark, .mv-light { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mv-copy, .mv-copy.light { padding: 80px 40px; }
  .mv-light .mv-art img, .mv-dark .mv-art img { width: 100%; height: auto; margin: 40px 0 0; }
  .vision4-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809px) {
  .ptitle { padding: 50px 20px 60px; }
  .ptitle .lead { margin-top: 20px; }
  .ptitle-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .ptitle-actions .btn { width: 100%; }
  .banner { height: 260px; }
  .banner p { font-size: 34px; }
  .vision4-in { padding: 40px 20px; }
  .vision4-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 30px; }
  .vision4-grid h3 { font-size: 20px; margin-bottom: 10px; }
  .mv-dark, .mv-light { grid-template-columns: 1fr; min-height: 0; }
  .mv-light .mv-art { order: 2; }
  .mv-copy, .mv-copy.light { padding: 50px 20px; max-width: none; }
  .mv-art { height: 360px; }
  .word-ticker span { font-size: 110px; letter-spacing: -6px; }
  .howwork { padding: 40px 20px 60px; }
  .acc-head, .acc-item.open .acc-head { padding: 22px 16px; }
  .acc-body { padding: 0 16px 24px; }
  .acc-t { font-size: 18px; }
}

/* =====================================================================
   Service + city pages
   ===================================================================== */
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { color: var(--red-bright); }
.lead { font: 400 18px/1.4 var(--f-inter); color: var(--ink); }
.no-upper { text-transform: none !important; }
.eyebrow-ico { display: flex; align-items: center; gap: 6px; }
.eyebrow-ico svg { width: 18px; height: 18px; fill: var(--red-bright); flex: none; }
.back-link { display: flex; width: fit-content; align-items: center; gap: 9px; font: 400 18px/1.4 var(--f-inter); color: var(--red-bright); }
.back-link svg { width: 20px; height: 20px; fill: var(--red-bright); }
.sv-cta { display: flex; justify-content: center; margin-top: 30px; }

.sv-hero { max-width: 1440px; margin: 0 auto; padding: 80px 40px 100px; display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 37px; align-items: center; }
.sv-hero .h1 { margin-top: 6px; max-width: 576px; }
.sv-hero .lead { margin-top: 30px; }
.sv-hero .hero-actions { margin-top: 30px; gap: 30px; }
.sv-hero--city { grid-template-columns: 1fr; }
.sv-hero--city .h1 { max-width: 952px; }

.sv-sec { max-width: 1440px; margin: 0 auto; padding: 65px 50px; }
.sv-sec .h2 { margin-top: 10px; }
.sv-sec > .reveal > .lead { margin-top: 10px; max-width: 720px; }
.sv-sec > .reveal > .h2 { max-width: 720px; }

.city-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 64px; }
.city-card { display: flex; align-items: center; gap: 15px; height: 66px; padding: 0 20px; background: #fff; font: 400 16px/1.4 var(--f-inter); color: var(--ink); transition: color .2s; }
.city-card:hover { color: var(--red-bright); }
.city-card img { width: 35px; height: 35px; object-fit: contain; flex: none; }

.sv-value, .sv-what, .sv-why { padding: 100px; }
.sv-value--wide { padding: 100px 120px; }
.sv-value--wide > .reveal > .h2 { max-width: none; }
.sv-value .h2, .sv-what .h2, .sv-why .h2 { margin-top: 20px; }
.sv-value .checks { max-width: none; margin-top: 62px; }
.sv-value--wide .checks { margin-top: 36px; }
.sv-h4 { font: 500 24px/1.2 var(--f-dm); color: var(--ink); margin-top: 63px; }
.sv-h4 + .sv-h4, .sv-text + .sv-h4 { margin-top: 62px; }
.sv-text { margin-top: 29px; }
.sv-text p { font: 400 16px/1.4 var(--f-inter); }

.sv-what .sv-what-intro { margin-top: 20px !important; }
.sv-what-row { display: flex; justify-content: space-between; gap: 40px; margin-top: 62px; }
.sv-what-col { width: 577px; display: flex; flex-direction: column; gap: 20px; }
.sv-what-row img { width: 577px; height: 320px; object-fit: cover; flex: none; }

.steps { list-style: none; margin: 64px auto 0; padding: 0; max-width: 1000px; }
.steps li { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 20px 0; border-top: 1px solid var(--line); }
.step-l { width: 330px; flex: none; }
.step-pill { display: inline-flex; align-items: center; height: 25px; padding: 0 15px; border-radius: 22px; background: rgba(20, 20, 20, 0.8); font: 500 10px/15px var(--f-sat); text-transform: uppercase; color: var(--off); }
.step-t { margin-top: 10px; font: 500 18px/1.2 var(--f-dm); text-transform: uppercase; color: var(--ink); }
.step-b { width: 608px; max-width: 100%; font: 400 16px/1.4 var(--f-inter); }

.sv-permits, .sv-faq { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; }
.sv-sticky { position: sticky; top: 150px; width: 582px; flex: none; }
.sv-sticky .lead { margin-top: 20px; max-width: 400px; }
.sv-sticky .btn { margin-top: 30px; }
.num-cards { width: 728px; flex: none; display: flex; flex-direction: column; gap: 10px; }
.num-card { display: grid; grid-template-columns: 123px minmax(0, 1fr); min-height: 160px; background: #fff; }
.num-card-n { background: var(--off); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; }
.num-card-n span { font: 500 70px/1 var(--f-sat); letter-spacing: -0.053em; color: rgba(189, 15, 21, 0.15); }
.num-card-body { padding: 24px 20px 34px; }
.num-card-head { display: flex; align-items: center; gap: 10px; }
.num-card-head h3 { font: 500 20px/1.2 var(--f-sat); letter-spacing: -0.03em; text-transform: uppercase; color: #303030; }
.num-ico { position: relative; width: 36px; height: 28px; flex: none; }
.num-ico::before { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 20px; border-radius: 20px 0 0; background: rgba(189, 15, 21, 0.2); }
.num-ico svg { position: relative; width: 36px; height: 28px; fill: rgba(48, 48, 48, 0.5); }
.num-card-body > p { margin-top: 24px; font: 400 18px/1.4 var(--f-sat); letter-spacing: -0.01em; color: #303030; }

.icon-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; margin-top: 50px; align-items: start; }
.icon-card { position: relative; background: #fff; padding: 69px 18px 18px; }
.icon-bub { position: absolute; left: 13px; top: 11px; width: 37px; height: 37px; border-radius: 50%; background: rgba(189, 15, 21, 0.12); }
.icon-bub svg { position: absolute; left: 5px; top: 6px; width: 37px; height: 37px; fill: #141414; }
.icon-card h3 { font: 500 20px/1.2 var(--f-sat); letter-spacing: -0.03em; text-transform: uppercase; color: #303030; }
.icon-card p { margin-top: 15px; font: 400 16px/1.4 var(--f-inter); }

.sv-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 57px; margin-top: 50px; align-items: start; }
.sv-split img { width: 100%; aspect-ratio: 642 / 330; object-fit: cover; }
.sv-split .checks { margin-top: 0; max-width: none; }
.sv-split--why { margin-top: 63px; }
.sv-split--why img { aspect-ratio: 592 / 540; }
.sv-why .lead { margin-top: 21px !important; }

.sv-why-left { grid-template-columns: 570px minmax(0, 1fr); gap: 61px; padding: 100px 120px; align-items: start; }
.sv-why-left .repeat-img { aspect-ratio: 570 / 470; }
.sv-why-left .eyebrow { margin-top: 3px; }
.sv-why-left .checks { max-width: 570px; }

.sv-projects { padding-left: 40px; padding-right: 40px; }
.sv-projects .projects-head { align-items: center; }
.sv-projects .projects-head > div { max-width: 798px; }

.sv-faq .sv-sticky { width: 554px; }
.sv-faq .sv-sticky .lead { margin-top: 21px; }
.faq-list { width: 692px; flex: none; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; align-items: flex-start; gap: 18px; padding: 20px 20px 19px 18px; background: none; border: 0; text-align: left; cursor: pointer; }
.faq-ico { width: 47px; height: 24px; flex: none; display: flex; align-items: center; }
.faq-ico svg { width: 20px; height: 20px; fill: rgba(33, 32, 25, 0.5); }
.faq-ico .x { display: none; width: 14px; height: 14px; margin-left: 2px; fill: #141414; }
.faq-q h3 { font: 500 20px/1.2 var(--f-sat); letter-spacing: -0.03em; text-transform: uppercase; color: rgb(33, 32, 25); }
.faq-a { display: none; padding: 38px 20px 19px; }
.faq-a p { font: 400 17px/1.4 var(--f-sat); letter-spacing: -0.01em; color: #141414; }
.faq-item.open .faq-q { padding-bottom: 0; }
.faq-item.open .faq-q h3 { color: #141414; }
.faq-item.open .faq-ico .q { display: none; }
.faq-item.open .faq-ico .x { display: block; }
.faq-item.open .faq-a { display: block; }

.sv-reviews { max-width: 1440px; margin: 0 auto; padding: 20px 40px 60px; }
.sv-reviews .h2 { margin-top: 10px; }
.rv-group { display: flex; gap: 90px; margin-top: 37px; }
.rv-group + .rv-group { margin-top: 99px; }
.rv-logo { width: 200px; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 37px; }
.rv-logo-box { height: 50px; display: flex; align-items: center; }
.rv-logo svg.rv-logo-yelp { width: 76px; height: 29px; }
.rv-logo svg.rv-logo-thumbtack { width: 136px; height: 19px; }
.rv-logo svg.rv-logo-google { width: 87px; height: 28px; }

.rv-cols { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.rv-col { display: flex; flex-direction: column; gap: 20px; }
.rv-card { background: #fff; padding: 30px 30px 31px; box-shadow: 0 0.8px 2.4px -0.6px rgba(0, 0, 0, 0.024), 0 2.4px 7.2px -1.2px rgba(0, 0, 0, 0.03), 0 6px 18px -1.9px rgba(0, 0, 0, 0.04); }
.rv-who { display: flex; align-items: center; gap: 15px; }
.rv-who img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex: none; }
.rv-who h3 { font: 700 20px/28px var(--f-inter); letter-spacing: -0.04em; color: #333; }
.rv-stars { display: flex; gap: 2px; margin-top: 1px; }
.rv-stars svg { width: 18px; height: 18px; }
.rv-text { position: relative; margin-top: 25px; }
.rv-text p { font: 500 16px/1.6 var(--f-inter); color: #666; }
.rv-text::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 40px; background: linear-gradient(rgba(255,255,255,0), #fff); }
.rv-link { margin-top: 29px; height: auto; }

@media (max-width: 1199px) {
  .sv-hero { grid-template-columns: minmax(0, 1fr) 440px; }
  .city-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-value, .sv-what, .sv-why, .sv-value--wide { padding: 80px 40px; }
  .sv-what-row img { width: 50%; height: auto; aspect-ratio: 577 / 320; }
  .sv-permits, .sv-faq { flex-direction: column; }
  .sv-sticky, .sv-faq .sv-sticky { position: static; width: 100%; }
  .num-cards, .faq-list { width: 100%; }
  .sv-why-left { grid-template-columns: 1fr 1fr; padding: 80px 40px; gap: 40px; }
  .rv-group { flex-direction: column; gap: 20px; }
}
@media (max-width: 809px) {
  .sv-hero { grid-template-columns: 1fr; padding: 50px 20px 60px; gap: 60px; }
  .sv-hero .lead { font-size: 16px; }
  .sv-sec, .sv-value, .sv-what, .sv-why, .sv-value--wide { padding: 50px 20px; }
  .lead { font-size: 16px; }
  .city-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; }
  .city-card { padding: 0 12px; gap: 10px; font-size: 14px; }
  .sv-value .checks, .sv-split--why, .sv-what-row { margin-top: 30px; }
  .sv-h4 { font-size: 20px; margin-top: 40px; }
  .sv-what-row { flex-direction: column; }
  .sv-what-col, .sv-what-row img { width: 100%; }
  .steps { margin-top: 30px; }
  .steps li { flex-direction: column; align-items: flex-start; gap: 12px; }
  .step-l { width: auto; }
  .num-card { grid-template-columns: 70px minmax(0, 1fr); }
  .num-card-n span { font-size: 48px; }
  .num-card-head h3 { font-size: 16px; }
  .num-card-body > p { font-size: 15px; margin-top: 16px; }
  .icon-cards, .sv-split { grid-template-columns: 1fr; margin-top: 30px; gap: 20px; }
  .sv-why-left { grid-template-columns: 1fr; padding: 50px 20px; }
  .sv-projects { padding-left: 20px; padding-right: 20px; }
  .sv-projects .projects-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .faq-q { padding: 18px 10px 16px 6px; gap: 10px; }
  .faq-ico { width: 24px; }
  .faq-q h3 { font-size: 16px; }
  .faq-a { padding: 14px 10px 16px; }
  .faq-a p { font-size: 15px; }
  .sv-reviews { padding: 20px 20px 50px; }
  .rv-cols { grid-template-columns: 1fr; }
  .rv-card { padding: 20px; }
}

/* =====================================================================
   Projects: listing + detail
   ===================================================================== */
.lead-16 { margin-top: 30px; }
.pj-filter .h2 { margin-top: 10px; }
.pj-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-top: 36px; }
.pj-filter-card { display: flex; align-items: center; gap: 15px; height: 95px; padding: 0 20px; background: #fff; font: 400 16px/1.4 var(--f-inter); color: var(--ink); transition: color .2s; }
.pj-filter-card:hover { color: var(--red-bright); }
.pj-filter-card svg { width: 35px; height: 35px; fill: currentColor; flex: none; }

.pj-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; padding: 10px 20px; }
.pj-pill { position: relative; overflow: hidden; display: inline-flex; align-items: center; height: 39px; padding: 0 20px; border-radius: 32px; background: rgba(255,255,255,.04); font: 400 16px/1.2 var(--f-sat); text-transform: uppercase; color: rgba(48,48,48,.5); transition: color .2s, background .2s; }
.pj-pill i { position: absolute; left: 50%; bottom: -12px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--meta-blue); transition: bottom .25s; }
.pj-pill:hover { color: #303030; }
.pj-pill:hover i { bottom: 4px; }
.pj-pill.active { background: var(--off); color: var(--red-bright); font-weight: 500; }
.pj-pill.active i { bottom: 5px; background: var(--red-bright); }

.pj-list { max-width: 1200px; margin: 0 auto; padding: 0 0 100px; scroll-margin-top: 90px; }
.pj-row { display: grid; grid-template-columns: 570px minmax(0, 1fr); gap: 10px; min-height: 400px; }
.pj-img { position: relative; overflow: hidden; height: 400px; }
.pj-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.pj-row:hover .pj-img img { transform: scale(1.05); }
.pj-img-title { position: absolute; inset: auto 0 0 0; height: 94px; background: linear-gradient(rgba(255,255,255,0), #141414); display: flex; align-items: flex-end; padding: 0 20px 20px; }
.pj-img-title h3 { font: 500 20px/1.2 var(--f-sat); letter-spacing: -0.03em; text-transform: uppercase; color: var(--off); }
.pj-info { display: flex; flex-direction: column; justify-content: space-between; padding: 54px 20px 50px 30px; color: #303030; }
.pj-cat { padding-left: 8px; font: 500 12px/18px var(--f-sat); text-transform: uppercase; }
.pj-desc { max-width: 570px; font: 400 17px/1.4 var(--f-sat); letter-spacing: -0.01em; }
.pj-meta { display: flex; gap: 55px; }
.pj-label { font: 500 12px/18px var(--f-sat); text-transform: uppercase; }
.pj-val { margin-top: 2px; font: 400 17px/1.4 var(--f-sat); letter-spacing: -0.01em; }
.pj-hr { border: 0; height: 1px; background: var(--divider); margin: 61px 0 65px; }
.pj-hr:last-child { margin-bottom: 25px; }

.pd-spacer { height: 50px; }
.pd-hero { position: relative; height: 765px; overflow: hidden; background: var(--off); }
.pd-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 307px; background: linear-gradient(0deg, #141414 8%, rgba(0,0,0,0) 100%); }
.pd-hero-in { position: absolute; left: 50px; right: 50px; bottom: 20px; z-index: 1; }
.crumbs { display: flex; gap: 5px; font: 400 12px/1.2 var(--f-inter); color: #fafafa; }
.crumbs a:hover { text-decoration: underline; }
.pd-hero .h1 { margin-top: 9px; color: #fafafa; }

.pd-content { max-width: 1440px; margin: 0 auto; padding: 80px 40px 90px; display: grid; grid-template-columns: 655px minmax(0, 1fr); gap: 50px; align-items: start; }
.pd-content .body { margin-top: 10px; }
.pd-specs { margin: 10px 0 0; display: flex; flex-direction: column; gap: 23px; }
.pd-specs > div { display: grid; grid-template-columns: 328px minmax(0, 1fr); align-items: center; }
.pd-specs dt { display: flex; align-items: center; gap: 10px; font: 500 18px/1.2 var(--f-dm); text-transform: uppercase; color: var(--ink); }
.pd-specs dt svg { width: 18px; height: 18px; fill: var(--red-bright); flex: none; }
.pd-specs dd { margin: 0; font: 400 17px/1.4 var(--f-sat); letter-spacing: -0.01em; color: rgba(48,48,48,.8); }

.pd-img1 { padding: 50px 40px; }
.pd-img1 img { width: 1088px; max-width: 100%; aspect-ratio: 1088 / 534; object-fit: cover; margin: 0 auto; }
.pd-block { max-width: 1440px; margin: 0 auto; padding: 50px 40px; }
.pd-block .acc { margin-top: 50px; }
.pd-outcome .body { margin-top: 20px; }
.pd-gallery { max-width: 1440px; margin: 0 auto; padding: 20px 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.pd-gallery img { width: 100%; aspect-ratio: 660 / 654; object-fit: cover; }
.pd-gallery.single { grid-template-columns: 1fr; }
.pd-gallery.single img { aspect-ratio: 1360 / 1348; }
.pd-others { padding-top: 19px; padding-bottom: 0; padding-left: 40px; padding-right: 40px; }
.pd-others .projects-more { margin-top: 32px; }
.pd-others .h2 { max-width: 600px; margin-top: 9px; }
.pd-others .progress { margin-top: 30px; }
.pd-others .proj-grid { margin-top: 32px; }

@media (max-width: 1199px) {
  .pj-list { padding: 0 40px 80px; }
  .pj-row { grid-template-columns: 1fr 1fr; }
  .pd-content { grid-template-columns: 1fr; gap: 40px; }
  .pd-hero { height: 600px; }
}
@media (max-width: 809px) {
  .pj-filter-grid { grid-template-columns: 1fr 1fr; margin-top: 24px; }
  .pj-filter-card { height: 70px; padding: 0 12px; gap: 10px; font-size: 14px; }
  .pj-filter-card svg { width: 26px; height: 26px; }
  .pj-pill { height: 34px; padding: 0 14px; font-size: 13px; }
  .pj-list { padding: 0 20px 60px; }
  .pj-row { grid-template-columns: 1fr; gap: 0; }
  .pj-img { height: 260px; }
  .pj-info { padding: 20px 0 0; gap: 16px; }
  .pj-desc { font-size: 15px; }
  .pj-hr { margin: 40px 0; }
  .pd-hero { height: 420px; }
  .pd-hero-in { left: 20px; right: 20px; }
  .pd-content { padding: 50px 20px; }
  .pd-specs > div { grid-template-columns: 150px minmax(0, 1fr); }
  .pd-specs dt { font-size: 15px; }
  .pd-specs dd { font-size: 15px; }
  .pd-img1 { padding: 30px 20px; }
  .pd-block { padding: 40px 20px; }
  .pd-gallery { grid-template-columns: 1fr; gap: 20px; padding: 10px 20px; }
  .pd-others { padding-left: 20px; padding-right: 20px; }
}

/* =====================================================================
   Services overview, reviews, contact, blog
   ===================================================================== */
.ptitle .hero-actions { margin-top: 30px; }
.so-h2 { max-width: none !important; }
.so-grid { max-width: 1200px; margin: 64px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.so-card { position: relative; display: block; height: 418px; overflow: hidden; background: #ededed; padding: 69px 18px 0; }
.so-bub { position: absolute; left: 13px; top: 11px; width: 37px; height: 37px; border-radius: 50%; background: rgba(20, 20, 20, 0.05); }
.so-bub svg { position: absolute; left: 5px; top: 7px; width: 37px; height: 37px; fill: #141414; }
.so-card h3 { font: 500 20px/1.2 var(--f-sat); letter-spacing: -0.03em; text-transform: uppercase; color: #303030; transition: color .2s; }
.so-card:hover h3 { color: var(--red-bright); }
.so-card img { margin-top: 10px; width: 100%; height: 346px; object-fit: cover; transition: transform .6s ease; }
.so-card:hover img { transform: scale(1.03); }
.so-extra { display: grid; grid-template-columns: 567px minmax(0, 709px); justify-content: space-between; gap: 40px; align-items: start; }
.so-extra .h2, .so-extra .lead { max-width: 567px; }
.so-extra .btn { margin-top: 20px; }
.so-extra-list { display: flex; flex-direction: column; gap: 18px; }
.so-extra-card { position: relative; height: 111px; background: rgba(230, 230, 230, 0.5); padding: 69px 18px 0; }
.so-extra-card .icon-bub { background: rgba(189, 15, 21, 0.11); }
.so-extra-card h3 { font: 500 20px/1.2 var(--f-sat); letter-spacing: -0.03em; text-transform: uppercase; color: #303030; }

.rv-spacer { height: 100px; }
.rv-title { padding-bottom: 76px; }
.rv-page { max-width: 1440px; margin: 0 auto; padding: 20px 40px 0; }
.rv-page .rv-group:first-child { margin-top: 0; }
.rv-group + .rv-group { margin-top: 100px; }
.rv-text { max-height: 395px; overflow: hidden; }
.rv-logo .btn-text { font-size: 14px; }

.ct-details { padding-bottom: 80px; }
.ct-band { background: rgba(230, 230, 230, 0.8); padding: 100px 40px 50px; }
.ct-cols { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ct-cols h4 { font: 500 24px/1.2 var(--f-inter); color: var(--ink); }
.ct-cols p { margin-top: 15px; font: 400 16px/1.4 var(--f-inter); }
.ct-cols a { display: block; font: 400 18px/1.4 var(--f-inter); color: var(--ink); }
.ct-cols a:hover { color: var(--red-bright); }
.ct-socials { max-width: 1360px; margin: 70px auto 0; padding-left: 10px; gap: 30px; justify-content: flex-start; }
.ct-form { scroll-margin-top: 80px; }
.ct-form .contact { padding-left: 40px; padding-right: 40px; }

.bl-title { padding: 41px 40px 52px; }
.bl-title .lead-16 { margin-top: 30px; }
.bl-sec { background: var(--off); padding: 65px 50px; }
.bl-grid { max-width: 1340px; margin: 0 auto; background: transparent; row-gap: 10px; }
.bl-grid .blog-img { height: 335px; }

.read-progress { position: fixed; top: 75px; left: 0; right: 0; height: 2px; z-index: 49; pointer-events: none; }
.read-progress i { display: block; height: 100%; width: 0; background: var(--red-bright); }
.post { max-width: 1440px; margin: 0 auto; padding: 50px 50px 100px; display: grid; grid-template-columns: 220px 780px 240px; justify-content: space-between; align-items: start; }
.post-toc { position: sticky; top: 100px; padding-top: 10px; }
.post-toc-h { font: 500 16px/1.2 var(--f-inter); color: var(--ink); margin-bottom: 10px; }
.post-toc ol { list-style: none; margin: 0; padding: 0; }
.post-toc a { display: block; padding: 6px 0; font: 400 14px/1.4 var(--f-inter); color: rgba(36, 36, 36, 0.43); transition: color .2s; }
.post-toc a:hover, .post-toc a.on { color: var(--ink); }
.post-meta { display: grid; grid-template-columns: 1fr 1fr; margin-top: 40px; }
.post-meta-l { font: 600 14px/1.2 var(--f-dg); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); }
.post-meta p + p { margin-top: 4px; font: 400 16px/1.4 var(--f-inter); }
.post-hero { width: 100%; aspect-ratio: 780 / 509; object-fit: cover; margin-top: 41px; }
.post-short { margin-top: 39px; font: 400 18px/1.4 var(--f-inter); }
.post-body { margin-top: 54px; color: var(--ink); }
.post-body h2 { font: 500 32px/1.2 var(--f-dm); letter-spacing: 0.02em; text-transform: uppercase; margin: 40px 0 0; scroll-margin-top: 100px; }
.post-body > h2:first-child { margin-top: 0; }
.post-body h3 { font: 600 25px/1.2 var(--f-dm); margin: 40px 0 0; }
.post-body h4 { font: 600 20px/1.2 var(--f-dm); margin: 30px 0 0; }
.post-body p { font: 400 18px/1.4 var(--f-inter); margin: 20px 0 0; }
.post-body ul, .post-body ol { margin: 20px 0 0; padding-left: 22px; color: #191b23; }
.post-body li p { margin: 0; color: var(--ink); }
.post-body li ul { margin-top: 0; }
.post-body a { color: var(--red-bright); text-decoration: underline; text-underline-offset: 2px; }
.post-body strong { font-weight: 700; }
.post-aside { position: sticky; top: 75px; height: calc(100vh - 90px); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 30px; }
.post-news { background: rgba(230, 230, 230, 0.5); border-radius: 17px; padding: 20px 15px; }
.post-news h5 { margin: 0; font: 500 16px/1.2 var(--f-inter); color: var(--ink); }
.post-news-in { display: flex; align-items: center; height: 40px; margin-top: 29px; padding: 0 12px; border-radius: 27px; background: var(--off); }
.post-news-in input { width: 100%; border: 0; outline: 0; background: transparent; font: 400 14px/1.2 var(--f-inter); color: var(--ink); }
.post-news button { width: 100%; height: 40px; margin-top: 14px; border: 0; border-radius: 20px; background: rgba(20, 20, 20, 0.79); color: #fff; font: 600 14px/1.2 var(--f-inter); cursor: pointer; }
.post-news button:hover { background: #141414; }
.post-news > p { margin-top: 17px; font: 400 12px/1.2 var(--f-inter); color: var(--ink); }
.post-news .form-done { font-size: 14px; }
.post-related { max-width: 1440px; margin: 0 auto; padding: 50px 50px 80px; }
.post-related .bl-grid { margin-top: 50px; }

@media (max-width: 1199px) {
  .so-extra { grid-template-columns: 1fr; }
  .ct-band { padding: 80px 40px 40px; }
  .post { grid-template-columns: minmax(0, 1fr); padding: 40px 40px 80px; }
  .post-toc { display: none; }
  .post-aside { position: static; height: auto; padding: 40px 0 0; }
  .post-news { max-width: 360px; }
}
@media (max-width: 809px) {
  .so-grid { grid-template-columns: 1fr; margin-top: 30px; }
  .so-card { height: 320px; }
  .so-card img { height: 240px; }
  .so-extra-card { height: auto; padding: 60px 14px 20px; }
  .so-extra-card h3, .so-card h3 { font-size: 17px; }
  .rv-page { padding: 10px 20px 60px; }
  .ct-band { padding: 50px 20px 40px; }
  .ct-cols { grid-template-columns: 1fr; gap: 30px; }
  .ct-cols h4 { font-size: 20px; }
  .ct-socials { margin-top: 40px; padding-left: 0; }
  .ct-form .contact { padding-left: 20px; padding-right: 20px; }
  .bl-title { padding: 30px 20px 40px; }
  .bl-sec { padding: 40px 20px; }
  .post { padding: 30px 20px 60px; }
  .post-meta { margin-top: 24px; }
  .post-hero { margin-top: 24px; }
  .post-short, .post-body p { font-size: 16px; }
  .post-body { margin-top: 36px; }
  .post-body h2 { font-size: 24px; }
  .post-body h3 { font-size: 20px; }
  .post-related { padding: 30px 20px 60px; }
  .post-related .bl-grid { margin-top: 30px; }
}

/* Tablet nav (810–1199): logo + call-back button + burger, like the live site */
@media (min-width: 810px) and (max-width: 1199px) {
  .nav { height: 85px; padding: 0 20px; }
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; margin-right: 20px; }
  .nav-burger { display: block; padding: 0; }
  .mobile-menu { display: flex; position: fixed; top: 85px; left: 0; right: 0; z-index: 49; flex-direction: column; gap: 18px; padding: 24px 20px 30px; background: var(--page); box-shadow: 0 10px 20px rgba(0,0,0,.06); transform: translateY(-120%); transition: transform .3s ease; }
  .mobile-menu.open { transform: none; }
  .mobile-menu a { font: 600 18px/1.2 var(--f-dg); letter-spacing: 0.05em; text-transform: uppercase; }
  .mobile-menu .sub { padding-left: 14px; display: flex; flex-direction: column; gap: 14px; }
  .mobile-menu .sub a { font-size: 16px; color: #555; }
}
@media (max-width: 1199px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer a { overflow-wrap: anywhere; }
}
@media (max-width: 809px) {
  .blog-grid { grid-template-columns: 1fr; }
}

.city-more { display: flex; justify-content: center; margin-top: 64px; }
.city-more svg { width: 52px; height: 54px; fill: var(--ink); }
@media (max-width: 809px) { .city-more { margin-top: 30px; } }

/* Framer renders these component texts with white-space: pre-wrap */
.num-card-body > p, .icon-card p { white-space: pre-wrap; }

.sv-value--city { padding-top: 37px; padding-bottom: 45px; }
.sv-split--city img { aspect-ratio: 592 / 440; }
.ct-socials svg { fill: #000; }

.bl-sec .blog-card { min-height: 487px; }
.post-related { padding-bottom: 32px; }
.post-related .blog-card { min-height: 0; }
@media (max-width: 809px) { .bl-sec .blog-card { min-height: 0; } }

/* ---------- Service pages: phone layout matched to live site ---------- */
.m-only { display: none; }
@media (max-width: 809px) {
  .m-only { display: inline; }
  .d-only { display: none; }
  .sv-hero { padding: 40px 20px 60px; gap: 50px; }
  .sv-hero .h1 { margin-top: 15px; }
  .back-link { font-size: 16px; }
  .sv-hero .lead { margin-top: 20px; }
  .sv-hero .hero-actions { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 21px; }
  .sv-hero .hero-actions .btn { width: auto; }
  .sv-hero .lead-form { grid-template-columns: 1fr 1fr; }
  .sv-hero .lead-form .field:nth-child(3), .sv-hero .lead-form .field:nth-child(4) { grid-column: 1 / -1; }
  .sv-hero .card-form { padding: 30px; }
  .sv-sec, .sv-value, .sv-what, .sv-why, .sv-value--wide, .sv-value--city { padding: 50px 20px; }
  .sv-value .h2, .sv-what .h2, .sv-why .h2 { margin-top: 20px; }
  .sv-value .checks { margin-top: 62px; }
  .sv-value--wide .checks { margin-top: 36px; }
  .checks { gap: 24px; }
  .city-grid { grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 40px; }
  .city-card { height: 58px; padding: 0 20px; gap: 15px; font-size: 14px; }
  .city-more { margin-top: 40px; }
  .sv-what-row { flex-direction: column-reverse; margin-top: 63px; gap: 87px; }
  .sv-what-row img { width: 100%; height: auto; aspect-ratio: 350 / 219; }
  .sv-what-col { gap: 20px; }
  .steps { margin-top: 41px; }
  .steps li { flex-direction: column; align-items: stretch; gap: 19px; padding: 20px 0; }
  .step-b { width: auto; font-size: 14px; }
  .sv-permits, .sv-faq { flex-direction: column; gap: 0; }
  .sv-sticky .lead { margin-top: 10px; }
  .sv-sticky .btn { margin-top: 21px; }
  .num-cards { margin-top: 24px; gap: 10px; }
  .num-card { grid-template-columns: 1fr; min-height: 0; }
  .num-card-n { justify-content: flex-end; padding: 20px 20px 14px; background: #fff; }
  .num-card-n span { font-size: 70px; }
  .num-card-body { padding: 20px 20px 34px; }
  .num-card-head h3 { font-size: 20px; }
  .num-card-body > p { font-size: 18px; margin-top: 24px; }
  .icon-cards { margin-top: 41px; gap: 18px; }
  .icon-card p { font-size: 14px; }
  .sv-split { margin-top: 34px; }
  .sv-finance .sv-split img { display: none; }
  .sv-split--why { margin-top: 50px; gap: 44px; }
  .sv-split--why img { aspect-ratio: 350 / 349; }
  .sv-cta { margin-top: 40px; }
  .sv-projects { padding: 40px 20px; }
  .sv-projects .projects-head { gap: 20px; }
  .sv-projects .proj-grid { margin-top: 50px; }
  .faq-list { margin-top: 40px; }
  .faq-q { padding: 20px 20px 19px 20px; gap: 11px; }
  .faq-ico { width: 20px; }
  .faq-q h3 { font-size: 20px; }
  .faq-a { padding: 38px 20px 19px; }
  .faq-a p { font-size: 17px; }
  .sv-reviews { padding: 20px 20px 60px; }
  .rv-group { gap: 44px; margin-top: 47px; }
  .rv-group + .rv-group { margin-top: 60px; }
  .rv-logo-box { height: auto; }
  .sv-reviews .rv-cols { display: flex; gap: 20px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .sv-reviews .rv-col { display: contents; }
  .sv-reviews .rv-card { flex: 0 0 300px; scroll-snap-align: start; padding: 30px; }
  .rv-text p { font-size: 16px; }
}

/* ---------- Homepage + shared blocks: phone layout matched to live site ---------- */
@media (max-width: 809px) {
  .hero { padding-top: 30px; padding-bottom: 30px; }
  .hero .lead-form, .contact .lead-form { grid-template-columns: 1fr 1fr; }
  .hero .lead-form .field:nth-child(3), .hero .lead-form .field:nth-child(4) { grid-column: 1 / -1; }
  .rating-logos img { height: 122px; }
  .slider { height: 666px; }
  .slide { gap: 38px; }
  .slide blockquote { font-size: 22px; line-height: 1.4; }
  .slide .who { font-size: 16px; }
  .map { height: 280px; }
  .contact { padding-top: 40px; padding-bottom: 40px; gap: 30px; }
  .blog { padding-bottom: 60px; }
  .blog .intro { font-size: 14px; }
  .blog-img { height: 266px; }
  .blog-card h3 { margin-top: 24px; }
  .blog-card { padding-bottom: 68px; }
}

/* ---------- Inner pages: phone layout matched to live site ---------- */
@media (max-width: 809px) {
  .ptitle { padding: 40px 20px 60px; }
  .ptitle .h1 { margin-top: 0; }
  .ptitle .lead, .ptitle .lead-16 { margin-top: 21px; font-size: 14px; }
  .ptitle-actions, .ptitle .hero-actions { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 20px; }
  .ptitle-actions .btn, .ptitle .hero-actions .btn { width: auto; }
  .rv-spacer { height: 77px; }
  /* services overview */
  .so-grid-sec { padding: 20px 20px 50px; }
  .so-card { height: 418px; }
  .so-card img { height: 346px; }
  .so-card h3, .so-extra-card h3 { font-size: 20px; }
  .repeat .h2 { margin-top: 20px; }
  .repeat { gap: 51px; }
  /* project detail */
  .pd-hero { height: 320px; }
  .pd-hero .h1 { font-size: 28px; }
  .crumbs { font-size: 10px; }
  .pd-content { padding: 40px 20px; gap: 40px; }
  .pd-content .body { font-size: 14px; }
  .pd-specs > div { grid-template-columns: 175px minmax(0, 1fr); }
  .pd-specs dt { font-size: 18px; }
  .pd-specs dd { font-size: 17px; }
  .pd-img1 { padding: 30px 20px; }
  .pd-block { padding: 30px 20px; }
  .pd-block .acc { margin-top: 36px; }
  .pd-outcome .body { font-size: 14px; }
  .pd-gallery { padding: 10px 20px; gap: 20px; }
  .pd-others { padding: 50px 20px 40px; }
  .pd-others .proj-grid { margin-top: 40px; }
  .acc-head { padding: 20px; }
  .acc-item.open .acc-head { padding: 30px 30px 20px; }
  .acc-n { font-size: 12px; }
  .acc-t { font-size: 18px; }
  .acc-body { padding: 0 30px 30px; }
  .acc-body .body { font-size: 14px; }
  /* reviews page */
  .rv-page { padding: 20px 20px 0; }
  .rv-page .rv-logo { gap: 25px; }
  .rv-page .rv-group { gap: 35px; margin-top: 0; }
  .rv-page .rv-group + .rv-group { margin-top: 60px; }
  .rv-page .rv-cols { gap: 20px; }
  .rv-page .rv-card { padding: 30px; }
  /* contact */
  .ct-band { padding: 60px 20px 50px; }
  .ct-cols { gap: 20px; }
  .ct-cols h4 { font-size: 24px; }
  .ct-cols p { font-size: 14px; }
  .ct-cols a { font-size: 16px; }
  .ct-socials { margin-top: 60px; gap: 10px; padding-left: 0; }
  .ct-socials a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
  .ct-details { padding-bottom: 40px; }
  /* blog */
  .bl-sec { padding: 50px 20px; }
  .bl-sec .blog-card { padding-bottom: 67px; }
}
@media (max-width: 809px) { .bl-grid .blog-img { height: 266px; } }
@media (max-width: 809px) { .blog .blog-grid { margin-top: 20px; } .blog-grid .blog-card:last-child { padding-bottom: 0; } }
/* About: phone layout matched to live site */
@media (max-width: 809px) {
  .banner { height: 200px; }
  .vision4-in { padding: 60px 20px; }
  .vision4-grid { gap: 30px; margin-top: 30px; }
  .vision4-grid .eyebrow { font-size: 16px; }
  .vision4-grid h3 { font-size: 18px; margin-bottom: 20px; }
  .vision4-grid .body { font-size: 14px; }
  .mv-light .mv-art { order: 0; }
  .mv-dark .mv-art { height: 448px; }
  .mv-light .mv-art { height: 418px; }
  .mv-copy, .mv-copy.light { padding: 48px 20px 50px; }
  .mv-copy h3 { font-size: 18px; }
  .mv-copy p { font-size: 17px; }
  .howwork { padding: 40px 20px 40px; }
  .howwork .acc { margin-top: 30px; }
  .howwork > .body { font-size: 14px; }
}

/* =========================================================
   Homepage v2 (hx-) — new sections, built on the same type,
   colors and square-corner style as the rest of the site
   ========================================================= */
.hx-hero { align-items: center; }
.hx-hero .h1 { font-size: 56px; }
.hx-lead { font-size: 20px !important; margin-top: 14px !important; }
.hx-hero-img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.hx-call { margin-top: 18px; font: 400 17px/1.4 var(--f-inter); color: var(--ink); }
.hx-call a { font-weight: 700; border-bottom: 1px solid currentColor; }
.hx-offer { margin-top: 18px; padding: 12px 16px; background: rgba(163, 31, 26, 0.08); color: var(--red); font: 500 16px/1.4 var(--f-inter); }

.hx-proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-top: 10px; padding-bottom: 50px; }
.hx-proof > div { display: flex; flex-direction: column; gap: 4px; padding: 6px 24px; border-left: 1px solid var(--line); }
.hx-proof > div:first-child { border-left: 0; padding-left: 0; }
.hx-proof b { font: 500 20px/1.2 var(--f-dm); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); }
.hx-proof span { font: 400 15px/1.4 var(--f-inter); color: var(--ink-soft); }

.hx-proj-bottom { flex-direction: column; align-items: center; gap: 4px; height: 120px; }
.hx-proj-bottom p { font: 400 14px/1.3 var(--f-inter); color: rgba(248, 248, 245, 0.85); }

.hx-sec { padding-top: 80px; padding-bottom: 80px; }
.hx-sec .h2 { margin-top: 10px; }
.hx-narrow { max-width: 760px; }
.hx-p { margin-top: 16px; }
.hx-h3 { font: 500 26px/1.2 var(--f-dm); letter-spacing: 0.01em; color: var(--ink); }
.hx-label { font: 600 15px/1.2 var(--f-dg); letter-spacing: 0.05em; text-transform: uppercase; color: var(--red-bright); margin-top: 26px; }
.hx-label:first-child { margin-top: 0; }
.hx-note { margin-top: 20px; font: 400 14px/1.4 var(--f-inter); color: var(--ink-soft); }
.hx-center { display: flex; justify-content: center; margin-top: 40px; }
.hx-btn { margin-top: 28px; }

/* reviews */
.hx-badges { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 28px; }
.hx-badges span { display: flex; align-items: center; gap: 10px; font: 400 15px/1 var(--f-inter); color: var(--ink-soft); }
.hx-badges b { font: 700 18px/1 var(--f-inter); color: var(--ink); }
.hx-badges svg { height: 24px; }
.hx-b-google { width: 75px; } .hx-b-yelp { width: 62px; } .hx-b-tt { width: 118px; height: 17px !important; }
.hx-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.hx-quote { margin: 0; background: #fff; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; box-shadow: 0 0.8px 2.4px -0.6px rgba(0,0,0,.024), 0 2.4px 7.2px -1.2px rgba(0,0,0,.03), 0 6px 18px -1.9px rgba(0,0,0,.04); }
.hx-quote blockquote { margin: 0; font: 400 18px/1.5 var(--f-sat); letter-spacing: -0.01em; color: var(--ink); }
.hx-quote figcaption { font: 400 14px/1.5 var(--f-inter); color: var(--ink-soft); }
.hx-quote figcaption b { color: var(--ink); }
.hx-quote a { display: inline-flex; align-items: center; gap: 4px; color: var(--red); font-weight: 500; }
.hx-quote a svg { width: 13px; height: 13px; fill: currentColor; }
.hx-center .btn svg { width: 14px; height: 14px; }

/* meet */
.hx-meet { padding-top: 60px; padding-bottom: 80px; align-items: center; }
.hx-people { list-style: none; padding: 0 !important; margin-top: 24px !important; display: flex; flex-direction: column; gap: 14px; }
.hx-people li { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 3px solid var(--red); }
.hx-people b { font: 500 22px/1.2 var(--f-dm); letter-spacing: 0.02em; text-transform: uppercase; }
.hx-people span { font: 400 15px/1.4 var(--f-inter); color: var(--ink-soft); }

/* path tabs */
.hx-tabs { display: inline-flex; margin-top: 28px; box-shadow: inset 0 0 0 1px #222; }
.hx-tabs button { height: 44px; padding: 0 26px; border: 0; background: transparent; cursor: pointer; font: 600 15px/1 var(--f-dg); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); transition: background .2s, color .2s; }
.hx-tabs button.on { background: var(--ink); color: #fafafa; }
.hx-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; margin-top: 40px; }
.hx-panel[hidden] { display: none; }
.hx-panel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hx-panel .checks { margin-top: 24px; gap: 16px; }

/* middleman */
.hx-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.hx-card { background: #fff; padding: 30px; box-shadow: 0 0.8px 2.4px -0.6px rgba(0,0,0,.024), 0 2.4px 7.2px -1.2px rgba(0,0,0,.03), 0 6px 18px -1.9px rgba(0,0,0,.04); }
.hx-card summary { list-style: none; cursor: default; display: flex; flex-direction: column; gap: 14px; }
.hx-card summary::-webkit-details-marker { display: none; }
.hx-card h3 { font: 500 20px/1.2 var(--f-sat); letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); }
.hx-card p { margin-top: 14px; font: 400 16px/1.5 var(--f-inter); color: var(--ink-soft); }
.hx-n { font: 500 34px/1 var(--f-dm); color: var(--red); }
.hx-solution { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; margin-top: 50px; padding: 50px; background: #fff; }
.hx-solution .checks { margin-top: 18px; gap: 12px; }
.hx-solution .checks svg { width: 24px; height: 24px; }

/* pricing */
.hx-price { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 60px; margin-top: 40px; align-items: start; }
.hx-price-main { background: var(--ink); color: #fafafa; padding: 40px; }
.hx-price-main .body { color: rgba(250, 250, 250, 0.85); }
.hx-big { font: 500 56px/1 var(--f-dm); letter-spacing: 0.01em; }
.hx-per { font: 600 16px/1.2 var(--f-dg); letter-spacing: 0.05em; text-transform: uppercase; color: rgba(250,250,250,.7); margin-top: 8px; }
.hx-example { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(250,250,250,.2); font: 400 16px/1.5 var(--f-inter); color: rgba(250,250,250,.85); }
.hx-example b { color: #fff; }
.hx-price-side .body { margin-top: 8px; }
.hx-pay { margin-top: 50px; }
.hx-pay ol { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: pay; }
.hx-pay li { padding-top: 16px; border-top: 2px solid var(--ink); display: flex; flex-direction: column; gap: 6px; }
.hx-pay li b { font: 500 22px/1.2 var(--f-dm); text-transform: uppercase; letter-spacing: 0.02em; }
.hx-pay li span { font: 400 15px/1.45 var(--f-inter); color: var(--ink-soft); }

/* process + faq spacing */
.hx-process { padding-bottom: 60px; }
.hx-process .acc-t { font-size: 22px; }
.hx-faq .sv-sticky .lead { margin-top: 18px; }

/* final form */
.hx-final { padding-top: 80px; padding-bottom: 100px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 80px; align-items: start; }
.hx-final .h2 { margin-top: 10px; }
.hx-form { margin-top: 0; }
.hx-stepno { font: 600 14px/1 var(--f-dg); letter-spacing: 0.08em; text-transform: uppercase; color: var(--red-bright); }
.hx-step { border: 0; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 14px; }
.hx-step[hidden] { display: none; }
.hx-q { font: 500 26px/1.2 var(--f-dm); color: var(--ink); padding: 0; margin-bottom: 6px; }
.hx-sub { font: 400 14px/1.4 var(--f-inter); color: var(--ink-soft); }
.hx-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hx-choices[hidden] { display: none; }
.hx-choice { position: relative; cursor: pointer; }
.hx-choice input { position: absolute; opacity: 0; pointer-events: none; }
.hx-choice span { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 8px 12px; text-align: center; background: var(--field); font: 500 16px/1.3 var(--f-inter); color: var(--ink); transition: background .15s, color .15s; }
.hx-choice:hover span { box-shadow: inset 0 0 0 1px var(--ink); }
.hx-choice input:checked + span { background: var(--ink); color: #fafafa; }
.hx-choice input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.hx-sel { display: flex; flex-direction: column; gap: 6px; font: 400 14px/1.4 var(--f-inter); color: var(--ink-soft); }
.hx-sel select { height: 50px; border: 0; background: var(--field); padding: 0 12px; font: 400 16px/1.4 var(--f-inter); color: var(--ink); }
.hx-err { margin-top: 12px; font: 500 14px/1.4 var(--f-inter); color: var(--red-bright); }
.hx-nav { display: flex; gap: 10px; margin-top: 22px; }
.hx-nav .btn { height: 48px; flex: 1; font-size: 15px; }
.hx-nav .hx-back { flex: 0 0 auto; padding: 0 22px; }

/* sticky phone bar */
.hx-sticky { display: none; }

@media (max-width: 1199px) {
  .hx-hero .h1 { font-size: 46px; }
  .hx-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .hx-proof > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .hx-quotes, .hx-cards3 { grid-template-columns: 1fr; }
  .hx-price { grid-template-columns: 1fr; gap: 40px; }
  .hx-pay ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-final { grid-template-columns: 1fr; gap: 40px; }
  .hx-solution { grid-template-columns: 1fr; gap: 40px; padding: 40px; }
}
@media (max-width: 809px) {
  .hx-hero .h1 { font-size: 34px; }
  .hx-lead { font-size: 17px !important; }
  .hx-hero { gap: 30px; }
  .hx-call { font-size: 16px; }
  .hx-proof { grid-template-columns: 1fr 1fr; padding-bottom: 30px; }
  .hx-proof b { font-size: 16px; }
  .hx-proof span { font-size: 13px; }
  .hx-proof > div { padding: 4px 12px; }
  .hx-sec { padding-top: 40px; padding-bottom: 40px; }
  .hx-h3 { font-size: 21px; }
  .hx-quote { padding: 24px 20px; }
  .hx-quote blockquote { font-size: 17px; }
  .hx-tabs { display: flex; }
  .hx-tabs button { flex: 1; padding: 0 10px; }
  .hx-panel { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  .hx-card { padding: 20px; }
  .hx-card summary { cursor: pointer; flex-direction: row; align-items: center; gap: 12px; }
  .hx-n { font-size: 24px; }
  .hx-card h3 { font-size: 17px; }
  .hx-solution { padding: 24px 20px; }
  .hx-big { font-size: 42px; }
  .hx-price-main { padding: 28px 22px; }
  .hx-pay ol { grid-template-columns: 1fr; }
  .hx-process { padding: 40px 20px; }
  .hx-final { padding-top: 40px; padding-bottom: 60px; }
  .hx-q { font-size: 21px; }
  .hx-sticky { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 48; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--page); box-shadow: 0 -6px 18px rgba(0,0,0,.08); }
  .hx-sticky .btn { height: 46px; font-size: 14px; }
  .hx-sticky .btn-outline { flex: 0 0 auto; padding: 0 18px; }
  .hx-sticky .btn-red { flex: 1; }
  .hx-sticky svg { width: 16px; height: 16px; }
  .page-home .footer { padding-bottom: 70px; }
}
.hx-next-steps { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.hx-next-steps li { display: flex; gap: 16px; align-items: baseline; font: 400 18px/1.45 var(--f-inter); }
.hx-next-steps b { font: 500 22px/1 var(--f-dm); color: var(--red); flex: none; }
.hx-nav [hidden], .hx-final [hidden] { display: none !important; }
@media (max-width: 809px) {
  .hx-card summary::after { content: "+"; margin-left: auto; font: 400 26px/1 var(--f-inter); color: var(--ink); }
  .hx-card[open] summary::after { content: "–"; }
}

/* ---- Homepage v2, round 2 (judges + Clarity data) ---- */
.nav-cta-m { display: none; }
.hx-mproof { display: none; }
.hx-quick { padding-top: 10px; padding-bottom: 60px; }
.hx-quick .hx-q { margin-bottom: 14px; }
.hx-quick-row { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 900px; }
.hx-quick .hx-sub { margin-top: 12px; }
.hx-choice-btn { min-height: 54px; padding: 8px 12px; border: 0; background: var(--field); cursor: pointer; font: 500 16px/1.3 var(--f-inter); color: var(--ink); transition: background .15s, color .15s; }
@media (hover: hover) { .hx-choice-btn:hover { background: var(--ink); color: #fafafa; } }
.hx-choice-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.hx-own { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.hx-own legend { padding: 0; margin-bottom: 8px; }
.hx-sel .field { height: 50px; }
.hx-meet .video-play { left: 28px; top: auto; bottom: 20px; width: 72px; height: 72px; transform: none; }
.hx-sticky.off { transform: translateY(120%); }
.hx-sticky { transition: transform .25s ease; }
.hx-final .card-form { scroll-margin-top: 100px; }
#check { scroll-margin-top: 80px; }

@media (max-width: 1199px) {
  .hx-quick-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809px) {
  .nav-cta-d { display: none; }
  .nav-cta-m { display: inline; }
  .hx-hero { padding-top: 24px; }
  .hx-hero .hero-actions .btn-outline, .hx-hero .hx-call { display: none; }
  .hx-hero-img { aspect-ratio: 16 / 10; }
  .hx-mproof { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; list-style: none; padding: 0; margin: 18px 0 0; }
  .hx-mproof li { font: 400 15px/1.35 var(--f-inter); color: var(--ink); padding-left: 10px; border-left: 2px solid var(--red); }
  .hx-mproof b { font-weight: 700; }
  .hx-proof { display: none; }
  .hx-quick { padding-top: 0; padding-bottom: 30px; }
  .hx-dt { display: none; }
  .page-home .body, .page-home .lead, .page-home .checks p, .page-home .hx-card p, .page-home .hx-pay li span, .page-home .faq-a p { font-size: 17px; color: var(--ink); }
  .page-home .hx-note, .page-home .hx-sub { font-size: 15px; }
  .hx-meet .video-play { left: 14px; bottom: 12px; width: 56px; height: 56px; }
}
@media (max-width: 809px) {
  .page-home .nav-cta { display: none; }
  .hx-hero-img { object-position: center 40%; }
}
.hx-hero-img { height: auto; }

/* ---- Homepage v2, round 3 ---- */
.nav-phone { display: flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 22px; font: 600 16px/1 var(--f-inter); color: var(--ink); white-space: nowrap; }
.nav-phone svg { width: 18px; height: 18px; fill: currentColor; }
.hx-mquick { display: none; }
.hx-more summary { list-style: none; cursor: default; }
.hx-more summary::-webkit-details-marker { display: none; }
.hx-more .body { margin-top: 8px; }
.hx-more + .hx-more { margin-top: 26px; }
.hx-quote blockquote, .page-home .faq-a p { font-weight: 500; }
@media (max-width: 1199px) { .nav-phone span { display: none; } }
@media (max-width: 809px) {
  .nav-phone { margin-right: 6px; padding: 10px; }
  .nav-phone svg { width: 22px; height: 22px; }
  .page-home .hx-hero .hero-actions { display: none; }
  .hx-mquick { display: block; margin-top: 22px; }
  .hx-mquick .hx-q { font-size: 20px; margin-bottom: 10px; }
  .hx-mquick .hx-sub { margin-top: 10px; }
  .hx-quick { display: none; }
  .page-home .hx-price-main .body { color: rgba(250, 250, 250, 0.85); }
  .page-home .hx-note, .page-home .hx-sub { font-size: 17px; }
  .hx-more summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
  .hx-more summary::after { content: "+"; font: 400 24px/1 var(--f-inter); color: var(--ink); }
  .hx-more[open] summary::after { content: "–"; }
  .hx-more + .hx-more { margin-top: 0; }
}
.nav-links { margin: 0 auto; }
.nav-phone { margin-left: 0; }
@media (max-width: 809px) { .nav-phone { margin-left: auto; } }

/* ---- Homepage v2, round 4 ---- */
.hx-choice-btn { background: #fff; box-shadow: inset 0 0 0 1px var(--ink); display: flex; align-items: center; justify-content: center; gap: 8px; }
.hx-choice-btn svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.hx-choice-btn:active { box-shadow: inset 0 0 0 2px var(--red); }
.hx-quick .hx-sub { font-size: 17px; }
.hx-lock { margin-top: 14px !important; padding-top: 0 !important; border-top: 0 !important; }
.hx-mcall { display: none; }
#hx-slot.on { margin-top: 18px; }
#hx-slot .card-form { padding: 22px 16px; }
.page-home .footer-rule { display: none; }
.page-home .footer-inner { padding-top: 40px; }
.page-home .footer { margin-top: 0; }
.hx-final { padding-bottom: 60px; }
@media (max-width: 809px) {
  .nav-phone { padding: 11px; }
  .hx-mcall { display: block; margin-top: 14px; font: 400 17px/1.4 var(--f-inter); color: var(--ink); }
  .hx-mcall a { font-weight: 700; border-bottom: 1px solid currentColor; }
  .hx-btn { width: 100%; }
  .hx-final { padding-bottom: 40px; }
}

/* form step-1 tiles match the hero tiles */
.hx-choice span { background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
.hx-choice input:checked + span { background: var(--ink); color: #fafafa; }

.hx-quick-row { max-width: none; }

/* ---- Working with us (replaces Meet section) ---- */
.hx-work-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 60px; margin-top: 40px; align-items: start; }
.hx-work-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.hx-work-list li { display: flex; flex-direction: column; gap: 6px; padding: 20px 0 20px 18px; border-left: 3px solid var(--red); }
.hx-work-list li + li { margin-top: 14px; }
.hx-work-list b { font: 500 22px/1.2 var(--f-dm); letter-spacing: 0.01em; color: var(--ink); }
.hx-work-list span { font: 400 16px/1.5 var(--f-inter); color: var(--ink-soft); }
.hx-hub { margin: 0; background: #fff; padding: 26px; box-shadow: 0 0.8px 2.4px -0.6px rgba(0,0,0,.024), 0 2.4px 7.2px -1.2px rgba(0,0,0,.03), 0 6px 18px -1.9px rgba(0,0,0,.04), 0 10px 25px -1px rgba(0,0,0,.05); }
.hx-hub-top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.hx-hub-top span { font: 600 16px/1 var(--f-dg); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.hx-hub-top small { font: 400 13px/1 var(--f-inter); color: var(--ink-soft); }
.hx-hub-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.hx-hub-row svg { width: 20px; height: 20px; fill: var(--red); }
.hx-hub-row b { font: 500 16px/1.2 var(--f-inter); color: var(--ink); }
.hx-hub-row em { font: 400 13px/1.2 var(--f-inter); font-style: normal; color: var(--ink-soft); }
.hx-hub-pay { padding-top: 16px; }
.hx-hub-h { font: 600 14px/1 var(--f-dg); letter-spacing: 0.08em; text-transform: uppercase; color: var(--red-bright); }
.hx-hub-pay ul { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.hx-hub-pay li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; background: var(--page); font: 400 15px/1.3 var(--f-inter); color: var(--ink); }
.hx-hub-pay li i { font-style: normal; font-weight: 500; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.hx-hub-pay li.done i { color: #2d6a3e; }
.hx-hub-pay li.next { box-shadow: inset 3px 0 0 var(--red); }
.hx-hub-pay li.next i { color: var(--red); }
.hx-hub figcaption { margin-top: 14px; font: 400 13px/1.4 var(--f-inter); color: var(--ink-soft); }
@media (max-width: 1199px) { .hx-work-grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 809px) {
  .hx-work-list b { font-size: 19px; }
  .page-home .hx-work-list span { font-size: 17px; color: var(--ink); }
  .hx-hub { padding: 18px; }
}

/* ---- Round 6: image slots, finishes, 3 tabs ---- */
.hx-quick-img { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hx-tile { padding: 0; border: 0; background: #fff; cursor: pointer; text-align: left; box-shadow: inset 0 0 0 1px var(--ink); display: flex; flex-direction: column; overflow: hidden; }
.hx-tile img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; transition: transform .5s ease; }
.hx-tile span { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; font: 500 17px/1.2 var(--f-inter); color: var(--ink); }
.hx-tile svg { width: 16px; height: 16px; fill: currentColor; }
@media (hover: hover) { .hx-tile:hover img { transform: scale(1.04); } .hx-tile:hover span { background: var(--ink); color: #fafafa; } }
.hx-tile:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.hx-finish { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 14px 0 26px; }
.hx-finish figure { margin: 0; background: #fff; }
.hx-finish img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.hx-finish figcaption { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.hx-finish b { font: 500 19px/1.2 var(--f-dm); color: var(--ink); }
.hx-finish span { font: 400 15px/1.45 var(--f-inter); color: var(--ink-soft); }
.hx-solution-img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; margin-bottom: 22px; }
.hx-stepimgs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.hx-stepimgs figure { margin: 0; }
.hx-stepimgs img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.hx-stepimgs figcaption { margin-top: 8px; font: 600 14px/1.2 var(--f-dg); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.hx-final-img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; margin-top: 30px; }
@media (max-width: 1199px) { .hx-quick-img { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hx-stepimgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809px) {
  .hx-finish { grid-template-columns: 1fr; }
  .page-home .hx-finish span { font-size: 17px; color: var(--ink); }
  .hx-tabs button { font-size: 13px; padding: 0 6px; }
  .hx-stepimgs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-right: calc(var(--pad-x) * -1); padding-right: var(--pad-x); }
  .hx-stepimgs figure { flex: 0 0 72%; scroll-snap-align: start; }
  .hx-final-img { display: none; }
}
@media (max-width: 809px) { .hx-tabs button { line-height: 1.1; white-space: normal; } }
@media (max-width: 809px) {
  .hx-finish { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hx-finish img { aspect-ratio: 4 / 3; }
  .hx-finish figcaption { padding: 10px 10px 12px; }
  .hx-finish b { font-size: 16px; }
  .page-home .hx-finish span { font-size: 15px; }
  .hx-solution-img, .hx-stepimgs { display: none; }
}
/* footer without the CTA band (every page ends with the lot-check form) */
.footer-rule { display: none; }
.footer-inner { padding-top: 40px; }
.footer { margin-top: 0; }
/* shared partials */
.hx-choice-wide { grid-column: 1 / -1; }
@media (max-width: 809px) { .hx-proof.hx-proof-inline { display: grid; grid-template-columns: 1fr 1fr; row-gap: 14px; } .page-home .hx-proof { display: none; } }
@media (min-width: 810px) { .hx-sticky { display: none !important; } }
@media (max-width: 809px) { .footer { padding-bottom: 70px; } }

/* ADU model cards (partials/model_card.html): homepage, ADU pages, /adu-models */
.md-sec .projects-head .lead { margin-top: 12px; }
.md-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.md-card { display: flex; flex-direction: column; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; }
.md-card:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.md-card:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 2px; }
.md-img { display: block; overflow: hidden; background: var(--off); }
.md-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s ease; }
.md-card:hover .md-img img { transform: scale(1.03); }
.md-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; flex: 1; }
.md-name { font: 500 22px/1.15 var(--f-dm); letter-spacing: 0.01em; text-transform: uppercase; }
.md-spec { font: 600 15px/1.2 var(--f-dg); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.md-cost { margin-top: 4px; font: 400 15px/1.4 var(--f-inter); color: var(--ink-soft); }
.md-cost b { font-weight: 600; color: var(--ink); }
.md-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; font: 600 15px/1 var(--f-dg); letter-spacing: 0.05em; text-transform: uppercase; color: var(--red-bright); }
.md-go svg { width: 14px; height: 14px; fill: currentColor; }
.md-note { margin-top: 16px; font: 400 14px/1.4 var(--f-inter); color: var(--ink-soft); }
@media (max-width: 1199px) { .md-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809px) {
  .md-row { display: flex; gap: 14px; margin: 26px -20px 0; padding: 0 20px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; }
  .md-row::-webkit-scrollbar { display: none; }
  .md-row .md-card { flex: 0 0 80%; scroll-snap-align: start; }
  .md-row.md-row-grid { display: grid; grid-template-columns: 1fr; margin: 26px 0 0; padding: 0; overflow: visible; }
  .md-sec .projects-head { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* Job-site reels (partials/videos_section.html) */
.vd-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; max-width: 1000px; }
.vd-card { margin: 0; }
.vd-frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #111; }
.vd-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.vd-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%); cursor: pointer; }
.vd-play svg { width: 64px; height: 64px; padding: 18px 16px 18px 20px; border-radius: 50%; background: var(--red-bright); fill: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.3); transition: transform .2s; }
.vd-play:hover svg, .vd-play:focus-visible svg { transform: scale(1.08); }
.vd-play:focus-visible { outline: 2px solid var(--red-bright); outline-offset: -4px; }
.vd-play span { position: absolute; right: 12px; bottom: 12px; padding: 4px 8px; background: rgba(0,0,0,.6); color: #fff; font: 600 13px/1 var(--f-inter); }
.vd-card.playing .vd-play { display: none; }
.vd-card figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.vd-card figcaption b { font: 500 20px/1.2 var(--f-dm); text-transform: uppercase; color: var(--ink); }
.vd-card figcaption span { font: 400 15px/1.45 var(--f-inter); color: var(--ink-soft); }
@media (max-width: 809px) {
  .vd-row { display: flex; gap: 14px; margin: 26px -20px 0; padding: 0 20px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; }
  .vd-row::-webkit-scrollbar { display: none; }
  .vd-card { flex: 0 0 min(68%, 280px); scroll-snap-align: start; }
}