/* Bots on Staff HERO + HEADER KIT - hero.css
   ONE full-bleed picture that fills the first screen, an edge-anchored sheen (never a blob), a headline that says the business,
   at most 4 stacked blocks, a proof strip attached to the bottom.  Numbers: see DEMO-HERO-HEADER-STANDARD.md.
   Owner rules honoured here: full-page picture hero (17 Oct); NO blob (24 Sep, twice); no salmon (8 Oct); picture allowed to be a picture (luma >= 60);
   hero holds the fold with min-height, never height (ux-build 1.3); every vertical gradient stop is in px (ux-build 3.6). */
.hh-hero{
  --hh-proof-h:0px; --hh-pr:0px;
  position:relative;isolation:isolate;overflow:clip;background:var(--hh-ink);color:#fff;display:flex;align-items:flex-end;
  /* the whole first screen = strip + hero + proof strip (+ phone call bar). min-height, never height: at 320px the copy is taller than the screen */
  min-height:max(540px,calc(100vh - var(--hh-strip-h) - var(--hh-proof-h) - var(--hh-bar-total)));
  min-height:max(540px,calc(100svh - var(--hh-strip-h) - var(--hh-proof-h) - var(--hh-bar-total)))
}
.hh-hero.hh-has-proof{--hh-proof-h:calc(66px - var(--hh-proof-r));--hh-pr:var(--hh-proof-r)}
@media (max-width:899.98px){.hh-hero.hh-has-proof{--hh-proof-h:calc(64px - var(--hh-proof-r))}}
.hh-hero__media{position:absolute;inset:0;z-index:-3}
.hh-hero__media picture{display:block;width:100%;height:100%}
.hh-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hh-hero-pos);display:block}
@media (max-width:899.98px){.hh-hero__img{object-position:var(--hh-hero-pos-m)}}

/* THE SHEEN: two linear fades anchored to the BOTTOM and LEFT edges. No radial, no flat core = no blob.
   Vertical stops in px (hero is taller than the screen on phones; % would aim below the fold).
   --hh-sf (config colors.scrimStrength, default 1) scales every alpha: a dark photo takes .6, a bright one 1.1; measure luma and contrast after.
   Horizontal stops keyed to where the 780px text column ends (~58% of a 1440 screen); the last 20% stays at 0 = the picture. */
.hh-hero__scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(var(--hh-scrim),calc(.78 * var(--hh-sf))) 0,rgba(var(--hh-scrim),calc(.58 * var(--hh-sf))) 180px,rgba(var(--hh-scrim),calc(.30 * var(--hh-sf))) 360px,rgba(var(--hh-scrim),0) 560px),
    linear-gradient(90deg,rgba(var(--hh-scrim),calc(.64 * var(--hh-sf))) 0%,rgba(var(--hh-scrim),calc(.56 * var(--hh-sf))) 34%,rgba(var(--hh-scrim),calc(.38 * var(--hh-sf))) 52%,rgba(var(--hh-scrim),calc(.14 * var(--hh-sf))) 68%,rgba(var(--hh-scrim),0) 80%)}
@media (max-width:899.98px){
  .hh-hero__scrim{background:linear-gradient(0deg,rgba(var(--hh-scrim),calc(.80 * var(--hh-sfm))) 0,rgba(var(--hh-scrim),calc(.72 * var(--hh-sfm))) 200px,rgba(var(--hh-scrim),calc(.54 * var(--hh-sfm))) 360px,rgba(var(--hh-scrim),calc(.30 * var(--hh-sfm))) 500px,rgba(var(--hh-scrim),calc(.12 * var(--hh-sfm))) 600px,rgba(var(--hh-scrim),calc(.03 * var(--hh-sfm))) 700px)}
}

.hh-hero__in{position:relative;z-index:2;width:100%;max-width:1360px;margin:0 auto;box-sizing:border-box;
  padding:calc(var(--hh-space) + 24px) var(--hh-gut) calc(clamp(28px,5vh,56px) + var(--hh-pr))}
.hh-hero__copy{max-width:860px;font-family:var(--hh-body)}
.hh-hero__copy>*{margin-left:0;margin-right:0}

