/* =====================================================================
   River Tech — home.css (page layer for /index.html)
   Foundation: /css/base.css + docs/components.md. Only home-* blocks here.
   1 glyph · 2 hero · 3 about · 4 scope gallery · 5 works
   6 services rail · 7 AI band · 7b narrow desktop rail · 8 SP (max-width: 768px) · 9 forced colours
   ===================================================================== */

/* 1. Signature glyph: base.css .glyph (brand triangle); rows only add the colour transition */
.home-work__role .glyph { transition: background-color var(--d-instant); }
/* Accent words: Bodoni Moda's automatic optical size follows the font size (opsz 96 at 128px), whose
   ~0.5px hairlines make W, K and A fall apart. The small-text cut keeps ~2px hairlines at 128px, like
   the reference's Didot italic; same value as about.css (.about-statement). Candidate for base.css. */
.accent-word { font-variation-settings: "opsz" 11; }
/* Japanese line breaking (as works.css / about.css): Chromium breaks at phrase boundaries (auto-phrase);
   Safari and Firefox keep keep-all and break only at spaces, after 、。 and at the <wbr> marks in the HTML.
   line-break: strict keeps ー and small kana off line starts; text-wrap avoids one-glyph last lines. */
:is(.home-hero__catch, .home-about, .home-gallery, .home-services, .home-ai) :is(p, h2, h3, li) {
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  line-break: strict;
  text-wrap-style: pretty; /* the longhand, so white-space: nowrap (numbers, chips) still holds */
}

/* 2. Hero (sticky stage; the shutter is its entrance, so no reveals here) */
/* Display size: the token (128 at 1440) unless the desktop crop's phone would reach "FLOW." and its glyph.
   With the 16:9 crop scaled to the hero height and pinned right, the phone's left edge sits at
   100vw - 59.7vh; the line plus glyph is 6.5em wide from 48px, so this cap keeps a 20px gap
   (1440x900: 128px as the token; 1280x800: 113px; 1024x768: 76px). */
.home-hero { --hero-fs: var(--fs-display); }
@media (min-width: 769px) and (min-aspect-ratio: 1251/1000) {
  .home-hero { --hero-fs: min(var(--fs-display), calc((100vw - 59.7vh - 68px) / 6.5)); }
}
.home-hero__slides { position: absolute; inset: 0; z-index: 0; }
.home-hero__slide {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden; /* clips the SP close-up scale */
  opacity: 0;
  transition: opacity var(--d-fade) ease;
}
/* Crop: the devices sit left of centre and their phones reach ~95% of the frame, so the desktop crop keeps
   the right edge (overlays on the right stay on studio background). Windows of 5:4 and narrower (SP,
   portrait, near-square desktop; same media as the <source>) get the 9:16 crop, where the devices float
   above the catch instead of running under "FLOW.". */
.home-hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.home-hero__slide.is-active { z-index: 2; opacity: 1; }
.home-hero__slide.is-prev { z-index: 1; opacity: 1; transition: none; }
/* Slides 2–3 stay display:none (so their lazy images do not compete with the LCP image)
   until home.js starts the slideshow; with Motion off they are never fetched. */
.home-hero:not(.is-playing) .home-hero__slide:not(.is-active) { display: none; }
/* Scrim (A10): no darkening layer over the photo. The studio grey stays as bright as the reference's
   (~165–185 luma away from the texts); only soft, edge-anchored shading sits behind each group of white
   text, like a lens vignette: header (top edge), mail/tel and counter (right edge), copyright (left edge),
   clock row (bottom-right corner) and one cloud behind the catch. Gaussian-like falloff (no visible rim).
   Each plateau covers its text box at --ink-44 (nav and mail/tel at --ink-nav). Measured behind every text
   box (text hidden, 95th percentile pixel) on all three slides at 390, 768, 820x1180, 1024x768, 1024x900,
   1280x800, 1280x1024, 1366x768, 1440, 1536x864 and 1920: 11–18px texts >= 4.5:1 (nav >= 5.2:1, and every
   single pixel behind nav and mail/tel >= 4.8:1), the display line >= 3:1 (re-measure if a slide changes). */
