/* ============================================================================
   gs-motion.css - the Greenshoots scroll-craft design layer
   ----------------------------------------------------------------------------
   The page-agnostic half of the approved homepage (scrollcraft/builds/gs-home):
   tokens, the browser-frame pane, the museum label, room type, buttons, the
   room index, layered-hero planes, pan rails, reveal/drift helpers, phone and
   reduced-motion rules.

   OPT-IN ONLY. Every rule is scoped under .gs-sc (put it on <main> or a wrapper,
   not on <body>) and every class is prefixed gm- so nothing collides with the
   existing gs-* page classes. A page that does not carry .gs-sc is untouched.

   Load order:  scrollcraft.css -> gs-motion.css -> (page CSS)
                scrollcraft.js  -> gs-motion.js   (both defer)
   Full guide:  docs/website/SCROLLCRAFT-DESIGN-SYSTEM.md
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
.gs-sc {
  /* colour roles (scroll-craft names, Greenshoots values) */
  --sc-canvas:     #070b09;
  --sc-surface:    #0e1512;
  --sc-ink:        #eef3ef;
  --sc-ink-soft:   #a3b3aa;
  --sc-accent:     #22C55E;
  --sc-accent-ink: #03140a;
  --sc-font-display: "Cabinet Grotesk", "Inter", system-ui, sans-serif;
  --sc-font-text:    "Switzer", "Inter", system-ui, sans-serif;
  --sc-shadow-color: 150 40% 2%;

  --gm-green-deep: #16A34A;
  --gm-green-hover: #3bd872;
  --gm-glass: color-mix(in oklab, #0e1512 72%, transparent);
  --gm-line: color-mix(in oklab, var(--sc-ink) 14%, transparent);
  --gm-deep: #040605;          /* the near-black room ground */

  /* chrome. gs-motion.js measures the site header (fixed or sticky) and writes
     --gs-head-h on <html>. --gm-index-h is the room index, when there is one. */
  --gm-head-h: var(--gs-head-h, 0px);
  --gm-head-fixed: var(--gs-head-fixed, 0px);   /* = head-h when the header is position:fixed */
  --gm-index-h: 0px;
  --gm-top: calc(var(--gm-index-h) + 14px);   /* safe top inside a pinned stage */

  line-height: 1.64;
  letter-spacing: 0.004em;
  isolation: isolate;
}
.gs-sc:has(.gm-index) { --gm-index-h: 54px; }

.gs-sc img { max-width: 100%; }
.gs-sc :focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 4px; }
.gm-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------ pinned stages + chrome --
   A pinned stage sits BELOW the site header instead of under it, so nothing a
   stage shows is ever hidden by the header. The fallback (zero specificity) is
   the no-JS / pre-mount shape; the engine's .sc-stage takes over on mount. */
:where(.gs-sc [data-sc-stage]) { position: relative; min-height: calc(100svh - var(--gm-head-h)); }
.gs-sc .sc-stage { top: var(--gm-head-h); height: calc(100vh - var(--gm-head-h)); height: calc(100svh - var(--gm-head-h)); }
.gs-sc [data-sc-progress] { top: var(--gm-head-h); z-index: 45; }
/* A cue that is visible at p=0 (hero copy) should not wait for the engine. */
html:not(.sc-ready) .gs-sc [data-gm-lit] { opacity: 1; }

/* ------------------------------------------------------------ room index --
   A zero-height sticky bar under the site header. It never takes layout space
   and never covers the header's own menus (z 40 < header z 50/100). */
.gm-index { position: sticky; top: var(--gm-head-h); z-index: 40; height: 0; display: flex; align-items: flex-start; justify-content: flex-end;
  padding-inline: var(--sc-gutter); pointer-events: none; }
.gm-index__list { pointer-events: auto; display: flex; gap: 2px; list-style: none; margin: 10px 0 0; padding: 4px;
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
  border: 1px solid var(--gm-line); border-radius: 999px; background: var(--gm-glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.gm-index__list::-webkit-scrollbar { display: none; }
.gm-index__list li { flex: none; }
.gm-index a { display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; text-decoration: none;
  font-size: 0.84rem; font-weight: 500; line-height: 1.2; color: var(--sc-ink-soft); white-space: nowrap;
  transition: color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out); }
.gm-index a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; opacity: .7;
  transition: background-color 240ms var(--sc-ease-out), border-color 240ms var(--sc-ease-out); }
