/* ═══════════════════════════════════════════════════════════
   Impression Painting LLC — style.css
   Brand: sky blue #29ABE2 · red #E02428 · ink #10151B · white
   ═══════════════════════════════════════════════════════════ */
:root {
  --blue:       #29ABE2;
  --blue-deep:  #1483B8;
  --blue-ink:   #0C3D55;
  --red:        #E02428;
  --red-deep:   #B0181C;
  --ink:        #10151B;
  --ink-soft:   #3C4855;
  --paper:      #FFFFFF;
  --mist:       #F2F7FA;
  --line:       #DFE9EF;
  --gold:       #F5B301;
  --radius:     20px;
  --shadow:     0 18px 44px -18px rgba(12, 61, 85, .28);
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* overflow-x:hidden here would silently kill position:sticky — use clip */
html, body { overflow-x: clip; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, .display { font-family: var(--font-display); line-height: 1.08; }

.wrap { width: min(1180px, 92vw); margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font: 700 1rem/1 var(--font-display);
  padding: 1rem 1.7rem; border-radius: 999px;
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--red {
  background: var(--red); color: #fff;
  box-shadow: 0 14px 30px -12px rgba(224, 36, 40, .55);
}
.btn--red:hover { background: var(--red-deep); }
.btn--blue {
  background: var(--blue); color: #fff;
  box-shadow: 0 14px 30px -12px rgba(41, 171, 226, .55);
}
.btn--blue:hover { background: var(--blue-deep); }
.btn--ghost {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1.5px solid rgba(255,255,255,.55); backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(255,255,255,.22); }
.btn--big { padding: 1.2rem 2.2rem; font-size: 1.1rem; }

/* ---------- loader ---------- */
#loader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--ink);
  display: grid; place-items: center;
  transition: opacity .6s ease, visibility .6s ease;
}
#loader.done { opacity: 0; visibility: hidden; }
.loader__inner { text-align: center; color: #fff; }
.loader__logo { font: 800 clamp(1.6rem, 4vw, 2.4rem)/1.1 var(--font-display); letter-spacing: .04em; }
.loader__logo span { color: var(--blue); }
.loader__track {
  width: min(300px, 70vw); height: 6px; border-radius: 3px;
  background: rgba(255,255,255,.15); margin: 1.2rem auto 0; overflow: hidden;
}
#loaderBar {
  display: block; width: 0%; height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--red));
  border-radius: 3px; transition: width .25s ease;
}
.loader__hint { margin-top: .8rem; font-size: .85rem; color: rgba(255,255,255,.55); }

/* ---------- nav ---------- */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .3s ease, box-shadow .3s ease;
}
#nav .nav__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 0;
}
#nav.scrolled { background: rgba(255,255,255,.92); backdrop-filter: blur(12px); box-shadow: 0 6px 24px -14px rgba(12,61,85,.35); }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
/* real-logo chip: white pill so the black roof/outline art survives dark backgrounds */
.brand--img {
  background: #fff; border-radius: 12px; padding: .3rem .65rem;
  border: 1px solid rgba(16,21,27,.08);
  box-shadow: 0 6px 18px -10px rgba(16,21,27,.45);
}
.brand--img img { height: 42px; width: auto; display: block; }
@media (max-width: 480px) { .brand--img img { height: 34px; } }
.brand__mark {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--blue) 55%, var(--red) 55%);
  display: grid; place-items: center; color: #fff; font: 800 1.15rem/1 var(--font-display);
}
.brand__name { font: 800 1.12rem/1.05 var(--font-display); letter-spacing: .02em; color: #fff; transition: color .3s ease; }
.brand__name small { display: block; font: 700 .62rem/1.4 var(--font-body); letter-spacing: .34em; color: var(--blue); }
#nav.scrolled .brand__name, #nav.open .brand__name { color: var(--ink); }
.nav__links { display: flex; align-items: center; gap: 1.6rem; list-style: none; }
.nav__links a {
  text-decoration: none; font: 600 .95rem/1 var(--font-body);
  color: #fff; opacity: .92; transition: color .3s ease, opacity .2s ease;
}
#nav.scrolled .nav__links a, #nav.open .nav__links a { color: var(--ink); }
.nav__links a:hover { opacity: 1; color: var(--blue); }
.nav__phone { display: inline-flex; }
#burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; border-radius: 10px;
}
#burger span {
  display: block; width: 22px; height: 2.5px; margin: 4.5px auto; border-radius: 2px;
  background: #fff; transition: background .3s ease, transform .3s ease, opacity .3s ease;
}
#nav.scrolled #burger span, #nav.open #burger span { background: var(--ink); }
#nav.open #burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav.open #burger span:nth-child(2) { opacity: 0; }
#nav.open #burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: #fff; box-shadow: 0 24px 40px -20px rgba(12,61,85,.35);
    max-height: 0; overflow: hidden; transition: max-height .35s ease;
  }
  #nav.open .nav__links { max-height: 420px; }
  .nav__links li { width: 100%; border-top: 1px solid var(--line); }
  .nav__links a { display: block; padding: 1rem 4vw; width: 100%; }
  /* `.nav__links li { width:100% }` above pins the row to the full drawer width, so a
     side *margin* here pushed the call button 16px past the right edge and it got
     clipped. Use padding (border-box) and let the button fill the row instead. */
  .nav__links .nav__phone { margin: 0; padding: .8rem 4vw 1.1rem; display: block; }
  .nav__links .nav__phone .btn { width: 100%; padding-inline: 1rem; }
  #nav.open { background: #fff; }
  #burger { display: block; }
}

