/* ==========================================================================
   CP Contractors & Builders — shared base CSS
   Structural rules only. All colors/fonts/radii are CSS custom properties
   defined per-theme in theme-residential.css / theme-commercial.css.
   A few rules that can't cleanly tokenize (gradients, slider-handle shape)
   are intentionally re-declared in each theme file — flagged there.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--ink); }
p { margin: 0; }

*:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.text-accent { color: var(--accent); }

.eyebrow { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); margin: 0 0 14px; font-weight: 600; }
.eyebrow--on-media { color: var(--accent); }
.section-title { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 16px; color: var(--ink); }
.section-sub { color: var(--text); max-width: 620px; font-size: 1rem; line-height: 1.7; }

/* scroll reveal — subtle fade + upward slide as sections enter the viewport.
   Defaults to fully visible so content is never hidden if JS fails to load;
   js/scroll-reveal.js adds .js-reveal to <html> at runtime to opt in.
   The hide step (below) intentionally carries no transition, so it applies
   instantly the moment .js-reveal is added — only the reveal step (via
   .is-visible) animates. Putting the transition on the hidden rule instead
   would make hiding itself animate, racing against JS re-revealing the
   element and sometimes skipping the visible fade entirely. */
.reveal { opacity: 1; transform: none; }
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
}
.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.js-reveal .reveal.is-visible.reveal-delay-1 { transition-delay: 0.15s; }

/* buttons */
.btn { display: inline-block; padding: 13px 24px; font-family: var(--font-body); font-weight: 600; font-size: 0.88rem; letter-spacing: 0.01em; border-radius: var(--radius-btn); border: 2px solid transparent; transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; cursor: pointer; }
.btn--brick { background: var(--brick); color: #fff; border-color: var(--brick); }
.btn--brick:hover { background: var(--brick-dark); transform: translateY(-1px); }
.btn--gold { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.btn--gold:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); }
.btn--ghost { background: transparent; border-color: var(--ghost-border); color: var(--ghost-color); }
.btn--ghost:hover { background: var(--ghost-hover-bg); color: var(--ghost-hover-color); }
.btn--ghost-on-media { border-color: var(--ghost-media-border); color: var(--on-media); }
.btn--ghost-on-media:hover { background: var(--ghost-media-hover-bg); border-color: var(--on-media); color: var(--on-media); }
.btn--lg { padding: 16px 30px; font-size: 0.95rem; }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 14px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { width: 44px; height: 44px; border-radius: 9px; flex-shrink: 0; }
.brand__word { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; line-height: 1.25; color: var(--ink); }
.brand__word span { color: var(--accent-deep); }
.nav { display: flex; align-items: center; gap: 26px; font-size: 0.9rem; font-weight: 500; color: var(--ink); }
.nav a { padding: 10px 0; }
.nav a:hover { color: var(--brick); }

/* services nav dropdown */
.nav-item { display: flex; align-items: center; }
/* padding-bottom + matching negative margin-bottom extends this element's actual
   hoverable box down to meet the dropdown with zero dead space in between —
   without it, the mouse "leaves" the trigger before reaching the panel and
   :hover drops, closing the menu while the cursor is still travelling toward it. */
.nav-item--dropdown { position: relative; padding-bottom: 16px; margin-bottom: -16px; }
.nav-dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  min-width: 220px; max-width: min(420px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.4);
  padding: 10px; margin: 0;
  column-gap: 6px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s;
  z-index: 60;
}
.nav-dropdown--wide { min-width: 420px; column-count: 2; }
.nav-dropdown li { break-inside: avoid; }
.nav-dropdown a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 0.86rem; font-weight: 500; color: var(--text); white-space: nowrap; }
.nav-dropdown a:hover, .nav-dropdown a:focus-visible { background: var(--bg); color: var(--brick); }
.nav-dropdown__all { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.nav-dropdown__all a { color: var(--accent-deep); font-weight: 600; }

.nav-item--dropdown:hover > .nav-dropdown,
.nav-item--dropdown:focus-within > .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.header-cta { display: flex; align-items: center; justify-content: flex-end; gap: 14px 20px; flex-wrap: wrap; }
.header-icon { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--ink); transition: background-color 0.15s ease; }
.header-icon:hover, .header-icon:focus-visible { background: var(--accent-hover); }
.header-icon__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 901px) { .header-icon + .header-icon { margin-left: -10px; } }