.hh-hero h1{margin:0;font-family:var(--hh-display);font-weight:600;letter-spacing:-.035em;line-height:1.05;color:#fff;
  font-size:clamp(35px,4.4vw,64px);max-width:13em;text-wrap:balance;text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 22px rgba(0,0,0,.42)}
.hh-voice-serif h1{font-weight:400;letter-spacing:-.005em;line-height:1.07}
.hh-hero h1 em{font-style:normal;color:var(--hh-accent-dark)}
.hh-voice-serif h1 em{font-style:normal}
.hh-hero__pin{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:9px 16px 9px 12px;border-radius:999px;font:650 14px/1 var(--hh-body);letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:rgba(var(--hh-scrim),.6);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.hh-hero__pin svg{width:18px;height:18px;color:var(--hh-accent-dark);flex:none}
.hh-hero__place{margin:16px 0 0;font:650 clamp(14px,1.2vw,17px)/1.4 var(--hh-body);letter-spacing:.14em;text-transform:uppercase;color:var(--hh-accent-dark);text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 16px rgba(0,0,0,.45)}
.hh-hero__sub{margin:16px 0 0;max-width:60ch;font:500 clamp(17px,1.5vw,21px)/1.45 var(--hh-body);color:var(--hh-on-dark);text-shadow:0 1px 2px rgba(0,0,0,.65),0 2px 18px rgba(0,0,0,.5)}
.hh-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hh-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 28px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;text-align:center;font:700 17px/1.15 var(--hh-body);letter-spacing:.005em;transition:filter .2s var(--hh-ease),transform .2s var(--hh-ease),background-color .2s var(--hh-ease)}
.hh-btn svg{width:20px;height:20px;flex:none}
.hh-btn--primary{background:linear-gradient(180deg,var(--hh-cta-hi),var(--hh-cta-bg));color:var(--hh-cta-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 26px -12px rgba(0,0,0,.7)}
.hh-btn--primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.hh-btn--ghost{color:#fff;background:rgba(var(--hh-scrim),.55);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.hh-btn--ghost:hover{background:rgba(var(--hh-scrim),.72)}
.hh-hero__chips{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.hh-hero__chips li{padding:9px 15px;border-radius:999px;font:600 14.5px/1.1 var(--hh-body);color:#fff;background:rgba(var(--hh-scrim),.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);text-shadow:none}
@media (max-width:899.98px){
  .hh-hero__cta{flex-direction:column;align-items:stretch;margin-top:22px}
  .hh-btn{font-size:16px;padding:0 20px}
  body:has(.hh-bar) .hh-hero__cta .hh-btn--ghost{display:none}      /* the call bar already carries Call */
  .hh-hero__sub{font-size:17px}
  .hh-hero__place{font-size:14px}
}

/* ---------- proof strip: attached to the hero's bottom edge, one real number ---------- */
.hh-proof{--hh-proof-bg:#f4f1ea;position:relative;z-index:1;margin-top:calc(-1 * var(--hh-proof-r));min-height:66px;border-radius:22px 22px 0 0;background:var(--hh-proof-bg);color:#14181f;box-shadow:0 -22px 46px -20px rgba(0,0,0,.5);font-family:var(--hh-body);display:flex;align-items:center;justify-content:center}
.hh-proof__a{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 14px;padding:10px var(--hh-gut);width:100%;color:inherit;text-decoration:none;min-height:66px}
.hh-proof__stars{display:inline-flex;color:var(--hh-accent)}
.hh-proof__stars svg{width:96px;height:18px}
.hh-proof__score{font:700 26px/1 var(--hh-display);letter-spacing:-.02em}
.hh-proof__on{font:500 16px/1 var(--hh-body)}
.hh-proof__go{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--hh-ink);color:#fff;font:650 15px/1 var(--hh-body)}
.hh-proof__go svg{width:16px;height:16px}
@media (max-width:899.98px){.hh-proof{border-radius:16px 16px 0 0;min-height:64px}.hh-proof__a{min-height:64px;gap:4px 12px;padding-top:8px;padding-bottom:8px}.hh-proof__score{font-size:22px}.hh-proof__on{font-size:15px}.hh-proof__stars svg{width:84px;height:16px}}

/* ---------- motion: ONE signature move, once. Nothing starts invisible (transform only), so the picture and the words are readable at t=0.
   html.hh-anim is set by the head snippet ONLY when prefers-reduced-motion is not reduce and the URL has no ?still. ---------- */
@keyframes hh-settle{from{transform:scale(1.045)}to{transform:none}}
@keyframes hh-rise{from{transform:translateY(14px)}to{transform:none}}
html.hh-anim .hh-motion-settle .hh-hero__img{animation:hh-settle 1.6s var(--hh-ease) both}
html.hh-anim .hh-hero:not(.hh-motion-none) .hh-hero__copy>*{animation:hh-rise .7s var(--hh-ease) both}
html.hh-anim .hh-hero__copy>*:nth-child(2){animation-delay:.06s}
html.hh-anim .hh-hero__copy>*:nth-child(3){animation-delay:.12s}
html.hh-anim .hh-hero__copy>*:nth-child(4){animation-delay:.18s}
html.hh-anim .hh-hero__copy>*:nth-child(5){animation-delay:.24s}
@media (prefers-reduced-motion:reduce) and (max-width:0px){
  .hh-hero__img,.hh-hero__copy>*,.hh-card,.hh-card *,.hh-hero__edge svg{animation:none!important}
  .hh-btn{transition:none!important}
}

/* ================= ROUND 2 (5 Nov): accent options, proof card, foreground, city edge, one signature move per trade ================= */
.hh-hero__place span{white-space:nowrap}
.hh-hero__place i{font-style:normal}
.hh-accent-block h1 em{display:block}
/* the accent as a true-colour RULE under white type (city pages: a gradient taken from the photo, never a tinted headline) */
.hh-accent-rule h1 em{color:#fff;background:linear-gradient(90deg,var(--hh-g1),var(--hh-g2),var(--hh-g3)) 0 100%/100% .07em no-repeat;padding-bottom:.15em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hh-hero{--hh-edge-h:0px}
.hh-has-edge{--hh-edge-h:var(--hh-edge-d,0px)}   /* skyline edge is PHONE-ONLY by default (round 3: on desktop it read as a bar chart); city.edgeDesktop opts in */
.hh-has-edge .hh-hero__in{padding-bottom:calc(clamp(28px,5vh,56px) + var(--hh-pr) + var(--hh-edge-h))}
.hh-hero__edge{display:none;position:absolute;left:0;right:0;bottom:-1px;height:var(--hh-edge-h);z-index:1;pointer-events:none;color:var(--hh-edge-color)}
.hh-hero__edge svg{display:block;width:100%;height:100%}
/* ONE proof object on the picture side (cream card: raises picture-side luma, ink on cream >= 14:1) */
.hh-card{position:absolute;z-index:2;right:max(var(--hh-gut),calc((100% - 1360px)/2 + var(--hh-gut)));top:calc(var(--hh-space) + 28px);width:clamp(296px,23vw,330px);box-sizing:border-box;padding:18px 18px;border-radius:20px;background:rgba(var(--hh-card-bg),.92);color:var(--hh-card-ink);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 20px 44px -20px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.55);font-family:var(--hh-body)}
.hh-card__k{margin:0 0 6px;font:700 12.5px/1.2 var(--hh-body);letter-spacing:.14em;text-transform:uppercase}
.hh-card__rows{list-style:none;margin:0;padding:0}
.hh-card__rows li{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;padding:10px 0;border-top:1px solid rgba(20,24,31,.16);font:600 15px/1.25 var(--hh-body)}
.hh-card__t{white-space:nowrap}
.hh-card__c{font:700 12.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em}
.hh-card__s{padding:4px 9px;border-radius:999px;background:var(--hh-cta-bg);color:var(--hh-cta-ink);font:700 12px/1.1 var(--hh-body)}
.hh-card__score{display:flex;align-items:center;gap:12px;margin:2px 0 4px}
.hh-card__score strong{font:700 46px/1 var(--hh-display);letter-spacing:-.03em}
.hh-card__stars{display:inline-flex;color:var(--hh-accent)}.hh-card__stars svg{width:96px;height:18px}
.hh-card__txt{margin:0;font:600 15px/1.35 var(--hh-body)}
@media (max-width:899.98px){
  .hh-card{display:none}
  .hh-has-edge{--hh-edge-h:34px}
  .hh-has-edge .hh-hero__edge{display:block}
  body:has(.hh-bar) .hh-hero__cta--bar{display:none}   /* the call bar already carries Call AND the same primary action: one door, not two */
}
@keyframes hh-slide{from{transform:translateX(26px)}to{transform:none}}
@keyframes hh-pop{from{transform:scale(.82)}to{transform:none}}
@keyframes hh-roof{from{transform:translateY(54px)}to{transform:none}}
@keyframes hh-edge{from{transform:translateY(22px)}to{transform:none}}
@keyframes hh-drop{from{transform:translateY(-14px)}to{transform:none}}
/* signature moves: transform only, once, readable at t=0 (backwards fill: shifted, never hidden). Only inside html.hh-anim. */
html.hh-anim .hh-sig-repair-order .hh-card{animation:hh-drop .7s var(--hh-ease) .15s backwards}
html.hh-anim .hh-sig-repair-order .hh-card__rows li{animation:hh-slide .6s var(--hh-ease) backwards}
html.hh-anim .hh-sig-repair-order .hh-card__rows li:nth-child(1){animation-delay:.4s}
html.hh-anim .hh-sig-repair-order .hh-card__rows li:nth-child(2){animation-delay:.55s}
html.hh-anim .hh-sig-repair-order .hh-card__rows li:nth-child(3){animation-delay:.7s}
html.hh-anim .hh-sig-repair-order .hh-card__s{animation:hh-pop .45s var(--hh-ease) 1.1s backwards}

/* rule style: the accent lives in the underline, the pin and the buttons; small copy stays full cream ink (>= 4.5:1 measured) */
.hh-accent-rule .hh-hero__place{color:var(--hh-on-dark)}
.hh-accent-rule .hh-hero__place i{color:var(--hh-on-dark)}

/* round 3 */
.hh-has-edge[style*="--hh-edge-d"] .hh-hero__edge{display:block}
.hh-card--br{top:auto;bottom:calc(clamp(28px,5vh,56px) + var(--hh-pr) + var(--hh-edge-h))}
.hh-accent-rule .hh-hero__place{margin-top:30px}                 /* air between the gradient rule and the area line */
html.hh-anim .hh-sig-skyline .hh-hero__edge svg{animation:hh-edge 1.1s var(--hh-ease) backwards}
@keyframes hh-lift{from{transform:translateY(18px)}to{transform:none}}
html.hh-anim .hh-sig-skyline .hh-card{animation:hh-lift .7s var(--hh-ease) .35s backwards}

/* ================= BATCH 2 (5 Nov): inner-page hero (same picture, sheen, type and buttons as the home hero, shorter, with a breadcrumb) ================= */
.hh-hero--inner{min-height:max(380px,min(58svh,560px))}
.hh-hero--inner .hh-hero__in{padding-top:calc(var(--hh-space) + 30px)}
.hh-hero--inner h1{font-size:clamp(32px,3.7vw,54px);max-width:16em}
.hh-hero--inner .hh-hero__sub{font-size:clamp(16px,1.3vw,19px);max-width:62ch}
.hh-hero--inner .hh-hero__cta{margin-top:22px}
.hh-hero--inner .hh-btn{min-height:52px}
.hh-crumbs{margin:0 0 14px}
.hh-crumbs ol{display:flex;flex-wrap:wrap;gap:2px 0;list-style:none;margin:0;padding:0;font:600 14px/1.2 var(--hh-body);color:rgba(255,255,255,.9);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.hh-crumbs li+li::before{content:"/";margin:0 9px;opacity:.7}
.hh-crumbs a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;margin:-14px 0;border-bottom:1px solid rgba(255,255,255,.45)}
.hh-crumbs a:hover{border-bottom-color:#fff}
.hh-crumbs li[aria-current]{display:inline-flex;align-items:center;min-height:44px;margin:-14px 0}
@media (max-width:899.98px){.hh-hero--inner{min-height:max(380px,min(60svh,520px))}.hh-hero--inner .hh-hero__cta{margin-top:18px}}
/* batch 2: the host's "promise" card strip overlaps the hero's bottom edge by 56-76px; lift the hero copy so it never covers the buttons */
.hh-hero:has(+ .offerbar) .hh-hero__in{padding-bottom:calc(clamp(28px,5vh,56px) + 76px)}
@media (max-width:899.98px){.hh-hero:has(+ .offerbar) .hh-hero__in{padding-bottom:calc(clamp(28px,5vh,56px) + 88px)}}
/* batch 2: host sheets style `main a{color}` at (0,1,1); keep the hero buttons on the kit colours */
.hh-hero a.hh-btn{text-decoration:none}
.hh-hero a.hh-btn--primary{color:var(--hh-cta-ink)}
.hh-hero a.hh-btn--ghost{color:#fff}
.hh-hero .hh-crumbs a{color:#fff}
.hh-hero:has(+ .hx-promise) .hh-hero__in{padding-bottom:calc(clamp(28px,5vh,56px) + 76px)}
@media (max-width:899.98px){.hh-hero:has(+ .hx-promise) .hh-hero__in{padding-bottom:calc(clamp(28px,5vh,56px) + 88px)}}

/* inner-page hero (6 Nov 2026): text-side scrim only so the picture side stays clear (contrast on the type, luma on the picture); breadcrumb on a small glass chip, 44px wide targets */
.hh-hero--inner .hh-hero__scrim{background:
  linear-gradient(0deg,rgba(var(--hh-scrim),.5) 0,rgba(var(--hh-scrim),.26) 160px,rgba(var(--hh-scrim),0) 340px),
  linear-gradient(90deg,rgba(var(--hh-scrim),.8) 0,rgba(var(--hh-scrim),.74) 38%,rgba(var(--hh-scrim),.46) 54%,rgba(var(--hh-scrim),.12) 64%,rgba(var(--hh-scrim),0) 70%);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 60%,transparent 70%);mask-image:linear-gradient(90deg,#000 0,#000 60%,transparent 70%)}
.hh-hero--inner .hh-crumbs ol{display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;background:rgba(var(--hh-scrim),.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hh-hero--inner .hh-crumbs a{min-width:44px;justify-content:center}
@media (max-width:899.98px){
  .hh-hero--inner .hh-hero__scrim{-webkit-mask-image:none;mask-image:none;background:linear-gradient(0deg,rgba(var(--hh-scrim),.8) 0,rgba(var(--hh-scrim),.74) 40%,rgba(var(--hh-scrim),.62) 56%,rgba(var(--hh-scrim),.25) 63%,rgba(var(--hh-scrim),0) 70%)}
}

/* 6 Nov 2026 */
html:root{--hh-pill-a:.82}
.hh-hero--inner .hh-crumbs ol{background:rgba(var(--hh-scrim),.8)}
.hh-hero--inner .hh-crumbs ol{text-shadow:none}
.hh-hero--inner .hh-crumbs,.hh-hero--inner .hh-crumbs *{text-shadow:none!important}
@media (max-width:899.98px){.hh-hero--inner .hh-hero__img{filter:brightness(1.55) contrast(.86)}.hh-hero--inner .hh-hero__scrim{background:linear-gradient(0deg,rgba(var(--hh-scrim),.74) 0,rgba(var(--hh-scrim),.66) 40%,rgba(var(--hh-scrim),.54) 56%,rgba(var(--hh-scrim),.22) 63%,rgba(var(--hh-scrim),0) 70%)}}
.hh-hero--inner .hh-crumbs a,.hh-hero--inner .hh-crumbs li[aria-current]{margin:0}
@media (min-width:900px){.hh-hero--inner .hh-hero__img{filter:brightness(1.18)}}

/* quiet "Built by Bots on Staff" line above the call bar (6 Nov 2026) */
.hh-built{margin:0;padding:14px 16px;text-align:center;background:#0d1117;color:#e8e6df;font:600 14px/1.3 var(--hh-body,system-ui,sans-serif)}

/* the chip carries class="demostrip" for the deploy gates; it keeps the quiet footer-line look, none of the old strip styling (6 Nov 2026) */
.hh-built .demostrip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px;margin:0;background:none;border:0;border-radius:0;box-shadow:none;color:#fff;font:inherit;width:auto;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.45)}
.hh-built .demostrip:hover{text-decoration-color:#fff;background:none}
/* two inner photos that measured just under the luma floor */
@media (max-width:899.98px){.hh-hero--inner .hh-hero__img[src="ph-dough.jpg"]{filter:brightness(1.68) contrast(.86)}}
@media (min-width:900px){.hh-hero--inner .hh-hero__img[src="ph-lunch.jpg"]{filter:brightness(1.4) contrast(.9)}}