/* ---------- hero scrub ---------- */
.scrub { position: relative; }
.scrub--hero { height: 620vh; background: var(--ink); }
.scrub__pin {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden;
}
.scrub__canvas, .scrub__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.scrub__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16,21,27,.55) 0%, rgba(16,21,27,0) 26%),
    linear-gradient(0deg, rgba(16,21,27,.6) 0%, rgba(16,21,27,0) 30%);
}
.scrub__rail {
  position: absolute; right: max(2.5vw, 18px); top: 50%; transform: translateY(-50%);
  width: 3px; height: 34vh; border-radius: 2px;
  background: rgba(255,255,255,.22); overflow: hidden;
}
.scrub__rail i {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(180deg, var(--blue), var(--red));
  transform-origin: top; transform: scaleY(0);
}

/* staged overlays */
.stage {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 0 6vw; text-align: center; pointer-events: none;
  opacity: 0; transform: translateY(26px) scale(.985);
  transition: opacity .5s ease, transform .5s ease;
}
.stage.on { opacity: 1; transform: none; }
.stage.on .stage__cta { pointer-events: auto; }

/* ---------- frosted-glass plate behind the hero copy ----------
   Readability here comes from blurring the frame behind the text, not from tinting
   it: the fill is a near-neutral white at 6-9% so the image underneath keeps its
   brightness and colour. The bright rim + inset highlight give it the glass edge. */
.scrub--hero .stage > div {
  padding: clamp(1.35rem, 4.2vw, 2.1rem) clamp(1.3rem, 4.5vw, 2.4rem);
  border-radius: 26px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow:
    0 24px 60px -32px rgba(8, 12, 18, .5),
    inset 0 1px 0 rgba(255, 255, 255, .28);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .scrub--hero .stage > div {
    /* with a real blur the plate can be even more transparent.
       Radius kept at 14px on purpose: this blur re-runs every frame because the canvas
       behind it repaints as you scrub, and cost scales with radius. 14 reads the same
       as 18 here but leaves more headroom on older phones. */
    background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
  }
}
/* the kicker's own dark pill fights the glass — make it read as a rim-lit chip */
.scrub--hero .stage__kicker {
  background: rgba(10, 16, 22, .38);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #7FD2F5;
}
/* The plate stays transparent, so the accent has to survive both the grey opening
   frame and the bright sunlit one at the end. Brand blue (#29ABE2) goes muddy against
   the warm final frame — a lighter tint of the same hue holds on both, and a tighter
   shadow under the headline adds edge definition without dimming the photo. */
