/* ISSLA RISK - home page sections below the hero. Loaded on the home page only (home.json "css").
   Shared section primitives (.hs, .hs__title, .hs__intro, .hs__centre, .btn-row--centre, .more) live in base.css.
   Motion comes from the shared system in base.css (reveals via data-reveal attributes in home.html).
   Hover/focus: colour tint, expanding accent lines, small nudges; nothing scales. */

/* 1. Core services: 3 x 2 grid of equal image panels (src/assets/img/services). Each panel is one stretched link.
   Rest: image + name. Hover / keyboard focus: overlay deepens, image scales <= 1.03, accent line expands under the
   name, the fragment rises in. The name block sits at a fixed offset and the fragment space is reserved, so nothing shifts.
   Touch (hover: none) and reduced motion: name AND fragment always shown. */
.svh { margin-bottom: var(--sp-7); }
.hs--services .hs__title { margin-bottom: var(--sp-3); }
.hs--services .hs__intro { max-width: 40rem; margin: 0; }
@media (min-width: 900px) { /* one row: headline left, description right, last lines share a baseline */
  .svh { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--sp-8); align-items: end; align-items: last baseline; }
  .hs--services .hs__title { margin-bottom: 0; }
  .hs--services .hs__intro { max-width: 28rem; justify-self: end; }
}
.svl { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .svl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .svl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } }
.svp {
  --fl: 3; --lh-f: 1.45; --fh: calc(var(--fl) * var(--lh-f) * 0.9375rem);
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 3; background: var(--petrol-900); border-radius: var(--radius);
}
@media (min-width: 1100px) { .svp { --fl: 2; aspect-ratio: 3 / 2; } }
.svp > img {
  position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.svp::before { /* bottom gradient: keeps the name legible */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(5, 22, 31, 0.92) 0%, rgba(5, 22, 31, 0.8) 40%, rgba(5, 22, 31, 0.5) 70%, rgba(5, 22, 31, 0.08) 100%);
}
.svp::after { /* deeper layer, fades in on hover / focus */
  content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(5, 22, 31, 0.4); opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.svp__txt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--sp-5); }
.svp__txt > * { transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.svp h3 {
  position: relative; margin: 0; padding-bottom: var(--sp-3); font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); line-height: 1.2; text-wrap: balance;
  transform: translate3d(0, var(--fh), 0);
}
.svp h3 a { color: var(--on-dark); text-decoration: none; }
.svp h3 a:hover { color: var(--on-dark); }
.svp h3 a::after { content: ""; position: absolute; inset: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)); } /* stretched link: whole panel */
.svp:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.svp h3 a:focus-visible { outline: none; }
.svp h3::after { /* accent line under the name */
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--accent);
  transform: scaleX(0.16); transform-origin: left center; transition: transform var(--dur-slow) var(--ease-out);
}
.svp p {
  margin: 0; height: var(--fh); font-size: 0.9375rem; line-height: var(--lh-f); color: var(--on-dark);
  opacity: 0; transform: translate3d(0, 10px, 0);
}
.svp:hover > img, .svp:focus-within > img { transform: scale(1.03); }
.svp:hover::after, .svp:focus-within::after { opacity: 1; }
.svp:hover h3, .svp:focus-within h3 { transform: none; }
.svp:hover h3::after, .svp:focus-within h3::after { transform: scaleX(1); }
.svp:hover p, .svp:focus-within p { opacity: 1; transform: none; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .svp h3 { transform: none; }
  .svp h3::after { transform: scaleX(0.16); }
  .svp p { height: auto; opacity: 1; transform: none; }
  .svp::after { opacity: 1; }
  .svp:hover > img, .svp:focus-within > img { transform: none; }
}
/* entrance: shared staggered reveal (--i x 90ms), opacity + rise + blur-in on first reveal only */
html.motion .svl[data-reveal-group] > .svp {
  filter: blur(var(--blur-in));
  transition: opacity var(--dur-out) var(--ease-out), transform var(--dur-out) var(--ease-out), filter var(--dur-out) var(--ease-out);
}
html.motion .svl[data-reveal-group].is-in > .svp {
  filter: none;
  transition: opacity var(--dur-slow) var(--ease-out) var(--rd), transform var(--dur-slow) var(--ease-out) var(--rd), filter var(--dur-slow) var(--ease-out) var(--rd);
}
.svl__foot { text-align: left; }