/* mobile-menu controls: hidden on desktop (see the max-width: 900px block below).
   .nav-panel is layout-transparent on desktop so brand / nav / header-cta stay
   direct flex children of .header-row exactly as before. */
.nav-panel { display: contents; }
.nav-call, .nav-toggle, .nav-sub-toggle { display: none; }

/* residential <-> commercial cross-link badge */
.nav-crosslink {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  transition: transform 0.15s ease; white-space: nowrap;
}
.nav-crosslink:hover { transform: translateY(-1px); }

/* photo hero — homepage + commercial hub */
.hero { position: relative; min-height: clamp(560px, 80vh, 760px); display: flex; flex-direction: column; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.hero__scrim { position: absolute; inset: 0; } /* gradient values: see theme file */
.hero__content { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 64px 24px 44px; max-width: 760px; margin: 0 auto; }
.hero__headline { font-size: clamp(2.1rem, 4.4vw, 3.1rem); line-height: 1.14; margin: 0 0 20px; }
.hero__headline--on-media { color: var(--on-media); }
.hero__sub { font-size: 1rem; line-height: 1.65; margin-bottom: 28px; max-width: 560px; margin-left: auto; margin-right: auto; }
.hero__sub--on-media { color: var(--on-media); opacity: 0.88; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

.hero__statbar { position: relative; z-index: 1; background: var(--surface-alt); display: flex; flex-wrap: wrap; justify-content: center; }
.hero__statbar > div { padding: 20px 40px; text-align: center; border-left: 1px solid var(--line); }
.hero__statbar > div:first-child { border-left: none; }
.hero__statnum { font-family: var(--font-display); font-weight: 800; color: var(--accent); font-size: 1.3rem; display: block; }
.hero__statlbl { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-media); opacity: 0.65; }
@media (max-width: 700px) {
  .hero__statbar > div { flex: 1 1 50%; padding: 16px 12px; }
  .hero__statbar > div:nth-child(odd) { border-left: none; }
}

/* phones: less zoomed, shorter homepage hero. The photo sits in the top part of the hero and
   fades into the dark surface, and the copy sits on that dark area, so more of the truck shows.
   Scrim: see theme-residential.css */
@media (max-width: 700px) {
  .hero { min-height: 0; background: var(--surface-alt); }
  .hero__media, .hero__scrim { inset: 0 0 auto 0; height: 284px; }
  .hero__media img { object-position: 58% 50%; }
  .hero__content { justify-content: flex-end; padding: 214px 20px 24px; }
  .hero__headline { font-size: clamp(1.85rem, 8vw, 2.2rem); margin-bottom: 14px; }
  .hero__sub { font-size: 0.95rem; line-height: 1.6; margin-bottom: 22px; }
  .hero__statbar { flex-wrap: nowrap; }
  .hero__statbar > div { flex: 1 1 0; min-width: 0; padding: 12px 4px; }
  .hero__statbar > div:nth-child(odd) { border-left: 1px solid var(--line); }
  .hero__statbar > div:first-child { border-left: none; }
  .hero__statnum { font-size: 1.1rem; }
  .hero__statlbl { font-size: 0.56rem; letter-spacing: 0.04em; display: block; line-height: 1.35; }
  .wrap.page-hero__content { padding-block: 32px; } /* the 520px .wrap padding shorthand zeroed the intended vertical padding */
  /* inner-page banners with a photo: same idea as the homepage hero — photo on top fading into the
     dark surface, copy underneath (fade: see the theme files) */
  .page-hero:has(.page-hero__media) { min-height: 0; align-items: flex-start; background: var(--surface-alt); }
  .page-hero__media, .page-hero__scrim { inset: 0 0 auto 0; height: 210px; }
  .page-hero:has(.page-hero__media) .page-hero__content { padding-block: 148px 28px; }
  .page-hero__title { margin-bottom: 12px; }
  .page-hero__sub { font-size: 1rem; margin-bottom: 22px; }
  .page-hero__content > .btn { display: block; width: fit-content; margin-inline: auto; }
}

/* smaller inner-page hero (services, commercial sector pages) */
.page-hero { position: relative; min-height: clamp(280px, 36vh, 380px); display: flex; align-items: center; overflow: hidden; }
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__scrim { position: absolute; inset: 0; } /* gradient values: see theme file */
.page-hero__content { position: relative; z-index: 1; padding: 56px 0; max-width: 720px; }
.page-hero__crumb { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.page-hero__crumb a { color: inherit; opacity: 0.75; }
.page-hero__crumb a:hover { opacity: 1; text-decoration: underline; }
.page-hero__title { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.12; color: var(--on-media); margin-bottom: 16px; }
.page-hero__sub { font-size: 1.05rem; line-height: 1.6; color: var(--on-media); opacity: 0.88; max-width: 560px; margin-bottom: 26px; }
.page-hero--plain { background: var(--surface-alt); } /* used on pages without a matching real photo yet */

/* single-project before/after (service pages) */
.ba-solo { max-width: 640px; margin: 0 auto; }

/* single feature photo (service pages with one real, non-before/after photo) */
.feature-photo { max-width: 780px; margin: 0 auto; border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 20px 34px -22px rgba(0,0,0,0.35); }
.feature-photo img { width: 100%; height: auto; display: block; }

.media-section { padding-block: 56px; border-top: 1px solid var(--line); }
.media-section .wrap { text-align: center; }
.media-section .eyebrow { justify-content: center; }
.media-section .media-placeholder, .media-section .ba-solo, .media-section .feature-photo { margin-top: 28px; }

/* "Explore More of What We Do" — related-service tiles at the foot of service pages */
.more-services { padding-block: 56px 72px; border-top: 1px solid var(--line); }
.more-services .section-title { margin-bottom: 22px; }

/* about */
.about { padding-block: 64px; }
.about__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
.about__lead { font-size: 1.15rem; line-height: 1.65; color: var(--ink); margin: 20px 0 16px; font-weight: 500; }
.about__tagline { margin-top: 26px; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink); }
.about__tagline em { font-style: italic; color: var(--brick); font-family: var(--font-body); font-weight: 700; }
.about__logo { background: var(--surface); border-radius: var(--radius-card); padding: 36px; box-shadow: 0 24px 46px -26px rgba(0,0,0,0.35); }
.about__logo img { width: 100%; height: auto; border-radius: 10px; }
.about__list { margin-top: 18px; display: grid; gap: 10px; }
.about__list li { position: relative; padding-left: 22px; font-size: 0.98rem; line-height: 1.6; color: var(--text); }
.about__list li::before { content: '—'; position: absolute; left: 0; color: var(--brick); }

/* value-pair — two-column icon/text callouts (permits & coordination, minimizing disruption) */
.value-pair { padding-block: 64px; border-top: 1px solid var(--line); }
.value-pair__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 8px; }
.value-card__num { font-family: var(--font-display); font-weight: 800; color: var(--why-accent); font-size: 1.4rem; margin-bottom: 14px; display: block; }
.value-card h3 { font-size: 1.25rem; margin-bottom: 10px; color: var(--ink); }
.value-card p { font-size: 0.98rem; line-height: 1.65; color: var(--text); }