.scrub--hero .stage h1 em,
.scrub--hero .stage .stage__title em { color: #7FD2F5; }
.scrub--hero .stage h1,
.scrub--hero .stage .stage__title {
  text-shadow: 0 2px 10px rgba(8, 12, 18, .55), 0 4px 34px rgba(16, 21, 27, .5);
}
.scrub--hero .stage p { text-shadow: 0 1px 8px rgba(8, 12, 18, .6); }
.stage__kicker {
  display: inline-block; font: 700 .8rem/1 var(--font-body);
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--blue); background: rgba(16,21,27,.55);
  padding: .55rem 1rem; border-radius: 999px; margin-bottom: 1.1rem;
  backdrop-filter: blur(4px);
}
.stage h1, .stage .stage__title {
  font: 800 clamp(2.3rem, 6.4vw, 4.6rem)/1.05 var(--font-display);
  color: #fff; text-shadow: 0 4px 34px rgba(16,21,27,.65); text-wrap: balance;
}
.stage h1 em, .stage .stage__title em { font-style: normal; color: var(--blue); }
.stage h1 .em-red, .stage .stage__title .em-red { color: #FF5A5E; }
.stage p {
  max-width: 560px; margin: 1.1rem auto 0;
  font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(255,255,255,.92);
  text-shadow: 0 2px 18px rgba(16,21,27,.75);
}
.stage__cta { margin-top: 1.6rem; display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.stage--side { place-items: center start; text-align: left; }
.stage--side > div { max-width: 520px; }
.stage--side p { margin-inline: 0; }

/* Portrait: scrub.js parks the house band in the upper third of the canvas so the
   whole house stays visible, so the copy has to live underneath it rather than
   centred on top of it. */
@media (orientation: portrait) {
  .scrub--hero .stage { align-items: end; padding-bottom: 17vh; }
  .scrub--hero .stage--side { align-items: end; justify-items: center; text-align: center; }
  .scrub--hero .stage--side > div { max-width: none; }
  .scrub--hero .stage--side p { margin-inline: auto; }
  .stage__kicker { letter-spacing: .18em; font-size: .68rem; padding: .5rem .8rem; }
  .stage h1, .stage .stage__title { font-size: clamp(2rem, 8.5vw, 3rem); }
  .stage p { font-size: clamp(.95rem, 4vw, 1.1rem); }
}

.scroll-cue {
  position: absolute; left: 50%; bottom: 4.5vh; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: rgba(255,255,255,.85); font: 600 .78rem/1 var(--font-body);
  letter-spacing: .26em; text-transform: uppercase;
  opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
.stage.on ~ .scroll-cue, .scroll-cue.on { opacity: 1; }
.scroll-cue i {
  width: 24px; height: 38px; border: 2px solid rgba(255,255,255,.7); border-radius: 14px;
  position: relative;
}
.scroll-cue i::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px;
  border-radius: 2px; background: var(--blue); transform: translateX(-50%);
  animation: cue 1.6s ease-in-out infinite;
}
@keyframes cue { 0%,100% { transform: translate(-50%, 0); opacity: 1; } 55% { transform: translate(-50%, 12px); opacity: .2; } }

/* ---------- trust bar ---------- */
.trust { background: var(--ink); color: #fff; padding: 1.4rem 0; position: relative; z-index: 5; }
.trust .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; align-items: center; justify-content: center; }
.trust span { display: inline-flex; align-items: center; gap: .55rem; font: 600 .92rem/1.3 var(--font-body); color: rgba(255,255,255,.9); }
.trust svg { color: var(--blue); flex: none; }

/* ---------- sections ---------- */
section { position: relative; }
.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section--mist { background: var(--mist); }
.section--ink { background: var(--ink); color: #fff; }
.kicker {
  display: inline-block; font: 700 .8rem/1 var(--font-body);
  letter-spacing: .3em; text-transform: uppercase; color: var(--red);
  margin-bottom: 1rem;
}
.section--ink .kicker { color: var(--blue); }
.h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 800; text-wrap: balance; }
.h2 em { font-style: normal; color: var(--blue); }
.lead { max-width: 640px; margin-top: 1rem; font-size: 1.08rem; color: var(--ink-soft); }
.section--ink .lead { color: rgba(255,255,255,.78); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }

/* ---------- services ---------- */
.services__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.4rem; margin-top: 3rem;
}
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.9rem 1.7rem; box-shadow: 0 10px 30px -22px rgba(12,61,85,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card__icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(41,171,226,.16), rgba(41,171,226,.05));
  color: var(--blue-deep); margin-bottom: 1.15rem;
}
.card:nth-child(3n) .card__icon { background: linear-gradient(135deg, rgba(224,36,40,.13), rgba(224,36,40,.04)); color: var(--red); }
.card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: .45rem; }
.card p { color: var(--ink-soft); font-size: .96rem; }

