/* =========================================================================
   Home hero, compact edition. Loaded by pages/home.html after style.css
   (block extra_head), so these rules win over sections 8, 24 and 27 there.
   Also loaded by pages/about.html, whose hero visual reuses the brand card
   and the chips below (placed there by style.css 32).
   - backdrop: column guides and a navy-grey ribbon with a halftone dot
     screen and a green dotted crest (templates/partials/hero_ribbon.html,
     styles shared with the Solutions hub in style.css 28), under the node
     network of main.js (stars reaching for the pointer)
   - a shorter hero: smaller headline, tighter rhythm, smaller visual
   - the home visual: a map of Morocco, its cities lit and linked ("the map"
     below), with the sector chips around it
   - the brand card (about page only since 2026-11-13) is a navy tile with
     the white NEXT MAROC DIGITAL. wordmark alone, which turns into a
     « Parlons-en » button on hover
   ========================================================================= */

/* ---- backdrop ---------------------------------------------------------- */
/* the ribbon itself (guides, SVG, shader canvas, fade, RTL flip) is shared
   with the Solutions hub and lives in style.css section 28 */
.hero { background: #f7f9fa; }

/* the node network (main.js, initNetwork) over the ribbon: navy stars and
   links, green only where the pointer reaches in and on the travelling sparks */
.hero {
  --net-link: 11, 29, 51;
  --net-pointer: 15, 122, 82;
  --net-node: 11, 29, 51;
  --net-spark: 15, 122, 82;
}

/* the same backdrop (ribbon, guides, node network) behind the expertises
   chapter, and behind the approach chapter and the CTA card: one stage wraps
   those two sections, which drop their own ground so the ribbon shows through */
.expertises,
.approach-stage {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #f7f9fa;
  --net-link: 11, 29, 51;
  --net-pointer: 15, 122, 82;
  --net-node: 11, 29, 51;
  --net-spark: 15, 122, 82;
}
.approach-stage .approach { background: none; }

/* the steps sit where the ribbon runs out: a frosted pane behind their column
   melts the dot screen into a soft grey wash so the copy reads cleanly. It
   lives on the grid, not on the list, because the list's reveal (filter,
   opacity) and the dimmed steps would cut the backdrop blur off. Edges are
   feathered into the bleed around the column, so no box shows. */
.approach-stage .approach-grid { position: relative; }
.approach-stage .approach-grid::before {
  content: "";
  position: absolute;
  z-index: -1;
  grid-column: 1;
  grid-row: 3; /* rows: chapter head, floor plan, steps */
  inset: -40px -56px;
  background: rgba(247, 249, 250, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent),
    linear-gradient(180deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent),
    linear-gradient(180deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-composite: intersect;
  pointer-events: none;
}
@media (min-width: 992px) {
  .approach-stage .approach-grid::before { grid-column: 2; grid-row: 2; }
}
/* sideways view (style.css 43): the steps are a row across the whole grid */
@media (min-width: 992px) and (min-height: 660px) {
  .approach-stage .approach-grid::before { grid-column: 1 / -1; grid-row: 2; inset: -28px -56px; }
}

/* ---- a full-screen, wider hero ------------------------------------------ */
/* fills the viewport on every screen (svh: no jump when mobile browser bars
   slide away), the marquee starts below the fold. The wider container is
   scoped to the hero, so the column guides follow it and the rest of the
   site keeps its 1240px measure. Type and visual grow with the viewport. */
.hero {
  --container-w: 1440px;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 32px) 0 52px;
}
@media (min-width: 992px) {
  .hero-grid { grid-template-columns: 1.25fr 0.75fr; gap: clamp(48px, 5vw, 96px); }
}
/* a wider column for the map (2026-11-14, a larger map with the continent
   behind it): only where the headline keeps its three lines in the narrower
   copy column, and further where it is capped at 720px anyway */
@media (min-width: 1200px) {
  .hero-grid { grid-template-columns: 1.2fr 0.8fr; }
}
@media (min-width: 1600px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
}
.hero-copy { max-width: 720px; }
.hero .eyebrow { margin-bottom: 14px; }
.hero-copy .display {
  font-size: clamp(1.75rem, 1rem + 2.4vw, 3.5rem);
  line-height: 1.08;
  margin-bottom: 18px;
}
.hero-copy .lead {
  max-width: 600px;
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.15rem);
  margin-bottom: 28px;
}