.home-hero__scrim {
  --ink-44: color-mix(in srgb, var(--c-ink) 44%, transparent);
  --ink-34: color-mix(in srgb, var(--c-ink) 34%, transparent);
  --ink-24: color-mix(in srgb, var(--c-ink) 24%, transparent);
  --ink-14: color-mix(in srgb, var(--c-ink) 14%, transparent);
  --ink-5: color-mix(in srgb, var(--c-ink) 5%, transparent);
  --ink-logo: color-mix(in srgb, var(--c-ink) 16%, transparent);
  /* nav and mail/tel patches run deeper: at 1024x768 and 1280x800 the tablet bezel on slide 2 lights up behind "Home" */
  --ink-nav: color-mix(in srgb, var(--c-ink) 52%, transparent);
  --fs: var(--hero-fs);
  --at-nav: ellipse 520px 190px at calc(100% - 215px) 0;
  --at-direct: ellipse 360px 120px at 100% 128px;
  --at-counter: ellipse 230px 210px at 100% 50%;
  --at-vcopy: ellipse 170px 300px at 0 50%;
  --at-meta: ellipse 560px 200px at 100% 100%;
  --at-catch: ellipse 1200px 330px at 190px calc(100% - 104px - var(--fs) / 2);
  --at-logo: ellipse 230px 100px at 100px 0;
  --band: transparent; /* SP only: bottom band behind the stacked catch */
  --band-end: 0px;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(var(--at-nav), var(--ink-nav) 58%, var(--ink-44) 62%, var(--ink-34) 67%, var(--ink-24) 73%, var(--ink-14) 81%, var(--ink-5) 90%, transparent),
    radial-gradient(var(--at-direct), var(--ink-nav) 58%, var(--ink-44) 62%, var(--ink-34) 67%, var(--ink-24) 73%, var(--ink-14) 81%, var(--ink-5) 90%, transparent),
    radial-gradient(var(--at-counter), var(--ink-44) 42%, var(--ink-34) 52%, var(--ink-24) 63%, var(--ink-14) 74%, var(--ink-5) 87%, transparent),
    radial-gradient(var(--at-vcopy), var(--ink-44) 46%, var(--ink-34) 56%, var(--ink-24) 65%, var(--ink-14) 76%, var(--ink-5) 88%, transparent),
    radial-gradient(var(--at-meta), var(--ink-44) 70%, var(--ink-34) 75%, var(--ink-24) 81%, var(--ink-14) 87%, var(--ink-5) 93%, transparent),
    radial-gradient(var(--at-catch), var(--ink-44) 32%, var(--ink-34) 46%, var(--ink-24) 58%, var(--ink-14) 71%, var(--ink-5) 86%, transparent),
    radial-gradient(var(--at-logo), var(--ink-logo) 45%, transparent),
    linear-gradient(to top, var(--band) 0, var(--band) calc(var(--band-end) * .68), transparent var(--band-end));
}
.home-hero__direct {
  position: absolute;
  top: 104px; /* 24px rows (target size): the first line's text sits where the reference's 110px block starts */
  right: 32px;
  z-index: 4;
  font-family: var(--ff-latin);
  font-size: var(--fs-micro);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--ls-label);
}
.home-hero__direct li { display: grid; grid-template-columns: 58px auto; align-items: center; gap: 8px; min-height: 24px; }
.home-hero__direct span { text-align: right; }
.home-hero__direct a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.home-hero__side { position: absolute; top: 50%; right: 32px; z-index: 4; transform: translateY(-50%); }
.home-hero__counter { min-width: 4.4em; }
.home-hero__note {
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
  color: var(--fg); /* white: #C2C2C2 fell under 4.5:1 on the lightest slide */
}
.home-hero .v-copy { color: var(--fg); } /* white on the left scrim (the reference's #C2C2C2 would fall to ~1.4:1 on these bright slides) */
.home-hero__catch { position: absolute; right: 0; bottom: 64px; left: 0; z-index: 4; padding: 0 32px 0 48px; }
.home-hero__display {
  position: relative;
  display: inline-block;
  margin-top: 10px;
  font-size: var(--hero-fs);
  white-space: nowrap;
}
.home-hero__display .glyph--l { position: absolute; top: 4px; right: -22px; }
/* The pre-line accent word stays white Bodoni italic here: mint needs a ground of <= ~#5E5E5E for 4.5:1,
   which on this bright studio grey would take a dark patch around one word. The mint glyph after FLOW.
   carries the accent in the hero (as the reference's star does). */
