/* =============================================================================
   Forward Oral Surgery, home.css: h01 to h08, x03 CTA, z01 404 (SIGNATURES S1 to S12, S20; MOTION M2a to M2e).
   Tokens only. One breakpoint (1023px).
   ========================================================================== */

/* ---- h01 hero: assets/css/hero.css (builder H1, three variants) ---- */

/* ---- h02 statement and the people (S3, M2b, D10, D12; builder H2, Cleven 2 Nov: "the photo has to be a bit bigger") ----
   Their own portraits at native size (295 to 302 x 448), never wider (PHOTO-PLAN 2, no upscale), in D10 cards: radius 30,
   8px pad, the photo at 22. A card is photo-locked, so it keeps its 1440 sizes above 1440 (literal px, like the photo).
   the doctor pins beside the statement (sticky image). */
.pcard { margin: 0; display: grid; width: max-content; max-width: 100%; padding: 8px; background: var(--tint); color: var(--ink); border-radius: 30px; }
.pcard img { display: block; width: auto; max-width: 100%; height: auto; border-radius: 22px; }
.pcard__cap { display: grid; gap: 8px; padding: 16px 16px 12px; }
.pcard__cap .lbl { font-size: 14px; line-height: 1.2; color: var(--ink); }   /* --ink: the faded tone is under 4.5:1 on the tint */
.pcard__name { font-family: var(--t-h5-family); font-size: 35px; line-height: .85; letter-spacing: var(--t-h5-track); }
.s-goal__row { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--gap-64); align-items: start; }
.s-goal__pic { position: sticky; top: calc(var(--hdr-h) + var(--gap-24)); }
.s-goal__text { margin: 0; }
.s-goal__main { min-width: 0; }
.s-goal__note { flex: 1 1 220px; display: grid; gap: var(--gap-16); justify-items: start; max-width: max(311px, 30ch); padding-top: var(--gap-16); border-top: 1px solid var(--hairline-light); }
.s-goal__small { margin: 0; }   /* 1024 to about 1100 wide: the pair shrinks below native, never above */

/* ---- h03 pinned service panels (S4, M2c) ------------------------------------ */
.s-services { position: relative; background: var(--anchor); color: var(--ink-invert); }
.panel { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; background: var(--anchor); }
.panel__pic { position: relative; height: 100%; overflow: hidden; }
.panel__pic img { width: 100%; height: 100%; object-fit: cover; }
.panel__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--scrim), transparent 40%); }
.panel__sol { max-width: 420px; display: grid; gap: var(--gap-16); }
.panel__intro { color: var(--ink-invert); }
.panel__name { position: absolute; left: 0; right: 0; bottom: var(--gap-40); z-index: 2; padding: 0 var(--pad-x); color: var(--ink-invert); pointer-events: none;
  grid-template-columns: 1fr; justify-items: center; }
.panel__name .sl, .panel__name .sr { text-align: center; }
.panel__name .sl { transform: translateX(-8%); }
.panel__name .sr { transform: translateX(8%); }
.panel__idx { position: absolute; left: var(--pad-x); bottom: var(--gap-24); z-index: 3; display: grid; gap: var(--gap-8); }
.panel__idx li { color: var(--ink-soft); }
.panel__idx li.is-on { color: var(--ink-invert); }
.panel__go { position: absolute; right: var(--pad-x); bottom: var(--gap-24); z-index: 3; }/* ---- h04 banner (S6) ---------------------------------------------------------- */
/* ---- h05 technology list (S7, M2d) ------------------------------------------ */

