/* hero-page */
/* ==========================================================================
   Page Hero — gradient band (surface-gradient has-mark), glass card + photo.
   ========================================================================== */

.m-hero-page{padding-block:clamp(40px, 4vw, 56px)}
.m-hero-page__grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--gap);align-items:stretch}
.m-hero-page__card{
  display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(320px, 28.5vw, 410px);
  padding:clamp(28px, 3vw, 44px) clamp(24px, 2.5vw, 32px);
}
.m-hero-page__title{color:var(--white)}
.m-hero-page__lead{margin:1.5rem 0 0;max-width:34ch}
.m-hero-page__lead:empty{display:none}
.m-hero-page__media{aspect-ratio:544 / 410;background:rgba(255,255,255,.1)}

@media (max-width: 820px){
  .m-hero-page__grid{grid-template-columns:minmax(0, 1fr)}
  .m-hero-page__card{min-height:0}
  .m-hero-page__media{aspect-ratio:16 / 10}
}

/* section-nav */
/* ==========================================================================
   Section Nav — equal-width tab row linking the pages of a section: grey tabs,
   the current page's tab brand blue. Scrolls sideways on narrow screens, with
   the current tab scrolled into view (section-nav.js).
   ========================================================================== */

.m-section-nav{padding-top:clamp(20px, 2vw, 28px)}
.m-section-nav + .module{padding-top:clamp(32px, 4vw, 56px)}
.m-section-nav__list{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(max-content, 1fr);gap:2px;
  margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none;border-radius:8px;
}
.m-section-nav__list::-webkit-scrollbar{display:none}
.m-section-nav__link{
  display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 1.25rem;
  background:var(--grey-50);color:var(--ink-strong);font-size:var(--step-body);font-weight:500;
  white-space:nowrap;transition:background var(--speed) var(--ease), color var(--speed) var(--ease);
}
a.m-section-nav__link:hover{background:var(--grey-100)}
.m-section-nav__link.is-active,
.m-section-nav__link.is-active:hover{background:var(--brand);color:var(--white)}

@media (prefers-reduced-motion: reduce){
  .m-section-nav__link{transition:none}
}

/* intro-statement */
/* ==========================================================================
   Intro Statement — split: (eyebrow +) statement heading left, copy right,
   with an optional blue lead line under the heading or atop the copy.
   Stacked: accent heading over a lead line. Optional 4:3 image: split puts the heading
   on its own row and the image left, level with the copy; stacked puts it under the copy.
   ========================================================================== */

.m-intro-statement__grid{
  display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--gap) clamp(32px, 4vw, 48px);align-items:start;
}
.m-intro-statement--split .m-intro-statement__title{max-width:17ch}
.m-intro-statement--large .m-intro-statement__title{max-width:13ch;line-height:1.12}
.m-intro-statement--stacked .m-intro-statement__title{max-width:26ch;margin-bottom:1.25rem}
.m-intro-statement__title:has(.accent:not(:empty)){max-width:none} /* heading + highlight run on one line where the width allows */
.m-intro-statement__lead{max-width:60ch}

.m-intro-statement__eyebrow{margin:0 0 .5rem;color:var(--brand);font-weight:400}
.m-intro-statement__eyebrow:empty{display:none}
.m-intro-statement__lead-line{margin:0 0 1.5rem;font-weight:400}
.m-intro-statement__lead-line:empty{display:none}
.m-intro-statement__head .m-intro-statement__lead-line{margin:1.5rem 0 0;max-width:22ch;font-size:var(--step-h3);font-weight:500;line-height:1.3}

.m-intro-statement__media{aspect-ratio:4 / 3}
.m-intro-statement--stacked .m-intro-statement__media{margin-top:clamp(24px, 3vw, 40px)}
.m-intro-statement__head:has(+ .m-intro-statement__grid--image){margin-bottom:clamp(24px, 3vw, 40px)}
.m-intro-statement--stacked .m-intro-statement__media{max-width:60ch}

@media (max-width: 820px){
  .m-intro-statement__grid{grid-template-columns:minmax(0, 1fr)}
  .m-intro-statement--split .m-intro-statement__title{max-width:none}
}

/* image-cards */
/* ==========================================================================
   Image Cards — grey cards with a photograph, title and copy.
   Flex-wrap so a fifth card centres on the second row.
   ========================================================================== */

.m-image-cards__title{margin-bottom:clamp(24px, 3vw, 40px)}
.m-image-cards--center .m-image-cards__title{text-align:center}

.m-image-cards__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}
.m-image-cards__card{flex:0 1 calc((100% - 2 * var(--gap)) / 3);display:flex;flex-direction:column}
.m-image-cards__media{aspect-ratio:288 / 200;margin-bottom:1.75rem}
.m-image-cards__heading{margin-bottom:1rem}

@media (max-width: 820px){.m-image-cards__card{flex-basis:calc((100% - var(--gap)) / 2)}}
@media (max-width: 600px){.m-image-cards__card{flex-basis:100%}}

/* text-image-split */
/* ==========================================================================
   Text + Image Split — copy one side, rounded photo the other.
   Media-left is a modifier; on mobile the image always sits above the copy.
   ========================================================================== */

.m-text-image-split__grid{
  display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.26fr);
  gap:clamp(32px, 6vw, 96px);align-items:center;
}
.m-text-image-split--media-left .m-text-image-split__grid{grid-template-columns:minmax(0, 1.26fr) minmax(0, 1fr)}
.m-text-image-split--media-left .m-text-image-split__media{order:-1}
.m-text-image-split__title{margin-bottom:1.25rem}
.m-text-image-split__lead{margin:-.25rem 0 1.25rem;font-size:var(--step-h3);font-weight:500;line-height:1.3;max-width:22ch}
.m-text-image-split__lead:empty{display:none}
.m-text-image-split__cta{margin-top:2rem}
.m-text-image-split__media{aspect-ratio:544 / 400}

@media (max-width: 820px){
  .m-text-image-split__grid,
  .m-text-image-split--media-left .m-text-image-split__grid{grid-template-columns:minmax(0, 1fr);gap:28px}
  .m-text-image-split__media{order:-1;aspect-ratio:16 / 10}
}

/* locations-map */
/* ==========================================================================
   Locations Map — brand panel with the market list + two map panels (or one: --single).
   ========================================================================== */

.m-locations-map__grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--gap)}
.m-locations-map__grid--single{grid-template-columns:repeat(2, minmax(0, 1fr))}
.m-locations-map__panel{border-radius:var(--radius-card);overflow:hidden;min-height:clamp(440px, 44vw, 640px)}
.m-locations-map__intro{display:flex;flex-direction:column;padding:clamp(24px, 2.25vw, 32px)}
.m-locations-map__intro .icon-circle{margin-bottom:clamp(28px, 3vw, 44px)}
.m-locations-map__title{margin-bottom:1.25rem}
.m-locations-map__list{list-style:none;margin:0;padding:0;font-size:var(--step-lead);line-height:1.6}
.m-locations-map__map{position:relative;background:var(--navy)}
.m-locations-map__map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.m-locations-map__map--light{background:var(--white);border:1px solid var(--grey-100)}

@media (max-width: 900px){
  .m-locations-map__grid{grid-template-columns:minmax(0, 1fr)}
  .m-locations-map__grid--single{grid-template-columns:repeat(2, minmax(0, 1fr))}
.m-locations-map__panel{min-height:0}
  .m-locations-map__map{aspect-ratio:4 / 3}
}