/* Production image rendering. Replaces the design-tool <image-slot> web component. */
.hero-photo .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.svc-media .slot-img,
.philosophy-media .slot-img,
.about-media .slot-img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;box-shadow:var(--shadow-lg);}
/* Dark/slate-section photos get a 1px light hairline ring (0 0 0 1px spread,
   follows the border-radius) so they read as framed, finished panels. 2026-07-07 */
.svc-dark .svc-media .slot-img{box-shadow:0 20px 50px rgba(0,0,0,0.45), 0 0 0 1px rgba(253,248,244,0.12);}
.svc-slate .svc-media .slot-img{box-shadow:0 20px 50px rgba(0,0,0,0.30), 0 0 0 1px rgba(253,248,244,0.12);}
.philosophy-media .slot-img{box-shadow:0 20px 50px rgba(0,0,0,0.40), 0 0 0 1px rgba(253,248,244,0.12);}

/* ============================================================
   TWEAKS 2026-06-04 (Alexander review pass)
   ============================================================ */

/* (2) Mobile drawer is dark, but the "Call" button used the light-mode
   .btn-outline colors (dark text + dark border) so it was nearly invisible.
   Give it the on-dark treatment so it reads clearly. */
.drawer-cta .btn-outline{ color: var(--color-warm-white); box-shadow: inset 0 0 0 2px rgba(253,248,244,0.55); }
.drawer-cta .btn-outline:hover{ box-shadow: inset 0 0 0 2px var(--color-warm-white); background: rgba(253,248,244,0.06); }

/* (4) Make the "We measure before we recommend" photo size-consistent with the
   service-section photos. It collapsed to one column at 1000px (capped 460px),
   while the service sections collapse at 760px with a full-width image, so in the
   760-1000 tablet range and on mobile it rendered a different size. Align it. */
@media (max-width: 1000px) and (min-width: 761px){
  .philosophy-grid{ grid-template-columns: 1fr 1fr; }   /* stay 2-col like the services */
  .philosophy-media{ max-width: none; }
}
@media (max-width: 760px){
  .philosophy-media{ max-width: none; }                  /* full-width on mobile, like .svc-media */
}

/* (5a) The Google rating is now a link to the Business Profile. Keep it looking
   like text (no default underline/blue), with a subtle hover. */
.hero-trust-link{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:inherit; border-radius:6px; transition: color var(--transition-fast); }
.hero-trust-link:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-color: rgba(253,248,244,0.45); }
.hero-trust-link:hover b{ color: var(--color-nova-orange); }
a.reviews-rating{ text-decoration:none; cursor:pointer; transition: color var(--transition-fast); }
a.reviews-rating:hover{ text-decoration:underline; text-underline-offset:3px; }
a.reviews-rating:hover b{ color: var(--color-nova-orange); }
.reviews-cta{ text-align:center; margin-top: var(--space-10); }

/* ============================================================
   NAV MEGA-MENU + LINKED CHIPS 2026-06-04 (set-and-forget nav)
   ============================================================ */

/* Services dropdown upgraded to a light 5-column mega-menu: hub headers + key pages.
   Desktop only (nav collapses to the hamburger below 1000px). */