/* ---------- before / after ---------- */
.ba {
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); margin-top: 3rem; aspect-ratio: 16 / 9;
  user-select: none;
}
.ba--43 { aspect-ratio: 4 / 3; }
.ba-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.2rem;
}
.ba-grid .ba { margin-top: 0; }
.ba-grid .ba__knob::after { font-size: .65rem; padding: .4rem .6rem; }
@media (max-width: 900px) { .ba-grid { grid-template-columns: 1fr; } }
.ba__title {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2; pointer-events: none;
  font: 700 .78rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(16,21,27,.62); backdrop-filter: blur(5px);
  padding: .5rem .85rem; border-radius: 999px;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 50%); }
.ba__range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; z-index: 3;
}
.ba__knob {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px;
  background: #fff; z-index: 2; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(16,21,27,.15);
}
.ba__knob::after {
  content: "◂ ▸"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff; color: var(--ink); font-size: .8rem; letter-spacing: .1em;
  padding: .55rem .8rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 8px 22px -8px rgba(16,21,27,.5);
}
.ba__tag {
  position: absolute; top: 1rem; z-index: 2; pointer-events: none;
  font: 700 .74rem/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase;
  color: #fff; background: rgba(16,21,27,.6); backdrop-filter: blur(4px);
  padding: .5rem .85rem; border-radius: 999px;
}
.ba__tag--before { left: 1rem; }
.ba__tag--after { right: 1rem; }

/* ---------- process band (full-bleed) ----------
   Full-bleed via the 100vw + negative-margin trick; safe here because html/body use
   overflow-x: clip (not hidden, which would also kill position:sticky in the hero). */