.s-tech__grid { display: grid; grid-template-columns: 1fr 1.1fr 2fr; gap: var(--gap-40); align-items: start; }
.s-tech__count, .s-tech__img { position: sticky; top: calc(50vh - 200px); }
.s-tech__count { top: 50vh; }
.s-tech__img { height: 400px; }
.s-tech__pic { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-mid) var(--ease-out); border-radius: var(--r-img); overflow: hidden; }
.s-tech__pic.is-on { opacity: 1; }
.s-tech__pic img { width: 100%; height: 100%; object-fit: cover; }   /* 60%: the crop clears the tree tips at the photo's left */   /* FX8 item 1: their own colour office front, greyed to the band */
.s-tech__list { display: grid; }
.s-tech__row { display: grid; gap: var(--gap-12); padding: var(--gap-48) 0; border-top: 1px solid var(--hairline-light); }
.s-tech__row:last-child { border-bottom: 1px solid var(--hairline-light); }
.s-tech__line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap-24); }
.s-tech__row h3 { color: var(--ink-quiet); transition: color var(--dur-mid) var(--ease-out); }
.s-tech__row.is-on h3 { color: var(--ink); }/* ---- h06 team (S8, M3b) ------------------------------------------------------ */
/* ---- h07 rings and letters (S9, M2e, M3a, D19) ------------------------------ */

.quote__ctl { display: grid; gap: var(--gap-24); }
.quote__tabs { display: flex; flex-wrap: wrap; gap: var(--gap-8) var(--gap-24); }
.quote__tab { position: relative; display: grid; gap: var(--gap-8); min-height: 32px; padding: var(--gap-8) 0 0; border: 0; background: none; color: var(--ink-soft); cursor: pointer; text-align: left; }
.quote__tab[aria-current="true"] { color: var(--ink-invert); }
.quote__bar { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hairline-dark); overflow: hidden; }
.quote__bar::after { content: ""; position: absolute; inset: 0; background: var(--ink-invert); transform: scaleX(0); transform-origin: left; }
.quote__tab[aria-current="true"] .quote__bar::after { transform: scaleX(1); }   /* FX7: the shown letter's tab bar is full; no timer, so no progress fill */
.quote__btns { display: flex; align-items: center; gap: var(--gap-12); }/* ---- h08 pre-footer (S10) ----------------------------------------------------- */
/* ---- x03 CTA (S12) ------------------------------------------------------------ */


/* ---- z01 404 (S20) ------------------------------------------------------------ */
.s-404 { position: relative; min-height: 100vh; overflow: hidden; background: var(--ground); }
/* the blob: one dark ellipse whose edge fades by a radial mask; the 404 sits inside it, so it reads light on dark and
   fades out with the blob toward the bottom, as on the reference 404 */