.nav-dd-menu.mega{ width: min(780px, calc(100vw - 200px)); left: 0; padding: var(--space-5); }
.nav-dd-mega{ display:grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4) var(--space-3); }
.nav-col{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.nav-col-head{
  font-family:var(--font-body); font-weight:var(--fw-bold); font-size:12px; line-height:1.25;
  letter-spacing:.04em; text-transform:uppercase; color:var(--color-nova-orange);
  padding:5px 8px; margin-bottom:3px; border-radius:6px; text-decoration:none;
}
.nav-col-head:hover{ background:rgba(249,139,62,0.12); }
.nav-col a:not(.nav-col-head){
  font-family:var(--font-body); font-weight:var(--fw-medium); font-size:13px; line-height:1.3;
  color:rgba(253,248,244,0.72); padding:6px 8px; border-radius:6px; text-decoration:none;
}
.nav-col a:not(.nav-col-head):hover{ color:var(--color-warm-white); background:rgba(249,139,62,0.10); }

/* Service-section chips are now real links to their page/section. */
a.chip{ text-decoration:none; }


/* ============================================================
   INTERIOR PAGE BITS (service pages) 2026-06-04
   ============================================================ */
.crumbs{ background: var(--color-charcoal-deep); border-bottom:1px solid rgba(253,248,244,0.08); }
.crumbs .wrap{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px var(--section-pad-h); font-family:var(--font-body); font-size:13px; color:rgba(253,248,244,0.55); }
.crumbs a{ color:rgba(253,248,244,0.72); text-decoration:none; }
.crumbs a:hover{ color:var(--color-nova-orange); }
.crumbs .sep{ color:rgba(253,248,244,0.30); }
.crumbs .here{ color:var(--color-warm-white); }
/* cluster cards (size-it-right links) */
.cluster-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4); margin-top:var(--space-6); }
.cluster-card{ display:block; background:rgba(253,248,244,0.05); border:1px solid rgba(253,248,244,0.12); border-radius:var(--radius-lg); padding:var(--space-5); text-decoration:none; transition:border-color var(--transition-fast), transform var(--transition-fast), background var(--transition-fast); }
.cluster-card:hover{ border-color:var(--color-nova-orange); transform:translateY(-2px); background:rgba(249,139,62,0.08); }
.cluster-card .cc-title{ font-family:var(--font-body); font-weight:var(--fw-bold); font-size:16px; color:var(--color-warm-white); display:flex; align-items:center; gap:8px; }
.cluster-card .cc-title::after{ content:"\2192"; color:var(--color-nova-orange); }
.cluster-card .cc-sub{ font-family:var(--font-body); font-size:13.5px; line-height:1.5; color:rgba(253,248,244,0.66); margin-top:6px; }
@media (max-width:600px){ .cluster-cards{ grid-template-columns:1fr; } }
/* light cluster-cards: hub light sections (.svc / .svc.alt) get white cards with dark text
   (the base .cluster-card above is dark-only: translucent white tint + light text). Scoped to
   .svc so the service pages' dark .svc-slate card sections are unaffected. (2026-06-20 hub redesign) */