/* audience — "who we work with" three-card row */
.audience { padding-block: 64px; border-top: 1px solid var(--line); }
.audience__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.audience-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 28px 24px; }
.audience-card h3 { font-size: 1.1rem; margin-bottom: 10px; color: var(--ink); }
.audience-card p { font-size: 0.92rem; line-height: 1.6; color: var(--text); }

/* faq — native <details>/<summary> disclosure, no JS required */
.faq { padding-block: 64px; border-top: 1px solid var(--line); }
.faq__list { margin-top: 32px; display: grid; gap: 14px; max-width: 780px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.faq-item summary { cursor: pointer; list-style: none; padding: 20px 24px; font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.02rem; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-family: var(--font-body); font-weight: 400; font-size: 1.4rem; line-height: 1; color: var(--accent); flex-shrink: 0; transition: transform 0.2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 24px 22px; margin: 0; color: var(--text); font-size: 0.98rem; line-height: 1.65; }

/* related-links — internal-linking row on individual service/sector pages */
.related-links { padding-block: 40px; border-top: 1px solid var(--line); }
.related-links h2 { font-size: 1.1rem; margin-bottom: 16px; color: var(--ink); }
.related-links__row { display: flex; flex-wrap: wrap; gap: 12px; }
.related-links__row a { display: inline-block; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--ghost-border); color: var(--ghost-color); font-size: 0.88rem; font-weight: 600; transition: background-color 0.15s ease, color 0.15s ease; }
.related-links__row a:hover { background: var(--ghost-hover-bg); color: var(--ghost-hover-color); }

