/* ==========================================================================
   NEXUS — Homepage sheet (T1)

   Art direction: ON.energy — .design/candidates/DESIGN-ON-ENERGY.md, measured
   with Playwright at 1440 and 390. Its electric yellow is replaced throughout
   by the NEXUS brand blue; its two typefaces are replaced by the two this site
   already self-hosts. Nothing from KANEX, Superlative, FREITAG or NORNORM.

   Five things carry the whole language:
     1. Six colour roles, and no more. Ground, raised, muted, text, accent,
        invert. Every extra colour is a leak.
     2. Separation by SURFACE VALUE, not by borders. A card is visible because
        it is #171717 on #000000 — not because it has an outline. Hairlines are
        used for list rows and nothing else.
     3. Display type large and LIGHT. Weight 300 at up to 96px. Bolding a
        heading destroys the signature; there is no bold anywhere on this page.
     4. One mono label above each section, 12px, with a blue dot. It annotates;
        it never becomes a second heading.
     5. Exactly two interruptions in the black: one inverted light band that
        carries the drawing, and one accent band that closes the page. That
        scarcity is what gives either of them any force.

   This sheet loads last (base.njk `pageStyles`), so it refines the shared
   system rather than fighting it. Everything is scoped to `.page--dark`, which
   only the homepage sets, so no other page is affected until it is converted.
   ========================================================================== */

/* --- The page ground ----------------------------------------------------- */

.page--dark {
  background: var(--c-ground);
  color: var(--c-invert);
  --c-muted: var(--c-muted-on-ground);
}
/* The light band and the accent band flip the muted grey with the ground they
   sit on. Declaring it per band, rather than per element, is what stops a grey
   from being carried onto a surface it cannot pass AA against. */
.page--dark .band--invert { --c-muted: var(--c-muted-on-invert); }
.page--dark .band--accent { --c-muted: var(--c-ink); }

.page--dark h1, .page--dark h2, .page--dark h3 {
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-dark-display);
  line-height: var(--lh-dark-display);
  color: inherit;
}
.page--dark p { color: inherit; }
.page--dark .t-muted { color: var(--c-muted); }

/* --- The two type roles this page adds ------------------------------------ */

/* The mono label. One per section, above the heading, with a blue dot.
   The dot is the only place the accent appears at small size. */
.page--dark .eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0;
}
.page--dark .eyebrow::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--c-accent-on-dark);
}
.page--dark .band--invert .eyebrow::before { background: var(--c-blue); }
.page--dark .band--accent .eyebrow::before { background: var(--c-ink); }
/* The dot marks the top of a section. Repeated on every row, callout, step and
   caption it stops meaning anything and just speckles the page, so it is
   suppressed everywhere the label is an inline annotation. */
.page--dark .cat__list .eyebrow::before,
.page--dark .callout .eyebrow::before,
.page--dark .step .eyebrow::before,
.page--dark .evidence__caption .eyebrow::before,
.page--dark .connect__plate figcaption .eyebrow::before { display: none; }

/* Section headings. One class, one size, everywhere below the hero. */
.page--dark .t-statement {
  font-size: var(--fs-statement);
  max-width: 18ch;
  margin: var(--s-4) 0 0;
}

.page--dark .t-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--c-muted); }
/* The middle of the page ran at 15px against 64px headings, which read as a
   caption hanging off a poster. Body copy below the hero now runs at the site
   body size; 15px is kept only for genuine captions and metadata. */
.page--dark .t-body-sm { font-size: var(--fs-body); line-height: 1.6; }
.page--dark figcaption .t-body-sm,
.page--dark .evidence__caption .t-body-sm { font-size: var(--fs-body-sm); }
.page--dark .measure { max-width: 58ch; }

/* --- The shared shell, restyled for the dark ground -----------------------
   The header and footer markup is the site's own (header.njk / footer.njk) and
   is not duplicated here. Only its surface changes. */

/* The header floats over the hero photograph. Not sticky on this page: a
   sticky bar over a full-bleed photograph needs a permanent scrim to stay
   readable, and a permanent scrim over the machine is what the art direction
   forbids. It becomes solid the moment the page scrolls past the hero. */
.page--dark .site-header {
  position: absolute;
  inset-inline: 0;
  background: transparent;
  border-bottom: 0;
  /* The header band's own wash, so the nav clears AA over the brightest part
     of the photograph without the machine below it being touched. */
  background-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.78) 0,
    rgba(0, 0, 0, 0.42) 78px,
    rgba(0, 0, 0, 0) 172px);
}
.page--dark .site-header__inner { height: auto; padding-block: var(--s-5); }