.process-band {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  padding: clamp(4rem, 9vw, 7rem) 0;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.process-band__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center right; z-index: -2;
}
/* scrim: heavier on the left where the copy sits, so the house on the right stays visible */
.process-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(8,12,18,.92) 0%, rgba(8,12,18,.78) 45%, rgba(8,12,18,.55) 100%),
    /* the fourth step lands over the house itself, where the side gradient is
       lightest — this floor keeps all four columns equally readable */
    linear-gradient(0deg, rgba(8,12,18,.9) 0%, rgba(8,12,18,.6) 38%, rgba(8,12,18,0) 62%);
}
.process-band .kicker { color: var(--blue); }
.process-band .h2 { color: #fff; }
.process-band .lead { color: rgba(255,255,255,.8); }

/* four-step flow */
.flow {
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
  position: relative;
}
/* connecting rule behind the numbers, desktop only */
.flow::before {
  content: ""; position: absolute; left: 0; right: 0; top: 26px; height: 2px;
  background: linear-gradient(90deg, var(--blue), rgba(255,255,255,.25) 55%, var(--red));
  opacity: .5;
}
.flow__step { position: relative; }
.flow__num {
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font: 800 1.25rem/1 var(--font-display);
  box-shadow: 0 0 0 6px rgba(8,12,18,.85);
  margin-bottom: 1.1rem;
}
.flow__step:nth-child(2) .flow__num { background: #1F9BD1; }
.flow__step:nth-child(3) .flow__num { background: #C4443F; }
.flow__step:nth-child(4) .flow__num { background: var(--red); }
.flow__step h3 { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: .4rem; }
.flow__step p { color: rgba(255,255,255,.75); font-size: .95rem; }

@media (max-width: 1040px) {
  .flow { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.4rem; }
  .flow::before { display: none; }
}
/* Mobile: stop hiding the house behind a heavy scrim — show it as a real image band
   at the top, then run the steps underneath on solid ink. */
@media (max-width: 820px) {
  .process-band { padding: 0 0 clamp(3rem, 9vw, 4rem); }
  .process-band__img {
    position: static; height: auto; aspect-ratio: 16 / 9;
    object-position: center; z-index: 0; display: block;
  }
  .process-band::before { display: none; }
  .process-band__inner { padding-top: clamp(2.2rem, 7vw, 3rem); }
  .flow { grid-template-columns: 1fr; gap: 1.8rem; margin-top: 2.2rem; }
  .flow__step { display: grid; grid-template-columns: 54px 1fr; column-gap: 1.1rem; align-items: start; }
  /* the badge must span both rows, otherwise it forces row 1 to 54px and drops a gap
     between each heading and its paragraph */
  .flow__num { margin-bottom: 0; box-shadow: none; grid-row: 1 / span 2; }
  .flow__step h3 { grid-column: 2; margin-bottom: .35rem; }
  .flow__step p { grid-column: 2; }
}

/* ---------- gallery ---------- */
.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 3rem;
}
.gallery__item {
  position: relative; border-radius: var(--radius); overflow: hidden; cursor: zoom-in;
  aspect-ratio: 4 / 3; box-shadow: 0 12px 30px -20px rgba(12,61,85,.5);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item span {
  position: absolute; left: .9rem; bottom: .9rem; z-index: 2;
  font: 700 .76rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: rgba(16,21,27,.62); backdrop-filter: blur(5px);
  padding: .5rem .8rem; border-radius: 999px;
}
@media (max-width: 820px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gallery { grid-template-columns: 1fr; } }

/* ---------- video walkthroughs ---------- */
.videos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2.6rem;
}
@media (max-width: 820px) { .videos { grid-template-columns: 1fr; } }
.videos figure {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  background: var(--ink);
}
.videos video { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; }
.videos figcaption {
  color: #fff; font: 600 .92rem/1.4 var(--font-body);
  padding: .9rem 1.2rem; display: flex; align-items: center; gap: .6rem;
}
.videos figcaption svg { color: var(--blue); flex: none; }

#lightbox {
  position: fixed; inset: 0; z-index: 150; display: grid; place-items: center;
  background: rgba(16,21,27,.9); padding: 4vh 4vw;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
  cursor: zoom-out;
}
#lightbox.open { opacity: 1; visibility: visible; }
#lightbox figure { max-width: min(1100px, 94vw); text-align: center; }
#lightbox img { max-width: 100%; max-height: 82vh; border-radius: 14px; margin-inline: auto; }
#lightbox figcaption { color: rgba(255,255,255,.8); margin-top: 1rem; font-size: .95rem; }

/* ---------- reviews (live third-party widget) ---------- */
.stars { color: var(--gold); letter-spacing: .12em; font-size: 1.15rem; }
/* white card: the embedded widget renders light-on-white, so it needs its own
   surface to sit on inside this dark section.
   Width is capped on purpose: above ~1050px of inner width the widget switches to a
   4-across grid, and its 6 tiles leave two empty cells — a large white void in the
   bottom-right. Under that it lays out 2-across, which packs 6 tiles into 3 full rows. */
.reviews__widget {
  background: #fff; border-radius: var(--radius);
  padding: 1.4rem 1.2rem; margin: 2.4rem auto 0;
  box-shadow: var(--shadow); overflow: hidden;
  max-width: 1040px;
  min-height: 260px;
}
.reviews__widget iframe { display: block; width: 100%; border: 0; }
@media (max-width: 560px) { .reviews__widget { padding: .9rem .7rem; } }
/* the embedded widget carries its own "Write a review" button — no CTA needed here */

/* ---------- about teaser ---------- */
.about { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3.4rem; align-items: center; }
.about__img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } .about__img { margin-inline: auto; max-width: 560px; } }

/* ---------- areas ---------- */
.areas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.2rem; }
.areas span {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .6rem 1.1rem; font: 600 .9rem/1 var(--font-body); color: var(--ink-soft);
}