/* photo service cards — homepage grid + commercial sector cards */
.services { padding-block: 64px; }
.services .section-sub { margin-bottom: 32px; }
.acc-row { display: flex; gap: 14px; min-height: 340px; margin-bottom: 14px; }
.acc-row--secondary { margin-bottom: 20px; }
.acc-panel { position: relative; display: block; flex: 1 1 0; min-width: 0; border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 10px 24px -18px rgba(0,0,0,0.35); transition: box-shadow 0.35s ease, transform 0.35s ease; }
.acc-panel:hover, .acc-panel:focus-visible { box-shadow: 0 24px 44px -20px rgba(0,0,0,0.5); transform: translateY(-4px); }
.acc-panel__media { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.02); transition: transform 0.6s ease; }
.acc-panel:hover .acc-panel__media { transform: scale(1.09); }
.acc-panel__scrim { position: absolute; inset: 0; } /* gradient values: see theme file */
.acc-panel--placeholder .acc-panel__media { background-image: repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 14px); background-color: var(--surface); }
.acc-panel__arrow { position: absolute; top: 16px; right: 16px; z-index: 1; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.16); color: var(--on-media); font-family: var(--font-display); font-size: 1.05rem; transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease; }
.acc-panel:hover .acc-panel__arrow, .acc-panel:focus-visible .acc-panel__arrow { background: var(--accent); color: var(--ink); transform: translate(3px, -3px); }
.acc-panel__body { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 1; }
.acc-panel__body h3 { font-size: 1.2rem; line-height: 1.25; color: var(--on-media); }
.acc-panel__body p { margin-top: 8px; font-size: 0.88rem; line-height: 1.5; color: var(--on-media); opacity: 0.85; }

.cap-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; background: var(--surface-alt); border-radius: var(--radius-card); padding: 48px 52px; }
.cap-cta__title { color: var(--on-media); font-size: 1.5rem; margin-bottom: 10px; }
.cap-cta__sub { color: var(--on-media); opacity: 0.75; font-size: 1rem; line-height: 1.65; max-width: 560px; }
.cap-cta .btn { flex-shrink: 0; }

/* lightweight services-directory tiles */
.svc-group { margin-bottom: 48px; }
.svc-group h2 { margin-bottom: 22px; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.svc-tile { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 26px 24px; transition: border-color 0.15s ease, transform 0.15s ease; }
.svc-tile:hover { border-color: var(--accent); transform: translateY(-3px); }
.svc-tile h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--ink); }
.svc-tile p { font-size: 0.9rem; color: var(--text); line-height: 1.55; }

/* styled placeholder for services without real project photos yet */
.media-placeholder { aspect-ratio: 4 / 3; border-radius: var(--radius-card); background-color: var(--surface); background-image: repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 14px); display: flex; align-items: center; justify-content: center; }
.media-placeholder__text { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-style: italic; color: var(--text); opacity: 0.65; text-align: center; padding: 0 20px; }

/* portfolio / before-after slider */
.portfolio { padding-block: 64px; }
.portfolio .section-sub { margin-bottom: 44px; }
.ba-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
.ba-slider__frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-card); background: var(--line); box-shadow: 0 20px 34px -22px rgba(0,0,0,0.35); }
.ba-slider__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.ba-slider__img--after { clip-path: inset(0 calc(100% - var(--reveal, 50%)) 0 0); }
.ba-slider__handle { position: absolute; top: 0; bottom: 0; left: var(--reveal, 50%); width: var(--handle-width, 6px); background: var(--accent); transform: translateX(-50%); z-index: 2; pointer-events: none; } /* ::before shape: see theme file */
.ba-slider__label { position: absolute; top: 14px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,0.9); color: #14110F; z-index: 1; pointer-events: none; }
.ba-slider__label--before { left: 14px; }
.ba-slider__label--after { right: 14px; }
.ba-slider__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; -webkit-appearance: none; appearance: none; background: transparent; }
.portfolio__note { margin-top: 34px; font-size: 0.82rem; color: var(--text); opacity: 0.55; font-style: italic; }

/* job gallery — card grid + lightbox (auto-generated content lives between
   PORTFOLIO:START/END markers on each page; see scripts/build-portfolio.js) */