/* The mark is transparent and already brand blue, so it stands on the page
   ground directly. No plate, no border, no shadow, no filter — the earlier
   revision put it on a white tile, which is a second brand mark drawn around
   the brand mark. Icon-only on mobile too, at a size that stays legible. */
.page--dark .site-logo {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.page--dark .site-logo img { width: auto; filter: none; }
.page--dark .site-logo__lockup { height: 74px; }
.page--dark .site-logo__mark { height: 40px; }

.page--dark .site-nav__link {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--c-invert);
  opacity: 0.82;
  transition: opacity var(--dur-base) var(--ease-expo-out);
}
.page--dark .site-nav__link:hover,
.page--dark .site-nav__link:focus-visible { opacity: 1; }
.page--dark .site-nav__link[aria-current="page"] {
  opacity: 1;
  border-bottom-color: var(--c-accent-on-dark);
}

.page--dark .site-header .btn--secondary {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: var(--c-ink);
  border-radius: var(--radius-dark-ui);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  letter-spacing: -0.01em;
  text-transform: none;
}
.page--dark .site-header .btn--secondary:hover { opacity: 0.88; }

.page--dark .nav-toggle { color: var(--c-invert); border-color: rgba(238, 238, 238, 0.42); }
.page--dark .mobile-nav { background: var(--c-ground); }
.page--dark .mobile-nav__logo { filter: none; background: none; padding: 0; height: 40px; width: auto; }
.page--dark .mobile-nav__list li + li { border-top-color: var(--c-line-dark); }
.page--dark .mobile-nav__link { color: var(--c-invert); }

/* The title block between main and the footer: on this page it is a hairline,
   not a band. */
.page--dark .title-block {
  background: var(--c-ground);
  border-top: 1px solid var(--c-line-dark);
  color: var(--c-muted);
}
.page--dark .sheet { display: none; }

.page--dark .site-footer { background: var(--c-ground); border-top: 1px solid var(--c-line-dark); }
/* The footer carries the same mark as the header, with the company name set as
   real text beside it. Same rule: nothing behind it. */
.page--dark .site-footer__logo {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  inline-size: fit-content;
  color: var(--c-invert);
}
.page--dark .site-footer__logo img { height: 44px; width: auto; filter: none; }
.page--dark .site-footer__wordmark { color: var(--c-invert); }
.page--dark .site-footer__heading {
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
}
.page--dark .site-footer__list a,
.page--dark .site-footer__contact,
.page--dark .site-footer__contact a { color: var(--c-invert); }
.page--dark .site-footer__descriptor { color: var(--c-muted); }
.page--dark .site-footer__bottom { border-top-color: var(--c-line-dark); }
.page--dark .site-footer__bottom,
.page--dark .site-footer__bottom a {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
}

/* --- Controls -------------------------------------------------------------
   One filled accent button per view, an outlined ghost beside it. No shadows:
   on this ground a shadow is invisible and a border is enough. */

.page--dark .btn {
  border-radius: var(--radius-dark-ui);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  letter-spacing: -0.01em;
  text-transform: none;
  min-width: 0;
  padding: 13px 20px;
  transition: opacity var(--dur-base) var(--ease-expo-out),
              border-color var(--dur-base) var(--ease-expo-out);
}
.page--dark .btn--accent { background: var(--c-blue); border-color: var(--c-blue); color: var(--c-ink); }
.page--dark .btn--accent:hover { opacity: 0.88; }
.page--dark .btn--ghost {
  background: transparent;
  border-color: rgba(238, 238, 238, 0.5);
  color: var(--c-invert);
}
.page--dark .btn--ghost:hover { border-color: var(--c-invert); }
.page--dark .btn--ink { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-invert); }
.page--dark .btn--ink:hover { opacity: 0.9; }

/* The arrow link. Used wherever a section hands off to a fuller page. */
.page--dark .link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  color: var(--c-invert);
  text-decoration: none;
  font-size: var(--fs-body-sm);
}
.page--dark .link-arrow__mark {
  color: var(--c-accent-on-dark);
  transition: transform var(--dur-base) var(--ease-expo-out);
}
.page--dark .link-arrow:hover .link-arrow__mark { transform: translateX(4px); }
.page--dark .band--invert .link-arrow { color: var(--c-ink); }
.page--dark .band--invert .link-arrow__mark { color: var(--c-blue); }

/* The in-preparation marker. Never a link: the page does not exist, and a link
   to nothing is worse than an honest label (SITE.md §3). */