/* 2. Coverage: three equal map panels */
.hs--coverage { background: var(--paper-alt); }
.hs--coverage .hs__title { max-width: none; }
.hs--coverage .hs__centre { margin-bottom: var(--sp-7); }
.cvs { list-style: none; margin: 0 auto var(--sp-7); padding: 0; display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); max-width: 34rem; }
.cv { position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.cv::after { /* very light tint on hover (pseudo-element: the card itself carries the reveal transition) */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.cv:hover::after { opacity: 1; }
.cv:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.cv__map { position: relative; overflow: hidden; }
.cv__map::after { /* accent rule under the map: extends on hover/focus */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent);
  transform: scaleX(0.24); transform-origin: left center; transition: transform var(--dur-slow) var(--ease-out);
}
.cv:hover .cv__map::after, .cv:focus-within .cv__map::after { transform: scaleX(1); }
.cv__map {
  background: var(--petrol-900); border-bottom: 2px solid rgba(196, 164, 104, 0.25);
  background-image: radial-gradient(40rem 20rem at 85% -10%, rgba(27, 81, 108, 0.4), transparent 70%), linear-gradient(180deg, var(--petrol-900), #061c27);
}
.cv-svg { display: block; width: 100%; height: auto; aspect-ratio: 600 / 500; transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); }
.cv:hover .cv-svg, .cv:focus-within .cv-svg { transform: scale(1.01); filter: brightness(1.12); } /* hover identity: map face brightens, <= 1.01 */
/* Assembly: panels arrive one after another (blur to 0), then the brass nodes and links settle very slowly.
   motion.js adds .is-in to each panel ([data-reveal-each]). */
html.motion .cvs[data-reveal-each] > .cv {
  --rd: calc(260ms + var(--i, 0) * 140ms);
  opacity: 0.2; transform: translate3d(0, 28px, 0); filter: blur(var(--blur-in));
  transition: opacity var(--dur-out) var(--ease-out), transform var(--dur-out) var(--ease-out), filter var(--dur-out) var(--ease-out);
}
html.motion .cvs[data-reveal-each] > .cv.is-in {
  opacity: 1; transform: none; filter: none;
  transition: opacity var(--dur-slow) var(--ease-out) var(--rd), transform var(--dur-slow) var(--ease-out) var(--rd), filter var(--dur-slow) var(--ease-out) var(--rd);
}
html.motion .cv .cv-n, html.motion .cv .cv-k { opacity: 0; transition: opacity var(--dur-out) var(--ease-inout); }
html.motion .cv.is-in .cv-n, html.motion .cv.is-in .cv-k { opacity: 1; transition: opacity 2600ms var(--ease-inout) calc(var(--rd) + 800ms); }
.cv__body { padding: var(--sp-5); }
.cv__body h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-600); }
.cv__body h3 a { display: inline-block; min-height: 2.75rem; padding-top: 0.35rem; color: var(--ink); text-decoration: none; }
.cv__body h3 a::after { content: ""; position: absolute; inset: 0; } /* whole panel is the link target */
.cv__body h3 a:hover { color: var(--petrol-600); }
.cv__body h3 a:focus-visible { outline: none; }
.cv__body p { margin: 0; color: var(--ink-soft); }
@media (min-width: 900px) { .cvs { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } }

.cv-dots { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.cv-dots--big { stroke-width: 5.4; }
.cv-dots--shadow { stroke: #01070a; stroke-opacity: 0.7; stroke-width: 3.6; }
.cv-dots--shadow.cv-dots--big { stroke-width: 6; }
.cv-dots--edge { stroke: #06202d; }
.cv-dots--face { stroke: #296786; }
.cv-dots--lit { stroke: #8dbbd2; stroke-opacity: 0.6; stroke-width: 1.2; }
.cv-dots--lit.cv-dots--big { stroke-width: 1.8; }
.cv-dots--ctx { stroke: #15455d; stroke-opacity: 0.8; }
.cv-n { fill: var(--brass); }
.cv-n--o { fill: #e3c27a; }
.cv-k { fill: none; stroke: var(--brass); stroke-width: 1.3; stroke-opacity: 0.8; }

/* 3. Beyond the Record: dark band with a generative field (record-field.js). Ordered dots on the left lose
   order toward the right; a few faint brass links appear between scattered dots. Static fallback = CSS dot grid. */
.hs--record { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: 30rem; padding-block: clamp(4.5rem, 3rem + 6vw, 8rem); }
.hs--record > .wrap { position: relative; z-index: 1; }
.hs--record .hs__title { font-size: var(--fs-800); max-width: 17em; margin-bottom: var(--sp-6); }
.hs--record .rec__text p { color: var(--on-dark); font-size: var(--fs-500); max-width: 34rem; margin: 0 0 var(--sp-4); }
.hs--record .rec__text .more { margin-top: var(--sp-2); }
@media (min-width: 1024px) { /* headline on a wide measure, then two paragraphs side by side, link under the left one */
  .rec__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-7); }
  .rec__body .more { grid-column: 1; justify-self: start; }
}
.rec__bg { /* oversized by --ov (set by parallax.js) top and bottom; translated slower than the page (data-parallax) */
  position: absolute; inset: calc(var(--ov, 0px) * -1) 0; z-index: -1; pointer-events: none; will-change: transform;
  -webkit-mask-image: radial-gradient(ellipse 72% 85% at 52% 50%, #000 46%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 85% at 52% 50%, #000 46%, transparent 100%);
}
.rec__dots {
  position: absolute; inset: 0; transition: opacity var(--dur-slow) var(--ease-out);
  background-image: radial-gradient(circle, rgba(93, 150, 178, 0.36) 1.2px, transparent 1.8px); background-size: 30px 30px;
  -webkit-mask-image: linear-gradient(90deg, #000 28%, transparent 92%); mask-image: linear-gradient(90deg, #000 28%, transparent 92%);
}
.rec__cv { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2s var(--ease-out); }
.hs--record.has-canvas .rec__cv { opacity: 1; }
.hs--record.has-canvas .rec__dots { opacity: 0; }
.hs--record::before { /* soft light field, drifts slowly with scroll where supported (see 5) */
  content: ""; position: absolute; inset: -18% 0; z-index: -2; pointer-events: none;
  background: radial-gradient(40rem 24rem at 12% 55%, rgba(27, 81, 108, 0.3), transparent 70%);
}

/* 4. Four decisions: open columns, heavy top rule */
.dec { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); }
.dec li { position: relative; display: flex; flex-direction: column; border-top: 3px solid var(--petrol-800); padding-top: var(--sp-4); }
.dec li::before { /* accent line drawing over the heavy rule on hover/focus */
  content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 3px; background: var(--accent);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-slow) var(--ease-out);
}
.dec li:hover::before, .dec li:focus-within::before { transform: scaleX(1); }
.dec h3 { font-size: var(--fs-500); margin-bottom: var(--sp-3); }
.dec p { flex: 1 1 auto; color: var(--ink-soft); margin-bottom: var(--sp-3); }
.dec .more { align-self: flex-start; }
@media (min-width: 640px) { .dec { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .dec { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 5. Professional partners: dark band */
.hs--partners { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(4rem, 2.5rem + 6vw, 7.5rem); }
.hs--partners::before { /* soft light field behind the content; drifts very slowly with scroll where supported */
  content: ""; position: absolute; inset: -18% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(44rem 26rem at 18% 50%, rgba(27, 81, 108, 0.38), transparent 70%);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hs--partners::before, .hs--record::before { animation: drift linear both; animation-timeline: view(); }
    @keyframes drift { from { transform: translate3d(0, -9%, 0); } to { transform: translate3d(0, 9%, 0); } }
  }
}
.hs--partners .hs__title { font-size: var(--fs-800); max-width: 12em; margin-bottom: var(--sp-6); }
.hs--partners .hs__side > p { color: var(--on-dark-soft); font-size: var(--fs-500); max-width: 34rem; margin: 0 0 var(--sp-6); }
.pull { border-top: 1px solid var(--accent); padding-top: var(--sp-5); max-width: 34rem; }
.pull__line { font: 500 var(--fs-700) / 1.35 var(--font-serif); color: var(--on-dark); margin: 0; text-wrap: balance; }
.hs--partners .hs__side { margin-top: var(--sp-6); }
@media (min-width: 900px) {
  /* The row is as tall as the right block. Left: headline in the first row (top), button in the middle row of a 1fr / auto / 1fr
     grid, so its centre = the row's centre = the right block's centre. If the headline is taller than a third row the middle row
     simply moves below it (no overlap; the headline's own margin is the minimum gap). */
  .hs--partners .hs__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-7); align-items: stretch; }
  .hs--partners .hs__text { display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); }
  .hs--partners .hs__text > .hs__title { grid-row: 2; align-self: center; margin-bottom: 0; }
  .hs--partners .hs__text > .btn-row { grid-row: 3; align-self: start; margin-top: var(--sp-5); }
  .hs--partners .hs__side { margin-top: 0; }
  .hs--partners .hs__side > :last-child { margin-bottom: 0; }
}

/* 6. Method: scroll-driven picker. Left: headline, sentence, link. Right: the six points staged like a wheel (one in focus).
   Static default (no JS / reduced motion / short viewport): all six as a plain ruled list, no pinning.
   Staged (html.motion, height >= 30rem): .mt is a tall track, .mt__pin sticks inside it, motion.js sets data-o (offset from
   the active item) from six zone sentinels (.mt__steps) with one IntersectionObserver. Native scrolling only. */
.hs--method .hs__intro { margin-bottom: var(--sp-3); }
.mt__assure { color: var(--ink-soft); font-size: var(--fs-400); max-width: 40rem; margin: 0 0 var(--sp-5); }
.mt__grid { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.mt__pick { position: relative; }
.mth { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mth li { font: 500 var(--fs-600) / 1.35 var(--font-serif); color: var(--ink); padding: var(--sp-3) 0 var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); border-left: 2px solid var(--brass); }
.mt__rail, .mt__steps { display: none; }
@media (min-width: 900px) { .mt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-8); align-items: center; } }

@media (min-height: 30rem) {
  html.motion .mt { --u: 1vh; --step: calc(36 * var(--u)); --pinh: calc(100 * var(--u) - var(--header-h)); position: relative; height: calc(var(--pinh) + 5.5 * var(--step)); }
  @supports (height: 1svh) { html.motion .mt { --u: 1svh; } }
  html.motion .hs--method { padding-block: 0; }
  html.motion .mt__pin { position: sticky; top: var(--header-h); height: var(--pinh); display: flex; align-items: center; }
  html.motion .mt__pin > .wrap { padding-block: 0; }
  html.motion .mt__grid { padding-block: 0; gap: var(--sp-5); }
  html.motion .hs--method .hs__title { margin-bottom: var(--sp-3); }
  html.motion .hs--method .hs__intro { margin-bottom: var(--sp-2); }
  html.motion .mt__assure { margin-bottom: var(--sp-3); }
  html.motion .mt__pick { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: var(--sp-5); align-items: center; height: 11.5rem; }
  html.motion .mth {
    grid-area: 1 / 2; position: relative; align-self: stretch; display: grid; align-items: center; border: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  }
  html.motion .mth li {
    --y: 0rem; --sc: 1; grid-area: 1 / 1; padding: 0; border: 0; transform-origin: left center;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.15; text-wrap: balance;
    opacity: 1; transform: translate3d(0, var(--y), 0) scale(var(--sc)); filter: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
  }
  html.motion .mth li[data-o="-1"] { --y: -4.25rem; --sc: 0.52; opacity: 0.16; filter: blur(0.5px); }
  html.motion .mth li[data-o="1"] { --y: 4.25rem; --sc: 0.52; opacity: 0.16; filter: blur(0.5px); }
  html.motion .mth li[data-o="-2"] { --y: -6.5rem; --sc: 0.4; opacity: 0; filter: blur(var(--blur-in)); }
  html.motion .mth li[data-o="2"] { --y: 6.5rem; --sc: 0.4; opacity: 0; filter: blur(var(--blur-in)); }
  html.motion .mt__rail { display: flex; flex-direction: column; justify-content: space-between; position: relative; grid-area: 1 / 1; align-self: center; height: 8.5rem; width: 1.5rem; }
  html.motion .mt__rail::before, html.motion .mt__rail::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--line); }
  html.motion .mt__rail::after { background: var(--accent); transform: scaleY(var(--p, 0)); transform-origin: top center; transition: transform var(--dur-base) var(--ease-inout); }
  html.motion .mt__rail i { position: relative; z-index: 1; display: block; width: 0.75rem; height: 1px; background: var(--ink-soft); opacity: 0.45; transform-origin: left center; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); }
  html.motion .mt__rail i.is-on { background: var(--accent); opacity: 1; }
  html.motion .mt__rail i.is-cur { transform: scaleX(2); }
  html.motion .mt__steps { display: flex; flex-direction: column; position: absolute; inset: 0; pointer-events: none; }
  html.motion .mt__steps i { display: block; flex: 0 0 var(--step); }
  html.motion .mt__steps i:first-child { flex-basis: calc(var(--step) + 50 * var(--u) - var(--header-h)); }
  html.motion .mt__steps i:last-child { flex: 1 1 0; }
  @media (min-width: 900px) {
    html.motion .mt__grid { gap: var(--sp-8); }
    html.motion .mt__pick { height: 17rem; }
    html.motion .mt__rail { height: 12rem; }
    html.motion .hs--method .hs__title { margin-bottom: var(--sp-4); }
    html.motion .hs--method .hs__intro { margin-bottom: var(--sp-2); max-width: 30rem; }
    html.motion .mt__assure { max-width: 30rem; margin-bottom: var(--sp-4); }
    html.motion .mth li[data-o="-1"] { --y: -6.25rem; }
    html.motion .mth li[data-o="1"] { --y: 6.25rem; }
    html.motion .mth li[data-o="-2"] { --y: -9rem; }
    html.motion .mth li[data-o="2"] { --y: 9rem; }
  }
}