.home-hero__pre { width: fit-content; }
.home-hero__sub { margin-top: 10px; line-height: 1; }
/* the image note shares the clock row (inside the meta patch), so it never lands on a bright device screen */
.home-hero__meta { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-24); }
@media (max-width: 768px), (max-aspect-ratio: 5/4) {
  .home-hero__slide img { object-position: 50% 34%; }
}

/* 3. About (first block on the sheet) */
.home-sheet__sentinel { position: absolute; top: var(--r-sheet); left: 0; width: 1px; height: 1px; pointer-events: none; }
.home-about { padding-top: 7.5rem; }
.home-about__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-40);
  padding-bottom: 5rem;
  border-bottom: 1px solid var(--line);
}
/* 600 = Hiragino W6 / Yu Gothic Bold: the stroke of the reference's Noto Sans JP 500 (W5 reads too light at 32px) */
.home-about__catch { margin-top: var(--space-24); font-weight: 600; }
.home-about__en { margin-top: var(--space-24); }
.home-about__btn { flex: none; }

/* 4. Scope gallery: CSS marquee of photo cards, captions zig-zag above/below */
.home-gallery { padding-top: var(--space-24); }
.home-gallery__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.home-gallery__note, .home-ai__note { font-size: var(--fs-small); line-height: 1; color: var(--fg-mute); }
.home-gallery__track { margin-top: 5rem; }
.home-gallery__card { display: flex; flex-direction: column; gap: 20px; width: 560px; white-space: normal; }
.home-gallery__list:first-child > :nth-child(odd),
.home-gallery__list:last-child > :nth-child(even) { flex-direction: column-reverse; }
.home-gallery__img { width: 100%; height: auto; aspect-ratio: 1.618; object-fit: cover; border-radius: var(--r-media); }
.home-gallery__cap {
  font-family: var(--ff-latin);
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: var(--ls-ui);
  color: var(--fg-mute);
}
.home-gallery__cap span { display: block; }

/* 5. Selected works: banner marquee (left -> right) tucked under the list, band-split rows */
.home-works { padding-top: var(--space-200); }
/* Banner and ghost tracks hold the phrase 3x (wide screens never show a blank stretch); the reference holds it 2x.
   x1.5 on the token keeps the reference's speed (~42 px/s banner, ~39 px/s ghost at 1440) instead of running 1.5x faster. */