.gm-index a.is-visited::before { background: var(--sc-accent); border-color: var(--sc-accent); opacity: 1; }
.gm-index a[aria-current="true"] { color: var(--sc-ink); background: color-mix(in oklab, var(--sc-ink) 9%, transparent); }
@media (hover: hover) and (pointer: fine) { .gm-index a:hover { color: var(--sc-ink); } }
.gm-index a:active { transform: translateY(1px); }
/* Room anchors land below the header and the index, not under them. */
.gs-sc [data-room], .gs-sc [id] { scroll-margin-top: calc(var(--gm-head-h) + var(--gm-index-h)); }

/* ------------------------------------------- the pane: a real screenshot --
   A browser frame around a REAL screenshot. Never a div-built fake screen. */
.gm-pane { margin: 0; border-radius: 14px; overflow: hidden; background: #0b100e;
  border: 1px solid var(--gm-line);
  box-shadow: inset 0 1px 0 color-mix(in oklab, #fff 10%, transparent), 0 2px 4px hsl(150 40% 2% / .3),
              0 18px 40px -10px hsl(150 40% 2% / .55), 0 50px 90px -30px hsl(150 40% 2% / .6); }
.gm-pane__bar { display: flex; align-items: center; gap: 10px; height: 34px; padding-inline: 12px;
  background: linear-gradient(#161d19, #111714); border-bottom: 1px solid var(--gm-line); }
.gm-pane__bar::before { content: ""; width: 38px; height: 8px; flex: none;
  background: radial-gradient(circle 4px at 4px 4px, #3a4640 98%, transparent), radial-gradient(circle 4px at 19px 4px, #3a4640 98%, transparent), radial-gradient(circle 4px at 34px 4px, #3a4640 98%, transparent); }
.gm-pane__url { margin-inline: auto; transform: translateX(-24px); font-size: 0.72rem; line-height: 1.4; color: var(--sc-ink-soft); letter-spacing: .01em;
  padding: 3px 12px; border-radius: 6px; background: color-mix(in oklab, #fff 5%, transparent); max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-pane img, .gm-pane video { display: block; width: 100%; height: auto; }
.gm-pane--phone { border-radius: 26px; padding: 7px; background: #0c110f; }
.gm-pane--phone img { border-radius: 20px; }
/* small floating pane (hero mid-plane) */
.gm-pane--mini .gm-pane__bar { height: 16px; }
.gm-pane--mini .gm-pane__bar::before { width: 20px; height: 5px; transform: scale(.55); transform-origin: left; }
.gm-pane--mini .gm-pane__url { display: none; }

/* ------------------------------------ the label: identical for every object --
   title, one line, then Kind / Year / Platform. Never vary the schema. */
.gm-label h3, .gm-label__title { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem); letter-spacing: -0.015em; line-height: 1.1; margin: 0; color: var(--sc-ink); }
.gm-label__line { margin: 6px 0 0; color: var(--sc-ink-soft); max-width: 42ch; text-wrap: pretty; }
.gm-label__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--gm-line); font-size: 0.8rem; }
.gm-label__meta div { display: flex; gap: 6px; }
.gm-label__meta dt { color: color-mix(in oklab, var(--sc-ink-soft) 80%, transparent); }
.gm-label__meta dd { margin: 0; color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.gm-label__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 0.86rem; font-weight: 500; color: var(--sc-accent);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in oklab, var(--sc-accent) 45%, transparent);
  transition: text-decoration-color 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .gm-label__link:hover { text-decoration-color: var(--sc-accent); } }
.gm-note { font-size: 0.78rem; line-height: 1.5; color: var(--sc-ink-soft); }
.gm-tag { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .04em; padding: 4px 9px; border-radius: 999px; color: #fde68a;
  background: hsl(45 90% 50% / .14); border: 1px solid hsl(45 90% 60% / .3); white-space: nowrap; }

/* -------------------------------------------------------------- room type -- */
.gm-room-h { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-3xl); letter-spacing: -0.03em; line-height: .98; margin: 0; color: var(--sc-ink); text-wrap: balance; }
.gm-room-h--md { font-size: var(--sc-t-2xl); }
.gm-room-p { color: var(--sc-ink-soft); max-width: 40ch; margin: var(--sc-4) 0 0; font-size: var(--sc-t-lg); line-height: 1.5; text-wrap: pretty; }
.gm-prose { color: var(--sc-ink-soft); max-width: 62ch; text-wrap: pretty; }
.gm-prose > * + * { margin-top: var(--sc-4); }
.gm-prose strong { color: var(--sc-ink); }

/* ---------------------------------------------------------------- buttons -- */
.gm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--sc-accent); color: var(--sc-accent-ink); font: 600 .95rem/1 var(--sc-font-text); text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 0 hsl(145 80% 70% / .5) inset, 0 8px 22px -8px hsl(145 70% 30% / .7);
  transition: background-color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .gm-btn:hover { background: var(--gm-green-hover); } }
.gm-btn:active { transform: scale(.97); }
.gm-btn:disabled, .gm-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.gm-btn--ghost { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--gm-line); }
@media (hover: hover) and (pointer: fine) { .gm-btn--ghost:hover { background: color-mix(in oklab, #fff 6%, transparent); } }

/* ----------------------------------------------------- surfaces and lists -- */
.gm-surface { border-radius: 18px; border: 1px solid var(--gm-line); padding: 28px;
  background: linear-gradient(160deg, color-mix(in oklab, var(--sc-accent) 9%, var(--sc-surface)), var(--sc-surface) 55%);
  box-shadow: inset 0 1px 0 color-mix(in oklab, #fff 7%, transparent); }
.gm-surface h3 { font-family: var(--sc-font-display); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); letter-spacing: -0.02em; line-height: 1.05; margin: 0; color: var(--sc-ink); }
.gm-ticks { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; font-size: .92rem; }
.gm-ticks li { display: flex; gap: 10px; }
.gm-ticks li::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 5px; border-radius: 50%;
  background: radial-gradient(circle, var(--sc-accent) 32%, transparent 36%), color-mix(in oklab, var(--sc-accent) 18%, transparent); }
.gm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #152019; border: 1px solid var(--gm-line); font-size: .78rem; line-height: 1.5; }
.gm-chip button { all: unset; cursor: pointer; line-height: 1; color: var(--sc-ink-soft); padding: 0 2px; }
.gm-chip button:focus-visible { outline: 2px solid var(--sc-accent); border-radius: 3px; }
.gm-chip--empty { color: var(--sc-ink-soft); background: transparent; border-style: dashed; }

/* ------------------------------------------------------------------ forms -- */
.gm-field { display: grid; gap: 6px; }
.gm-field label { font-size: .8rem; color: var(--sc-ink-soft); }
.gm-field input, .gm-field textarea, .gm-field select { font: inherit; font-size: 1rem; color: var(--sc-ink); background: #0f1714; border: 1px solid var(--gm-line); border-radius: 12px; padding: 12px 14px; width: 100%; }
.gm-field textarea { min-height: 96px; resize: vertical; }
.gm-field input:focus-visible, .gm-field textarea:focus-visible, .gm-field select:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; border-color: transparent; }
.gm-field [aria-invalid="true"] { border-color: #fca5a5; }
.gm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gm-check { display: flex; gap: 10px; align-items: center; font-size: .92rem; cursor: pointer; }
.gm-check input { width: 20px; height: 20px; accent-color: var(--sc-accent); }
.gm-status { font-size: .84rem; color: var(--sc-ink-soft); min-height: 1.3em; margin: 0; }
.gm-status.is-warn { color: #fde68a; }
.gm-status.is-ok { color: #86efac; }
.gm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================ LAYERED HERO ==
   Planes move at different rates from ONE progress value, --gm-hp:
     - inside a pinned act (data-sc-act="pin") it is the engine's --sc-p
     - on an unpinned hero, add data-gm-track and it is --gm-out (0 at rest,
       1 once the hero has scrolled off the top)
   far = photo push-in, mid = small floating panes, near = one big tilted pane. */
/* position via :where() so a pinned stage's .sc-stage (sticky) always wins */
:where(.gm-hero) { position: relative; }
.gm-hero { overflow: hidden; background: #0b0d18; --gm-hp: var(--gm-out, var(--sc-p, 0)); }
.gm-hero--flow { min-height: calc(92svh - var(--gm-head-h) + var(--gm-head-fixed)); }
.gm-hero--flow .gm-hero__copy { top: calc(var(--gm-head-fixed) + var(--gm-top) + 7vh); }
.gm-hero__far { position: absolute; inset: 0; transform-origin: 54% 64%;
  transform: scale(calc(1.05 + var(--gm-hp) * .13)) translateY(calc(var(--gm-hp) * -2.5%)); }
.gm-hero__far img { width: 100%; height: 100%; object-fit: cover; object-position: var(--gm-focus, 54% 60%); max-width: none; display: block; }
.gm-hero__shade { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(75% 62% at 8% 26%, hsl(232 45% 6% / .86), hsl(232 45% 6% / .42) 55%, transparent 78%),
              linear-gradient(to top, var(--sc-canvas) 0%, transparent 22%); }
.gm-hero__mid { position: absolute; inset: 0; pointer-events: none; }
.gm-float { position: absolute; width: clamp(150px, 13vw, 230px); left: var(--x); top: var(--y); opacity: .82;
  filter: saturate(.85) brightness(.82);
  transform: translate3d(calc(var(--dx, 0px) * var(--gm-hp)), calc(var(--gm-hp) * var(--dy, -16vh)), 0) scale(calc(.86 + var(--gm-hp) * .22)); }
.gm-hero__near { position: absolute; right: 5vw; bottom: -14vh; width: min(44vw, 780px); perspective: 1800px; }
.gm-hero__near .gm-pane { transform-origin: 70% 100%;
  transform: translateY(calc(var(--gm-hp) * -34vh)) rotateY(calc(-13deg + var(--gm-hp) * 10deg)) rotateX(calc(5deg - var(--gm-hp) * 5deg)) scale(calc(1 + var(--gm-hp) * .1)); }
.gm-hero__copy { position: absolute; z-index: 20; left: var(--sc-gutter); top: calc(var(--gm-top) + 7vh); max-width: 34rem; }
.gm-hero__title { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(3.1rem, 1.6rem + 5.4vw, 6.6rem); line-height: .94; letter-spacing: -0.035em; margin: 0; color: var(--sc-ink); }
.gm-hero__title--md { font-size: clamp(2.6rem, 1.4rem + 4.2vw, 5.2rem); }
.gm-hero__title span { display: block; color: var(--sc-accent); }
.gm-hero__line { font-size: var(--sc-t-lg); line-height: 1.45; margin: var(--sc-5) 0 0; max-width: 26ch; color: #e6ecf5; text-wrap: balance; }
.gm-hero__meta { margin: var(--sc-5) 0 0; font-size: .82rem; color: #c9d2e0; display: flex; gap: 16px; flex-wrap: wrap; }
.gm-hero__meta > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--sc-accent); margin-right: 16px; vertical-align: middle; }
.gm-hero__actions { margin: var(--sc-5) 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.gm-hero__credit { position: absolute; z-index: 20; left: var(--sc-gutter); bottom: 18px; margin: 0; font-size: .7rem; color: #aab4c2; }
.gm-hero__credit a { color: inherit; }

/* ================================================================ PAN RAIL ==
   <section data-sc-act="pan" data-sc-span="2.8"><div data-sc-stage class="gm-rail-stage">
     <div class="gm-rail" data-sc-pan="0.04"> lead, .gm-obj x N (style="--i:1..N"), end </div>
   Objects settle in one by one: set --gm-rail-k to about (N + 1.5). */
.gm-rail-stage { display: flex; align-items: center; overflow: hidden; }
.gm-rail { display: flex; align-items: flex-start; gap: clamp(28px, 3.4vw, 60px); padding-inline: var(--sc-gutter); padding-top: var(--gm-top); will-change: transform; }
.gm-rail__lead { flex: none; width: min(30rem, 78vw); align-self: center; }
.gm-rail__end { flex: none; width: min(26rem, 80vw); align-self: center; }
.gm-obj { flex: none; width: clamp(19rem, 34vw, 36rem); }
.gm-obj > .gm-pane { margin-bottom: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .gm-rail .gm-obj { opacity: clamp(.5, calc(var(--sc-p, 0) * var(--gm-rail-k, 9.5) - var(--i, 0) + 1.6), 1);
    translate: 0 calc((1 - clamp(0, calc(var(--sc-p, 0) * var(--gm-rail-k, 9.5) - var(--i, 0) + 1.6), 1)) * 26px); }
}
/* Reduced motion: GSMotion.calm() turns a pan act into a flow section and
   marks it [data-gm-calmed-pan]. The stage becomes an ordinary swipeable row at
   its natural height, so every item stays reachable with no held scroll. */
[data-gm-calmed-pan] { height: auto !important; }
[data-gm-calmed-pan] > [data-sc-stage] { position: relative; top: auto; display: block; height: auto; min-height: 0;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  scroll-padding-inline: var(--sc-gutter); padding-block: var(--sc-section); scrollbar-width: thin; }
[data-gm-calmed-pan] [data-sc-pan] { width: max-content; padding-top: 0; transform: none !important; }
[data-gm-calmed-pan] [data-sc-pan] > * { scroll-snap-align: start; }

/* ================================================= reveal + drift helpers ==
   data-gm-reveal="up|down|left|right|iris" : clip-path wipe as the element
   enters, driven by its OWN position (works anywhere, no pinned act needed).
   It latches open, so content never re-hides on scroll-up.
   data-gm-drift="-0.12" : parallax by rate x distance from viewport centre. */
[data-gm-reveal] { will-change: clip-path; }
[data-gm-drift] { will-change: transform; }

/* ========================================================= section rhythm == */
.gm-section { padding-block: var(--sc-section); position: relative; }
.gm-section--deep { background: var(--gm-deep); }
.gm-section--tint { background: radial-gradient(70% 50% at 50% 20%, hsl(145 55% 10% / .7), transparent 70%), var(--gm-deep); }
.gm-hush { min-height: 100svh; display: grid; place-content: center; padding: var(--sc-9) var(--sc-gutter); background: var(--gm-deep); text-align: left; }
.gm-hush__big { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(4rem, 2rem + 9vw, 10rem); letter-spacing: -0.04em; line-height: .9; margin: 0; color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.gm-hush__line { margin: var(--sc-5) 0 0; font-size: var(--sc-t-lg); color: var(--sc-ink-soft); max-width: 30ch; }

/* ================================================================= phones == */
@media (max-width: 760px) {
  .gs-sc:has(.gm-index) { --gm-index-h: 50px; }
  .gm-index { justify-content: stretch; padding-inline: 12px; }
  .gm-index__list { margin-top: 8px; }
  .gm-index a { padding: 7px 10px; font-size: .8rem; }

  .gm-hero__copy { top: calc(var(--gm-top) + 4vh); right: var(--sc-gutter); }
  .gm-hero--flow .gm-hero__copy { top: calc(var(--gm-head-fixed) + var(--gm-top) + 4vh); }
  .gm-hero__title { font-size: clamp(2.7rem, 12vw, 3.6rem); }
  .gm-hero__title--md { font-size: clamp(2.3rem, 10vw, 3.1rem); }
  .gm-hero__line { font-size: 1.08rem; }
  .gm-float { width: 104px; }
  .gm-hero__near { right: 50%; translate: 50% 0; width: 70vw; bottom: -6vh; }
  .gm-hero__credit { display: none; }
  .gm-hero__shade { background: linear-gradient(to bottom, hsl(232 45% 6% / .82) 0%, hsl(232 45% 6% / .62) 42%, transparent 66%), linear-gradient(to top, var(--sc-canvas) 0%, transparent 20%); }

  .gm-obj { width: 80vw; }
  .gm-two { grid-template-columns: 1fr; }
}

/* ===================================================== reduced motion ==
   A complete, still page: every plane parks at rest, every wipe is open. */
@media (prefers-reduced-motion: reduce) {
  .gm-hero__far, .gm-float, .gm-hero__near .gm-pane { transform: none !important; }
  .gm-hero__near .gm-pane { transform: rotateY(-8deg) !important; }
  [data-gm-reveal] { clip-path: none !important; }
  [data-gm-drift] { transform: none !important; }
  .gm-index a, .gm-btn { transition: none; }
}

/* ============================================== static-page header parity ==
   The hand-maintained pages carry two older header kits (.gs-logo-name +
   .gs-nav-cta, and .gs-logo__name + .gs-nav__cta). Match the Next.js header:
   a flat white wordmark (no gradient text) and a solid green pill with dark
   text, no glow, no transition: all. */
.gs-header .gs-logo-name, .gs-header .gs-logo__name {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; color: #fff; }
.gs-header .gs-nav-cta, .gs-header .gs-nav__cta {
  background: #22c55e; color: #060a12; border-radius: 999px; box-shadow: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.gs-header .gs-nav-cta:hover, .gs-header .gs-nav__cta:hover {
  background: #16a34a; color: #060a12; box-shadow: none; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .gs-header .gs-nav-cta:hover, .gs-header .gs-nav__cta:hover { transform: none; }
}

/* ================================== static pages: hero copy legibility ==
   The service pages set small copy (meta line, ghost button, credit) over
   bright parts of their photos (sunset band, lit water). A soft scrim sits
   behind the copy column, and ghost buttons in the hero get a dark fill, so
   every line holds at least 4.5:1 against the photo. */
:is(.gm-svc, .gm-dept, .gm-page) .gm-hero__copy::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -14% -22% -18% -40%;
  background: radial-gradient(closest-side, hsl(150 30% 4% / .74), hsl(150 30% 4% / .6) 55%, hsl(150 30% 4% / 0)); }
:is(.gm-svc, .gm-dept, .gm-page) .gm-hero__copy .gm-btn--ghost { background: rgba(7, 11, 9, .6); }
@media (hover: hover) and (pointer: fine) {
  :is(.gm-svc, .gm-dept, .gm-page) .gm-hero__copy .gm-btn--ghost:hover { background: rgba(20, 28, 24, .75); }
}