/* 7. Final CTA: dark band over a photographic background (cta-background.webp, decorative, lazy). Title, one large sentence,
   a quieter line, the button. Centred. The overlay keeps the centred copy crisp over the brightest part of the image. */
.hs--cta { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(5rem, 3rem + 8vw, 10rem); }
.cta__bg { /* true parallax: oversized by --ov (parallax.js) and translated at ~0.25 of the scroll distance (data-parallax) */
  position: absolute; left: 0; top: calc(var(--ov, 0px) * -1); z-index: -2; width: 100%; height: calc(100% + 2 * var(--ov, 0px)); object-fit: cover; pointer-events: none; will-change: transform;
}
.hs--cta::before { /* dark overlay: deepest behind the copy, vignette toward the edges */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 85% at 50% 50%, rgba(5, 22, 31, 0.8), rgba(5, 22, 31, 0.58) 70%, rgba(5, 22, 31, 0.78) 100%);
}
.cta__title { max-width: none; margin: 0 auto var(--sp-6); font-size: clamp(2.75rem, 1.5rem + 5.5vw, 5.5rem); line-height: 1.04; letter-spacing: -0.012em; }
.cta__lead { max-width: 32ch; margin: 0 auto var(--sp-5); font: 500 clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem) / 1.3 var(--font-serif); color: var(--on-dark); text-wrap: balance; }
.cta__sub { max-width: 46rem; margin: 0 auto var(--sp-7); font-size: var(--fs-400); color: var(--on-dark); text-wrap: balance; }
.hs--cta [data-reveal-group] > * { --rd: calc(var(--i, 0) * 170ms); }