.s-404__blob { position: absolute; left: 20vw; top: -35vh; width: 100vw; height: 132vh; display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 0 calc(20vw + var(--pad-x)) 7vh 0; background: var(--photo-black);
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 100%); mask-image: radial-gradient(closest-side, #000 52%, transparent 100%); }
.s-404__n { font-family: var(--display); font-size: var(--t-404-size); line-height: .8; letter-spacing: var(--t-display-xxl-track); color: var(--ink-invert); white-space: nowrap; }
.s-404__h { position: absolute; left: var(--pad-x); top: 42%; z-index: 1; }
.s-404__foot { position: absolute; left: var(--pad-x); bottom: calc(var(--foot-curve) + var(--gap-40)); z-index: 1; display: flex; align-items: flex-end; gap: var(--gap-64); }
.s-404__t { max-width: 22ch; }

/* ---- phones -------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .s-404__blob { left: -30vw; top: -25vh; width: 160vw; height: 85vh; justify-content: center; padding: 0 0 16vh 0; }
  .s-404__h { top: auto; bottom: calc(var(--foot-curve) + var(--gap-40)); }
  .s-404__foot { position: static; }
  .s-404__t { position: absolute; left: var(--pad-x); bottom: calc(var(--foot-curve) + var(--gap-40) + 2 * var(--t-h2-size) + var(--gap-24)); }
  .s-404__foot .ulink { position: absolute; right: var(--pad-x); bottom: calc(var(--foot-curve) + var(--gap-40)); }
  .s-goal__row { grid-template-columns: minmax(0, 1fr); gap: var(--gap-40); }
  .s-goal__pic { position: static; }
  .s-goal__note { max-width: none; flex: none; }
  .panel { position: relative; height: auto; grid-template-columns: 1fr; }
  .panel__pic { height: 70vw; }
  .panel__name { top: calc(70vw - var(--t-h2-size) * 2.1); bottom: auto; font-size: var(--t-h2-size); }
  .panel__name .sl, .panel__name .sr { transform: none; }
  .panel__idx { display: none; }
  .panel__go { left: var(--pad-x); right: auto; }
  .s-tech__grid { grid-template-columns: 1fr; gap: var(--gap-24); }
  .s-tech__count { position: static; }
  .s-tech__img { position: relative; top: auto; height: 70vw; }
  .s-tech__row { padding: var(--gap-24) 0; }
  .s-tech__row h3 { color: var(--ink); }
}

/* FX10 (fix wave 4, A3): the typographic plate. A tech row with no honest photo (CariVu, ViziLite PRO, NV PRO3) shows the
   device's category in their own words, set large in the display serif (the measured h2 role: tracking -0.02em, capped at
   the h2 size) on the dark ground in the picture panel's frame (same radius), never a photo standing in for the device */
.s-tech__img { container-type: inline-size; }


/* =============================================================================
   Forward Oral Surgery: the light balance. Light, light, light with one dark moment (h04), light, dark footer.
   These rules sit last and win over the source build's dark versions above. Tokens only.
   ========================================================================== */
.band--mist { background: var(--mist); color: var(--ink); }

/* ---- h02: the doctor, large -------------------------------------------------------------------------------- */
.s-goal__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.s-goal__pic .pcard { width: min(520px, 100%); background: var(--white); }
.s-goal__pic .pcard img { width: 100%; max-width: none; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.s-goal__note { margin-top: var(--gap-64); max-width: 32em; }

/* ---- h03: light stacked panels ------------------------------------------------------------------------------ */
.s-services { background: var(--ground); color: var(--ink); }
.panel { background: var(--ground); gap: var(--gap-40); padding: calc(var(--hdr-h) + var(--gap-8)) var(--pad-x) var(--gap-24);
  border-top: 1px solid var(--hairline-light); border-radius: var(--r-card) var(--r-card) 0 0; }
.panel:nth-of-type(even) { background: var(--white); }
.panel__pic { border-radius: var(--r-card); }
.panel__pic::after { content: none; }
.panel__body { display: flex; flex-direction: column; justify-content: space-between; gap: var(--gap-32); min-width: 0; }
.panel__sol { max-width: 36em; display: grid; gap: var(--gap-16); }
.panel__intro { margin: 0; color: var(--ink); }
.panel__rows { margin-top: var(--gap-8); }
.panel__rows .row { padding: var(--gap-16) 0; }
.panel__name { position: static; padding: 0; color: var(--ink); pointer-events: auto; grid-template-columns: 1fr; justify-items: start; margin: 0; }
.panel__name .sl, .panel__name .sr { text-align: left; transform: none; }
.panel__bar { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap-24); margin-top: var(--gap-24); }
.panel__idx { position: static; }
.panel__idx li { color: var(--ink-quiet); }
.panel__idx li.is-on { color: var(--ink); }
.panel__go { position: static; }

/* ---- h04: the one dark moment ------------------------------------------------------------------------------- */
.s-planned { position: relative; overflow: hidden; display: flex; align-items: center; min-height: min(100vh, 780px); padding: var(--pad-sec) 0;
  background: var(--photo-black); color: var(--ink-invert); }
.s-planned__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-planned::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(20, 32, 31, .74); }
.s-planned__in { position: relative; z-index: 2; display: grid; gap: var(--gap-48); width: 100%; }
.s-planned__h { color: var(--ink-invert); }
.s-planned__words { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gap-24) var(--gap-48); }
.s-planned__words li { display: grid; gap: var(--gap-8); min-width: 8em; padding-top: var(--gap-12); border-top: 1px solid var(--hairline-dark); }
.s-planned__text { margin: 0; max-width: 26em; line-height: 1.12; color: var(--ink-invert); }

/* ---- h05 ------------------------------------------------------------------------------------------------------ */
.s-tech__label { margin-bottom: var(--gap-48); }
.s-tech__pic { background: var(--tint); }