.job-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.job-card { display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; cursor: pointer; padding: 0; font: inherit; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 10px 24px -18px rgba(0,0,0,0.35); }
.job-card:hover, .job-card:focus-visible { transform: translateY(-4px); box-shadow: 0 20px 34px -18px rgba(0,0,0,0.4); }
.job-card__frame { position: relative; aspect-ratio: 4/3; }
.job-card__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.job-card__count { position: absolute; top: 14px; right: 14px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,0.9); color: #14110F; }
.job-card .swatch-tag { margin: 14px; box-shadow: none; background: transparent; }
.job-lightbox { border: none; border-radius: var(--radius-card); padding: 0; max-width: min(760px, 92vw); background: var(--surface); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5); text-align: center; } /* set here so the caption doesn't depend on the section the dialog sits in (service pages center theirs, the homepage did not) */
.job-lightbox::backdrop { background: rgba(20,15,9,0.75); }
.job-lightbox__frame { position: relative; aspect-ratio: 4/3; background: var(--line); }
.job-lightbox__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.job-lightbox__body { padding: 20px 24px 24px; }
.job-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,0.9); color: var(--ink); font-size: 1.1rem; cursor: pointer; }
.job-lightbox__nav--prev { left: 14px; }
.job-lightbox__nav--next { right: 14px; }
.job-lightbox__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,0.9); color: var(--ink); font-size: 1rem; cursor: pointer; }
.job-lightbox__counter { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); opacity: 0.7; }
@media (max-width: 860px) { .job-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .job-grid { grid-template-columns: 1fr; } }
/* Homepage-only: bakes up to 6 cards into the static markup (SEO-safe, no
   client fetch) but only displays 4 below the tablet/mobile breakpoint —
   "4 on mobile, 6 on desktop" without a second breakpoint tier. */
@media (max-width: 860px) { .job-grid--home .job-card:nth-child(n+5) { display: none; } }

/* quote band */
.quote-band { background: var(--quote-bg); border-block: var(--quote-border, none); padding-block: 80px; text-align: center; }
.quote-band__inner { max-width: 900px; margin: 0 auto; }
.quote-band__mark { width: 56px; height: 56px; border-radius: 12px; margin: 0 auto 24px; display: block; box-shadow: 0 10px 22px -14px rgba(0,0,0,0.35); }
.quote-band__quote { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.3rem); line-height: 1.4; color: var(--quote-text); margin: 0; }
.quote-band__cite { margin-top: 26px; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--quote-text); opacity: 0.65; }

/* why us / how we work (numbered list) */
.why { padding-block: 64px; }
.why__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: start; }
.why__list li { display: flex; align-items: baseline; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); font-size: 0.98rem; color: var(--text); }
.why__list li:last-child { border-bottom: 1px solid var(--line); }
.why__num { font-family: var(--font-display); font-weight: 800; color: var(--why-accent); font-size: 1.2rem; min-width: 54px; }