/* Hero hierarchy: the regional promise (H1) leads; the brand line is the supporting tagline. */
.hero--home h1 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-900); line-height: var(--lh-tight); letter-spacing: -0.005em; text-wrap: balance; color: var(--on-dark); white-space: normal; max-width: none; margin: 0 0 var(--sp-4); }
.hero--home .display { font-size: var(--fs-600); line-height: var(--lh-snug); font-style: italic; font-weight: 400; color: #e3c27a; margin: 0 0 var(--sp-5); }

/* Hero layout: text column and map column side by side (no overlap), support line across the full width. */
.hero__grid { display: grid; gap: var(--sp-7); grid-template-columns: minmax(0, 1fr); }
.hero--home .hero__inner { max-width: none; display: flex; flex-direction: column; align-items: flex-start; }
.hero--home .hero__inner .display { order: -1; }
.hero--home .hero__support { grid-column: 1 / -1; margin: 0; max-width: none; }
@media (min-width: 1200px) {
  .hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(3rem, 2rem + 4vw, 7rem); align-items: center; }
  .hero--home .hero-map { position: relative; top: auto; right: auto; transform: none; width: 100%; max-width: 28rem; justify-self: center; }
  .hero--home h1 { font-size: clamp(3rem, 2rem + 2.2vw, 4.25rem); }
}

/* Home hero: wide text column, compact headline (2-3 lines) and a lede that reads in 2-3 lines so the CTAs stay above the fold */
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr); column-gap: clamp(2rem, 1rem + 3vw, 4rem); }
  .hero--home h1 { font-size: clamp(2.25rem, 1.4rem + 2vw, 3.25rem); line-height: 1.12; letter-spacing: -0.012em; max-width: 28ch; }
  .hero--home .hero-map { max-width: 22rem; }
}
.hero--home .lede { max-width: 56rem; font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); line-height: 1.6; text-wrap: pretty; margin-bottom: var(--sp-6); }