.svc .cluster-card{ background:var(--bg-light-raised); border-color:var(--border-light); box-shadow:var(--shadow-sm); }
.svc .cluster-card:hover{ border-color:var(--color-nova-orange); background:#fff; box-shadow:var(--shadow-md); transform:translateY(-2px); }
.svc .cluster-card .cc-title{ color:var(--color-charcoal); }
.svc .cluster-card .cc-sub{ color:var(--fg-on-light-muted); }
/* related services row */
.related{ border-top:1px solid var(--border-light); }

/* ============================================================
   GENERATED-PAGE PROSE (build_site.py) 2026-06-04
   Lists, subheads, and pull quotes the generator emits from the
   skill markdown. Styled for both light (.svc) and dark (.on-dark) sections.
   ============================================================ */
.body .prose-list{ margin: var(--space-4) 0; padding-left: 1.3em; display:flex; flex-direction:column; gap:10px; }
.body .prose-list li{ font-family:var(--font-body); font-size: var(--text-body-lg); line-height: var(--lh-relaxed); color: var(--fg-on-light-muted); }
.body ul.prose-list li::marker{ color: var(--color-nova-orange); }
.body ol.prose-list li::marker{ color: var(--color-nova-orange); font-weight: var(--fw-bold); }
.on-dark .body .prose-list li{ color: rgba(253,248,244,0.82); }

.body .prose-h3{ font-family:var(--font-body); font-weight:var(--fw-bold); font-size:18px; line-height:1.3; margin: var(--space-6) 0 var(--space-2); color: var(--color-charcoal-deep); }
.on-dark .body .prose-h3{ color: var(--color-warm-white); }

.body .pullquote{ margin: var(--space-6) 0; padding: var(--space-4) var(--space-5); border-left: 3px solid var(--color-nova-orange); background: rgba(249,139,62,0.06); border-radius: 8px; }
.body .pullquote blockquote{ margin:0; font-family:var(--font-body); font-size:18px; line-height: var(--lh-relaxed); font-style: italic; color: var(--color-charcoal-deep); }
.body .pullquote figcaption{ margin-top:10px; font-family:var(--font-body); font-weight:var(--fw-semibold); font-size:13px; font-style:normal; color: var(--color-slate); }
.on-dark .body .pullquote{ background: rgba(253,248,244,0.06); }
.on-dark .body .pullquote blockquote{ color: var(--color-warm-white); }
.on-dark .body .pullquote figcaption{ color: rgba(253,248,244,0.6); }

/* ── Guide FAQ rendered OPEN, read-through (2026-06-20) ──
   Service pages keep the collapsed `.faq` accordion (scannable). GUIDES render
   the same authored Q&A expanded as `.faq-open` so the page reads start to finish
   like an article (the accordion otherwise hides ~40% of a guide's words, and the
   citability grader can't see answers behind buttons). FAQPage JSON-LD is identical. */
/* Center the whole Q&A column at the same 820px as the text sections (it was
   left-hugging at 74ch with no auto-margins, so it looked shifted left vs the
   centered body). Question = bold charcoal heading; answer = muted prose (no bold
   lead) so the two read as distinct, not one dark block. 2026-06-20 */
.faq-open .faq-head{ max-width: 820px; margin-left: auto; margin-right: auto; }
.faq-open .faq-open-list{ max-width: 820px; margin: var(--space-6) auto 0; }
.faq-open .faq-open-item{ padding: var(--space-6) 0; border-top: 1px solid var(--border-light); }
.faq-open .faq-open-item:first-child{ border-top: none; padding-top: var(--space-2); }
.faq-open .faq-open-q{ font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 21px; line-height: 1.3; color: var(--color-charcoal); margin: 0 0 var(--space-2); }
.faq-open .faq-open-a{ margin: 0; }
.faq-open .faq-open-a p{ margin: 0; color: var(--fg-on-light-muted); }

/* ── Nav IA: mega quick-links + mobile accordion + footer sitemap (2026-06-08) ── */
.nav-dd-foot { flex-wrap: wrap; gap: var(--space-4); }
.nav-dd-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.nav-dd-quick a { font-family: var(--font-body); font-size: 13px; font-weight: var(--fw-medium); color: rgba(253,248,244,0.62); }
.nav-dd-quick a:hover, .nav-dd-quick a[aria-current="page"] { color: var(--color-nova-orange); }
.nav-dd-foot-cta { display: flex; align-items: center; gap: var(--space-3); }

.drawer-acc { border-bottom: 1px solid rgba(253,248,244,0.06); }
.drawer-cat {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-weight: var(--fw-medium); font-size: 18px;
  color: rgba(253,248,244,0.82); padding: 13px var(--space-3); border-radius: 9px;
}
.drawer-cat:hover { color: var(--color-nova-orange); background: rgba(249,139,62,0.06); }
.drawer-cat .chev { width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.22s ease; }
.drawer-acc.open .drawer-cat { color: var(--color-nova-orange); }
.drawer-acc.open .drawer-cat .chev { transform: rotate(180deg); }
.drawer-sub { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; }
.drawer-sub a {
  display: block; font-family: var(--font-body); font-size: 15.5px; color: rgba(253,248,244,0.6);
  padding: 9px var(--space-3) 9px var(--space-6); border-radius: 8px;
}
.drawer-sub a:hover { color: var(--color-warm-white); background: rgba(253,248,244,0.05); }
.drawer-divider { height: 1px; background: rgba(253,248,244,0.08); margin: var(--space-4) var(--space-3); }

.footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.15fr; }
.footer-group + .footer-group { margin-top: 28px; }
.footer-services .footer-links { gap: 9px; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

/* ── "You are here" highlight across the whole nav (2026-06-08) ──
   build_site.py's mark() already stamps aria-current="page" on the matching
   link everywhere in the nav. Previously only the .nav-dd-quick strip had a
   paint rule, so the cue only showed on the 4 Company pages. Paint it on the
   mega-menu service links + hub heads + the top-bar links too. Desktop only
   (the mega menu and top-bar links are hidden below 1000px). Slightly stronger
   than the hover state so "current" reads distinct from "hovering". */
.nav-dd-mega .nav-col a[aria-current="page"]{
  color: var(--color-nova-orange);
  background: rgba(249,139,62,0.14);
  font-weight: var(--fw-semibold);
}
.nav-dd-mega .nav-col a.nav-col-head[aria-current="page"]{
  background: rgba(249,139,62,0.18);
}
.nav-links > a[aria-current="page"]{ color: var(--color-nova-orange); }