.page--dark .tag {
  flex: 0 0 auto;
  font-family: var(--font-label);
  font-size: 0.625rem;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-accent-on-dark);
  border: 1px solid var(--c-accent-on-dark);
  border-radius: var(--radius-dark-ui);
  padding: 2px 7px;
}

/* --- Section rhythm ------------------------------------------------------- */

.page--dark .section--major { padding-block: var(--section-dark); }
.page--dark .section--band  { padding-block: var(--section-dark); }
.page--dark .section-foot { margin-top: var(--s-6); }

/* The two interruptions. Both are full-bleed with a soft top and bottom edge,
   which is how the reference separates a band from the ground without a rule. */
.page--dark .band--invert {
  background: var(--c-invert);
  color: var(--c-ink);
  border-radius: var(--radius-dark-section);
}
.page--dark .band--invert h2 { color: var(--c-ink); }
.page--dark .band--accent {
  background: var(--c-blue);
  color: var(--c-ink);
  border-radius: var(--radius-dark-section);
}
.page--dark .band--accent h2,
.page--dark .band--accent p,
.page--dark .band--accent .eyebrow { color: var(--c-ink); }

/* ==========================================================================
   01 · Hero
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-block-size: min(100svh, 880px);
  overflow: hidden;
  background: var(--c-ground);
}
.hero__photo {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
/* Three directional washes, not one veil. The header band, a column behind the
   statement, and a floor under the type. The top half of the frame is never
   darkened, so the machine keeps its own light — the reference photographs its
   hardware in a studio on black; this is a real factory and must not be
   crushed to imitate that (DESIGN-ON-ENERGY.md, flagged constraint). */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.78) 0, rgba(0,0,0,0.42) 78px, rgba(0,0,0,0) 172px),
    linear-gradient(to right,  rgba(0,0,0,0.52) 0, rgba(0,0,0,0.30) 46%,  rgba(0,0,0,0) 68%),
    linear-gradient(to top,    rgba(0,0,0,0.88) 0, rgba(0,0,0,0.66) 22%,
                               rgba(0,0,0,0.30) 44%, rgba(0,0,0,0) 66%);
}
/* The top padding is the header's height plus its gutter, so the statement can
   never ride up under the logo however long the copy becomes. */
.hero__inner {
  position: relative;
  z-index: 2;
  inline-size: 100%;
  padding-block: clamp(130px, 14vw, 175px) clamp(40px, 5vw, 72px);
  display: grid;
  gap: var(--s-6);
}
.hero__inner > * { min-width: 0; }
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) 330px; align-items: end; }
}

.hero__title {
  margin: 0;
  font-size: var(--fs-hero-dark);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-dark-display);
  line-height: 1.05;
  max-width: 15ch;
}
.hero__line { display: block; }
.hero__support {
  margin: var(--s-5) 0 0;
  max-width: 54ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: #D8D8D8;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-6) 0 0; }

/* ==========================================================================
   02 · Facts strip
   ========================================================================== */

.facts { padding-block: clamp(56px, 5vw, 88px); border-bottom: 1px solid var(--c-line-dark); }
.facts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); margin: 0; }
/* Three columns, because the strip carries three facts. It was four until the
   "Standard drive — SEW motor" cell was withheld (27 Sep 2026); a fourth column
   with nothing in it left the strip visibly left-weighted. If a fourth
   confirmed fact is ever restored, put this back to repeat(4, …). */
@media (min-width: 900px) { .facts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.facts__cell dt { margin-bottom: var(--s-3); }
.facts__value {
  margin: 0;
  font-size: clamp(1.3125rem, 0.95rem + 1.5vw, 1.75rem);
  font-weight: var(--fw-light);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

/* ==========================================================================
   03 · Positioning
   ========================================================================== */

.statement-section__grid { display: grid; gap: var(--s-7); margin-top: var(--s-7); align-items: start; }
.statement-section__grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .statement-section__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--s-10); }
}
.statement-section__body > p + p { margin-top: var(--s-5); }
.statement-section__body > p:last-child { margin-top: var(--s-6); }

.fact-rows { margin: 0; }
.fact-row { padding-block: var(--s-5); border-top: 1px solid var(--c-line-dark); }
.fact-row dd { margin: var(--s-3) 0 0; font-size: var(--fs-body); line-height: 1.55; }

/* ==========================================================================
   03 · Product range — one browser, three categories

   Replaces a collage of three differently sized cards. One large photograph
   holds its position while the category changes underneath it, so the section
   has a single frame instead of three competing ones.

   Custom Conveyor Solutions sits below on its own and is never a tab: it is
   not one of the three categories and must not read as one.
   ========================================================================== */

