/* ============================================================
   Macomb Power Washing Solutions — Design System
   ============================================================ */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("/assets/fonts/bricolage-latin.woff2") format("woff2");
}

:root {
  --ink: #0a1c2e;
  --ink-deep: #061423;
  --ink-soft: #33475b;
  --ink-mute: #5a6d80;
  --blue: #1273d4;
  --blue-deep: #0b5cad;
  --blue-bright: #2e90f0;
  --sky: #eaf3fc;
  --sky-soft: #f4f9fe;
  --paper: #fcfdfe;
  --line: #dfe8f0;
  --amber: #f5a623;
  --white: #ffffff;
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shadow-sm: 0 1px 2px rgba(10, 28, 46, 0.06), 0 2px 8px rgba(10, 28, 46, 0.05);
  --shadow-md: 0 2px 6px rgba(10, 28, 46, 0.07), 0 12px 32px rgba(10, 28, 46, 0.10);
  --shadow-lg: 0 4px 12px rgba(10, 28, 46, 0.10), 0 24px 64px rgba(10, 28, 46, 0.16);
  --radius: 14px;
  --radius-lg: 22px;
  --wrap: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 1.0625rem;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding-left: 1.35em; }
strong { font-weight: 650; }

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 750; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.18rem, 2vw, 1.45rem); line-height: 1.25; }
h4 { font-size: 1.05rem; font-weight: 700; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem); }
.wrap--narrow { max-width: 860px; }
section { padding: clamp(3.2rem, 7vw, 5.5rem) 0; }