.home-works__banner { --mq-dur: calc(var(--mq-banner) * 1.5); }
.home-works__banner .rv-mask { padding-inline-end: .12em; margin-inline-end: -.12em; }
.home-works__list { margin-top: calc(var(--fs-banner) * -.16); } /* the rule cuts the banner just above its baseline (round overshoots tuck under) */
.home-work { border-bottom: 1px solid var(--line); }
.home-work__link {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: space-between;
  gap: var(--space-40);
  padding: 40px 120px 40px 50px;
  overflow: hidden;
  transition: color var(--d-instant);
}
.home-work__link::before,
.home-work__link::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: -2;
  height: calc(50% + 1px);
  background-color: var(--c-band);
  transform: scaleY(0);
  transition: transform var(--d-fast) var(--ease-band);
}
.home-work__link::before { top: 0; transform-origin: center bottom; }
.home-work__link::after { bottom: 0; transform-origin: center top; }
.home-work__ghost {
  --mq-dur: calc(var(--mq-row) * 1.5);
  position: absolute;
  top: 50%;
  left: 0;
  z-index: -1;
  width: 100%;
  color: var(--c-line-dark);
  opacity: 0;
  transform: translateY(-50%);
  transition: none; /* leaving: gone at once (the closing band must not uncover it); entering fades (below) */
  pointer-events: none;
}
.home-work__text { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-24); min-width: 0; }
.home-work__index { font-family: var(--ff-latin); font-size: var(--fs-kicker); font-weight: 300; line-height: 1; letter-spacing: var(--ls-ui); }
/* the heading carries the client and the site name on two lines (as on /works/), so a heading list reads "CSAC 公式サイト" */
.home-work__client { display: block; font-family: var(--ff-latin); font-size: var(--fs-small); line-height: 1; letter-spacing: var(--ls-ui); }
.home-work__name { display: block; margin-top: 8px; }
.home-work__role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 18px;
  font-family: var(--ff-latin);
  font-size: var(--fs-small);
  line-height: 1.2;
  letter-spacing: var(--ls-ui);
  color: var(--fg-mute);
  transition: color var(--d-instant);
}
.home-work__desc { margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--line); }
.home-work__thumb { flex: none; width: 30%; max-width: 320px; overflow: hidden; border-radius: var(--r-thumb); }
.home-work__thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; transition: transform var(--d-menu) var(--ease-expo); } /* 16:9 screenshot composites (work-<slug>-*.webp) */
/* row text breaks at phrase boundaries (Chromium auto-phrase; keep-all + <wbr> marks elsewhere), as on /works/ */
.home-work__main :is(p, h3) { word-break: keep-all; word-break: auto-phrase; overflow-wrap: anywhere; line-break: strict; text-wrap-style: pretty; }
.home-work__link:focus-visible { outline-color: var(--c-accent-on-dark); outline-offset: -4px; color: var(--c-white); }
.home-work__link:focus-visible::before,
.home-work__link:focus-visible::after { transform: scaleY(1); }
.home-work__link:focus-visible .home-work__role { color: var(--c-line); }
.home-work__link:focus-visible .home-work__ghost { opacity: 1; transition: opacity var(--d-base); }
.home-work__link:focus-visible .glyph { background-color: var(--c-accent-on-dark); }
.home-work__link:focus-visible .home-work__thumb img { transform: scale(1.03); }
@media (hover: hover) and (pointer: fine) {
  .home-work__link:hover { color: var(--c-white); }
  .home-work__link:hover::before,
  .home-work__link:hover::after { transform: scaleY(1); }
  .home-work__link:hover .home-work__role { color: var(--c-line); }
  .home-work__link:hover .home-work__ghost { opacity: 1; transition: opacity var(--d-base); }
  .home-work__link:hover .glyph { background-color: var(--c-accent-on-dark); }
  .home-work__link:hover .home-work__thumb img { transform: scale(1.03); }
}
.home-works__more { margin-top: var(--space-80); }

/* 6. Services: heading, prev/next, horizontal rail bleeding to the right edge */
.home-services { padding: var(--space-200) 0 100px; overflow: hidden; }
.home-services__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); }
.home-services__title { font-weight: 600; }
.home-services__label { margin: 8px 0 0 58px; }
.home-rail__controls { display: flex; flex: none; gap: 12px; }
.home-rail__btn {
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-round);
  color: var(--fg);
  transition: background-color var(--d-fast), border-color var(--d-fast), color var(--d-fast);
}
.home-rail__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 20px;
  height: 20px;
  margin: auto;
  background-color: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transition: transform var(--d-fast) var(--ease-cubic), opacity var(--d-fast);
}
.home-rail__btn--prev::after { transform: scaleX(-1); }
/* disabled end: only the ring and the arrow fade, so the focus outline stays at full contrast */
.home-rail__btn[aria-disabled="true"] { border-color: color-mix(in srgb, var(--line) 50%, transparent); cursor: default; }
.home-rail__btn[aria-disabled="true"]::after { opacity: .35; }
.home-rail__btn:not([aria-disabled="true"]):focus-visible { border-color: var(--fg); background-color: var(--fg); color: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  .home-rail__btn:not([aria-disabled="true"]):hover { border-color: var(--fg); background-color: var(--fg); color: var(--bg); }
}
.home-rail {
  position: relative; /* containing block for the visually-hidden link suffixes, so they stay clipped */
  margin: 5rem calc(50% - 50vw) 0;
  padding: 0 0 100px calc(50vw - 50%);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: max(5vw, calc(50vw - var(--w-m) / 2)); /* = the left padding (% here would use the rail's own width) */
  scrollbar-width: none;
  cursor: grab;
}
.home-rail::-webkit-scrollbar { display: none; }
.home-rail:focus-visible { outline-offset: -2px; }
.home-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.home-rail__list { display: flex; gap: 100px; width: max-content; }
.home-svc {
  display: flex;
  flex: none;
  gap: 100px;
  width: 40vw;
  max-width: 580px;
  padding-right: 100px;
  border-right: 1px solid var(--line);
  scroll-snap-align: start;
}
.home-svc__num { flex: none; width: 64px; white-space: nowrap; }
.home-svc__inner { flex: 1 1 auto; min-width: 0; }
.home-svc__title > span { display: block; }
.home-svc__jp { margin-top: 14px; font-size: var(--fs-small); line-height: 1.2; letter-spacing: var(--ls-jp); }
/* Card scale follows the reference (12px body at line-height 1.65, 32px steps, ~306px card). A15 puts the
   floor for any Japanese text at 12px, so body and chips stay 12px at every width (the reference drops to
   11px on SP and 11px chips); the chips sit 1px tighter (33px tall, as the reference). The link sits right
   under the chips, so the card stays at ~320px. Full descriptions live on /service/. */