.range__head { margin-bottom: var(--s-7); }
.range__head .t-lead { margin-top: var(--s-5); }

.range__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--c-line-dark);
  padding-bottom: var(--s-4);
}
.range__tab {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-dark-ui);
  padding: 10px 18px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  letter-spacing: -0.01em;
  color: var(--c-muted);
  transition: color var(--dur-base) var(--ease-expo-out),
              background-color var(--dur-base) var(--ease-expo-out);
}
.range__tab:hover { color: var(--c-invert); }
/* The selected tab is the one place a filled surface is used as state. It is
   the raised value, not the accent: the accent is spent on the closing band. */
.range__tab[aria-selected="true"] {
  background: var(--c-raised);
  color: var(--c-invert);
}
.range__tab:focus-visible { outline: 2px solid var(--c-accent-on-dark); outline-offset: 2px; }

/* The stage. Photograph left, products right; the photograph is the larger
   half, which is the whole point of replacing the card collage. */
.cat { display: grid; gap: var(--s-6); }
/* An author display value beats the user-agent [hidden] rule, so a panel the
   script hides would still be drawn. This one line is what makes the switch a
   switch rather than three panels stacked on top of each other. */
.cat[hidden] { display: none; }
.cat > * { min-width: 0; }
@media (min-width: 900px) {
  .cat { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--s-8); align-items: start; }
}

.cat__frame {
  margin: 0;
  border-radius: var(--radius-dark-card);
  overflow: hidden;
  background: var(--c-raised);
}
.cat__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.cat--cover .cat__frame { aspect-ratio: 4 / 3; }

/* Curve and Miniature are contained on a light stage so both ends of the
   machine stay in frame. `cover` would cut a curve's ends off — barred on
   purpose, and declared per category in content/pages/home.yaml rather than
   assumed for every photograph. */
.cat--contain .cat__frame {
  aspect-ratio: 4 / 3;
  background: var(--c-invert);
  display: grid;
  place-items: center;
  padding: var(--s-6);
}
.cat--contain .cat__frame img {
  object-fit: contain;
  inline-size: auto;
  block-size: auto;
  max-inline-size: 100%;
  max-block-size: 100%;
}

.cat__panel { display: grid; gap: var(--s-4); align-content: start; }
.cat__name { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.125rem); letter-spacing: -0.03em; }
.cat__name a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-3);
  color: var(--c-invert);
  text-decoration: none;
}
.cat__name a::after {
  content: "\2192";
  font-size: 0.6em;
  color: var(--c-accent-on-dark);
  transition: transform var(--dur-reveal) var(--ease-expo-out);
}
.cat__name a:hover::after { transform: translateX(5px); }

/* Body copy in the middle of the page runs at the full body size, not the
   small one. At 15px against a 64px heading the page read as a caption
   hanging off a poster; 17px is the size the rest of the site sets. */
.cat__use { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--c-muted); }
.cat__note {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  background: var(--c-raised);
  border-radius: var(--radius-dark-ui);
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--c-muted);
}

