/* BRANDHEAD shared header (2026-08-15). Loaded after each page's inline <style>, so every
   rule here targets header.lacc-head / .lh-* classes the legacy per-page CSS never styles;
   the old header{} element rules are out-specified, the old .bar/.brand/.hcall rules go
   inert because the new markup does not use those class names.

   Variants, stamped by /assets/header-variant.js onto <html data-lh="...">:
     tall  (Option A) - desktop keeps a sticky header bar, grown to fit the circular logo.
     float (Option B) - desktop header background drops away; logo + actions float fixed.
   Phones (<=860px) render the SAME treatment in both variants: circular logo floating
   top-left, round burger + call buttons floating top-right, body padded so the floating
   pair never covers resting content. No JS => no data-lh attribute => tall fallback. */

:root{
  --lh-disc:250px;        /* desktop logo WIDTH (mark is 1.42:1, height auto) */
  --lh-disc-sm:170px;     /* desktop float, after scroll */
  --lh-disc-ph:150px;     /* phone logo WIDTH */
  --lh-btn:52px;          /* round action buttons (>=44px WCAG 2.2 target) */
  --lh-surface:#12161d;
  --lh-ring:rgba(255,255,255,.28);
  --lh-gold:#ffb020;
}

/* Rides along with the header rebuild (2026-08-15): the long gordon@laconstructionconsultants.com
   mailto links overflowed a 320px viewport by up to 35px on /privacy/, /terms/, /book/ and /404
   BEFORE this rebuild (measured on the pre-edit tree, so pre-existing, not a header regression).
   Every page loads this sheet, so the one-line wrap fix lives here. */
a[href^="mailto:"]{overflow-wrap:anywhere}

header.lacc-head{position:sticky;top:0;z-index:70;background:rgba(18,22,29,.94);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border-bottom:1px solid rgba(255,255,255,.09)}
.lh-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  max-width:1080px;margin:0 auto;padding:12px 22px}
/* Joseph 2026-08-14: Option B, logo floats with NO background, larger.
   The solid disc (logo-circle.png) is gone; this is the transparent mark (logo.png, 732x516).
   Because it is 1.42:1 and NOT square, height must be auto or the mark distorts.
   Separation now comes from drop-shadow, which follows the mark's own outline, rather than a
   box-shadow that would draw a rectangle around a transparent PNG. */
.lh-brand{display:inline-flex;text-decoration:none}
.lh-brand img{width:var(--lh-disc);height:auto;display:block;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.85)) drop-shadow(0 0 2px rgba(0,0,0,.65));
  transition:width .22s ease}
.lh-actions{display:flex;align-items:center;gap:12px}
.lh-call{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#fff;
  text-decoration:none;font-weight:700;font-size:15px;border:1.5px solid var(--lh-ring);
  border-radius:999px;padding:9px 18px;background:var(--lh-surface)}
.lh-call svg{width:16px;height:16px;fill:var(--lh-gold);flex:none}
.lh-call .lh-num{white-space:nowrap}
.lh-burger{width:var(--lh-btn);height:var(--lh-btn);border-radius:50%;flex:none;
  background:var(--lh-surface);border:1.5px solid var(--lh-ring);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0}