/* ---- the visual: compact chips on a stage that scales -------------------- */
.hero-visual { max-width: clamp(340px, 28vw, 440px); }
.hero-halo {
  inset: 18%;
  background: radial-gradient(circle, rgba(11, 29, 51, 0.12), rgba(11, 29, 51, 0.04) 50%, transparent 72%);
}
/* lit (hovering the brand card): the green shows up only as feedback */
.hero-visual.is-lit .hero-halo {
  background: radial-gradient(circle, rgba(47, 176, 124, 0.3), rgba(15, 122, 82, 0.1) 45%, transparent 70%);
}
.hero-card {
  gap: 8px;
  padding: 7px 13px 7px 7px;
  border-radius: 12px;
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.8);
}
.hero-card i {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 0.9rem;
}
body.is-rtl .hero-card { padding: 7px 7px 7px 13px; }
.layer-1 { top: 10%; inset-inline-start: 0; }
.layer-2 { top: 14%; inset-inline-end: 0; }
.layer-3 { bottom: 14%; inset-inline-start: 0; }
.layer-4 { bottom: 9%; inset-inline-end: 2%; }

/* ---- the brand card, the wordmark alone on navy ------------------------- */
/* card size and ratio unchanged (the chips are placed around it); the
   wordmark sits in the middle with its protection zone and more around it */