/* reviews */
.reviews { padding-block: 64px; }
.reviews__summary { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; margin-bottom: 28px; flex-wrap: wrap; background: var(--surface); border-radius: var(--radius-card); padding: 20px 28px; box-shadow: 0 10px 24px -18px rgba(0,0,0,0.35); }
.reviews__score { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.reviews__sites { display: flex; gap: 10px; flex-wrap: wrap; }
.site-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 10px; border: 1.5px solid var(--line); border-radius: 999px; font-weight: 600; font-size: 0.9rem; color: var(--ink); transition: background 0.2s, color 0.2s, border-color 0.2s; }
.site-chip:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.site-chip__logo { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; }
.site-chip__logo--angi { background: #FF6153; color: #fff; font: 800 0.62rem/1 var(--font-display); letter-spacing: -0.02em; }
.site-chip__logo--yelp { background: #D32323; }
.reviews__rating { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--ink); line-height: 1; }
.reviews__stars { color: var(--accent-deep); font-size: 1.1rem; letter-spacing: 2px; }
.reviews__count { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text); opacity: 0.75; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card { margin: 0; background: var(--surface); border-radius: var(--radius-card); padding: 28px; box-shadow: 0 10px 24px -18px rgba(0,0,0,0.35); display: flex; flex-direction: column; }
.review-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.review-card__stars { color: var(--accent-deep); font-size: 0.9rem; letter-spacing: 1px; }
.review-card__source { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); opacity: 0.75; }
.review-card__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.review-card__source--google .review-card__dot { background: #4285F4; }
.review-card__source--yelp .review-card__dot { background: #FF1A1A; }
.review-card__quote { font-size: 0.94rem; line-height: 1.6; color: var(--text); margin: 0; flex-grow: 1; }
.review-card__author { margin-top: 18px; font-size: 0.85rem; color: var(--text); }
.review-card__author strong { display: block; color: var(--ink); font-weight: 700; font-size: 0.9rem; }
.review-card__author span { display: block; opacity: 0.65; margin-top: 2px; }
.reviews__note { margin-top: 28px; font-size: 0.82rem; color: var(--text); opacity: 0.55; font-style: italic; }
.review-card__source--angi .review-card__dot { background: #FF6153; }
a.reviews__count { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.review-card__quote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.review-card.is-expanded .review-card__quote { display: block; }
.review-card__more { align-self: flex-start; margin-top: 10px; padding: 0; background: none; border: 0; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--accent-deep); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.review-card__author .review-card__name { display: block; color: var(--ink); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.review-card__author .review-card__name:hover { text-decoration: underline; }
.reviews__links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; margin: 28px 0 0; }
.reviews__link { font-weight: 600; color: var(--accent-deep); text-decoration: none; }
.reviews__link:hover { text-decoration: underline; }
.reviews__attribution { flex-basis: 100%; font-size: 0.8rem; color: var(--text); opacity: 0.6; }

/* cta band */
.cta-band { padding-block: 96px; text-align: center; background: var(--surface-alt); border-radius: var(--cta-radius, 0); margin: var(--cta-margin, 0); border-top: var(--cta-border, none); }
.cta-band__inner { max-width: 700px; margin: 0 auto; }
.cta-band__title { font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.12; margin-bottom: 20px; color: var(--on-media); }
.cta-band__sub { max-width: 480px; margin: 0 auto 34px; color: var(--on-media); opacity: 0.75; font-size: 1rem; line-height: 1.7; }

/* footer */
.site-footer { background: var(--surface-alt); padding-top: 48px; margin-top: 40px; }
.footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; padding-bottom: 36px; }
.footer__brand { display: flex; align-items: center; gap: 12px; }
.footer__mark { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; }
.footer__brand p { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--on-media); }
.footer__brand p span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.74rem; color: var(--on-media); opacity: 0.55; margin-top: 4px; }
.footer__area h4, .footer__contact h4 { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; font-weight: 600; }
.footer__area p, .footer__contact p { color: var(--on-media); opacity: 0.72; font-size: 0.9rem; line-height: 1.6; }
.footer__social { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; min-height: 44px; color: var(--on-media); font-size: 0.9rem; text-decoration: none; transition: color 0.2s, opacity 0.2s; }
.footer__social svg { flex-shrink: 0; color: var(--accent); }
.footer__social:hover, .footer__social:focus-visible { color: var(--accent); }
.footer__social:hover span { text-decoration: underline; }
.footer__crosslink { grid-column: 1 / -1; padding: 18px 0 0; margin-top: 4px; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--on-media); opacity: 0.85; }
.footer__crosslink a { color: var(--accent); font-weight: 600; opacity: 1; }
.footer__crosslink a:hover { text-decoration: underline; }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); padding-block: 18px; margin-top: 8px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--on-media); opacity: 0.4; }
.footer__bottom a { opacity: 0.7; text-decoration: none; }
.footer__bottom a:hover { opacity: 1; text-decoration: underline; }

/* mobile header — compact bar (logo + call + hamburger); the menu drops down on demand.
   Collapsing is scoped to .js-nav (set by js/nav-toggle.js) so with no JS the menu
   simply stays visible instead of becoming unreachable. */