.lh-bico{display:flex;flex-direction:column;gap:5px;width:20px}
.lh-bico i{display:block;height:2px;border-radius:2px;background:#e8edf5;transition:transform .18s ease,opacity .18s ease}
.lh-burger[aria-expanded="true"] .lh-bico i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.lh-burger[aria-expanded="true"] .lh-bico i:nth-child(2){opacity:0}
.lh-burger[aria-expanded="true"] .lh-bico i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.lh-brand:focus-visible,.lh-call:focus-visible,.lh-burger:focus-visible{
  outline:3px solid var(--lh-gold);outline-offset:3px}

/* The menu is its own construction (it is NOT a desktop nav reflowed). JS positions it
   under the burger; z above the page's fixed bottom contact bar (z 60), and its height is
   capped so that bar stays visible and tappable while the menu is open. */
.lh-menu{position:fixed;top:76px;right:14px;z-index:80;width:min(360px,calc(100vw - 28px));
  background:#171c25;border:1px solid rgba(255,255,255,.12);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);padding:8px 0;overflow:auto;
  max-height:min(560px,calc(100dvh - 176px))}
.lh-menu[hidden]{display:none}
.lh-mlab{display:block;padding:12px 20px 4px;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#97a1b0}
.lh-menu a{display:flex;align-items:center;min-height:44px;padding:10px 20px;color:#e8edf5;
  text-decoration:none;font-size:15px;font-weight:600}
.lh-menu a:hover{background:rgba(255,255,255,.06);color:#fff}
.lh-menu a:focus-visible{outline:3px solid var(--lh-gold);outline-offset:-3px}
.lh-menu a[aria-current="page"]{color:var(--lh-gold)}
.lh-menu .lh-mcall{color:var(--lh-gold);font-weight:700}

/* ---------- Option B: FLOAT (desktop) ---------- */
@media (min-width:861px){
  html[data-lh="float"] header.lacc-head{position:fixed;left:0;right:0;top:0;background:transparent;
    border-bottom:none;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
  html[data-lh="float"] header.lacc-head::before{content:"";position:absolute;left:0;right:0;top:0;
    height:200px;pointer-events:none;background:linear-gradient(rgba(10,12,16,.82),rgba(10,12,16,0))}
  /* Scrolling DOWN slides the whole floating cluster away (visual-verifier 2026-08-15: a fixed
     opaque disc over a scrolled page hid booking slots and STOLE their taps. elementFromPoint
     on the primary CTA returned the logo link). Scrolling UP, or nearing the top, brings it back
     with its scrim. transform moves hit-testing with it, so nothing off-screen can eat a tap. */
  html[data-lh="float"] header.lacc-head{transition:transform .25s ease}
  html[data-lh="float"].lh-hidden header.lacc-head{transform:translateY(-130%)}
  html[data-lh="float"] .lh-bar{pointer-events:none}
  /* 2026-08-19: .lh-menu ADDED to this restore. The header carries pointer-events:none so the floating
     mark cannot steal taps from booking slots (the 08-15 fix above). nav.lh-menu is a SIBLING of
     .lh-bar inside that same header, so it inherited none: the burger opened, the drawer painted, and
     all 15 links were inert at every width on every page, with taps falling THROUGH to whatever sat
     behind, including a mailto: on phone widths. A fix for tap theft had created tap death.
     No regression risk in the other direction: the drawer carries `hidden` when closed, so it cannot
     receive a tap while shut. Proven both ways by clients/bda-lacc/loops/menu-tap-prover.mjs, which
     was watched failing 12/12 with a passing positive control before this line changed. */
  html[data-lh="float"] .lh-brand,html[data-lh="float"] .lh-actions,html[data-lh="float"] .lh-menu{pointer-events:auto;position:relative}
  /* 2026-08-14: the enlarged no-background mark is 1.42:1, so its BOX is much wider than the old
     96px disc. Inside the centred .lh-bar container that box reached into the content column and
     ate two form inputs on desktop scroll-up (elementFromPoint returned the logo over them).
     Floating chrome belongs to the VIEWPORT, not to the text column: pin it to the left gutter so
     the box can never sit over the content. Measured, not guessed - see the overlap probe. */
  html[data-lh="float"] .lh-bar{max-width:none;padding-left:20px;padding-right:20px}
  html[data-lh="float"] body:not(.embed){padding-top:186px}
  html[data-lh="float"].lh-scrolled .lh-brand img{width:var(--lh-disc-sm);height:auto}
  /* channel pages: the sticky scope panel clears the floating cluster */
  html[data-lh="float"] .drivers{top:130px}
}
/* ---------- Option A: TALL (desktop) ---------- */
@media (min-width:861px){
  html[data-lh="tall"] .drivers{top:196px}
}

/* ---------- Phones and small tablets: identical floating pair in both variants ---------- */
@media (max-width:860px){
  header.lacc-head{position:fixed;left:0;right:0;top:0;background:transparent;border-bottom:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
  header.lacc-head::before{content:"";position:absolute;left:0;right:0;top:0;height:132px;
    pointer-events:none;background:linear-gradient(rgba(10,12,16,.82),rgba(10,12,16,0))}
  /* Same hide-on-scroll-down / reveal-on-scroll-up as desktop float, same reason (tap theft). */
  header.lacc-head{transition:transform .25s ease}
  html.lh-hidden header.lacc-head{transform:translateY(-130%)}
  .lh-bar{pointer-events:none;padding:12px 14px;align-items:flex-start}
  .lh-brand,.lh-actions,.lh-menu{pointer-events:auto;position:relative}
  .lh-brand img{width:var(--lh-disc-ph);height:auto}
  .lh-call{width:var(--lh-btn);height:var(--lh-btn);padding:0;justify-content:center;border-radius:50%}
  .lh-call .lh-num{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    clip-path:inset(50%);white-space:nowrap}
  .lh-call svg{width:19px;height:19px}
  body:not(.embed){padding-top:118px}
  .lh-menu{top:76px;right:10px}
}