/* ---- h06: meet the doctor ------------------------------------------------------------------------------------ */
.s-meet__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap-64); align-items: center; }
.s-meet__pic { margin: 0; display: grid; gap: var(--gap-16); }
.s-meet__pic img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-frame); }
.s-meet__cap { display: grid; gap: var(--gap-8); }
.s-meet__title { margin-bottom: var(--gap-40); }
.s-meet__facts { margin-bottom: var(--gap-40); }
.s-meet__facts .row { padding: var(--gap-16) 0; }

/* ---- h07: step by step (mist) -------------------------------------------------------------------------------- */
.s-steps { position: relative; padding: var(--pad-sec) 0; }
.s-steps__head { display: grid; gap: var(--gap-16); margin-bottom: var(--gap-64); }
.steps { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--gap-64); padding-top: var(--gap-40); border-top: 1px solid var(--hairline-light); }
.steps__main { display: grid; gap: var(--gap-48); min-width: 0; }
.steps__slides { min-height: calc(var(--t-h5-size) * 4.6); }
.steps__slide { margin: 0; }
.steps__text { margin: 0; max-width: 28em; font-family: var(--display); font-size: var(--t-h5-size); line-height: 1.14; letter-spacing: var(--t-h5-track); }
.steps .quote__tab { color: var(--ink-quiet); }
.steps .quote__tab[aria-current="true"] { color: var(--ink); }
.steps .quote__bar { background: var(--hairline-light); }
.steps .quote__bar::after { background: var(--ink); }

/* ---- h08: close to home -------------------------------------------------------------------------------------- */
.s-near__title { margin-bottom: var(--gap-48); }
.s-near__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-48); align-items: start; }
.s-near__map { margin: 0; display: grid; gap: var(--gap-12); }
.s-near__map img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-frame); }
.s-near__credit a { color: var(--ink-quiet); text-decoration: underline; text-underline-offset: 3px; }
.near { margin: 0; display: grid; }
.near__row { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: var(--gap-24); padding: var(--gap-24) 0; border-top: 1px solid var(--hairline-light); }
.near__row:last-child { border-bottom: 1px solid var(--hairline-light); }
.near__row dt, .near__row dd { margin: 0; }
.s-near__go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-24); margin-top: var(--gap-32); }

/* ---- FAQ ------------------------------------------------------------------------------------------------------ */
.s-faq2__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-64); align-items: start; }
.faq2__item { border-top: 1px solid var(--hairline-light); }
.faq2__item:last-child { border-bottom: 1px solid var(--hairline-light); }
.faq2__q { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-40); padding: var(--gap-24) 0; cursor: pointer; list-style: none; }
.faq2__q::-webkit-details-marker { display: none; }
.faq2__t { margin: 0; }
.faq2 .faq__toggle { flex: none; background: var(--tint); color: var(--ink); }
.faq2 .faq__toggle svg { transition: transform var(--dur-fast) var(--ease-out); }
.faq2__item[open] .faq__toggle svg { transform: rotate(45deg); }
.faq2__a { margin: 0; padding: 0 0 var(--gap-24); max-width: 60ch; color: var(--ink-quiet); }/* ---- x03 book band --------------------------------------------------------------------------------------------- */


@media (max-width: 1023px) {
  .s-goal__row, .s-meet__in, .s-near__grid, .s-faq2__in, .steps { grid-template-columns: minmax(0, 1fr); gap: var(--gap-40); }
  .panel { padding: var(--hdr-h) var(--pad-x) var(--gap-40); border-radius: var(--r-card) var(--r-card) 0 0; }
  .panel__pic { height: 80vw; }
  .panel__go { position: static; }
  .panel__idx { display: none; }
  .s-planned { min-height: 0; }
  .s-goal__note { margin-top: var(--gap-40); }
  .near__row { grid-template-columns: minmax(0, 1fr); gap: var(--gap-8); }
  .steps__slides { min-height: calc(var(--t-h5-size) * 9); }
}

.s-near__credit a { display: inline-flex; align-items: center; min-height: 24px; }
.quote__tab { min-width: 48px; }