.home-svc__text { margin-top: 32px; font-size: var(--fs-en-sub); line-height: 1.65; }
.home-svc__chips { margin-top: 32px; }
.home-svc__chip { padding-block: 9.5px; font-size: var(--fs-en-sub); color: var(--fg); white-space: nowrap; } /* JP-safe chip (A15): 12px instead of the chip's 11/10; one line each */
.home-svc__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: var(--fs-en-sub);
  line-height: 1.6;
  letter-spacing: var(--ls-jp);
}
.home-svc__more::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transition: transform var(--d-fast) var(--ease-cubic);
}
.home-svc__more:focus-visible::after { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) {
  .home-svc__more:hover::after { transform: translateX(3px); }
}
.home-svc a, .home-svc img { -webkit-user-drag: none; }

/* 7. AI band (the reference's dark Media slot): label, step rows fading into ink */
.home-ai { padding: 128px 0 56px; }
/* label row with the AI-image note on the right, as in the gallery head */
.home-ai__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.home-ai__label { color: var(--fg-2); }
/* reference rhythm: band top -> label 128px (SP 100), label -> first row 70px (SP 69); no display line in between */
.home-ai__list { position: relative; display: flex; flex-direction: column; gap: 40px; margin-top: 56px; }
.home-ai__list::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 75%;
  background: linear-gradient(180deg, transparent, var(--c-ink));
  pointer-events: none;
}
.home-step { display: flex; align-items: flex-start; gap: 32px; }
.home-step__thumb { flex: none; width: 30%; max-width: 286px; }
.home-step__thumb img { width: 100%; height: auto; aspect-ratio: 286 / 150; object-fit: cover; border-radius: var(--r-thumb); }
.home-step__body { position: relative; z-index: 2; max-width: 580px; }
.home-step__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.home-step__en { font-family: var(--ff-latin); font-size: var(--fs-small); font-weight: 300; line-height: 1; color: var(--fg-mute); }
/* a light index, as the reference's media rows (16px/300 title 40px under the chip row): the JP title stays
   white at 400 (one step above the copy), the line under it is a 14/13px caption in the band's grey */
.home-step__title { margin-top: 40px; font-weight: 400; line-height: 1.4; }
.home-step__text { margin-top: 6px; font-size: var(--fs-label); font-weight: 300; line-height: 1.7; color: var(--fg-2); }
.home-ai__btn { margin-top: var(--space-80); }

/* 7b. Narrow desktop (769–1100px): the 64px number column + 100px gaps left a ~150px text column at 1024
   (9 characters a line), so the number moves above the title as on SP and the card widens. */
@media (min-width: 769px) and (max-width: 1100px) {
  .home-rail__list { gap: 64px; }
  .home-svc { flex-direction: column; gap: 32px; width: 44vw; padding-right: 64px; }
  .home-svc__num { width: auto; }
}

