/* Page hero — the inner-page H1 banner. Shorter than the homepage hero so the
   page's actual content is not pushed below the fold. */

.section--page_hero{position:relative;padding:0;color:#fff;overflow:hidden;background:
  radial-gradient(1100px 500px at 78% -10%, rgba(28,46,78,.55), transparent 60%),
  linear-gradient(180deg,var(--asphalt) 0%,var(--asphalt-2) 100%)}
.section--page_hero::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:22px 22px}
/* Placement and measure are two different jobs, and they used to be the same
   box: max-width:900px with a padding-left computed from the viewport, so the
   padding was subtracted from the width rather than added outside it. Past
   about 1500px the padding ate the column — at 2560px it left 196px and the
   H1 broke after every single word; beyond 3100px the width went negative.

   The container now places itself the way every other section does, and the
   900px measure sits on the children where it cannot fight the gutter. At
   1200-1440px this renders identically to the old rule; above that it stops
   collapsing. */
.section--page_hero .wrap{position:relative;padding-top:62px;padding-bottom:74px}
.section--page_hero .wrap > *{max-width:900px}
.section--page_hero h1{font-size:clamp(40px,5.6vw,68px);margin-top:16px}
.section--page_hero .lede{color:rgba(255,255,255,.72);margin:22px 0 30px;font-size:19px;max-width:62ch}

.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:22px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.breadcrumb a{color:rgba(255,255,255,.75)}
.breadcrumb a:hover{color:#fff;text-decoration:underline}

.hero-points{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:28px;padding:0}
.hero-points li{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.hero-points svg{width:13px;height:13px;color:var(--red);flex:none}

@media(max-width:1020px){
  .section--page_hero .wrap{padding-top:48px;padding-bottom:56px}
}

/* ---------- Background photo ----------
   The image sits behind everything and is darkened by a gradient rather than a
   flat wash, so the type stays legible at the top where it sits while the
   photo still reads at the bottom. */
.section--page_hero.has-photo{background:var(--asphalt)}
.page-hero__photo{position:absolute;inset:0;z-index:0}
.page-hero__photo img{width:100%;height:100%;object-fit:cover;object-position:var(--focal,center)}
.page-hero__photo::after{content:"";position:absolute;inset:0}
.page-hero__photo--light::after{background:linear-gradient(90deg,rgba(19,21,26,.82) 0%,rgba(19,21,26,.45) 60%,rgba(19,21,26,.25) 100%)}
.page-hero__photo--medium::after{background:linear-gradient(90deg,rgba(19,21,26,.92) 0%,rgba(19,21,26,.68) 55%,rgba(19,21,26,.42) 100%)}
.page-hero__photo--heavy::after{background:linear-gradient(90deg,rgba(19,21,26,.96) 0%,rgba(19,21,26,.85) 55%,rgba(19,21,26,.66) 100%)}
.section--page_hero.has-photo::before{display:none}