.hero-brandcard {
  width: 176px;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 30px 60px -30px rgba(11, 29, 51, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.brandcard-logo { width: 124px; height: auto; align-self: center; margin-top: 0; }

/* touching the brand card lights the whole network (main.js wires the cards
   to it): a soft green glow around the card, no gradient on the card itself */
.hero-brandcard {
  cursor: default;
  transition: box-shadow 0.6s ease, scale 0.6s var(--ease);
}
.hero-brandcard.is-lit {
  scale: 1.03;
  box-shadow: 0 30px 60px -30px rgba(11, 29, 51, 0.55), 0 0 64px -8px rgba(15, 122, 82, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
@media (prefers-reduced-motion: reduce) { .hero-brandcard.is-lit { scale: 1; } }

@media (max-width: 639px) {
  .hero-visual { max-width: 290px; }
  .hero-card { padding: 6px 11px 6px 6px; font-size: 0.74rem; gap: 7px; border-radius: 10px; }
  .hero-card i { width: 26px; height: 26px; font-size: 0.85rem; border-radius: 7px; }
  body.is-rtl .hero-card { padding: 6px 6px 6px 11px; }
  .hero-brandcard { width: 144px; padding: 14px; }
  .brandcard-logo { width: 100px; }
  .brandcard-btn { gap: 6px; padding: 0 12px; font-size: 13px; }
}

/* ---- the brand card as a way in: wordmark -> « Parlons-en » ------------- */
/* Hover or keyboard focus on the card swaps the wordmark for a white button
   to /contact: Button "inverse", size "sm" (40px, the size for a card) from
   components/Button (white on navy, radius-md, Inter 600, bright green on
   its own hover), as in the claim block of 05-applications.md. The link
   stretches over the whole card; the button takes the centre of the card,
   where the wordmark was, so nothing reflows. The wordmark itself is never
   altered (no recolour, no effect), only faded out while the button is up. */
.brandcard-cta {
  display: block;
  align-self: center;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.brandcard-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.brandcard-cta:focus-visible { outline: none; }
.brandcard-logo {
  display: block;
  transition: opacity 0.24s var(--ease), translate 0.24s var(--ease);
}
.brandcard-btn {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  background: #fff;
  color: #0b1d33;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  translate: 0 8px;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), translate 0.2s var(--ease), background-color 0.12s, color 0.12s;
}
.brandcard-btn i { font-size: 0.95em; transition: transform 0.35s var(--ease); }
body.is-rtl .brandcard-btn { font-family: var(--font-ar); }
body.is-rtl .brandcard-btn i { transform: scaleX(-1); }

/* the chips overlap the card's corners: while it is a button, the card comes
   forward and stops floating, so the target holds still under the pointer */
.layer-core:hover,
.layer-core:focus-within { z-index: 3; }
.hero-brandcard:hover,
.hero-brandcard:focus-within { animation-play-state: paused; }
.hero-brandcard:hover::after,
.hero-brandcard:focus-within::after { border-color: rgba(255, 255, 255, 0.18); }
.hero-brandcard:hover .brandcard-logo,
.hero-brandcard:focus-within .brandcard-logo { opacity: 0; translate: 0 -8px; }
.hero-brandcard:hover .brandcard-btn,
.hero-brandcard:focus-within .brandcard-btn {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
  transition-delay: 0.06s, 0.06s, 0s, 0s;
}
.brandcard-btn:hover { background: #2fb07c; color: #0b1d33; }
.brandcard-btn:hover i { transform: translateX(3px); }
body.is-rtl .brandcard-btn:hover i { transform: scaleX(-1) translateX(3px); }
/* focus ring on the button, dark-theme focus token for a navy ground */
.brandcard-cta:focus-visible .brandcard-btn { outline: 2px solid #7fb0ff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .brandcard-logo,
  .brandcard-btn { translate: none !important; }
}

/* ---- opening intro (templates/partials/intro.html) ----------------------
   Timeline, from the first paint:
   0 – 0.7s    "Cloud" rises in letter by letter (20 ms apart), then fades
   0.7 – 1.7s  the other three words cut in, about 0.3 s each
   1.7 – 2.5s  the words go, the two navy halves draw back to the edges
   2.5s        the overlay is hidden (main.js then removes it)
   Pure CSS, so it ends on its own; it never catches the pointer. Shown only
   with JavaScript on (html.js) and without reduced motion. */
.intro { display: none; }
.js .intro {
  position: fixed;
  inset: 0;
  z-index: 1100; /* above the header, the skip link and the cookie banner */
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  animation: intro-gone 0s linear 2.5s forwards;
}
.intro-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% + 1px); /* 1px overlap: no seam down the middle */
  background: #0b1d33; /* the navy of the logo */
  animation: intro-open 0.8s cubic-bezier(0.9, 0.03, 0.2, 1.01) 1.7s forwards;
}
.intro-panel--left { left: 0; transform-origin: 0 50%; }
.intro-panel--right { right: 0; transform-origin: 100% 50%; }

.intro-words {
  position: relative;
  display: grid;
  max-width: calc(100vw - 2 * var(--gutter));
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 9vw, 6.25rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-align: center;
  animation: intro-gone 0s linear 1.7s forwards;
}
body.is-rtl .intro-words { font-family: var(--font-ar); letter-spacing: 0; line-height: 1.25; }
/* the four words share one cell, centred on each other */
.intro-word { grid-area: 1 / 1; align-self: center; opacity: 0; }
.intro-word--1 { opacity: 1; animation: intro-out 0.2s ease 0.7s forwards; }
.intro-word--1 > span {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  transform: translateY(10px);
  animation: intro-rise 0.3s var(--ease) calc(var(--i) * 0.02s) forwards;
}
.intro-word--2 { animation: intro-in 0.2s ease 0.7s forwards, intro-out 0.2s ease 1s forwards; }
.intro-word--3 { animation: intro-in 0.3s ease 1s forwards, intro-out 0.2s ease 1.3s forwards; }
.intro-word--4 { animation: intro-in 0.3s ease 1.3s forwards; }

@keyframes intro-rise { to { opacity: 1; transform: none; } }
@keyframes intro-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes intro-open { to { transform: scaleX(0); } }
@keyframes intro-gone { to { visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .js .intro { display: none; }
}

/* the intro has already played in this tab (html.intro-seen, set by the inline
   script in pages/home.html): the overlay never shows, main.js removes it */
.js.intro-seen .intro { display: none; }

/* ---- solution chips around the brand card ------------------------------
   One compact chip per sector of the Solutions hub (templates/pages/home.html
   loops over NAV_HUBS), icon and name side by side, each a link to its card
   on /solutions/. Sized to be read at a glance; placed so that all seven fit
   around the card without touching it. The chips still carry .hero-card, so
   the network wiring and the lit state of main.js apply. */
.hero-card--icon {
  gap: 9px;
  padding: 6px 14px 6px 6px;
  border-radius: 13px;
  font-size: 0.95rem;
  cursor: pointer;
}
body.is-rtl .hero-card--icon { padding: 6px 6px 6px 14px; font-size: 1.01rem; }
.hero-card--icon i {
  width: 31px;
  height: 31px;
  border-radius: 9px;
  font-size: 1.05rem;
}
.hero-card-label { line-height: 1.2; }
.hero-card--icon:hover,
.hero-card--icon:focus-visible { z-index: 2; }
.hero-card--icon:focus-visible { outline: 2px solid #0f7a52; outline-offset: 2px; }
.hero-layer:has(.hero-card--icon:hover),
.hero-layer:has(.hero-card--icon:focus-visible) { z-index: 4; }

/* three down each side, clear of the card, the longest name (RH) alone and
   centred under it; its layer spans the stage, so only the chip takes the pointer */
.layer-s1 { top: 2%; inset-inline-start: -4%; }
.layer-s2 { top: -2%; inset-inline-end: 0; }
.layer-s3 { top: 19%; inset-inline-end: -10%; }
.layer-s4 { top: 50%; inset-inline-start: -10%; margin-top: -21px; }
.layer-s5 { bottom: 19%; inset-inline-end: -12%; }
.layer-s6 { bottom: 19%; inset-inline-start: -6%; }
.layer-s7 { bottom: -4%; inset-inline: 0; display: flex; justify-content: center; pointer-events: none; }
.layer-s7 .hero-card { pointer-events: auto; }
/* narrow desktop: the visual sits close to the viewport edge, so the end
   side chips come in (pointer parallax still has room to drift) */
@media (min-width: 992px) and (max-width: 1199px) {
  .layer-s2 { inset-inline-end: -2%; }
  .layer-s3 { top: 14%; inset-inline-end: -5%; }
  .layer-s5 { bottom: 16%; inset-inline-end: -4%; }
  .layer-s6 { bottom: 16%; }
}
.card-s2 { animation-delay: -1s; }
.card-s3 { animation-delay: -2.5s; }
.card-s4 { animation-delay: -4s; }
.card-s5 { animation-delay: -1.8s; }
.card-s6 { animation-delay: -3.2s; }
.card-s7 { animation-delay: -5s; }

@media (max-width: 639px) {
  .hero-card--icon { gap: 7px; padding: 4px 11px 4px 4px; font-size: 0.86rem; border-radius: 11px; }
  body.is-rtl .hero-card--icon { padding: 4px 4px 4px 11px; font-size: 0.92rem; }
  .hero-card--icon i { width: 26px; height: 26px; font-size: 0.94rem; border-radius: 8px; }
  .layer-s1 { inset-inline-start: -6%; }
  .layer-s2 { inset-inline-end: -4%; }
  .layer-s3 { inset-inline-end: -8%; }
  .layer-s4 { inset-inline-start: -8%; margin-top: -17px; }
  .layer-s5 { inset-inline-end: -10%; }
  .layer-s6 { inset-inline-start: -6%; }
}

/* ---- the map: Morocco, its cities lit and linked ---------------------------
   The home hero's centre piece since 2026-11-13 (templates/partials/
   hero_map.html, in .hero-visual--map), where the navy brand card stood: the
   country as a navy silhouette with a faint dot screen (the ribbon's), the
   main cities as four-point stars that twinkle out of phase over a green
   glow, each sending out a ring now and then, and links between them that
   draw themselves once the visual is revealed, then carry green pulses.
   SVG and CSS only. The sector chips gather in the two corners the country
   leaves free (top left: the ocean, bottom right: beyond the border), placed
   with left / right, not inline-start / -end: the map is geography and never
   mirrors, so the chips keep their corners in Arabic too.
   .hero-map-hub is the point the node network (main.js, initNetwork) wires
   the chips to; it has a size (the script needs one) but nothing to show.
   The sector clips that played behind this visual moved to the stage of
   /solutions/ (style.css 41).
   Since 2026-11-14 the rest of Africa lies behind Morocco as a borderless
   shadow (.map-africa, same svg, so it drifts with the country), and the map
   is larger from 1200px up (the grid columns above, the max-width below). */
.hero-visual--map {
  max-width: clamp(340px, 34vw, 580px);
  aspect-ratio: 645 / 685;
}
.hero-visual--map .hero-halo { inset: 6%; }
.hero-visual--map .hero-layer { inset: auto; margin: 0; display: block; pointer-events: auto; }
.hero-visual--map .layer-map,
body.is-rtl .hero-visual--map .layer-map {
  top: 0;
  left: 0;
  width: 100%;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  /* The map is a picture, the chips are the links: it takes no pointer and
     never comes forward. As .layer-core it inherited the brand card's
     ".layer-core:hover { z-index: 3 }" above, so the pointer touching the
     map's box (an svg is hit over its whole box) lifted the map over the
     chips: they stopped lighting up and taking clicks, and since 2026-11-14
     the continent's shadow dimmed them (fixed that day). */
  z-index: auto;
  pointer-events: none;
}
.hero-map {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible; /* the continent behind Morocco is far larger than the viewBox: .hero clips it */
}
/* Morocco's own drop shadow, a blurred copy of the outline under it (it was a
   drop-shadow() on the whole svg until the continent joined: that would blur
   the continent too, over a surface several screens large) */
.map-shadow { fill: #0b1d33; opacity: 0.3; }
/* the rest of Africa, a shadow of the continent with no border in it: it
   starts under Morocco, so the country stays part of it, and runs off the
   page to the right and at the bottom of the hero. No pointer events: it
   lies over the gap between the columns and under the chips. */
.map-africa { pointer-events: none; }
.map-africa--near { display: none; }
/* desktop RTL: the copy stands east of the map, so the continent fades out
   before it reaches the words and mainly runs south */
@media (min-width: 992px) {
  body.is-rtl .map-africa--far { display: none; }
  body.is-rtl .map-africa--near { display: inline; }
}
.hero-map-hub {
  position: absolute;
  left: 60%;
  top: 27%;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  pointer-events: none;
}
.map-land { stroke: #0b1d33; stroke-width: 1.5; stroke-linejoin: round; }
.map-screen { opacity: 0.07; }

/* the links: a quiet line each, drawn in turn once the visual is in */
.map-link {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.js .hero-visual.reveal .map-link { stroke-dashoffset: 100; }
.js .hero-visual.reveal.is-in .map-link {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s var(--ease) calc(0.5s + var(--i) * 0.09s);
}
/* the pulses: a short green dash running each link, out of step */
.map-pulse {
  fill: none;
  stroke: #2fb07c;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 7 93;
  stroke-dashoffset: 107;
  opacity: 0;
  animation: map-pulse var(--t, 3.6s) linear var(--dl, 0s) infinite;
}
@keyframes map-pulse {
  0% { stroke-dashoffset: 107; opacity: 0; }
  12% { opacity: 1; }
  78% { opacity: 1; }
  90%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* the cities */
.map-glow { opacity: 0.55; animation: map-glow 4.2s ease-in-out var(--dl, 0s) infinite; }
.map-star { fill: #fff; animation: map-twinkle 4.2s ease-in-out var(--dl, 0s) infinite; }
.map-dot { fill: #fff; }
.map-ping {
  fill: none;
  stroke: #2fb07c;
  stroke-width: 1.4;
  opacity: 0;
  animation: map-ping 4.2s ease-out var(--dl, 0s) infinite;
}
.map-city--minor .map-star { scale: 0.6; }
.map-city--minor .map-glow { scale: 0.62; }
.map-city--minor .map-dot { scale: 0.8; }
@keyframes map-twinkle {
  0%, 100% { transform: scale(0.7) rotate(0deg); opacity: 0.65; }
  42% { transform: scale(1.3) rotate(45deg); opacity: 1; }
  58% { transform: scale(0.85) rotate(45deg); opacity: 0.9; }
}
@keyframes map-glow {
  0%, 100% { opacity: 0.3; }
  42% { opacity: 1; }
}
@keyframes map-ping {
  0%, 38% { transform: scale(0.4); opacity: 0; }
  44% { opacity: 0.9; }
  100% { transform: scale(3.6); opacity: 0; }
}

/* the chips: three in the top left corner, four in the bottom right one.
   Those four now lie on the continent's shadow and the other three on the
   open ground: a denser glass keeps all seven the same white (at 0.8 the
   four came out visibly greyer); the lit state keeps its own value. */
.hero-visual--map .hero-card { background: rgba(255, 255, 255, 0.92); }
.hero-visual--map .hero-card:hover,
.hero-visual--map .hero-card.is-lit { background: rgba(255, 255, 255, 0.96); }
.hero-visual--map .layer-s1 { top: 3%; left: -3%; }
.hero-visual--map .layer-s2 { top: 16.5%; left: 7%; }
.hero-visual--map .layer-s3 { top: 30%; left: -7%; }
.hero-visual--map .layer-s4 { top: 52%; right: -5%; }
.hero-visual--map .layer-s5 { top: 65%; right: 5%; }
.hero-visual--map .layer-s6 { top: 78%; right: -8%; }
.hero-visual--map .layer-s7 { top: 91%; right: 9%; }
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-visual--map .layer-s4 { right: -2%; }
  .hero-visual--map .layer-s6 { right: -3%; }
  .hero-visual--map .layer-s7 { right: 2%; }
}
/* up to where the container leaves the viewport edge (1440px + gutters): the
   larger map reaches the gutter, so the two chips that overhang it come in a
   little and keep clear of the edge when the pointer pulls them that way */
@media (min-width: 1200px) and (max-width: 1519px) {
  .hero-visual--map .layer-s4 { right: -3%; }
  .hero-visual--map .layer-s6 { right: -5%; }
}
@media (max-width: 639px) {
  .hero-visual--map { max-width: 310px; }
  .hero-visual--map .layer-s1 { left: -5%; }
  .hero-visual--map .layer-s2 { left: 2%; }
  .hero-visual--map .layer-s3 { left: -8%; }
  .hero-visual--map .layer-s4 { right: -6%; }
  .hero-visual--map .layer-s5 { right: 2%; }
  .hero-visual--map .layer-s6 { right: -8%; }
  .hero-visual--map .layer-s7 { right: -3%; }
}

@media (prefers-reduced-motion: reduce) {
  .map-pulse, .map-ping { animation: none; opacity: 0; }
  .map-star, .map-glow { animation: none; opacity: 1; }
  .js .hero-visual.reveal .map-link { stroke-dashoffset: 0; transition: none; }
}

/* ---- phones (no hover): no glass over the live backdrop -------------------
   A backdrop-filter re-blurs what lies behind it every frame that changes,
   and the ribbon shader and the node network change every frame; measured
   2026-11-07 as the second cost of the Android lag after the full-section
   canvases (the shared rules sit in style.css 34). The chips and the frosted
   pane behind the approach steps turn a touch more opaque instead. */
@media (hover: none) {
  .hero-card { background: rgba(255, 255, 255, 0.92); }
  .approach-stage .approach-grid::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(247, 249, 250, 0.86);
  }
}