/* 8. SP (single breakpoint) */
@media (max-width: 768px) {
  .home-hero__catch { bottom: 48px; padding: 0 5vw; }
  .home-hero__display { margin-top: 8px; }
  .home-hero__line { display: block; } /* two lines on SP, as the reference's catch wraps at 56px */
  .home-hero__display .glyph--l { position: relative; top: .12em; right: auto; margin-left: .1em; vertical-align: top; } /* in flow after FLOW. (line 2), so the glyph always follows the accent word */
  .home-hero__meta { justify-content: space-between; margin-top: 16px; }
  .home-hero__side { position: static; transform: none; }
  .home-hero__counter { position: absolute; top: 88px; right: 5vw; z-index: 4; }
  /* the close crop fills both edges, so the decorative vertical copyright (aria-hidden, also in the footer)
     would sit on a device screen; the plan shows it only on wide screens anyway */
  .home-hero .v-copy { display: none; }
  /* Close-up crop of the 9:16 file, sized from the free band between the counter (120px) and the catch
     (bottom 290px of the 90svh stage): the device group (0.57 x the image width tall, its centre 0.64 x the
     image width below the image top) fills that band, up to 1.45x the plain cover crop (bleeding past both edges like the reference's
     close-up) and never narrower than the screen. 390x844: ~1.45x; 390x664 (iOS toolbars): plain cover.
     sizes="145vw" keeps it sharp. --stage-h mirrors the stage height in base.css (90vh, then 90svh). */
  .home-hero__slides { --stage-h: 90vh; --band-h: calc(var(--stage-h) - 410px); --img-w: max(100vw, min(145vw, var(--band-h) * 1.75)); }
  .home-hero__slide img {
    position: absolute;
    top: calc(120px + var(--band-h) / 2 - var(--img-w) * .64);
    left: 50%;
    width: var(--img-w);
    max-width: none;
    height: auto;
    aspect-ratio: 750 / 1333;
    transform: translateX(-50%);
  }
  @supports (height: 1svh) {
    .home-hero__slides { --stage-h: 90svh; }
  }
  .home-hero__scrim {
    --at-nav: ellipse 250px 240px at 100% 0;
    --at-direct: ellipse 1px 1px at -9px -9px;
    --at-counter: ellipse 1px 1px at -9px -9px;
    --at-vcopy: ellipse 1px 1px at -9px -9px;
    --at-meta: ellipse 1px 1px at -9px -9px;
    --at-catch: ellipse 1px 1px at -9px -9px;
    --at-logo: ellipse 130px 80px at 68px 0;
    --band: var(--ink-44);
    --band-end: calc(270px + var(--fs) * 2);
  }
  .home-about__inner { flex-direction: column; align-items: flex-start; }
  .home-gallery__card { gap: 14px; width: 280px; }
  .home-works__list { margin-top: calc(var(--fs-banner) * -.21); } /* at 72px the reference cuts ~3px above the baseline */
  .home-work__link { flex-direction: column-reverse; gap: 5vw; padding: 8vw 5vw; }
  .home-work__index { position: absolute; top: 8vw; left: 5vw; }
  .home-work__thumb { width: 65%; max-width: none; margin: 0 -2vw 0 auto; }
  .home-work__desc { flex-basis: 100%; margin: 4px 0 0; padding-left: 0; border-left: 0; }
  .home-services { padding-bottom: 80px; }
  .home-services__label { margin-left: 58px; }
  .home-rail { margin-top: 4rem; padding-bottom: 80px; }
  .home-rail__list { gap: 48px; }
  .home-svc { flex-direction: column; gap: 32px; width: 75vw; padding-right: 48px; }
  .home-svc__num { width: auto; }
  .home-ai { padding: 100px 0 40px; }
  .home-step { gap: 16px; }
  .home-step__thumb { width: 35%; }
  /* reference SP row: chip row, 16px, one 13px/1.4 title (~99px a row); here a 14px title over a 13px caption */
  .home-step__title { margin-top: 16px; font-size: .875rem; font-weight: 500; }
  .home-step__text { margin-top: 4px; line-height: 1.6; }
}

/* 9. Forced colours: keep mask glyphs visible */
@media (forced-colors: active) {
  .home-rail__btn::after, .home-svc__more::after { forced-color-adjust: none; background-color: CanvasText; }
}