@media (max-width: 900px) {
  .wrap.header-row { flex-wrap: wrap; gap: 8px; padding-block: 10px; } /* .wrap.* so the later 520px .wrap padding shorthand can't zero it */
  .brand { margin-right: auto; min-width: 0; }

  .nav-call, .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border-radius: 999px; flex-shrink: 0;
    font: inherit; cursor: pointer;
  }
  .nav-call { background: var(--brick); color: #fff; border: 2px solid var(--brick); transition: background-color 0.15s ease; }
  .nav-call:hover { background: var(--brick-dark); border-color: var(--brick-dark); }
  .nav-toggle { display: none; background: transparent; color: var(--ink); border: 2px solid var(--ink); }
  .js-nav .nav-toggle { display: inline-flex; }
  .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
    display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px;
    transition: transform 0.2s ease, background-color 0.2s ease, top 0.2s ease;
  }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before, .nav-toggle__bars::after { content: ''; position: absolute; left: 0; }
  .nav-toggle__bars::before { top: -6px; }
  .nav-toggle__bars::after { top: 6px; }
  .site-header.is-open .nav-toggle__bars { background: transparent; }
  .site-header.is-open .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
  .site-header.is-open .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

  /* the panel: stacked and visible without JS; a dropdown overlay with JS */
  .nav-panel { display: block; flex: 0 0 100%; padding: 4px 18px 18px; border-top: 1px solid var(--line); }
  .js-nav .nav-panel {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 55;
    background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 36px -22px rgba(33, 26, 18, 0.5);
    max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px);
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
  }
  .js-nav .site-header.is-open .nav-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

  .nav { flex-direction: column; align-items: stretch; gap: 0; font-size: 1.02rem; }
  .nav > a, .nav-item > a {
    display: flex; align-items: center; min-height: 52px; padding: 0 2px;
    border-bottom: 1px solid var(--line);
  }
  .nav-item { display: flex; flex-wrap: wrap; align-items: stretch; }
  .nav-item > a { flex: 1; }
  .nav-item--dropdown { padding-bottom: 0; margin-bottom: 0; }

  /* services list: an expandable row */
  .js-nav .nav-sub-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; min-height: 52px; padding: 0; background: transparent; border: 0; border-bottom: 1px solid var(--line);
    color: var(--ink); cursor: pointer;
  }
  .nav-sub-toggle::before {
    content: ''; width: 9px; height: 9px; margin-top: -4px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform 0.2s ease;
  }
  .nav-item--dropdown.is-expanded > .nav-sub-toggle::before { transform: rotate(225deg); margin-top: 4px; }
  .nav-dropdown, .nav-dropdown--wide {
    position: static; transform: none; flex-basis: 100%; min-width: 0; max-width: none; width: 100%;
    column-count: 1; box-shadow: none; border: none; border-radius: 0; background: transparent;
    padding: 0 0 6px 14px; margin: 0; display: none;
  }
  .nav-item--dropdown.is-expanded > .nav-dropdown { display: block; opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-dropdown a { white-space: normal; padding: 13px 12px; font-size: 0.95rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav-dropdown li:last-child a { border-bottom: 0; }
  .nav-dropdown__all { border-top: 0; margin-top: 0; padding-top: 0; }

  .header-cta { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; padding-top: 18px; }
  .header-icon { width: auto; height: auto; min-height: 44px; border-radius: 0; background: none; color: var(--ink); font-weight: 600; font-size: 0.95rem; }
  .header-icon:hover, .header-icon:focus-visible { background: none; color: var(--brick); }
  .header-icon__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .header-cta .btn { display: block; text-align: center; width: 100%; }
}

@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; gap: 32px; }
  .about__logo { order: -1; max-width: 360px; margin-inline: auto; }
  .about__logo--text { order: 0; max-width: none; margin-inline: 0; }
  .value-pair__grid { grid-template-columns: 1fr; gap: 32px; }
  .audience__grid { grid-template-columns: repeat(2, 1fr); }
  .acc-row { flex-direction: column; height: auto; min-height: 0; gap: 16px; }
  .acc-row--secondary { margin-bottom: 20px; }
  .acc-panel { flex: none; min-height: 220px; }
  .cap-cta { flex-direction: column; align-items: flex-start; gap: 22px; padding: 36px 32px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .ba-grid { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr; gap: 36px; }
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; gap: 26px; }
  .cta-band { margin-inline: 16px; }
}
@media (max-width: 640px) {
  .audience__grid { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .wrap { padding: 0 18px; }
  /* the .wrap shorthand above would zero the footer's own vertical padding; restore it with a bit more room at the very bottom */
  .wrap.footer__grid { padding-bottom: 36px; }
  .wrap.footer__bottom { padding-block: 22px calc(36px + env(safe-area-inset-bottom, 0px)); }
  .svc-grid { grid-template-columns: 1fr; }
}
.reviews__links:empty { display: none; }
@media (max-width: 560px) {
  .reviews__summary { padding: 18px 20px; }
  .reviews__sites { width: 100%; gap: 8px; }
  .site-chip { flex: 1 1 0; justify-content: center; gap: 6px; padding: 8px 6px; font-size: 0.85rem; }
  .site-chip__logo { width: 22px; height: 22px; }
  .site-chip__logo--angi { font-size: 0.5rem; }
  .site-chip__logo--yelp svg { width: 14px; height: 14px; }
}