.cat__list { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.cat__list li { border-top: 1px solid var(--c-line-dark); }
.cat__list li:last-child { border-bottom: 1px solid var(--c-line-dark); }
.cat__list a,
.cat__pending {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
  text-decoration: none;
  color: var(--c-invert);
  transition: opacity var(--dur-base) var(--ease-expo-out);
}
.cat__list a:hover { opacity: 0.72; }
.cat__product { font-size: var(--fs-body); }
.cat__pending .cat__product { color: var(--c-muted); }
.cat__duty { flex: 0 0 auto; color: var(--c-muted); }

/* Custom Conveyor Solutions — its own entry, full width, below the browser. */
.custom {
  margin-top: var(--s-4);
  background: var(--c-raised);
  border-radius: var(--radius-dark-card);
  overflow: hidden;
  transition: background-color var(--dur-reveal) var(--ease-expo-out);
}
.custom:hover { background: var(--c-raised2); }
.custom__frame { margin: 0; }
.custom__frame img { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.custom__body { padding: var(--s-6); display: grid; gap: var(--s-4); align-content: center; }
.custom__body .cat__use { max-width: 60ch; }
@media (min-width: 768px) {
  .custom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .custom__frame img { aspect-ratio: auto; block-size: 100%; }
  .custom__body { padding: var(--s-9); }
}

/* ==========================================================================
   04 · Evidence strip
   ========================================================================== */

.evidence { margin: 0; }
.evidence img { inline-size: 100%; block-size: auto; display: block; }
.evidence__caption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  padding-block: var(--s-5);
  color: var(--c-muted);
}

/* ==========================================================================
   07 · Integration — the one inverted band, and the page's peak
   ========================================================================== */

.connect__grid { display: grid; gap: var(--s-8); align-items: center; }
.connect__grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .connect__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); column-gap: clamp(48px, 5vw, 88px); }
}
.connect__text > p { margin-top: var(--s-5); max-width: 54ch; }
.connect__text > p:last-child { margin-top: var(--s-7); }
.connect .t-lead { color: #4A4A4A; }

.callouts { margin: var(--s-7) 0 0; max-width: 52ch; }
.callout { display: flex; gap: var(--s-5); padding-block: var(--s-3); border-top: 1px solid #D6D6D6; }
.callout__key { min-inline-size: 64px; flex: 0 0 auto; padding-top: 3px; }
.callout__line { margin: 0; font-size: var(--fs-body-sm); line-height: 1.5; }

.connect__plate { margin: 0; }
.connect__sheet {
  background: var(--c-surface);
  border-radius: 16px;
  padding: clamp(24px, 3vw, 44px);
}
.connect__sheet img { margin-inline: auto; max-block-size: 520px; inline-size: auto; block-size: auto; max-inline-size: 100%; }
.connect__plate figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
  color: var(--c-muted);
}

.connect__lower { display: grid; gap: var(--s-7); margin-top: clamp(40px, 4vw, 64px); }
.connect__lower > * { min-width: 0; }
@media (min-width: 768px) { .connect__lower { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-9); } }
.stack-rows { margin: var(--s-5) 0 0; }
.stack-row { padding-block: var(--s-4); border-top: 1px solid #D6D6D6; }
.stack-row dt { font-size: var(--fs-body); }
.stack-row dd { margin: var(--s-2) 0 0; color: var(--c-muted-on-invert); }

/* ==========================================================================
   08 · How it gets specified
   ========================================================================== */

.approach__grid { display: grid; gap: var(--s-7); align-items: start; }
.approach__grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .approach__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); column-gap: var(--s-10); }
}
.steps { list-style: none; margin: var(--s-7) 0 0; padding: 0; }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-5); border-top: 1px solid var(--c-line-dark); }
.step__number { color: var(--c-muted); padding-top: 5px; }
.step__text { display: grid; gap: var(--s-2); }
.step__heading { font-size: var(--fs-h3); font-weight: var(--fw-light); letter-spacing: -0.02em; }
.approach__head > p:last-child { margin-top: var(--s-7); }
.approach__figure { margin: 0; background: transparent; }
.approach__figure img { inline-size: 100%; block-size: auto; border-radius: var(--radius-dark-card); }
.approach__figure figcaption {
  margin-top: var(--s-4);
  padding: 0;
  background: transparent;
  color: var(--c-muted);
  font-size: var(--fs-caption);
}

/* ==========================================================================
   09 · In service
   ========================================================================== */

.service__head .t-lead { margin-top: var(--s-5); }
.service-list {
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr);
}
.service-list > * { min-width: 0; }
@media (min-width: 820px) { .service-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wcard {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  background: var(--c-raised);
  border-radius: var(--radius-dark-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-reveal) var(--ease-expo-out);
}
.wcard:hover { background: var(--c-raised2); }
.wcard__frame { display: block; }
.wcard__frame img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.wcard__body { padding: var(--s-6); display: grid; gap: var(--s-3); }
.wcard__title { font-size: var(--fs-h3); font-weight: var(--fw-light); letter-spacing: -0.02em; line-height: 1.25; }
.wcard__line { color: var(--c-muted); }

/* ==========================================================================
   10 · Close — the accent band
   ========================================================================== */

.closing__heading { max-width: 16ch; }
.closing__body { margin-top: var(--s-6); max-width: 56ch; color: var(--c-ink); }
.closing__action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-top: var(--s-6); }
.closing__aside { color: var(--c-ink); }

/* ==========================================================================
   Mobile
   Below 768px the hero stops being full-bleed and stacks: photograph, then
   words on the black ground. A full-bleed photograph at 390px can only be made
   readable by drowning it, and drowning the machine is exactly what this art
   direction forbids — so the composition changes rather than the photograph.
   ========================================================================== */

@media (max-width: 767px) {
  .page--dark .site-header { position: static; background-image: none; background: var(--c-ground); }
  .hero { display: block; min-block-size: 0; }
  .hero__photo { position: static; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-position: 52% 42%; }
  .hero::after { display: none; }
  .hero__inner { padding-block: var(--s-7) var(--s-2); }
  .custom__body { padding: var(--s-6); }
  .cat__duty { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page--dark *, .page--dark *::before, .page--dark *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}