/* p9u-hero.css. PROPOSAL for SEO Manager approval, not live. UX designer, 2 Nov 2026 (rev 2 after the 20:40 ruling).
   ONE hero component, class hx, for every template except home (home keeps its live hero untouched).
   Replaces .hero3 (__grid, __media, __plate), .banner (__icon, __art, .glass), .float-card and .chips-stat inside heroes.
   Photo pages (3): /locations/london/, /structured-cabling/, /comms-and-server-rooms/ (interim AI generated illustrations, alt text starts 'Illustrative image of'). Every other page, including /locations/: text only (hx--noimg). About keeps the 'Real photo needed' panel.
   Desktop (768 and up): full bleed photo with a left navy overlay. Mobile (below 768): text first, 4:3 photo band below (capped 13.5rem).
   Load order: p9r, p9s, p9t, p9u-addendum, p9u-hero.css, p9u-hero-bands.css. Needs v3-foundation, components-v3 (.crumbs, .badges, .btn) and p9r-cls (.crumbs nowrap below 768).
   Part 3 (buttons) is at the end of the file. */
.v3 .hx{
  --hx-ink:7,20,39;           /* #071427 */
  --hx-navy:10,29,51;         /* #0A1D33 */
  --hx-text:44rem;            /* text column */
  --focus:var(--color-teal-300);--link:var(--color-teal-300);--link-hover:#fff;
  position:relative;isolation:isolate;overflow:hidden;overflow-x:clip;
  background:var(--grad-band-navy);color:var(--color-cloud);
  display:flex;flex-direction:column
}
.v3 .hx__inner{position:relative;z-index:1;padding-block:clamp(1rem,.5rem + 1.5vw,1.5rem) 1.5rem}
.v3 .hx__text{min-width:0;max-width:min(100%,var(--hx-text))}
.v3 .hx h1{color:#fff;font-size:clamp(1.625rem,1.1rem + 2.2vw,3rem);line-height:1.1;letter-spacing:-.025em;margin:0 0 1rem;text-wrap:balance}
.v3 .hx h1 em{display:inline;font-style:normal;color:var(--color-teal-300)}
.v3 .hx .lead{color:var(--color-cloud);max-width:38rem;margin:0}
.v3 .hx .lead+.lead,.v3 .hx .guide-meta{margin-top:.75rem}
.v3 .hx .guide-meta{color:var(--color-cloud);font-size:.875rem}
.v3 .hx .badges{margin:0 0 .9rem}
.v3 .hx .crumbs{margin-bottom:.5rem}
.v3 .hx__actions{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin-top:1.5rem}
.v3 .hx .btn--primary{background:var(--color-teal-500);color:var(--color-ink);--btn-bg:var(--color-teal-500);--btn-fg:var(--color-ink);--btn-bg-h:var(--color-teal-300);box-shadow:0 6px 18px rgba(37,201,190,.25)}
.v3 .hx .btn--primary:hover{background:var(--color-teal-300);color:var(--color-ink)}
.v3 .hx .btn--line{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7)}
.v3 .hx .btn--line:hover{background:rgba(255,255,255,.14);color:#fff}

/* media: mobile band. Fixed 4:3 box capped at 13.5rem high, so the band never changes size when the image arrives (explicit width and height on the img and the mobile source as well). The mobile source is a 4:3 crop with a safe focal point (--hx-pos-m). */
.v3 .hx__media{position:relative;z-index:0;margin:0;width:100%;aspect-ratio:4/3;max-height:13.5rem;overflow:hidden;background:var(--grad-band-navy)}
.v3 .hx__media>picture,.v3 .hx__img{display:block;width:100%;height:100%}
.v3 .hx__img{object-fit:cover;object-position:var(--hx-pos-m,50% 50%)}
.v3 .hx__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--hx-ink),.9) 0,rgba(var(--hx-ink),.45) 22%,rgba(var(--hx-ink),0) 52%)}
/* About only: the 'Real photo needed' placeholder panel (CSS only, no image, no layout shift). All other pages without a photo are text only (hx--noimg, no media element). */
.v3 .hx__media--ph{background:var(--glow-teal),var(--glow-blue),var(--lattice),var(--grad-band-navy)}
.v3 .hx__media--ph::after{background:linear-gradient(180deg,rgba(var(--hx-ink),.55),rgba(var(--hx-ink),0) 60%)}
/* text only hero: no media element, a quiet navy field with one soft teal glow */
.v3 .hx--noimg:not(.hx--about){background:var(--glow-teal),var(--grad-band-navy)}
.v3 .hx__ph{position:absolute;right:.75rem;bottom:.75rem;z-index:1;max-width:calc(100% - 1.5rem);padding:.35rem .7rem;border:1px dashed rgba(255,255,255,.55);border-radius:.5rem;background:rgba(var(--hx-ink),.7);color:#fff;font-size:.8125rem;line-height:1.3}

@media (min-width:768px){
  .v3 .hx{display:grid;align-items:center;min-height:clamp(24rem,16rem + 14vw,32rem)}
  .v3 .hx__inner{padding-block:clamp(2rem,1rem + 3vw,4.25rem)}
  .v3 .hx__media{position:absolute;inset:0;z-index:-1;width:auto;aspect-ratio:auto;max-height:none}
  .v3 .hx__img{object-position:var(--hx-pos,50% 50%)}
  /* text column end, measured from the hero's left edge: container padding plus the text column plus 2rem */
  .v3 .hx__media{--hx-te:calc(max(0px,(100% - var(--container) - 2*var(--gutter))/2) + var(--gutter) + min(var(--hx-text),100% - 2*var(--gutter)) + 2rem)}
  .v3 .hx__media::after{
    background:
      linear-gradient(90deg,rgba(var(--hx-ink),.94) 0,rgba(var(--hx-ink),.9) calc(var(--hx-te) * .5),rgba(var(--hx-navy),.82) var(--hx-te),rgba(var(--hx-navy),.5) calc(var(--hx-te) + 14%),rgba(var(--hx-navy),.14) 100%),
      linear-gradient(180deg,rgba(var(--hx-ink),.35) 0,rgba(var(--hx-ink),0) 28%,rgba(var(--hx-ink),0) 72%,rgba(var(--hx-ink),.3) 100%)}
  .v3 .hx__media--ph::after{background:linear-gradient(90deg,rgba(var(--hx-ink),.5),rgba(var(--hx-ink),0) 70%)}
  .v3 .hx__ph{right:var(--gutter);bottom:1.25rem}
}
/* 768 to 1023: the text column takes 62 percent, so the photo keeps a visible strip on the right */
@media (min-width:768px) and (max-width:1023.98px){
  .v3 .hx{--hx-text:min(36rem,62%)}
}
/* aside slot: the /services/ "Service groups" box and the /get-a-quote/ "What happens next" box (both approved to stay). Mobile order: text, aside, photo band. */
.v3 .hx__grid{display:grid;gap:1.25rem;min-width:0}
.v3 .hx__aside{margin:0;padding:1.125rem 1.25rem;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-lg,1rem);background:rgba(var(--hx-ink),.82);color:var(--color-cloud);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 12px 32px rgba(0,0,0,.25)}
.v3 .hx__aside h2{color:#fff;font-size:1.125rem;line-height:1.25;margin:0 0 .75rem}
.v3 .hx__aside li,.v3 .hx__aside p{color:var(--color-cloud)}
@media (min-width:900px){
  .v3 .hx--aside .hx__grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2.5rem;align-items:center}
  .v3 .hx--aside .hx__text{max-width:none}
  .v3 .hx--aside .hx__media{--hx-te:min(78%,100% - 2*var(--gutter))}
}