/* h07, four cards (fix wave 1) */
.s-steps__head { margin-bottom: var(--gap-40); }
.steps4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-16); }
.steps4__i { display: grid; align-content: start; gap: var(--gap-16); padding: var(--gap-24); background: var(--white); border-radius: var(--r-card); }
.steps4__t { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--t-h5-size); line-height: 1.1; letter-spacing: var(--t-h5-track); }
.steps4__p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink-quiet); }
@media (max-width: 1023px) { .steps4 { grid-template-columns: minmax(0, 1fr); } }
/* the OpenStreetMap render is loud beside this palette (fix wave 1) */
.s-near__map img { filter: saturate(.5); }

/* h04, solid spruce (fix wave 1): the brand colour's one big moment */
.s-planned { background: var(--spruce); }
.s-planned::before { content: none; }
.s-planned__words { display: grid; grid-template-columns: repeat(3, minmax(0, 12em)); }
.s-planned__words li { min-width: 0; }

/* =============================================================================
   FIX WAVE 2 (4 Nov): the devices the fork had flattened, restored from the source build's construction with this site's words, light
   grounds and colour photos. These rules sit last and win over the lean versions above.
   ========================================================================== */

/* ---- C2 / h03: treatment panels. Photo flush at 0,0, half the width, full height, radius 0; the name runs across both halves (ink over
   the paper half, paper over the photo half); the label, intro and rows top right; the index and the pill at the foot ---------------- */
@media (min-width: 1024px) {
  .panel { padding: 0; gap: 0; border-top: 0; border-radius: 0; }
  .panel__pic { border-radius: 0; height: 100%; background: var(--anchor); }
  .panel__pic::after { content: ""; position: absolute; inset: auto 0 0 0; height: 66%; pointer-events: none;
    background: linear-gradient(to top, rgba(20, 32, 31, .72), rgba(20, 32, 31, .38) 50%, rgba(20, 32, 31, 0)); }
  .panel__body, .panel__foot, .panel__bar { display: contents; }
  .panel__sol { padding: calc(var(--hdr-h) + var(--gap-24)) var(--pad-x) 0 var(--gap-40); max-width: none; align-content: start; }
  .panel__sol > * { max-width: 30em; }
  .panel > .panel__body > .panel__foot > .panel__name { position: absolute; left: 0; right: 0; bottom: calc(var(--gap-24) + 112px); z-index: 2;
    padding: 0 var(--pad-x); color: var(--ink); pointer-events: none; }
  .panel__inv { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
  .panel__name { justify-items: stretch; }
  .panel__inv .panel__name { position: absolute; left: 0; width: 200%; bottom: calc(var(--gap-24) + 112px); margin: 0; padding: 0 var(--pad-x); color: var(--ink-invert); }
  .panel__name .sl, .panel__name .sr { transform: none; }
  .panel__name .sl { text-align: left; }
  .panel__name .sr { text-align: right; }
  .panel__idx { position: absolute; left: var(--pad-x); bottom: var(--gap-24); z-index: 3; width: max-content; }
  .panel__idx .lbl, .panel__idx li { color: var(--ink-invert); }
  .panel__idx li { opacity: .74; }
  .panel__idx li.is-on { opacity: 1; color: var(--ink-invert); }
  .panel__go { position: absolute; right: var(--pad-x); bottom: var(--gap-24); z-index: 3; }
}
@media (max-width: 1023px) {
  .panel__inv { display: none; }
  .panel__name { font-size: var(--t-h2-size); }
}

/* ---- C5 / h04: Planned Digitally, a full-bleed photo band, the type over its lower part ------------------------------------------ */
.s-planned { align-items: flex-end; min-height: clamp(560px, 62.5vw, 1100px); padding: var(--pad-sec) 0 calc(var(--gap-48) + var(--gap-24)); background: var(--anchor); }
.s-planned::before { content: ""; position: absolute; inset: auto 0 0 0; height: 72%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(20, 32, 31, .82), rgba(20, 32, 31, .5) 48%, rgba(20, 32, 31, 0)); }
.s-planned__in { gap: var(--gap-32); }
.s-planned__words { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-24); }
.s-planned__words li { min-width: 0; padding-top: 0; border-top: 0; }
.s-planned__text { max-width: 30em; }
@media (max-width: 1023px) { .s-planned { min-height: 0; padding-top: calc(var(--pad-sec) * 2); } }