/* ---------- CTA / contact ---------- */
.cta {
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(41,171,226,.35), transparent 60%),
    radial-gradient(800px 400px at 10% 110%, rgba(224,36,40,.28), transparent 60%),
    var(--ink);
  color: #fff;
}
.cta__phones {
  display: grid; gap: 1rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.phone-card {
  display: flex; align-items: center; gap: 1.1rem; text-decoration: none;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  padding: 1.15rem 1.4rem; border-radius: 16px;
  transition: background .2s ease, transform .2s ease;
}
.phone-card:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
.phone-card svg { color: var(--blue); flex: none; }
.phone-card b { font: 700 1.25rem/1.2 var(--font-display); color: #fff; }
.phone-card small { color: rgba(255,255,255,.6); display: block; font-size: .82rem; }

/* ---------- service areas ---------- */
.cities {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.6rem; margin-top: 3rem;
}
.city {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 10px 30px -22px rgba(12,61,85,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.city:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.city__img { position: relative; margin: 0; }
.city__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
/* attribution has to stay legible — CC BY-SA requires visible credit */
.city__img figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  font: 500 .68rem/1.35 var(--font-body); color: rgba(255,255,255,.9);
  padding: 1.5rem .8rem .55rem;
  background: linear-gradient(0deg, rgba(8,12,18,.82) 0%, rgba(8,12,18,0) 100%);
}
/* cities with no freely-licensed photograph get a branded plate instead of a
   misleading stock image — swap in a real photo when one exists */
.city__mark {
  aspect-ratio: 16 / 10; display: grid; place-content: center; text-align: center; gap: .3rem;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(41,171,226,.28), transparent 60%),
    linear-gradient(135deg, #16202B 0%, #10151B 100%);
}
.city__mark span { font: 800 clamp(1.4rem, 3.2vw, 1.9rem)/1.1 var(--font-display); color: #fff; }
.city__mark i {
  font-style: normal; font: 700 .7rem/1 var(--font-body);
  letter-spacing: .3em; text-transform: uppercase; color: var(--blue);
}
.city__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.city__body h3 { font-size: 1.22rem; font-weight: 800; display: flex; align-items: baseline; gap: .5rem; }
.city__body h3 span {
  font: 700 .62rem/1 var(--font-body); letter-spacing: .16em;
  color: var(--blue-deep); background: rgba(41,171,226,.14);
  padding: .32rem .45rem; border-radius: 5px;
}
.city__meta { font: 600 .82rem/1.4 var(--font-body); color: var(--red); }
.city__body p:last-child { color: var(--ink-soft); font-size: .95rem; }

.credits {
  margin-top: 2.6rem; font-size: .78rem; line-height: 1.6;
  color: rgba(255,255,255,.4); max-width: 720px;
}
.credits a { color: rgba(255,255,255,.6); text-decoration: underline; }

/* ---------- dedicated contact page ----------
   Aside is sticky because the embedded form is ~1100px tall — without it the left
   column would sit as a short block against a very long one. */
.contact { display: grid; grid-template-columns: .82fr 1.18fr; gap: 3.4rem; align-items: start; margin-top: 1rem; }
@media (max-width: 940px) { .contact { grid-template-columns: 1fr; gap: 2.4rem; } }
.contact__aside { display: grid; gap: 1.5rem; position: sticky; top: 104px; }
@media (max-width: 940px) { .contact__aside { position: static; } }
.contact__h { font: 800 clamp(1.3rem, 2.4vw, 1.7rem)/1.15 var(--font-display); color: #fff; }
.info-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px; padding: 1.3rem 1.4rem;
}
.info-card h3 {
  display: flex; align-items: center; gap: .55rem;
  font: 700 1rem/1 var(--font-display); color: #fff; margin-bottom: .6rem;
}
.info-card h3 svg { color: var(--blue); flex: none; }
.info-card p { color: rgba(255,255,255,.75); font-size: .95rem; }
.next-steps { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; color: rgba(255,255,255,.75); font-size: .95rem; }

/* ---------- FAQ ---------- */
.faq { margin-top: 2.4rem; display: grid; gap: .8rem; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 1.1rem 1.3rem;
}
.faq summary {
  cursor: pointer; list-style: none; font: 700 1.03rem/1.4 var(--font-display);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.4rem; line-height: 1; color: var(--blue); flex: none;
  transition: transform .2s ease;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: .8rem; color: var(--ink-soft); font-size: .98rem; }

/* ---------- CRM lead form (LeadConnector embed) ----------
   form_embed.js sets the iframe height from the form's own content via postMessage,
   so height is left to the script. The min-height only stops the iframe collapsing
   to its 150px default in the moment before that script runs — keep it well under
   the real form height so it can never leave a gap under a shorter form. */
/* invitation sitting directly above the form */
.form-intro {
  max-width: 760px; margin: 2.8rem auto 0; text-align: center;
}
.form-intro h3 {
  font: 800 clamp(1.35rem, 2.8vw, 1.9rem)/1.15 var(--font-display);
  color: #fff;
}
.form-intro p {
  color: rgba(255,255,255,.8); font-size: 1.02rem; margin-top: .7rem;
}
.contact__intro { color: rgba(255,255,255,.78); font-size: .98rem; margin-top: .6rem; }

.crm-form {
  background: #fff; border-radius: var(--radius);
  /* tighter top margin when the intro block is directly above it */
  padding: .75rem; margin: 1.2rem auto 0; max-width: 760px;
  box-shadow: var(--shadow); overflow: hidden;
}
.crm-form iframe { display: block; width: 100%; min-height: 520px; border: 0; }
@media (max-width: 560px) { .crm-form { padding: .4rem; } }

/* fallback shown by scrub.js when the embed never reveals itself — collapse the
   reserved space so there is no blank gap above the message */
.crm-form--stalled iframe { min-height: 0; }
.crm-fallback { padding: 2rem 1.4rem; text-align: center; color: var(--ink); }
.crm-fallback h3 { font: 800 1.25rem/1.2 var(--font-display); margin-bottom: .5rem; }
.crm-fallback p { color: var(--ink-soft); font-size: .97rem; }
.crm-fallback__nums { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin: 1.1rem 0; }
.crm-fallback__nums a {
  font: 700 1.05rem/1 var(--font-display); text-decoration: none; color: #fff;
  background: var(--red); padding: .85rem 1.3rem; border-radius: 999px;
}
.crm-fallback__nums a:last-child { background: var(--blue); }
.crm-fallback__link { color: var(--blue-deep); font-size: .92rem; }

.form {
  background: #fff; color: var(--ink); border-radius: var(--radius);
  padding: 2.1rem; box-shadow: var(--shadow); display: grid; gap: 1rem;
}
.form h3 { font-size: 1.35rem; font-weight: 800; }
.form label { font: 600 .85rem/1.3 var(--font-body); color: var(--ink-soft); display: grid; gap: .4rem; }
.form input, .form select, .form textarea {
  font: 500 1rem/1.4 var(--font-body); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 12px; padding: .85rem 1rem;
  background: var(--mist); width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: 2px solid var(--blue); outline-offset: 1px; background: #fff;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .form__row { grid-template-columns: 1fr; } }
#formNote { font-size: .85rem; color: var(--ink-soft); text-align: center; }

/* ---------- footer ---------- */
footer.site {
  background: #0B0F14; color: rgba(255,255,255,.72);
  padding: 3.6rem 0 6.5rem;
}
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.6rem; }
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr; } }
footer.site h4 { color: #fff; font: 700 1rem/1 var(--font-display); margin-bottom: 1rem; }
footer.site a { color: rgba(255,255,255,.72); text-decoration: none; }
footer.site a:hover { color: var(--blue); }
footer.site ul { list-style: none; display: grid; gap: .55rem; font-size: .95rem; }
.footer__legal {
  margin-top: 2.8rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.1);
  font-size: .85rem; color: rgba(255,255,255,.45);
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between;
}

/* ---------- social ---------- */
.social { margin-top: 2.4rem; }
.social__link {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .7rem 1.25rem; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.82);
  font: 600 .92rem/1 var(--font-body);
  text-decoration: none;
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
}
.social__link svg { color: #1877F2; flex: none; transition: transform .22s ease; }
.social__link:hover {
  background: rgba(24,119,242,.14); border-color: rgba(24,119,242,.6);
  color: #fff; transform: translateY(-2px);
}
.social__link:hover svg { transform: scale(1.08); }
@media (max-width: 480px) { .social__link { font-size: .85rem; padding: .65rem 1rem; } }

/* ---------- "built by Luzani AI" footer credit ----------
   Deliberately quiet: it sits below the client's own legal line and reads as a
   credit, not a second brand competing with theirs. The glow is what catches the
   eye at the very bottom of the page. */
.built-by-wrap { text-align: center; margin-top: 1.6rem; }
.built-by {
  display: inline-flex; align-items: center; gap: .6rem;
  max-width: 100%;
  padding: .62rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(41,171,226,.32);
  background: rgba(41,171,226,.06);
  color: rgba(255,255,255,.72);
  font: 500 .8rem/1.45 var(--font-body);
  text-decoration: none;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
  animation: builtGlow 3.4s ease-in-out infinite;
}
.built-by b { color: #7FD2F5; font-weight: 700; }
.built-by:hover {
  color: #fff; background: rgba(41,171,226,.14); border-color: rgba(41,171,226,.75);
}
.built-by__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--blue);
  box-shadow: 0 0 0 0 rgba(41,171,226,.75);
  animation: builtPulse 2.2s ease-out infinite;
}
@keyframes builtGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(41,171,226,0); border-color: rgba(41,171,226,.28); }
  50%      { box-shadow: 0 0 22px 1px rgba(41,171,226,.32); border-color: rgba(41,171,226,.7); }
}
@keyframes builtPulse {
  0%   { box-shadow: 0 0 0 0 rgba(41,171,226,.7); }
  70%  { box-shadow: 0 0 0 9px rgba(41,171,226,0); }
  100% { box-shadow: 0 0 0 0 rgba(41,171,226,0); }
}
/* never animate for people who asked the OS not to */
@media (prefers-reduced-motion: reduce) {
  .built-by, .built-by__dot { animation: none; }
  .built-by { border-color: rgba(41,171,226,.55); }
}
@media (max-width: 560px) {
  .built-by { font-size: .74rem; padding: .6rem .9rem; align-items: flex-start; text-align: left; }
  .built-by__dot { margin-top: .35rem; }
}