/* p9s FIX 1 carried over: the hero lead fallback faces now also apply to .hx .lead */
@media (max-width:767.98px){.v3 .hx .lead{font-family:"Inter CLS","Inter CLS Fallback Lead M",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}}
@media (min-width:768px){.v3 .hx .lead{font-family:"Inter CLS","Inter CLS Fallback Lead D",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}}

/* ===== Hero and banner buttons below 768px (part 3). Sets no font-family: p9s FIX 2 (.v3 .btn, Inter CLS Fallback Bold) stays in charge of the label face. ===== */
/* One button: full width. Two buttons: 50/50 on one row, stacking only at 359px and below (fixed viewport width from measured labels, not a content test, so the row cannot flip when the web font arrives).
   Measured at 15px Inter 600, 12px side padding, 2px border: Get a Quote plus arrow 141.3px web, 140.7px fallback; What is included 148.2px web, 146.7px fallback. At 360px each button is 155px wide. Tap target 52px (btn--lg) or 44px (btn). */
@media (max-width:767.98px){
  .v3 :is(.hx__actions,.hero3__actions,.banner__actions,.hero__actions){display:flex;flex-wrap:wrap;gap:.75rem .625rem;width:100%;align-items:stretch}
  .v3 :is(.hx__actions,.hero3__actions,.banner__actions,.hero__actions)>.btn{
    flex:1 1 calc(50% - .3125rem);min-width:0;box-sizing:border-box;justify-content:center;text-align:center;white-space:nowrap;
    min-height:2.75rem;padding-inline:.75rem;font-size:.9375rem}
  .v3 :is(.hx__actions,.hero3__actions,.banner__actions,.hero__actions)>.btn.btn--lg{min-height:3.25rem}
  .v3 :is(.hx__actions,.hero3__actions,.banner__actions,.hero__actions)>.btn:only-child{flex-basis:100%}
  /* colours: dark bands turquoise #25C9BE with ink text, light bands teal #077A78 with white text */
  .v3 .btn--primary{background:var(--color-teal-700,#077A78);color:#fff}
  .v3 :is(.hx__actions,.hero3__actions,.banner__actions,.hero__actions,.on-dark)>.btn--primary,
  .v3 .on-dark .btn--primary{background:var(--color-teal-500,#25C9BE);color:var(--color-ink,#071427)}
}
/* 359px and below: the longest label no longer fits 50/50, so every button takes its own row */
@media (max-width:359.98px){
  .v3 :is(.hx__actions,.hero3__actions,.banner__actions,.hero__actions)>.btn{flex-basis:100%}
}

/* arrow icon: the hero button arrow has no class and no size in the page markup (it renders 0 wide today); size it like .btn .icon so it can never stretch */
.v3 .hx .btn svg,.v3 .hx__actions .btn svg{width:1.25rem;height:1.25rem;flex:none;align-self:center}

/* r4 (SEO Manager decision): desktop right rail removed and its 56px reserve released.
   aside.dock ("Quick actions": Get a Quote, Services, Areas covered). Source components-v3.css, position:fixed, top 0, right 0, bottom 0, width var(--dock-w) 56px, from 768px up. Hidden on desktop because the header Get a Quote button already covers it.
   body.has-dock (server side class, components-v3.css and p9e-fixes.css) and body:has(>.dock) (p9e-fixes.css) reserve padding-right:var(--dock-w) from 768px up. Both are zeroed here so the header and hero run to the right edge. Two separate rules on purpose, as in p9e (a selector list is dropped whole when one selector is invalid). Every H1 and lead band from 768px up in p9s, p9u-addendum and p9u-hero-bands.css was fitted with that 56px reserve and is refitted in p9u-hero-bands.css (see its header).
   The mobile bar (.sticky-bar) is already removed by p9m-dock.css and is not touched here. */
@media (min-width:768px){
  aside.dock{display:none!important}
  body.has-dock{padding-right:0!important}
  body:has(>.dock){padding-right:0!important}
}
/* r4: the FAQ heading column no longer sticks (components-v3.css .faq-head{position:sticky;top:6rem} from 768px up). Scoped to the heading column only, all widths. */
.v3 .faq-head{position:static}