/* ---- C6 / h02: the doctor, the three fact rows beside the pill ------------------------------------------------------------------ */
.s-goal__note { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--gap-24) var(--gap-40); max-width: none; padding-top: 0; border-top: 0; }
.s-goal__facts { grid-column: 1; margin: 0; }
.s-goal__facts .row { padding: var(--gap-16) 0; }
.s-goal__go { grid-column: 2; }
@media (max-width: 1023px) { .s-goal__note { grid-template-columns: minmax(0, 1fr); } .s-goal__go { grid-column: 1; } }

/* ---- C7 / h05 and h08: openers at the t-d size ------------------------------------------------------------------------------------ */
.s-tech__title { margin-bottom: var(--gap-48); }
.s-near__title { margin-bottom: var(--gap-48); }
.s-near__maplink { display: block; border-radius: var(--r-frame); }

/* ---- C8: the open menu lists the four treatments once on desktop (the column at right); phones keep the expanding list ---------------- */
@media (min-width: 1024px) { .nav .nav__sub--flat, .nav .nav__gl--big .nav__exp { display: none; } }

/* ---- C9: FAQ toggles, 48px solid ink circles with a paper plus that turns to a cross --------------------------------------------- */
.faq2 .faq__toggle { width: var(--circ); height: var(--circ); background: var(--ink); color: var(--ink-invert); }

/* =============================================================================
   Forward Oral Surgery: the pillars in the giant-word band, the dark navy cases moment, the click-to-load map, links under the rings.
   ========================================================================== */
.s-planned__pd { margin: var(--gap-8) 0 0; max-width: 30em; color: var(--ink-invert); line-height: 1.4; }
.s-planned__words li { align-content: start; }
@media (max-width: 1023px) { .s-planned__words { grid-template-columns: minmax(0, 1fr); gap: var(--gap-24); } }

/* h05: Our cases, the one dark moment, on the deep navy ground (the sticky list of the technology device, recoloured) */
.s-cases { padding-top: var(--pad-sec); }
.s-tech--dark .s-tech__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 2.4fr) minmax(0, 2fr); }
.s-tech--dark .s-tech__img { top: calc(50vh - 224px); height: auto; aspect-ratio: 4 / 3; }
.s-tech--dark .s-tech__pic { background: var(--photo-black); }
.s-tech--dark .s-tech__pic img { object-fit: contain; }
.s-tech--dark .s-tech__row { border-top-color: var(--hairline-dark); }
.s-tech--dark .s-tech__row:last-child { border-bottom-color: var(--hairline-dark); }
.s-tech--dark .s-tech__row h3 { color: var(--ink-soft); }
.s-tech--dark .s-tech__row.is-on h3 { color: var(--ink-invert); }
.s-tech--dark .s-tech__label { color: var(--ink-soft); }
.s-cases__list { min-width: 0; }
.s-cases__go { margin-top: var(--gap-32); }
@media (max-width: 1023px) {
  .s-tech--dark .s-tech__grid { grid-template-columns: minmax(0, 1fr); }
  .s-tech--dark .s-tech__img { position: relative; top: auto; height: auto; aspect-ratio: 4 / 3; }
  .s-tech--dark .s-tech__row h3 { color: var(--ink-invert); }
}

/* h08: the map is a picture until the button is pressed (no third party loads with the page) */
.s-near__frame { position: relative; border-radius: var(--r-frame); overflow: hidden; background: var(--tint); }
.s-near__frame > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; }
.s-near__load { position: absolute; left: var(--gap-16); bottom: var(--gap-16); }
.s-near__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.s-near__frame.is-live > img { visibility: hidden; }

/* rings: one link under each step sentence, centred like the sentence */
.rings__go { display: flex; justify-content: center; width: calc(100% - var(--gap-24)); margin-left: calc((var(--ov) + var(--gap-24)) / 2); }
@media (max-width: 1023px) { .rings__go { width: calc(100% - 2 * var(--ov)); margin-left: var(--ov); } }