/* ---------- mobile sticky call bar ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(16,21,27,.9); backdrop-filter: blur(10px);
  padding: .6rem .6rem calc(.6rem + env(safe-area-inset-bottom));
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font: 700 .95rem/1 var(--font-display); text-decoration: none; color: #fff;
  padding: .95rem 0; border-radius: 12px;
}
.callbar a:first-child { background: var(--red); }
.callbar a:last-child { background: var(--blue); }
@media (max-width: 760px) { .callbar { display: grid; } footer.site { padding-bottom: 8.5rem; } }

/* ---------- about page ---------- */
.pagehero {
  background:
    radial-gradient(900px 420px at 80% -20%, rgba(41,171,226,.4), transparent 60%),
    var(--ink);
  color: #fff; padding: clamp(8rem, 16vh, 11rem) 0 clamp(3.4rem, 7vw, 5.5rem);
}
.pagehero h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; }
.pagehero h1 em { font-style: normal; color: var(--blue); }
/* wider left column than a portrait shot needed — the owner photo is 4:3 landscape */
.story { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3.4rem; align-items: start; }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; gap: 2.4rem; } }
.story__img {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  position: sticky; top: 110px; background: #fff; margin: 0;
}
.story__img img { width: 100%; }
.story__img figcaption {
  font: 600 .85rem/1.4 var(--font-body); color: var(--ink-soft);
  padding: .8rem 1rem; text-align: center;
}
@media (max-width: 900px) { .story__img { position: static; max-width: 560px; margin-inline: auto; } }
.story__text { display: grid; gap: 1.15rem; font-size: 1.05rem; color: var(--ink-soft); }
.story__text h2 { color: var(--ink); font-size: 1.6rem; font-weight: 800; margin-top: 1.2rem; }
.pull {
  border-left: 4px solid var(--blue); padding: .4rem 0 .4rem 1.4rem;
  font: 600 1.25rem/1.5 var(--font-display); color: var(--ink);
}
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; margin-top: 2.6rem; }