.eyebrow {
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.9rem;
  display: block;
}
.on-dark .eyebrow { color: var(--blue-bright); }
.lede { font-size: clamp(1.08rem, 1.6vw, 1.22rem); color: var(--ink-soft); max-width: 46em; }
.on-dark .lede { color: #b9cbdd; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--display); font-weight: 650; font-size: 1rem;
  padding: 0.9rem 1.7rem; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-decoration: none !important; white-space: nowrap;
}
.btn--primary { background: var(--blue); color: var(--white); box-shadow: 0 6px 20px rgba(18, 115, 212, 0.35); }
.btn--primary:hover { background: var(--blue-deep); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(18, 115, 212, 0.45); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: var(--white); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue-deep); transform: translateY(-2px); }
.on-dark .btn--ghost { background: transparent; border-color: rgba(255,255,255,0.35); color: var(--white); }
.on-dark .btn--ghost:hover { border-color: var(--white); color: var(--white); }
.btn--lg { padding: 1.05rem 2.1rem; font-size: 1.08rem; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(252, 253, 254, 0.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header__in { display: flex; align-items: center; gap: 1.4rem; height: 74px; position: relative; }
/* flex-shrink:0 — the logo is a flex item beside the nav, and without this the
   nav compresses it narrower than its aspect ratio (it renders squashed). */
.header__logo { display: flex; align-items: center; gap: 0.65rem; text-decoration: none !important; flex-shrink: 0; }
.header__logo img { height: 48px; width: auto; }
.header__logo span {
  font-family: var(--display); font-weight: 750; font-size: 1.02rem; line-height: 1.1;
  color: var(--ink); max-width: 10.5em;
}
.nav { display: flex; align-items: center; gap: 0.15rem; margin-left: auto; }
/* white-space:nowrap — without it "Service Areas" and "Our Work" break across
   two lines as the row tightens, which is what made the header look ragged
   rather than simply full. A wrapped nav item is the signal to remove one. */
.nav > a, .nav .navdrop > button {
  font-family: var(--display); font-size: 0.96rem; font-weight: 600; color: var(--ink-soft);
  padding: 0.55rem 0.75rem; border-radius: 9px; background: none; border: none; cursor: pointer;
  text-decoration: none !important; display: inline-flex; align-items: center; gap: 0.3rem;
  white-space: nowrap;
}
.nav > a:hover, .nav .navdrop > button:hover { color: var(--blue-deep); background: var(--sky); }
.navdrop { position: relative; }
.navdrop__panel {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 0.6rem; min-width: 270px;
  display: none; max-height: 70vh; overflow: auto;
}
.navdrop.open .navdrop__panel { display: block; }
.navdrop__panel a {
  display: block; padding: 0.5rem 0.8rem; border-radius: 8px; color: var(--ink);
  font-size: 0.95rem; font-weight: 550; text-decoration: none !important;
}
.navdrop__panel a:hover { background: var(--sky); color: var(--blue-deep); }
.navdrop__panel .navdrop__all { color: var(--blue-deep); font-weight: 650; border-top: 1px solid var(--line); margin-top: 0.4rem; padding-top: 0.65rem; }
.navdrop__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.5rem; min-width: 480px; }
.header__phone {
  font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 0.98rem;
  text-decoration: none !important; white-space: nowrap;
}
.header__phone:hover { color: var(--blue-deep); }
.header__cta { margin-left: 0.25rem; }
.nav-toggle { display: none; margin-left: auto; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.nav-toggle span { display: block; width: 26px; height: 2.5px; background: var(--ink); margin: 5.5px 0; border-radius: 2px; transition: 0.2s; }

@media (max-width: 1020px) {
  /* Note: backdrop-filter on .header makes it the containing block for fixed
     descendants, so the panel anchors below the header with absolute + 100dvh. */
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    height: calc(100dvh - 74px); background: var(--paper);
    flex-direction: column; align-items: stretch; padding: 1.2rem; gap: 0.2rem; overflow: auto; z-index: 55;
    border-top: 1px solid var(--line);
  }
  body.nav-open .nav { display: flex; }
  body.nav-open { overflow: hidden; }
  .nav > a, .nav .navdrop > button { font-size: 1.15rem; padding: 0.85rem 0.6rem; width: 100%; text-align: left; justify-content: space-between; }
  /* The full-screen nav scrolls, so panels must flow naturally rather than
     keep the desktop max-height (which clipped list items mid-row). */
  .navdrop__panel { position: static; transform: none; box-shadow: none; border: none; padding: 0 0 0 0.8rem; min-width: 0; max-height: none; overflow: visible; }
  .navdrop__cols { grid-template-columns: 1fr; min-width: 0; }
  .nav-toggle { display: block; }
  .header__phone, .header__cta { display: none; }
  .nav .m-actions { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1rem; }
}
@media (min-width: 1021px) { .nav .m-actions { display: none; } }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(168deg, var(--ink-deep) 0%, #0c2745 62%, #10395f 100%); color: var(--white); overflow: hidden; position: relative; }
.hero::after {
  content: ""; position: absolute; right: -18%; top: -30%; width: 62%; height: 160%;
  background: radial-gradient(closest-side, rgba(46, 144, 240, 0.16), transparent 70%);
  pointer-events: none;
}
.hero__grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; position: relative; z-index: 1; }
.hero h1 { color: var(--white); margin: 0.2rem 0 1.1rem; }
.hero .lede { color: #bfd2e4; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.7rem; }
.hero__proof { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.9rem; color: #a8bccf; font-size: 0.95rem; }
.stars { color: var(--amber); letter-spacing: 0.12em; font-size: 1.02rem; white-space: nowrap; }
.hero__media { position: relative; }
.hero__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.hero__badge {
  position: absolute; left: -1.1rem; bottom: -1.1rem; background: var(--white); color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 0.85rem 1.15rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.hero__badge b { font-family: var(--display); font-size: 1.5rem; font-weight: 750; }
.hero__badge small { display: block; color: var(--ink-mute); font-size: 0.8rem; line-height: 1.3; }
@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__badge { left: 0.9rem; bottom: -1rem; }
}

/* Page hero (interior) */
.page-hero { background: linear-gradient(168deg, var(--ink-deep) 0%, #0c2745 70%, #0f3357 100%); color: var(--white); padding: clamp(3rem, 6vw, 4.6rem) 0; }
.page-hero h1 { color: var(--white); margin-bottom: 0.9rem; }
.page-hero .lede { color: #bfd2e4; }
.crumbs { font-size: 0.85rem; color: #8fa6c400; margin-bottom: 1.2rem; color: #8aa2b8; }
.crumbs a { color: #b9cbdd; }
.crumbs span { margin: 0 0.45rem; opacity: 0.6; }

/* ---------- Logo strip ---------- */
.logostrip { padding: 2.2rem 0; border-bottom: 1px solid var(--line); background: var(--white); }
.logostrip p { text-align: center; font-family: var(--display); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1.4rem; font-weight: 650; }
.logostrip__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.4rem, 4vw, 3rem); }
.logostrip__row img { height: 40px; width: auto; opacity: 0.75; filter: grayscale(1) contrast(0.9); transition: 0.2s; }
.logostrip__row img:hover { opacity: 1; filter: none; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 1.4rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
a.card { text-decoration: none !important; color: inherit; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sky); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1.35rem 1.45rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.card__body p { color: var(--ink-soft); font-size: 0.97rem; flex: 1; }
.card__link { font-family: var(--display); font-weight: 650; color: var(--blue-deep); font-size: 0.95rem; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; }
.step { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem 1.5rem 1.5rem; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--display); font-weight: 750; font-size: 2.2rem; color: var(--sky);
  -webkit-text-stroke: 1.5px var(--blue); line-height: 1; display: block; margin-bottom: 0.8rem;
}
.step h3 { margin-bottom: 0.45rem; }
.step p { color: var(--ink-soft); font-size: 0.96rem; }

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.2rem); align-items: center; }
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; object-fit: cover; }
.split--rev .split__media { order: 2; }
@media (max-width: 880px) { .split, .split--rev { grid-template-columns: 1fr; } .split--rev .split__media { order: 0; } }
.split h2 { margin-bottom: 1rem; }
.split p + p { margin-top: 0.9rem; }
.split .btn { margin-top: 1.5rem; }

/* ---------- Checklist ---------- */
.ticks { list-style: none; padding: 0; display: grid; gap: 0.65rem; margin-top: 1.2rem; }
.ticks li { padding-left: 2rem; position: relative; color: var(--ink-soft); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.28em; width: 1.25rem; height: 1.25rem;
  border-radius: 50%; background: var(--sky);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230b5cad" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
  background-size: 62%; background-position: center; background-repeat: no-repeat;
}
.ticks--2col { grid-template-columns: 1fr 1fr; }
@media (max-width: 680px) { .ticks--2col { grid-template-columns: 1fr; } }
.ticks b { color: var(--ink); }

/* ---------- Stats band ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { text-align: center; padding: 1.4rem 0.8rem; border-radius: var(--radius-lg); background: var(--sky-soft); border: 1px solid var(--line); }
.stat b { font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 750; color: var(--blue-deep); display: block; line-height: 1.1; }
.stat span { color: var(--ink-mute); font-size: 0.92rem; }

/* ---------- Section tints ---------- */
.tint { background: var(--sky-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dark { background: linear-gradient(160deg, var(--ink-deep), #0d2949); color: var(--white); }
.dark h2, .dark h3 { color: var(--white); }
.dark p { color: #b9cbdd; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0.8rem; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 0; overflow: hidden; }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--display); font-weight: 650; font-size: 1.05rem; padding: 1.05rem 1.3rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--blue); transition: transform 0.2s; flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 1.3rem 1.2rem; color: var(--ink-soft); }
.faq details > div p + p { margin-top: 0.7rem; }

/* ---------- Area chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chips a {
  display: inline-block; padding: 0.5rem 1.05rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--white); color: var(--ink-soft); font-size: 0.93rem; font-weight: 550;
  text-decoration: none !important; transition: 0.15s;
}
.chips a:hover { border-color: var(--blue); color: var(--blue-deep); background: var(--sky); }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 55%, var(--blue-bright) 100%); color: var(--white); border-radius: var(--radius-lg); padding: clamp(2.2rem, 5vw, 3.6rem); text-align: center; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.18), transparent 45%); }
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--white); margin-bottom: 0.7rem; }
.cta-band p { color: #dcecfd; max-width: 42em; margin: 0 auto 1.6rem; }
.cta-band .btn--primary { background: var(--white); color: var(--blue-deep); box-shadow: 0 8px 24px rgba(4, 32, 60, 0.3); }
.cta-band .btn--primary:hover { background: var(--sky); }
.cta-band .cta-call { display: block; margin-top: 1.1rem; color: var(--white); font-family: var(--display); font-weight: 650; }

/* ---------- Prose ---------- */
.prose { max-width: 760px; }
.prose p + p, .prose ul, .prose ol { margin-top: 0.95rem; }
.prose h2 { margin: 2.4rem 0 0.9rem; }
.prose h3 { margin: 1.8rem 0 0.6rem; }
.prose li + li { margin-top: 0.35rem; }
.prose li { color: var(--ink-soft); }
.prose p { color: var(--ink-soft); }
.prose > p:first-child { color: var(--ink); }

/* ---------- Footer ---------- */
.footer { background: var(--ink-deep); color: #9fb4c8; padding: 3.6rem 0 2rem; font-size: 0.95rem; }
.footer a { color: #c6d6e5; text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.2rem; padding-bottom: 2.4rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
@media (max-width: 880px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h4, .footer__h { color: var(--white); font-family: var(--display); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.9rem; }
.footer ul { list-style: none; padding: 0; }
.footer li { margin-bottom: 0.45rem; }
.footer__brand img { height: 66px; margin-bottom: 0.9rem; }
.footer__brand p { max-width: 30em; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; padding-top: 1.6rem; font-size: 0.85rem; color: #7d93a8; }

/* ---------- Utility ---------- */
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; }
.jobber-embed { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.map-embed { border: 0; width: 100%; height: 420px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.review-cta { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.badge-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.4rem; }
.badge-row span {
  display: inline-flex; align-items: center; gap: 0.45rem; background: var(--white);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.45rem 1rem;
  font-size: 0.88rem; font-weight: 600; color: var(--ink-soft);
}
.on-dark .badge-row span { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #cfdded; }

/* ---------- Icon cards ---------- */
.card__icon {
  aspect-ratio: 16 / 7; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--sky) 0%, #fdfeff 70%);
  color: var(--blue); border-bottom: 1px solid var(--line);
}
.card__icon svg { width: 54px; height: 54px; transition: transform 0.25s ease; }
.card:hover .card__icon svg { transform: scale(1.12) rotate(-3deg); }

/* ---------- Before / After slider ---------- */
.ba-frame { margin-inline: auto; }
/* Gallery of comparison sliders. auto-fit rather than a fixed column count so
   the tall phone-shot pairs and the wide ones settle at their own widths. */
.ba-gallery { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.ba-gallery__item { margin: 0; }
.ba-gallery__item figcaption { padding: 0.85rem 0.2rem 0; display: flex; flex-direction: column; gap: 0.15rem; }
.ba-gallery__item figcaption strong { font-family: var(--display); font-size: 1.02rem; color: var(--ink); }
.ba-gallery__item figcaption span { font-size: 0.84rem; color: var(--ink-soft); }
.ba { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; user-select: none; }
.ba img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ba__after { position: absolute; inset: 0; overflow: hidden; width: var(--pos, 55%); }
.ba__after img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 55%); width: 3px; transform: translateX(-50%);
  background: #fff; box-shadow: 0 0 14px rgba(4, 20, 40, 0.5); pointer-events: none;
}
.ba__handle::after {
  content: "◂ ▸"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: #fff; color: var(--ink); font-size: 0.72rem; letter-spacing: 0.05em;
  padding: 0.5rem 0.6rem; border-radius: 999px; box-shadow: var(--shadow-md); white-space: nowrap;
  font-family: var(--display); font-weight: 700;
}
.ba__range {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0;
  -webkit-appearance: none; appearance: none; touch-action: none;
}
.ba__tag {
  position: absolute; top: 0.9rem; font-family: var(--display); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
  background: rgba(6, 20, 35, 0.65); backdrop-filter: blur(4px); padding: 0.35rem 0.8rem; border-radius: 999px;
  pointer-events: none;
}
.ba__tag--before { right: 0.9rem; }
.ba__tag--after { left: 0.9rem; }

/* ---------- Loading screen ---------- */
.loader {
  position: fixed; inset: 0; z-index: 999;
  background: linear-gradient(160deg, #061423, #0c2745 70%, #0f3357);
  display: grid; place-items: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader.skip { display: none; }
.loader__box { position: relative; width: min(74vw, 430px); }
.loader__box img { width: 100%; height: auto; filter: brightness(0) invert(1); }
.loader__reveal { clip-path: inset(-20% 100% -20% 0); animation: mpwsWipe 1s cubic-bezier(0.77, 0, 0.18, 1) 0.25s forwards; }
.loader__dirty { position: absolute; inset: 0; opacity: 0.22; }
.loader__dirty img { filter: brightness(0) invert(0.45) sepia(0.5); }
.loader__beam {
  position: absolute; top: -30%; bottom: -30%; left: 0; width: 4px; border-radius: 4px; opacity: 0;
  background: linear-gradient(180deg, transparent, #2e90f0 20%, #baddff 50%, #2e90f0 80%, transparent);
  box-shadow: 0 0 22px 6px rgba(46, 144, 240, 0.75);
  animation: mpwsBeam 1s cubic-bezier(0.77, 0, 0.18, 1) 0.25s forwards;
}
.loader__tag {
  position: absolute; left: 0; right: 0; top: calc(100% + 1.1rem); text-align: center;
  color: #8fb4d9; font-family: var(--display); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.18em;
  text-transform: uppercase; opacity: 0; animation: mpwsFade 0.5s ease 1s forwards;
}
@keyframes mpwsWipe { to { clip-path: inset(-20% 0 -20% 0); } }
@keyframes mpwsBeam { 0% { left: 0; opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes mpwsFade { to { opacity: 1; } }

/* ---------- Footer logo on dark ---------- */
.footer__brand img { filter: brightness(0) invert(1); opacity: 0.95; height: 48px; width: auto; }
.header__logo img { height: 44px; width: auto; flex-shrink: 0; max-width: none; }
@media (max-width: 480px) { .header__logo img { height: 38px; } }

/* ---------- Work gallery ---------- */
.workgrid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-rows: 165px; grid-auto-flow: dense;
}
/* Rows drive the height here, so ignore any per-image aspect-ratio. */
.workgrid__item { grid-row: span 2; }
.workgrid__item--tall { grid-row: span 3; }
.workgrid__item img { aspect-ratio: auto !important; }
.workgrid__item {
  position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md); background: var(--ink-deep);
}
.workgrid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.workgrid__item:hover img { transform: scale(1.04); }
.workgrid__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1rem 0.85rem;
  color: #fff; font-family: var(--display); font-weight: 600; font-size: 0.88rem;
  background: linear-gradient(to top, rgba(4,16,30,0.88), transparent);
}

/* Guarantee badge */
.guarantee-inline { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.guarantee-inline img { width: 110px; height: auto; flex-shrink: 0; }

/* Full-width prose used where a section has no photo — keeps measure readable
   without leaving an empty column. */
.prose--wide { max-width: 62ch; margin-inline: auto; }
.prose--wide .ticks, .prose--wide .ticks--2col { max-width: none; }
@media (min-width: 900px) { .prose--wide { max-width: 68ch; } }
.prose--wide > .eyebrow:first-child { margin-top: 0; }

/* ---------- Legal / terms ---------- */
.legal { display: grid; grid-template-columns: 280px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .legal { grid-template-columns: 1fr; } }
.legal__toc {
  position: sticky; top: 96px; background: var(--sky-soft); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; max-height: calc(100vh - 130px); overflow: auto;
}
@media (max-width: 900px) { .legal__toc { position: static; max-height: none; } }
.legal__toc h2 { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.9rem; }
.legal__toc ol { margin: 0; padding-left: 0; list-style: none; counter-reset: none; }
.legal__toc li { margin-bottom: 0.4rem; }
.legal__toc a { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.35; display: block; }
.legal__toc a:hover { color: var(--blue-deep); }
.legal__help { font-size: 0.85rem; color: var(--ink-mute); margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.legal__body { max-width: 70ch; }
.legal__intro {
  font-size: 1.06rem; color: var(--ink); background: var(--sky); border-left: 3px solid var(--blue);
  padding: 1.2rem 1.4rem; border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 2.4rem;
}
.legal__section { padding: 0 0 2.2rem; scroll-margin-top: 96px; }
.legal__section h2 {
  font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: 0.8rem;
  display: flex; align-items: baseline; gap: 0.7rem;
}
.legal__num {
  font-size: 0.78rem; font-weight: 700; color: var(--blue); background: var(--sky);
  border-radius: 6px; padding: 0.2rem 0.5rem; flex-shrink: 0; letter-spacing: 0.02em;
}
.legal__section h3 { font-size: 1rem; margin: 1.2rem 0 0.4rem; color: var(--ink); }
.legal__section p { color: var(--ink-soft); }
.legal__section p + p { margin-top: 0.8rem; }
.legal__section ul { margin: 0.8rem 0; color: var(--ink-soft); }
.legal__section li + li { margin-top: 0.35rem; }
.legal__updated { font-size: 0.88rem; color: var(--ink-mute); font-style: italic; border-top: 1px solid var(--line); padding-top: 1.4rem; }

/* ============================================================
   Mega menu — replaces the plain dropdown
   ============================================================ */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink-deep); color: #fff; padding: 0.7rem 1.2rem; border-radius: 0 0 10px 0;
  font-family: var(--display); font-weight: 650;
}
.skip:focus { left: 0; }

.caret {
  width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform 0.2s ease; display: inline-block;
  margin-left: 0.15rem;
}
.navdrop.open > button .caret { transform: rotate(-135deg) translate(-2px, -2px); }
.navdrop.open > button { color: var(--blue-deep); background: var(--sky); }

/* header phone gets a stacked treatment */
.header__phone { display: flex; flex-direction: column; line-height: 1.15; text-align: right; }
/* Between the mobile breakpoint and ~1150px the nav, phone block and CTA together
   exceed the container and push "Free Estimate" off the right edge. The CTA is the
   priority action and the number is still one tap away in the mobile menu and the
   footer, so the phone block yields first.
   NOTE: this must sit AFTER the rule above — same specificity, so source order
   decides, and an earlier media query would be silently overridden. */
@media (max-width: 1150px) {
  .header__phone { display: none; }
}
.header__phone small { font-size: 0.68rem; color: var(--ink-mute); font-weight: 600; letter-spacing: 0.04em; }
.header__phone strong { font-size: 1rem; }

/* Panel anchors to .header__in (not the button) so a wide menu stays centred
   in the page instead of overflowing off the right-hand nav item. */
.navdrop--mega { position: static; }
.mega {
  left: 50%; transform: translateX(-50%);
  width: min(920px, calc(100vw - 3rem)); padding: 0; min-width: 0;
  border-radius: var(--radius-lg); overflow: hidden;
}
.mega--areas { width: min(680px, calc(100vw - 3rem)); }
.mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 1.4rem 1.5rem 1.2rem; }
.mega--areas .mega__grid { grid-template-columns: 1fr; }
.mega__col { padding: 0 0.9rem; border-left: 1px solid var(--line); }
.mega__col:first-child { border-left: 0; padding-left: 0; }
.mega__h {
  font-family: var(--display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--blue-deep); margin-bottom: 0.7rem; line-height: 1.3;
}
.mega__h small {
  display: block; font-size: 0.72rem; letter-spacing: 0; text-transform: none;
  color: var(--ink-mute); font-weight: 500; margin-top: 0.15rem;
}
.mega ul { list-style: none; padding: 0; margin: 0; }
.mega li { margin-bottom: 0.1rem; }
.mega li a {
  display: block; padding: 0.42rem 0.55rem; border-radius: 7px; color: var(--ink);
  font-size: 0.92rem; font-weight: 550; text-decoration: none !important; line-height: 1.3;
}
.mega li a:hover { background: var(--sky); color: var(--blue-deep); }
.mega__cities { columns: 3; column-gap: 0.6rem; }
@media (max-width: 620px) { .mega__cities { columns: 2; } }
.mega__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--sky-soft); border-top: 1px solid var(--line); padding: 1rem 1.5rem;
}
.mega__foot strong { display: block; font-family: var(--display); font-size: 0.95rem; color: var(--ink); }
.mega__foot span { font-size: 0.86rem; color: var(--ink-mute); }
.mega__foot .btn { padding: 0.6rem 1.2rem; font-size: 0.9rem; }

@media (max-width: 1020px) {
  .mega, .mega--areas { width: auto; transform: none; border-radius: 0; }
  .mega__grid, .mega--areas .mega__grid { grid-template-columns: 1fr; padding: 0.2rem 0 0.6rem; gap: 0.9rem; }
  .mega__col { border-left: 0; padding: 0; }
  .mega__h { margin-bottom: 0.35rem; }
  .mega__cities { columns: 2; }
  .mega li a { padding: 0.55rem 0.5rem; font-size: 1rem; }
  .mega__foot { flex-direction: column; align-items: stretch; text-align: left; background: none; border-top: 1px solid var(--line); padding: 1rem 0 0; }
  .mega__foot .btn { width: 100%; }
  .header__phone { display: none; }
}

/* ============================================================
   Hero v2
   ============================================================ */
.hero--v2 { position: relative; padding: clamp(2.6rem,5vw,4.2rem) 0 0; overflow: hidden; }
.hero--v2 .hero__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(closest-side at 78% 18%, rgba(46,144,240,0.22), transparent 70%),
    radial-gradient(closest-side at 12% 88%, rgba(18,115,212,0.16), transparent 70%);
}
.hero--v2 .hero__grid {
  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(1.6rem,4vw,3.4rem);
  align-items: center; position: relative; z-index: 1; padding-bottom: clamp(2rem,4vw,3rem);
}
@media (max-width: 900px) { .hero--v2 .hero__grid { grid-template-columns: 1fr; } }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  color: #d7e6f5; border-radius: 999px; padding: 0.4rem 0.95rem;
  font-size: 0.86rem; font-weight: 600; margin-bottom: 1.15rem;
}
.hero--v2 h1 { color: #fff; font-size: clamp(2.2rem,4.9vw,3.55rem); margin-bottom: 1.05rem; }
.hero--v2 h1 em { font-style: normal; color: var(--blue-bright); display: block; }
.hero--v2 .lede { color: #b6cade; max-width: 40em; }
.hero--v2 .hero__ctas { margin-top: 1.6rem; }

/* Quick-pick row. Most visitors arrive with one specific surface in mind, so
   giving them a direct route beats making them parse the services menu — and
   it puts six high-intent internal links above the fold. */
.hero__pick { margin-top: 1.7rem; }
.hero__pick-label {
  display: block; font-family: var(--display); font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: #7fa0bf; margin-bottom: 0.7rem;
}
.hero__pick-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hero__pick-row a {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.17);
  color: #dbe9f7; border-radius: 999px; padding: 0.5rem 1rem;
  font-family: var(--display); font-size: 0.92rem; font-weight: 600;
  text-decoration: none !important; white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.hero__pick-row a:hover {
  background: var(--blue); border-color: var(--blue-bright); color: #fff; transform: translateY(-2px);
}
/* On a phone the measured CTA sat at 743px of an 812px viewport — above the
   fold on paper, but under it once Safari's chrome is accounted for. Tightening
   the stack here keeps "Get My Free Estimate" genuinely visible on arrival. */
@media (max-width: 620px) {
  .hero__pick { margin-top: 1.25rem; }
  .hero__pick-label { margin-bottom: 0.5rem; }
  .hero__pick-row { gap: 0.4rem; }
  .hero__pick-row a { padding: 0.42rem 0.8rem; font-size: 0.87rem; }
  .hero--v2 .hero__ctas { margin-top: 1.2rem; }
  .hero--v2 .lede { font-size: 1.02rem; }
}

.hero__trust {
  list-style: none; padding: 0; margin: 2rem 0 0; display: grid;
  grid-template-columns: repeat(4,auto); gap: clamp(0.9rem,3vw,2.1rem); justify-content: start;
  border-top: 1px solid rgba(255,255,255,0.13); padding-top: 1.3rem;
}
@media (max-width: 620px) { .hero__trust { grid-template-columns: repeat(2,1fr); } }
.hero__trust b {
  display: block; font-family: var(--display); font-size: 1.28rem; font-weight: 750; color: #fff; line-height: 1.1;
}
.hero__trust span { font-size: 0.8rem; color: #8fabc6; }

.hero__media { position: relative; }
.hero__scroll a:hover { color: #fff; }

/* ============================================================
   Instant Estimate
   ============================================================ */
.est-section { background: var(--sky-soft); border-bottom: 1px solid var(--line); }
.est {
  display: grid; grid-template-columns: 1fr 330px; gap: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-md);
}
@media (max-width: 880px) { .est { grid-template-columns: 1fr; } }
.est__main { padding: clamp(1.3rem,3vw,2rem); }
.est__group + .est__group { margin-top: 1.5rem; }
.est__row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.5rem; margin-top: 1.5rem; }
@media (max-width: 620px) { .est__row { grid-template-columns: 1fr; } }
.est__h {
  font-family: var(--display); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.8rem;
}
.est__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.est-chip {
  border: 1.5px solid var(--line); background: var(--white); color: var(--ink-soft);
  border-radius: 999px; padding: 0.5rem 0.95rem; font-size: 0.9rem; font-weight: 600;
  font-family: var(--display); cursor: pointer; transition: 0.14s; line-height: 1.25;
}
.est-chip:hover { border-color: var(--blue); color: var(--blue-deep); }
.est-chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.est-chip--stack { border-radius: 12px; text-align: left; padding: 0.5rem 0.85rem; }
.est-chip--stack strong { display: block; font-size: 0.92rem; }
.est-chip--stack small { display: block; font-size: 0.74rem; opacity: 0.75; font-weight: 500; }

.est__out {
  background: linear-gradient(165deg, var(--ink-deep), #0e2f52); color: #fff;
  padding: clamp(1.3rem,3vw,1.9rem); display: flex; flex-direction: column; gap: 0.5rem;
}
.est__label { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8fb3d4; font-weight: 650; }
.est-figure { font-family: var(--display); font-size: clamp(1.9rem,4.2vw,2.5rem); font-weight: 750; line-height: 1.05; }
.est-note { font-size: 0.88rem; color: #b9cfe4; }
.est-picked { font-size: 0.8rem; color: #8fb3d4; line-height: 1.5; }
.est-picked a { color: #b9d6f2; text-decoration: underline; }
.est__cta { margin-top: auto; width: 100%; }
.est__call { display: block; text-align: center; color: #b9cfe4; font-size: 0.88rem; margin-top: 0.5rem; }
.est__fine { font-size: 0.73rem; color: #7d9cb8; line-height: 1.5; margin-top: 0.7rem; }

/* ---------- Pricing table ---------- */
.ptable-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.ptable { width: 100%; border-collapse: collapse; min-width: 560px; }
.ptable th, .ptable td { text-align: left; padding: 0.95rem 1.2rem; border-bottom: 1px solid var(--line); }
.ptable thead th {
  font-family: var(--display); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute); background: var(--sky-soft); font-weight: 700;
}
.ptable tbody th { font-family: var(--display); font-weight: 650; color: var(--ink); font-size: 0.98rem; }
.ptable tbody td { color: var(--ink-soft); font-size: 0.94rem; }
.ptable tbody td strong { font-family: var(--display); color: var(--blue-deep); font-size: 1.05rem; }
.ptable tbody tr:last-child th, .ptable tbody tr:last-child td { border-bottom: 0; }
.ptable tbody tr:hover { background: var(--sky-soft); }

/* Hero shot (distinct from .hero__proof, which is the old rating row) */
.hero__shot { margin: 0; }
.hero__shot img {
  width: 100%; border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(2,10,24,0.55); display: block;
}
.hero__shot figcaption {
  margin-top: 0.8rem; font-size: 0.84rem; color: #8fabc6; text-align: center; line-height: 1.5;
}

/* Captioned portrait on a light section — the founders shot on /about/. */
.portrait { margin: 0; }
.portrait img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: block; }
.portrait figcaption {
  margin-top: 0.8rem; font-size: 0.86rem; color: var(--ink-soft); text-align: center; line-height: 1.5;
}

/* ============================================================
   LightCast™ visualizer
   ============================================================ */
.lc {
  background: linear-gradient(165deg, #061423 0%, #0c2745 60%, #0f3357 100%);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.09);
}
.lc__head { padding: 1.5rem clamp(1.1rem,3vw,2rem) 0; color: #fff; }
.lc__badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(46,144,240,0.16); border: 1px solid rgba(46,144,240,0.4);
  color: #9fd0ff; font-family: var(--display); font-weight: 650; font-size: 0.74rem;
  letter-spacing: 0.13em; text-transform: uppercase; padding: 0.35rem 0.8rem; border-radius: 999px;
}
.lc__head h3 { color: #fff; margin: 0.8rem 0 0.4rem; font-size: clamp(1.3rem,2.4vw,1.8rem); }
.lc__head p { color: #a9c2da; font-size: 0.96rem; max-width: 64ch; }

.lc__body { display: grid; grid-template-columns: 1fr 300px; gap: 1.2rem; padding: 1.2rem clamp(1.1rem,3vw,2rem) 1.6rem; }
@media (max-width: 900px) { .lc__body { grid-template-columns: 1fr; } }

.lc-stage {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: #071426; border: 1px solid rgba(255,255,255,0.12); min-height: 220px;
}
.lc-stage.is-drop { outline: 2px dashed var(--blue-bright); outline-offset: -6px; }
.lc-canvas { display: block; width: 100%; touch-action: manipulation; }
.lc.is-manual .lc-canvas { cursor: crosshair; }

/* Upload dropzone covers the stage until a photo exists */
.lc-drop {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.4rem; text-align: center; cursor: pointer;
  background: rgba(6,20,38,0.72); backdrop-filter: blur(2px); color: #fff; padding: 1.2rem;
  transition: background 0.18s ease;
}
.lc-drop:hover { background: rgba(9,28,52,0.8); }
.lc[data-step="2"] .lc-drop { display: none; }
.lc-drop__icon { font-size: 2rem; }
.lc-drop strong { font-family: var(--display); font-size: 1.06rem; }
.lc-drop span:last-of-type { font-size: 0.85rem; color: #a9c2da; max-width: 30ch; }
.lc-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.lc-status {
  position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.7rem; margin: 0;
  background: rgba(6,20,36,0.92); border: 1px solid rgba(255,255,255,0.16);
  color: #d6e7f7; font-size: 0.83rem; line-height: 1.45; font-weight: 550;
  padding: 0.6rem 0.85rem; border-radius: 10px;
}
.lc-status.is-ok { border-color: rgba(52,199,89,0.5); }
.lc-status.is-warn { border-color: rgba(245,166,35,0.55); }
.lc-status.is-busy { border-color: rgba(46,144,240,0.55); }

.lc-panel { display: flex; flex-direction: column; gap: 1rem; }
.lc-group > h4 {
  color: #8fb0cd; font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 0.5rem; font-weight: 650;
}
.lc-modeswitch { display: grid; gap: 0.45rem; }
.lc-manual-toggle {
  display: block; text-align: left; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16); color: #cfe0f0; border-radius: 10px;
  padding: 0.65rem 0.85rem; cursor: pointer; font-family: var(--display); transition: 0.15s;
}
.lc-manual-toggle strong { display: block; font-size: 0.95rem; }
.lc-manual-toggle small { display: block; font-size: 0.78rem; opacity: 0.72; font-weight: 500; }
.lc-manual-toggle:hover { background: rgba(255,255,255,0.13); }
.lc-manual-toggle[aria-pressed="true"] { background: var(--blue); border-color: var(--blue-bright); color: #fff; }
.lc-redo {
  background: none; border: 1px solid rgba(255,255,255,0.2); color: #a9c2da;
  border-radius: 9px; padding: 0.5rem; font-size: 0.84rem; cursor: pointer; font-family: var(--display); font-weight: 600;
}
.lc-redo:hover { color: #fff; border-color: rgba(255,255,255,0.4); }

.lc-swatches { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.42rem; }
.lc-sw {
  aspect-ratio: 1; border-radius: 9px; border: 2px solid rgba(255,255,255,0.16);
  cursor: pointer; padding: 0; position: relative; overflow: hidden; transition: 0.14s;
}
.lc-sw:hover { transform: translateY(-2px); }
.lc-sw[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px rgba(46,144,240,0.6); }
.lc-sw span { position: absolute; inset: 0; }

.lc-modes { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.4rem; }
.lc-mode {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); color: #cfe0f0;
  border-radius: 8px; padding: 0.48rem 0.4rem; font-size: 0.84rem; font-weight: 600; cursor: pointer;
  font-family: var(--display); transition: 0.14s;
}
.lc-mode:hover { background: rgba(255,255,255,0.13); }
.lc-mode[aria-pressed="true"] { background: var(--blue); border-color: var(--blue-bright); color: #fff; }

.lc-adv { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 0.8rem; }
.lc-adv summary {
  cursor: pointer; color: #8fb0cd; font-family: var(--display); font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 650; list-style: none;
}
.lc-adv summary::-webkit-details-marker { display: none; }
.lc-adv summary::after { content: " ▾"; }
.lc-adv[open] summary::after { content: " ▴"; }
.lc-adv > *:not(summary) { margin-top: 0.75rem; }
.lc-slider { display: block; }
.lc-slider span { display: flex; justify-content: space-between; color: #a9c2da; font-size: 0.8rem; margin-bottom: 0.25rem; }
.lc-slider input[type="range"] { width: 100%; accent-color: var(--blue-bright); }
.lc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.lc-btn {
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.16); color: #fff;
  border-radius: 9px; padding: 0.55rem 0.4rem; font-size: 0.84rem; font-weight: 600; cursor: pointer;
  font-family: var(--display); transition: 0.14s;
}
.lc-btn:hover { background: rgba(255,255,255,0.16); }
.lc-book { width: 100%; text-align: center; }
.lc-meta { color: #8fb0cd; font-size: 0.78rem; text-align: center; }
.lc__foot {
  border-top: 1px solid rgba(255,255,255,0.1); padding: 0.9rem clamp(1.1rem,3vw,2rem);
  color: #7f9bb5; font-size: 0.78rem; display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: space-between;
}

/* ---------- LightCast measurement / scenes / scale ---------- */
.lc-measure {
  background: rgba(46,214,140,0.1); border: 1px solid rgba(46,214,140,0.35);
  border-radius: 12px; padding: 0.8rem 0.95rem; display: flex; flex-direction: column; gap: 0.15rem;
}
.lc-measure__big { font-family: var(--display); font-size: 1.75rem; font-weight: 750; color: #7dffc4; line-height: 1.05; }
.lc-measure__big small { font-size: 0.86rem; font-weight: 600; opacity: 0.8; }
.lc-measure__sub { font-size: 0.8rem; color: #9fd9bd; }
.lc-measure__need { font-size: 0.85rem; color: #ffd9a0; font-weight: 600; }

.lc-price {
  background: rgba(46,144,240,0.12); border: 1px solid rgba(46,144,240,0.38);
  border-radius: 12px; padding: 0.8rem 0.95rem; display: flex; flex-direction: column; gap: 0.2rem;
}
.lc-price__label { font-size: 0.72rem; letter-spacing: 0.11em; text-transform: uppercase; color: #8fb3d4; font-weight: 650; }
.lc-price strong { font-family: var(--display); font-size: 1.35rem; font-weight: 750; color: #fff; }
.lc-price small { font-size: 0.73rem; color: #9fc0dd; line-height: 1.45; }

.lc-refs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; margin-top: 0.5rem; }
.lc-ref {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: #b9cfe4;
  border-radius: 8px; padding: 0.4rem 0.35rem; font-size: 0.75rem; font-weight: 600; cursor: pointer;
  font-family: var(--display); transition: 0.14s;
}
.lc-ref:hover { background: rgba(255,255,255,0.12); }
.lc-ref[aria-pressed="true"] { background: rgba(46,214,140,0.22); border-color: rgba(46,214,140,0.6); color: #b6ffdd; }


.lc.is-calib .lc-canvas { cursor: crosshair; }
.lc.is-calib .lc-stage { outline: 2px solid rgba(46,214,140,0.7); outline-offset: -2px; }

/* ---------- LightCast: "switch to manual?" prompt ---------- */
.lc-ask {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.4rem; text-align: center;
  background: rgba(4,14,28,0.86); backdrop-filter: blur(3px); color: #fff; padding: 1.4rem;
}
.lc-ask p { margin: 0; }
.lc-ask strong { font-family: var(--display); font-size: 1.1rem; }
.lc-ask__sub { font-size: 0.88rem; color: #b3cade; max-width: 34ch; line-height: 1.5; }
.lc-ask__btns { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.8rem; }
.lc-ask__btns button {
  font-family: var(--display); font-weight: 650; font-size: 0.9rem; cursor: pointer;
  border-radius: 999px; padding: 0.6rem 1.15rem; border: 1.5px solid transparent; transition: 0.15s;
}
.lc-ask-yes { background: var(--blue); color: #fff; border-color: var(--blue-bright); }
.lc-ask-yes:hover { background: var(--blue-deep); }
.lc-ask-no { background: transparent; color: #cfe0f0; border-color: rgba(255,255,255,0.32); }
.lc-ask-no:hover { border-color: #fff; color: #fff; }
/* photo is clickable in auto mode because clicking means "re-upload" */
.lc[data-step="2"] .lc-canvas { cursor: pointer; }
.lc.is-manual .lc-canvas, .lc.is-calib .lc-canvas { cursor: crosshair; }

/* The [hidden] attribute hides via the UA sheet's `display: none`, which any
   explicit `display` rule silently overrides. This restores it globally so a
   component can never end up permanently visible while JS believes it is hidden. */
[hidden] { display: none !important; }

/* ============================================================
   Blog
   ============================================================ */

/* The answer capsule. Rendered before any preamble because it is what an AI
   Overview lifts and what a reader scanning for the answer wants first. */
.answer {
  border: 1px solid var(--line); border-left: 4px solid var(--blue-bright);
  background: var(--sky); border-radius: var(--radius);
  padding: 1.3rem 1.5rem; margin-bottom: 2rem;
}
.answer__label {
  font-family: var(--display); font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--blue);
  margin: 0 0 0.5rem;
}
.answer__body p { margin: 0; font-size: 1.06rem; line-height: 1.65; color: var(--ink); }

.postmeta { font-size: 0.88rem; color: #9db6cf; margin-top: 0.9rem; }
.page-hero--post h1 { max-width: 22ch; }

.toc {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.4rem; margin-bottom: 2rem; background: var(--white);
}
.toc__h {
  font-family: var(--display); font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 0.6rem;
}
.toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; }
.toc li { font-size: 0.94rem; }
.toc a { color: var(--blue); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

.prose--post h2 { margin-top: 2.4rem; scroll-margin-top: 100px; }
.prose--post h3 { margin-top: 1.7rem; }
.prose--post ul, .prose--post ol { margin: 1rem 0; padding-left: 1.3rem; }
.prose--post li { margin-bottom: 0.5rem; line-height: 1.65; }

/* Pull-quote style callout for the one fact worth remembering per section. */
.callout {
  background: linear-gradient(135deg, var(--sky), #fdfeff);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.4rem; margin: 1.8rem 0;
}
.callout p { margin: 0; line-height: 1.6; }

/* Tables carry the extractable facts, so they must never clip on mobile. */
.table-wrap { overflow-x: auto; margin: 1.6rem 0; -webkit-overflow-scrolling: touch; }
.prose--post table, .table-wrap table {
  width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 460px;
}
.table-wrap th, .table-wrap td {
  border: 1px solid var(--line); padding: 0.7rem 0.85rem; text-align: left; vertical-align: top;
}
.table-wrap thead th { background: var(--sky); font-family: var(--display); font-weight: 700; }
.table-wrap tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.015); }

.post-cta {
  margin-top: 2.6rem; padding: 2rem; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--sky), #fdfeff); border: 1px solid var(--line);
}
.post-cta h2 { margin-top: 0; }

.postgrid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.postcard {
  display: flex; flex-direction: column; gap: 0.5rem; text-decoration: none;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.postcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--blue-bright); }
.postcard__silo {
  font-family: var(--display); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue);
}
.postcard h3 { margin: 0; font-size: 1.1rem; line-height: 1.35; color: var(--ink); }
.postcard p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55; }
.postcard__more { margin-top: auto; font-weight: 600; font-size: 0.88rem; color: var(--blue); }

@media (max-width: 700px) {
  .answer { padding: 1.1rem 1.15rem; }
  .post-cta { padding: 1.4rem; }
}