/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE SECTIONS
   Expressive, composition-led sections for the homepage — distinct from the
   utility library in sections.css, which is built for repeatable page blocks.
   These are the ones that carry the visual argument.

   Creative direction:
     · Warm cream inversions punctuating the dark forest rhythm, so the page
       breathes rather than running one tone top to bottom.
     · Oversized numerals and type used as graphic elements, not just labels.
     · Asymmetric, deliberately off-centre grids — the composition leans.
     · White accents used sparingly to keep the hierarchy clean.
     · Motion that responds to scroll position rather than decorating.

   Namespaced .hx-* — no collision with .sx-* or the existing page styles.
   Built on the same tokens; nothing here hardcodes a colour or a magic number.
   ═══════════════════════════════════════════════════════════════════════════ */

.hx {
  position: relative;
  z-index: 2;
  padding-block: var(--section-y);
  padding-inline: var(--gutter);
  background: var(--forest-deep);
  color: var(--text);
}
/* Near-black band on a light-green page: type stays bone, and the green
   tint token flips back to its pale form so it reads on the dark. */
.hx--deep  { background: var(--forest-deepest); color: var(--ink); --green-text: var(--deep);
             --sys-accent-soft: var(--deep); }
.hx--deep .sx__lede, .hx--deep .hx__lede { color: rgba(38, 80, 60, 0.82); }
/* A page's opening .hx sits under the fixed, transparent header. --section-y
   alone (56px on phones) put the eyebrow underneath the logo. 136px clears
   the logo at every width (it ends at 88px). */
.hx--page  { padding-top: max(var(--section-y), 136px); }
.hx--cream { background: var(--cream); color: var(--ink); }
.hx__inner { width: 100%; max-width: 1440px; margin-inline: auto; }

/* Shared eyebrow, sitting above a hairline for an editorial feel */
.hx__eyebrow {
  display: flex; align-items: center; gap: var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-8);
  color: var(--white);
  text-transform: uppercase;
}
.hx--cream .hx__eyebrow { color: var(--orange-deep); border-bottom-color: rgba(212, 98, 44, 0.45); border-bottom-color: color-mix(in srgb, var(--burnt-orange) 45%, transparent); }
.hx--deep .hx__eyebrow, .hx--deep .sx__eyebrow { color: var(--ink); border-bottom-color: rgba(71, 156, 115, 0.22); }
.hx__eyebrow::after { content: ''; flex: 1 1 auto; }

/* ───────────────────────────────────────────────────────────────────────────
   1. MANIFEST — an editorial index. Oversized muted numerals sit in the left
   margin; the row leans right on hover and the numeral takes the accent.
   ─────────────────────────────────────────────────────────────────────────── */
.hx-manifest__list { list-style: none; margin: 0; padding: 0; counter-reset: hx-m; }
.hx-manifest__row {
  counter-increment: hx-m;
  display: grid;
  grid-template-columns: minmax(84px, 12%) minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--space-5) var(--space-7);
  align-items: start;
  padding: var(--space-7) 0;
  transition: padding-left var(--dur-slow) var(--ease-out-expo);
}
.hx-manifest__row:hover { padding-left: var(--space-5); }
.hx-manifest__row::before {
  content: counter(hx-m, decimal-leading-zero);
  grid-column: 1;
  color: var(--text-subtle);
  font-family: 'Helvetica Now Display', arial, sans-serif;
  font-weight: 700;
  font-size: var(--type-disp-lg);
  line-height: 0.85;
  letter-spacing: var(--track-display);
  transition: color var(--dur-slow) var(--ease-out-quart);
}
.hx-manifest__row:hover::before { color: var(--white); }
.hx-manifest__title { grid-column: 2; }
.hx-manifest__body  { grid-column: 3; color: var(--text-muted); max-width: var(--measure); }
@media (max-width: 860px) {
  .hx-manifest__row { grid-template-columns: 1fr; gap: var(--space-4); }
  .hx-manifest__row::before,
  .hx-manifest__title,
  .hx-manifest__body { grid-column: 1; }
}

/* ───────────────────────────────────────────────────────────────────────────
   2. MARQUEE — an edge-to-edge statement band in oversized type. Two identical
   runs slide as one so the loop is seamless; the copy is duplicated for the
   effect only, so the clone is hidden from assistive tech.
   ─────────────────────────────────────────────────────────────────────────── */
.hx-marquee { padding-inline: 0; overflow: hidden; padding-block: var(--space-8); }
.hx-marquee__track { display: flex; width: max-content; will-change: transform; animation: hx-slide 38s linear infinite; }
.hx-marquee__run { display: flex; align-items: center; flex: none; }
.hx-marquee__run > span { display: inline-flex; align-items: center; gap: var(--space-8); padding-right: var(--space-8); white-space: nowrap; }
.hx-marquee__dot { width: 12px; height: 12px; border-radius: var(--r-full); background: var(--orange); flex: none; }
.hx-marquee em { font-style: normal; color: var(--white); }
@keyframes hx-slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.hx-marquee:hover .hx-marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hx-marquee__track { animation: none; }
  .hx-marquee { overflow-x: auto; }
}

/* ───────────────────────────────────────────────────────────────────────────
   3. STACK — cards that pin and stack as the section scrolls past, each
   settling slightly behind the last. Pure CSS sticky; no scroll listener.
   ─────────────────────────────────────────────────────────────────────────── */
.hx-stack__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.hx-stack__card {
  position: sticky;
  /* each card pins a little lower than the one before it */
  top: calc(var(--space-9) + (var(--i, 0) * var(--space-5)));
  background: rgba(38, 80, 60, 1);
  background: color-mix(in srgb, var(--forest) 99%, transparent);
  border: 1px solid var(--line-2);
  border-radius: 0;
  padding: clamp(28px, 4vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: end;
}
.hx-stack__card:nth-child(even) { background: rgba(38, 80, 60, 0.97); background: color-mix(in srgb, var(--forest-lift) 97%, transparent); }
.hx-stack__index { color: var(--white); text-transform: uppercase; margin-bottom: var(--space-5); display: block; }
.hx-stack__body { color: var(--text-muted); max-width: var(--measure); }
.hx-stack__meta { display: flex; flex-direction: column; gap: var(--space-3); }
.hx-stack__meta dt { color: var(--text-subtle); text-transform: uppercase; }
.hx-stack__meta dd { margin: 0 0 var(--space-4); }
@media (max-width: 860px) {
  .hx-stack__card { grid-template-columns: 1fr; position: static; }
}
@media (prefers-reduced-motion: reduce) { .hx-stack__card { position: static; } }

/* ───────────────────────────────────────────────────────────────────────────
   4. SHOWCASE — deliberately off-balance. The media block runs tall and wide
   on one side; a caption panel overlaps its corner rather than sitting under.
   ─────────────────────────────────────────────────────────────────────────── */
.hx-showcase__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-5); align-items: center; }
.hx-showcase__media {
  grid-column: 1 / span 8;
  aspect-ratio: 16 / 10;
  border-radius: 0;
  overflow: hidden;
  background: rgba(38, 80, 60, 0.85);
  background: color-mix(in srgb, var(--forest-lift) 85%, transparent);
  display: grid; place-content: center;
  color: var(--text-subtle);
}
.hx-showcase__media img { width: 100%; height: 100%; object-fit: cover; }
.hx-showcase__panel {
  grid-column: 7 / span 6;
  grid-row: 1;
  align-self: end;
  margin-bottom: calc(var(--space-9) * -1);
  background: var(--cream);
  color: var(--ink);
  border-radius: 0;
  padding: clamp(24px, 3vw, 44px);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.hx-showcase__panel p { color: rgba(71, 156, 115, 0.72); color: color-mix(in srgb, var(--ink) 72%, transparent); }
.hx-showcase__rule { width: 46px; height: 3px; background: var(--orange); border-radius: var(--r-full); }
.hx-showcase--flip .hx-showcase__media { grid-column: 5 / span 8; }
.hx-showcase--flip .hx-showcase__panel { grid-column: 1 / span 6; }
@media (max-width: 900px) {
  .hx-showcase__grid { grid-template-columns: 1fr; }
  .hx-showcase__media,
  .hx-showcase__panel,
  .hx-showcase--flip .hx-showcase__media,
  .hx-showcase--flip .hx-showcase__panel { grid-column: 1; grid-row: auto; margin-bottom: 0; }
}

/* ───────────────────────────────────────────────────────────────────────────
   5. METRICS — a cream band breaking the dark run. Numerals oversized, split
   by vertical rules rather than boxed into cards.
   ─────────────────────────────────────────────────────────────────────────── */
.hx-metrics__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.hx-metric { padding: var(--space-6) var(--space-8) var(--space-6) 0; }
.hx-metric:first-child { padding-left: 0; }
.hx-metric__value { display: block; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: var(--space-3); }
.hx-metric__value em { font-style: normal; color: var(--orange); }
.hx-metric__label { display: block; color: rgba(71, 156, 115, 0.62); color: color-mix(in srgb, var(--ink) 62%, transparent); text-transform: uppercase; }
@media (max-width: 720px) {
  .hx-metric { padding-inline: 0; }
}

/* ───────────────────────────────────────────────────────────────────────────
   6. CROP — an oversized wordmark that bleeds past both edges of the viewport,
   with the real content sitting over its lower half. Type as texture.
   ─────────────────────────────────────────────────────────────────────────── */
.hx-crop { overflow: hidden; padding-inline: 0; }
.hx-crop__word {
  display: block;
  white-space: nowrap;
  text-align: center;
  font-family: 'Helvetica Now Display', arial, sans-serif;
  font-weight: 700;
  font-size: clamp(90px, 21vw, 340px);
  line-height: 0.78;
  letter-spacing: var(--track-display-lg);
  color: rgba(38, 80, 60, 0.5);
  color: color-mix(in srgb, var(--forest-lift) 50%, transparent);
  user-select: none;
}
.hx-crop__word em { font-style: normal; color: rgba(71, 156, 115, 0.34); color: color-mix(in srgb, var(--orange) 34%, transparent); }
.hx-crop__content {
  position: relative;
  margin-top: clamp(-70px, -6vw, -28px);
  padding-inline: var(--gutter);
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
}
.hx-crop__content p { color: rgba(246, 245, 243, 0.7); color: color-mix(in srgb, var(--text) 70%, transparent); }

/* ───────────────────────────────────────────────────────────────────────────
   7. PULL — a single oversized statement on cream, with one white word doing
   all the emphasis. Deliberately almost empty.
   ─────────────────────────────────────────────────────────────────────────── */
.hx-pull__inner { max-width: 1100px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-7); }
.hx-pull__quote { color: var(--ink); letter-spacing: var(--track-display); }
.hx-pull__quote em {
  font-style: normal;
  color: var(--ink);
  box-shadow: inset 0 -0.14em 0 var(--accent);
}
.hx-pull__attr { display: flex; align-items: center; gap: var(--space-4); color: rgba(71, 156, 115, 0.66); color: color-mix(in srgb, var(--ink) 66%, transparent); text-transform: uppercase; }
.hx-pull__attr::before { content: ''; width: 42px; height: 1px; background: rgba(71, 156, 115, 0.35); flex: none; }

/* ───────────────────────────────────────────────────────────────────────────
   8. LEDGER — a two-column running list. Left column pins while the right
   column scrolls its entries past. Reads like an index, not a card grid.
   ─────────────────────────────────────────────────────────────────────────── */
.hx-ledger__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-9); align-items: start; }
.hx-ledger__aside { position: sticky; top: var(--space-9); display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.hx-ledger__list { list-style: none; margin: 0; padding: 0; }
.hx-ledger__item { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-5); padding: var(--space-6) 0; transition: color var(--dur-base) var(--ease-out-quart); }
.hx-ledger__item:hover { color: var(--white); }
.hx-ledger__year { color: var(--text-subtle); flex: none; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .hx-ledger__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .hx-ledger__aside { position: static; }
}

/* ── Selected work ─────────────────────────────────────────────────────────
   Every live client site is shown as a browser window carrying its real
   address, so "live, and in use" is visible rather than claimed. The
   featured project shows its screenshot (desktop, with the phone inset);
   the others have no mockups yet, so their window shows the name set large
   on a flat palette colour. Promote one to the feature slot once it has a
   screenshot in assets/images/laccino/work/. Everything is flat: no borders,
   no drop shadows. */
.hw {
  --hw-frame: #e9e6e1;                     /* browser chrome */
  --hw-url: #ffffff;
  --hw-dark: #10281e;                      /* small type on sand and sky */
}
.hw__feature {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

/* Browser chrome, shared by every card */
.hw__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 12px 0 16px;
  background: var(--hw-frame);
}
.hw__dots { display: inline-flex; gap: 6px; flex: none; }
.hw__dots i { display: block; width: 10px; height: 10px; border-radius: 50%; background: rgba(38, 80, 60, 0.22); }
.hw__url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--hw-url);
  color: var(--green-strong, #26503c);
  letter-spacing: 0.02em;
}
.hw__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  color: var(--green-strong, #26503c);
  letter-spacing: var(--track-mono);
}
.hw__live::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--leaf, #479c73);
  box-shadow: 0 0 0 0 rgba(71, 156, 115, 0.5);
  animation: hw-live 2.4s ease-out infinite;
}
@keyframes hw-live { 0% { box-shadow: 0 0 0 0 rgba(71, 156, 115, 0.5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(71, 156, 115, 0); } }

/* Featured project */
.hw__media {
  position: relative;
  display: block;
  border-radius: 0;
  overflow: hidden;
  background: var(--hw-frame);
  box-shadow: none;
}
.hw__frame { position: relative; display: block; overflow: hidden; }
.hw__shot { display: block; width: 100%; height: auto; transition: transform var(--dur-slower) var(--ease-out-expo); }
.hw__media:hover .hw__shot { transform: scale(1.02); }
.hw__inset {
  position: absolute; right: 3.5%; bottom: -2px;
  width: 17%; min-width: 92px;
  border-radius: 0;
  border: 5px solid var(--hw-frame);
  transition: transform var(--dur-slower) var(--ease-out-expo);
}
.hw__media:hover .hw__inset { transform: translateY(-6px); }
.hw__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.hw__kind { color: var(--accent); letter-spacing: var(--track-mono); }
.hw__name { color: var(--text); }
.hw__copy { color: var(--text-muted); max-width: 46ch; }
.hw__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hw__tags li { padding: 7px 12px; border-radius: 999px; background: rgba(246, 245, 243, 0.07); color: var(--text-muted); }

/* The other live sites: one clickable window each */
.hw__more {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
.hw__site { min-width: 0; }
.hw__site-link {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  background: var(--hw-frame);
  color: var(--hw-dark);
  text-decoration: none;
}
.hw__screen {
  --hw-screen: var(--sand, #e6d4be);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: clamp(170px, 15vw, 230px);
  padding: clamp(22px, 2.6vw, 36px);
  background: var(--hw-screen);
  overflow: hidden;
  transition: background-color var(--dur-base, 240ms) ease;
}
.hw__screen--image {
  display: block;
  min-height: 0;
  padding: 0;
  aspect-ratio: 16 / 9;
  background: #d9dcda;
}
.hw__site-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--dur-slower, 700ms) var(--ease-out-expo);
}
.hw__site--sky .hw__screen { --hw-screen: var(--sky, #7eaddb); }
.hw__screen-name {
  position: relative;
  max-width: 11ch;
  color: var(--green-strong, #26503c);    /* large bold: 7.4:1 on sand, 3.8:1 on sky */
  font-size: clamp(34px, 3.9vw, 60px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  transition: transform var(--dur-slower, 700ms) var(--ease-out-expo);
}
.hw__site--sky .hw__screen-name { color: var(--hw-dark); }   /* 6.5:1 */
.hw__site-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  padding: 16px 18px;
  background: var(--hw-frame);
}
.hw .hw__screen .hw__kind { color: var(--hw-dark); }   /* beats .sx--deep .hw__kind; 9:1 on sand, 6.5:1 on sky */
.hw__go { display: inline-flex; align-items: center; gap: 10px; color: var(--hw-dark); letter-spacing: var(--track-mono); white-space: nowrap; }
.hw__go .icon-arrow { transition: transform var(--dur-base, 240ms) var(--ease-out-expo); }
.hw__site-link:hover .hw__screen { background: color-mix(in srgb, var(--hw-screen) 86%, #26503c); }
.hw__site-link:hover .hw__site-shot { transform: scale(1.015); }
.hw__site-link:hover .hw__screen-name { transform: translateY(-6px); }
.hw__site-link:hover .hw__go .icon-arrow { transform: translateX(3px); }
.hw__site-link:focus-visible { outline: 3px solid var(--green-strong, #26503c); outline-offset: 4px; }
.hw__all { margin-top: var(--space-7); }
.hw__site-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hw__site-meta strong { color: var(--hw-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw__site-meta small { color: color-mix(in srgb, var(--hw-dark) 72%, transparent); letter-spacing: var(--track-mono); }
.hw__project-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 20px;
  background: var(--green-strong, #26503c);
  color: var(--white, #f6f5f3);
  text-decoration: none;
  transition: gap var(--dur-base, 240ms) ease, background-color var(--dur-base, 240ms) ease;
}
.hw__project-link:hover { gap: 18px; background: var(--leaf, #479c73); }
.hw__project-link:focus-visible { outline: 3px solid var(--sun, #f0c845); outline-offset: 4px; }

@media (max-width: 900px) {
  .hw__feature { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 700px) {
  .hw__more { grid-template-columns: 1fr; gap: var(--space-4); }
  .hw__bar { height: 38px; gap: 10px; padding: 0 10px 0 12px; }
  .hw__dots i { width: 8px; height: 8px; }
  .hw__screen { min-height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw__shot, .hw__media:hover .hw__shot, .hw__inset, .hw__media:hover .hw__inset,
  .hw__screen-name, .hw__site-link:hover .hw__screen-name { transition: none; transform: none; }
  .hw__live::before { animation: none; }
}

/* ── Work showcase (.hws) ──────────────────────────────────────────────────
   Base layout is a stacked list of cards: screenshot above, text below. From
   900px each project is a two-column row. main.js adds .is-pinned on tall,
   wide viewports without reduced motion; only then does the stage hold while
   the page scrolls, driven by --p (signed distance from the active project)
   and --a (its absolute value), which the script sets on every item. */
.hws {
  --hws-h: min(64vh, 560px);                 /* pinned stage height */
  --hws-step: 72vh;                          /* scroll distance per project */
  --hws-top: calc((100vh - var(--hws-h)) / 2);
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}
.hws__list { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; }
.hws__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  overflow: hidden;
  transition: border-color var(--duration-panel) var(--ease-system), box-shadow var(--duration-panel) var(--ease-system);
}
.hws__frame { display: block; min-width: 0; color: inherit; text-decoration: none; }
.hws__frame .hw__bar { border-bottom: 1px solid var(--border-subtle); }
.hws__frame .hw__url { background: var(--surface-input); color: var(--text-secondary); }
.hws__frame .hw__dots i { background: var(--border-control); }
/* The names opt out of the scroll reveal (the showcase owns their motion),
   and the reveal styles would otherwise leave an opted-out element hidden. */
.has-reveal .hws [data-reveal='none'] { opacity: 1; transform: none; }
.hws__shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-input); }
.hws__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hws__text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; padding: 22px 20px 24px; }
.hws__index { color: var(--mint); font-variant-numeric: tabular-nums; }
.hws__name { font-size: clamp(26px, 3vw, 40px); line-height: 1.08; color: var(--text-primary); max-width: 16ch; }
.hws__copy { color: var(--text-secondary); max-width: 44ch; }
.hws__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.hws__tags li { padding: 7px 10px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--accent-wash); color: var(--mint); }
.hws__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 4px;
  color: var(--mint);
  letter-spacing: var(--track-mono);
  text-decoration: none;
}
.hws__link .icon-arrow { transition: transform var(--duration-panel) var(--ease-system); }
@media (hover: hover) {
  .hws__item:hover { border-color: var(--leaf); box-shadow: var(--shadow-hover); }
  .hws__link:hover .icon-arrow { transform: translateX(3px); }
  .hws__link:hover span { text-decoration: underline; text-underline-offset: 4px; }
}

@media (min-width: 900px) {
  .hws__list { gap: var(--space-9, 72px); }
  .hws__item {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    column-gap: clamp(32px, 5vw, 80px);
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }
  .hws__text { grid-column: 1; grid-row: 1; gap: 18px; padding: 0; }
  .hws__frame {
    grid-column: 2;
    grid-row: 1;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    background: var(--surface-card);
    overflow: hidden;
    transition: border-color var(--duration-panel) var(--ease-system), box-shadow var(--duration-panel) var(--ease-system);
  }
}
@media (min-width: 900px) and (hover: hover) {
  .hws__item:hover { border-color: transparent; box-shadow: none; }
  .hws__frame:hover, .hws__item:focus-within .hws__frame { border-color: var(--leaf); box-shadow: var(--shadow-hover); }
}

/* Pinned mode. The wrapper is as tall as the scroll it should absorb and
   every project sits in the same place on the stage. */
.hws.is-pinned { height: calc(var(--hws-h) + (var(--hws-n) - 1) * var(--hws-step)); }
.hws.is-pinned .hws__stage { position: sticky; top: var(--hws-top); height: var(--hws-h); }
/* body { overflow-x: hidden } makes body a scroll container, which stops
   position: sticky holding anything on the page. clip trims the same
   horizontal overflow without doing that, so the stage is pinned by the
   browser and stays locked to the scroll. */
body[data-page='home'] { overflow-x: clip; }
.hws.is-pinned .hws__list { position: relative; display: block; height: 100%; }
.hws.is-pinned .hws__item { position: absolute; inset: 0; pointer-events: none; }
.hws.is-pinned .hws__item.is-active { pointer-events: auto; }
.hws.is-pinned .hws__text {
  transform: translate3d(0, calc(var(--p, 0) * var(--hws-h) * -0.5), 0);
  opacity: clamp(0, calc(1 - var(--a, 0) * 2), 1);
  will-change: transform, opacity;
}
/* Earlier projects sit on top and fade out to uncover the next one. */
.hws.is-pinned .hws__frame {
  opacity: clamp(0, calc(1.5 - var(--p, 0) * 2), 1);
  transform: scale(calc(1 + clamp(0, var(--p, 0), 1) * 0.03));
  will-change: transform, opacity;
}
.hws.is-pinned .hws__item:nth-child(1) { z-index: 4; }
.hws.is-pinned .hws__item:nth-child(2) { z-index: 3; }
.hws.is-pinned .hws__item:nth-child(3) { z-index: 2; }
.hws.is-pinned .hws__item:nth-child(4) { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .hws__item, .hws__frame, .hws__link .icon-arrow { transition: none; }
}

/* ── Quick contact ─────────────────────────────────────────────────────────
   Carries on from the "Have a problem worth solving?" board above it, on the
   same green, so the question and the form read as one ending. */
.hc { padding-top: var(--space-8); }
.hc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-9);
  align-items: start;
}
.hc__head { margin-bottom: 0; }
.hc__link { color: var(--text); text-decoration: none; }
.hc__link:hover { color: var(--white); }
.hc__form .form-status { margin-top: var(--space-4); min-height: 1em; }
@media (max-width: 900px) {
  .hc__grid { grid-template-columns: 1fr; gap: var(--space-7); }
}

/* Five process steps on one row at desktop, instead of four and a straggler. */
#process .sx-steps__list { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); }
/* Each step is a solid brand colour, in order: orange, green, yellow,
   purple, blue. Plain and fully opaque: no border, no shadow, no
   transparency. The sequence reads from the numbers and the order, so the
   connecting hairline goes. Every step sets its own ink so the small type
   passes AA on its colour (ratios for the body text are noted). */
#process .sx-step {
  --step-bg: var(--burnt-orange, #d4622c);
  --step-ink: #160a03;                                    /* 5.0:1 */
  padding: var(--space-6) var(--space-5) var(--space-7);
  border: 0;
  border-radius: 0;
  background: var(--step-bg);
  box-shadow: none;
  opacity: 1;
  color: var(--step-ink);
}
#process .sx-step:nth-child(2) { --step-bg: var(--green-strong, #26503c); --step-ink: var(--white, #f6f5f3); }   /* 8.9:1 */
#process .sx-step:nth-child(3) { --step-bg: var(--sun, #f0c845);          --step-ink: #26503c; }                  /* 5.7:1 */
#process .sx-step:nth-child(4) { --step-bg: var(--grant-purple, #9967ca); --step-ink: #120720; }                  /* 4.9:1 */
#process .sx-step:nth-child(5) { --step-bg: var(--sky, #7eaddb);          --step-ink: #10281e; }                  /* 6.5:1 */
#process .sx-step::before,
#process .sx-step .sx-step__title,
#process .sx-step .sx-step__body { color: var(--step-ink); opacity: 1; }
#process .sx-step::before { position: static; display: block; margin-bottom: var(--space-6); }
#process .sx-step::after { display: none; }
@media (max-width: 560px) {
  #process .sx-steps__list { grid-template-columns: 1fr; }
}

/* ── Fewer lines ───────────────────────────────────────────────────────────
   Sections, groups and controls are separated by space, surface and depth
   instead of rules and outlines. */

/* FAQ: each question is its own soft panel. */
#faq {
  background: var(--green-strong);
  color: var(--white);
  --green-text: var(--white);
}
#faq .sx__eyebrow,
#faq .sx__title,
#faq .link-arrow,
#faq .sx-faq__item summary,
#faq .sx-faq__chev { color: var(--green-strong, #26503c); }
#faq .sx__lede,
#faq .sx-faq__answer { color: rgba(16, 40, 30, 0.78); }
#faq .sx-faq__list { gap: var(--space-5); }
#faq .sx-faq__item {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-inline: 0;
  transition: none;
}
#faq .sx-faq__item:hover,
#faq .sx-faq__item[open] {
  background: transparent;
  border-color: transparent;
}

/* Quick contact: filled fields. The only line left is the input indicator
   under each field (the filled text-field pattern), which turns green and
   thickens on focus so the active field is never in doubt. */
.hc__form .field input,
.hc__form .field textarea {
  border: 0;
  border-radius: 0;
  background: var(--home-canvas, #e8e8e5);
  color: var(--green-strong, #26503c);
  opacity: 1;
  min-height: 58px;
  padding: 16px 18px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.hc__form .field input:hover,
.hc__form .field textarea:hover { background: #f0f0ed; }
.hc__form .field input:focus,
.hc__form .field textarea:focus {
  box-shadow: inset 0 0 0 3px var(--green-strong, #26503c);
  background: #f6f5f3;
}
.hc__form .field label {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-strong, #26503c);
}
.hc__form .field input::placeholder,
.hc__form .field textarea::placeholder { color: rgba(16, 40, 30, 0.62); }
.hc__form .field textarea { min-height: 150px; resize: vertical; }

.hc .sx__eyebrow,
.hc .sx__title,
.hc .sx__lede,
.hc .hc__link { color: var(--green-strong, #26503c); }
.hc .button-frame {
  --interactive-fill: var(--leaf);
  --interactive-text: var(--button-ink);
  --interactive-fill-hover: var(--green-strong, #26503c);
  --interactive-text-hover: var(--white, #f6f5f3);
}
.hc .button-frame .bg,
.hc .button-frame .hover { fill: var(--sun, #f0c845); }
.hc .button-frame .label-wrap span { color: var(--green-strong, #26503c); }
.hc .button-frame .icon-arrow path { fill: var(--green-strong, #26503c); }

/* ── FAQ: homepage pick ────────────────────────────────────────────────────
   Heading and the way through to the full page on the left, held in view
   while the questions scroll on the right. */
.hq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-9);
  align-items: start;
}
.hq__head { margin-bottom: 0; position: sticky; top: calc(var(--space-11) + var(--space-4)); }
.hq__grid .sx-faq__list { max-width: none; }
@media (max-width: 900px) {
  .hq__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .hq__head { position: static; }
}

/* ── FAQ page ──────────────────────────────────────────────────────────────
   Topic index and question groups use an editorial ruled layout. */
.fq { padding-top: calc(var(--section-y) + 90px); }
.fq .sx__head { margin-bottom: var(--space-7); }
.fq__nav { margin-bottom: var(--space-10); }
.fq__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fq__chip {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: 44px; padding: 10px 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}
.fq__chip:hover { background: transparent; color: var(--accent); }
.fq__count {
  display: inline-grid; place-content: center;
  min-width: auto; height: auto; padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--green-text);
  font-variant-numeric: tabular-nums;
}
.fq__groups { display: flex; flex-direction: column; gap: var(--space-10); }
.fq__group {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: var(--space-8);
  align-items: start;
  scroll-margin-top: var(--space-11);
}
.fq__group-title { font-size: clamp(28px, 2.8vw, 44px); color: var(--text); position: sticky; top: calc(var(--space-11) + var(--space-4)); }
.fq__group .sx-faq__list { max-width: none; }
.fq .sx-faq__item,
.hq__grid .sx-faq__item {
  border-radius: 0;
  border-top: 1px solid rgba(246, 245, 243, 0.28);
  background: transparent;
  padding-inline: 0;
  scroll-margin-top: var(--space-11);
  transition: background 0.24s ease;
}
.fq .sx-faq__item:hover,
.fq .sx-faq__item[open],
.fq .sx-faq__item:target { background: transparent; }
.fq__ask-inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.fq__ask-inner .sx__lede { max-width: 60ch; }
@media (max-width: 900px) {
  .fq__group { grid-template-columns: 1fr; gap: var(--space-5); }
  .fq__group-title { position: static; }
  .fq__nav { margin-bottom: var(--space-8); }
}

/* ── Lab: coming soon ──────────────────────────────────────────────────────
   Holds the full screen until the Lab opens (see the note in lab.html). */
.lab-soon { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; }
.lab-soon__inner { width: 100%; min-width: 0; }
.lab-soon .sx__head { min-width: 0; max-width: 100%; }
.lab-soon .sx__lede { max-width: min(var(--measure), 100%); overflow-wrap: break-word; }
.lab-soon__badge {
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(71, 156, 115, 0.18);
  color: var(--green-text);
  letter-spacing: var(--track-mono);
}


/* The selected-work cards were written light-on-dark. The band they sit in is
   the warm yellow now, so their type takes the deep green: 12.36:1 for the
   names and 9.6:1 for the supporting copy. */
.hx--deep .hw__name, .sx--deep .hw__name,
.hx--deep .hw__row-name, .sx--deep .hw__row-name,
.hx--deep .hw__kind, .sx--deep .hw__kind { color: var(--ink); }
.hx--deep .hw__copy, .sx--deep .hw__copy,
.hx--deep .hw__tags, .sx--deep .hw__tags,
.hx--deep .hw__tags li, .sx--deep .hw__tags li,
.hx--deep .hw__row-meta, .sx--deep .hw__row-meta { color: rgba(38, 80, 60, 0.82); }
.hx--deep .hw__row, .sx--deep .hw__row { border-color: rgba(71, 156, 115, 0.22); }

/* ── Homepage reference system ───────────────────────────────────────────
   The Haptikos study contributes rhythm, scale and restraint here, while the
   colour and component language remain unmistakably Laccino. */
body[data-page='home'] {
  --home-canvas: #e8e8e5;
  --home-ink: var(--green-strong);
  --home-dark: #10281e;
  --home-accent: var(--leaf);
  --home-space-1: 9px;
  --home-space-2: 18px;
  --home-space-3: 27px;
  --home-space-4: 36px;
  --home-space-5: 45px;
  --home-space-6: 54px;
  --home-space-7: 63px;
  --home-space-8: 72px;
  --home-space-10: 90px;
  --section-y: clamp(48px, 5vw, 72px);
  background: var(--home-canvas);
}
body[data-page='home'] .sx__inner,
body[data-page='home'] .hx__inner { max-width: 1440px; }
body[data-page='home'] .sx__head { gap: var(--home-space-2); margin-bottom: var(--home-space-6); }
body[data-page='home'] #process,
body[data-page='home'] #faq { background: var(--home-canvas); }
body[data-page='home'] #process .sx__eyebrow,
body[data-page='home'] #process .sx__title { color: var(--green-strong, #26503c); }
body[data-page='home'] .sx__title {
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
body[data-page='home'] .sx__lede,
body[data-page='home'] .hw__copy,
body[data-page='home'] .studio-reference .description { max-width: 70ch; }

/* ── Studio system: reference-inspired split introduction ──────────────── */
.studio-reference,
.studio-reference > .inner-wrap,
.studio-reference .info-section {
  background: var(--leaf, #479c73);
  color: var(--green-strong, #26503c);
  opacity: 1;
  transition: none;
  animation: none;
}
.studio-reference > .inner-wrap > .header {
  position: relative;
  z-index: 2;
  color: var(--green-strong, #26503c);
  letter-spacing: 0.035em;
}
.studio-reference .info-section {
  grid-template-columns: minmax(0, 0.88fr) minmax(460px, 1.12fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(48px, 7vw, 140px);
  row-gap: 32px;
  padding-top: clamp(34px, 5vh, 70px);
  padding-bottom: clamp(44px, 7vh, 90px);
}
.studio-reference .info-section .title {
  max-width: 760px;
  margin: 0;
  color: var(--green-strong, #26503c);
  font-size: clamp(62px, 6.2vw, 118px);
  line-height: 0.88;
  letter-spacing: -0.055em;
}
.studio-reference .info-section .image-wrap {
  grid-area: 1 / 2 / 3 / 3;
  width: 100%;
  height: min(76vh, 820px);
  aspect-ratio: auto;
  align-self: center;
  border-radius: 0;
}
.studio-reference .info-section .image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(71, 156, 115, 0.04);
}
.studio-reference .info-section .image-wrap img {
  border-radius: 0;
  filter: saturate(0.92) contrast(1.02) brightness(1.03);
}
.studio-reference .info-section .description {
  align-self: end;
  max-width: 780px;
  margin: 0;
  color: var(--green-strong, #26503c);
}
.studio-reference .info-section .description strong {
  margin-bottom: 14px;
  font-size: 1.06em;
}
.studio-reference .info-section .description p + p { margin-top: 18px; }

/* Pinned system scene. The composition follows the reference's choreography:
   oversized statements sit at opposing edges, a physical object occupies the
   centre, proof labels decode independently, and the index remains anchored. */
.studio-reference .system-stage {
  min-height: 100svh;
  max-height: none;
  padding: 0;
  background: #10281e;
}
.studio-reference .system-stage::after {
  z-index: 2;
  background:
    radial-gradient(circle at 52% 48%, rgba(71, 156, 115, 0.04), rgba(16, 40, 30, 0.36) 72%),
    linear-gradient(180deg, rgba(16, 40, 30, 0.08), rgba(16, 40, 30, 0.28));
}
.studio-reference .system-stage .board-backdrop {
  z-index: 0;
  opacity: 0.38;
  filter: grayscale(1) contrast(1.08) brightness(0.7);
}
.studio-reference .system-stage .system-ascii { z-index: 3; opacity: 0.13; }
.studio-reference .system-stage__copy {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 100%;
  margin: 0;
}
.studio-reference .system-stage__object {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(42vw, 760px);
  height: min(86vh, 940px);
  transform: translate(-50%, -48%);
  pointer-events: none;
  overflow: hidden;
  opacity: 0.74;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at 52% 48%, var(--white) 34%, rgba(246, 245, 243, 0.9) 54%, transparent 82%);
  mask-image: radial-gradient(ellipse at 52% 48%, var(--white) 34%, rgba(246, 245, 243, 0.9) 54%, transparent 82%);
}
.studio-reference .system-stage__object img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 48%;
  filter: grayscale(1) contrast(1.18) brightness(0.56);
}
.studio-reference .system-stage__word {
  position: absolute;
  z-index: 1;
  color: var(--green-strong);
  opacity: 0.3;
  pointer-events: none;
}
.studio-reference .system-stage__word .title {
  color: inherit;
  font-size: clamp(76px, 7.25vw, 148px);
  line-height: 0.82;
  letter-spacing: -0.065em;
  white-space: nowrap;
}
.studio-reference .system-stage__word--where { top: clamp(136px, 15vh, 174px); left: 1.2%; }
.studio-reference .system-stage__word--becomes { top: 39%; right: 1.8%; }
.studio-reference .system-stage__word--systems { left: 1.2%; bottom: 7.5%; }
.studio-reference .system-stage__proof {
  position: absolute;
  z-index: 5;
  width: min(28vw, 430px);
  margin: 0;
  color: #79ff62;
  font-family: 'Suisse Int\'l Mono', monospace;
  font-size: clamp(12px, 0.94vw, 17px);
  line-height: 1.03;
  letter-spacing: 0;
  text-align: left;
  opacity: 0;
}
.studio-reference .system-stage__proof::before { background: currentColor; }
.studio-reference .system-stage__proof--scope { top: clamp(172px, 19vh, 218px); right: 14%; }
.studio-reference .system-stage__proof--build { top: 45%; left: 20%; }
.studio-reference .system-stage__proof--support { right: 18%; bottom: 23%; }
.studio-reference .system-stage__index {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 3%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.4vw, 44px);
  width: min(720px, calc(100vw - 40px));
  min-height: 66px;
  padding: 18px 28px;
  transform: translateX(-50%);
  border-radius: 0;
  background: rgba(230, 228, 222, 0.68);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.studio-reference .system-stage__index a {
  color: var(--green-strong);
  font-family: 'Suisse Int\'l Mono', monospace;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}
.studio-reference .system-stage__index a:first-child { text-decoration: none; }
.studio-reference .system-stage__index a:focus-visible {
  outline: 2px solid var(--green-strong);
  outline-offset: 5px;
}
body.system-stage-active .floating-scroll-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 20px);
}

/* ── In action: native horizontal rail, no carousel dependency ─────────── */
.action-proof { overflow: hidden; }
.action-proof__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(72vw, 1040px);
  gap: clamp(16px, 2.4vw, 36px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;           /* no visible bar: swipe, trackpad, arrow keys or drag */
  padding: 0 var(--gutter) clamp(36px, 6vw, 84px);
}
.action-proof__rail::-webkit-scrollbar { display: none; }
.action-proof__rail.is-grabbable { cursor: grab; }
.action-proof__rail.is-grabbing { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.action-proof__rail.is-grabbing img { pointer-events: none; }
.action-proof__rail:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; }
.action-proof .sx__eyebrow,
.action-proof__item figcaption,
.action-proof__item figcaption span { color: var(--green-strong); }
.action-proof__item { scroll-snap-align: start; margin: 0; }
.action-proof__item img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}
.action-proof__item figcaption { display: flex; justify-content: space-between; gap: 24px; margin-top: 14px; }

/* Placeholder reviews are intentionally obvious and cannot be mistaken for
   approved client endorsements. */
.sx-quotes__grid[data-placeholder='true'] .sx-quote { opacity: 0.72; }
.sx-quotes__grid[data-placeholder='true'] .sx-quote__avatar { display: none; }

@media (max-width: 760px) {
  body[data-page='home'] {
    --section-y: var(--home-space-6);
  }
  body[data-page='home'] .sx__head { margin-bottom: var(--home-space-5); }
  .floating-scroll-menu { display: none; }
  .studio-reference .info-section {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 30px;
    padding: 38px 20px 64px;
  }
  .studio-reference .info-section .title {
    font-size: clamp(46px, 14vw, 68px);
    line-height: 0.9;
  }
  .studio-reference .info-section .image-wrap {
    grid-area: auto;
    width: 100%;
    height: min(68vh, 560px);
    margin: 0;
  }
  .studio-reference .info-section .description { font-size: 18px; line-height: 1.42; }
  .studio-reference .system-stage { min-height: 760px; height: 100svh; }
  .studio-reference .system-stage__word .title { font-size: clamp(48px, 14vw, 76px); line-height: 0.86; }
  .studio-reference .system-stage__word--where { top: 17%; left: 16px; }
  .studio-reference .system-stage__word--becomes { top: 39%; right: 16px; }
  .studio-reference .system-stage__word--systems { left: 16px; bottom: 18%; }
  .studio-reference .system-stage__object { width: min(86vw, 520px); height: 68vh; opacity: 0.7; }
  .studio-reference .system-stage__proof { width: 44vw; font-size: 10px; }
  .studio-reference .system-stage__proof--scope { top: 26%; right: 14px; }
  .studio-reference .system-stage__proof--build { top: 50%; left: 14px; }
  .studio-reference .system-stage__proof--support { right: 14px; bottom: 29%; }
  .studio-reference .system-stage__index {
    bottom: 3%;
    justify-content: flex-start;
    gap: 24px;
    width: calc(100% - 28px);
    min-height: 56px;
    padding: 16px 18px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .studio-reference .system-stage__index::-webkit-scrollbar { display: none; }
  .action-proof__rail { grid-auto-columns: 88vw; }
  .action-proof__item figcaption { flex-direction: column; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-reference .system-stage__proof { opacity: 1; }
}

/* Compact phone layout: retain breathing room without viewport-height panels. */
@media (max-width: 767px) {
  body[data-page='home'] { --section-y: 40px; }
  body[data-page='home'] .hero { height: auto; min-height: 0; }
  body[data-page='home'] .hero .inner-wrap,
  body[data-page='home'] .hero .top-wrap { height: auto; }
  body[data-page='home'] .hero .text-list {
    min-height: 0;
    padding: 120px 24px 28px;
    gap: 22px;
    align-content: start;
  }
  body[data-page='home'] .hero .text-list li { padding: 0 0 0 16px; }
  body[data-page='home'] .hero .text-list .js-scramble-text { line-height: 1.4; }
  body[data-page='home'] .hero .bullet-green::before { top: 6px; }
  body[data-page='home'] .hero .video-thumb { width: min(280px, calc(100vw - 48px)); height: auto; aspect-ratio: 333 / 176; }
  body[data-page='home'] .hero .bottom-wrap { padding: 0 0 28px; background-image: none; }
  body[data-page='home'] .studio-reference .info-section { gap: 24px; padding: 28px 20px 40px; }
  body[data-page='home'] .studio-reference .info-section .image-wrap { height: auto; aspect-ratio: 4 / 3; }
  body[data-page='home'] .hand-animation { height: auto; }
  body[data-page='home'] .typography-section,
  body[data-page='home'] .hand-animation .typography-section {
    height: auto; min-height: 0; max-height: none; padding: 48px 20px;
  }
  body[data-page='home'] .typography-section .inner-wrap { height: auto; min-height: 0; gap: 32px; }
  body[data-page='home'] .typography-section .row-wrap { gap: 16px; }
  body[data-page='home'] .sections .section { padding: 28px 20px 40px; }
  body[data-page='home'] .sections .section + .section { margin-top: 16px; }
  body[data-page='home'] .sections .section > .title { margin: 24px 0 16px; }
  body[data-page='home'] .sections .section .lottie-container { width: 100%; padding: 0; aspect-ratio: 3 / 2; }
  body[data-page='home'] .sections .section img.capability-visual { height: auto; aspect-ratio: 3 / 2; }
  body[data-page='home'] .sections .section .text-wrap { max-width: 100%; margin-top: 20px; }
  body[data-page='home'] .sections .section .text-wrap .list { margin-top: 16px; }
  body[data-page='home'] .sections .section .text-wrap .title { margin: 0; }
  body[data-page='home'] .sections .section .text-wrap .button-frame { margin-top: 24px; }
  body[data-page='home'] .sx__head { margin-bottom: 28px; }
}

/* Mobile digital labels share the flow, with distinct positions and clear gaps. */
@media (max-width: 767px) {
  body[data-page='home'] .hero .text-list { gap: 28px; }
  body[data-page='home'] .hero .text-list li { width: fit-content; max-width: 100%; }
  body[data-page='home'] .hero .text-list li:nth-child(2) { justify-self: end; }
  body[data-page='home'] .hero .text-list li:nth-child(3) { justify-self: center; }
  body[data-page='home'] .typography-section .row-wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  body[data-page='home'] .typography-section .list-wrap { min-width: 0; text-align: left; }
  body[data-page='home'] .typography-section .row-wrap:nth-child(2) .list-wrap { text-align: right; }
  body[data-page='home'] .typography-section .row-wrap:nth-child(3) .list-wrap { text-align: center; }
  body[data-page='home'] .typography-section .list-wrap .title { display: inline-flex !important; width: auto; max-width: 100%; }
  body[data-page='home'] .typography-section .js-scramble-text { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
}

/* A short desktop viewport must never crop a capability panel's action. */
@media (min-width: 1024px) {
  body[data-page='home'] .sections .section { height: auto; min-height: 100svh; padding-bottom: 64px; }
}

/* A visible proposition and paired actions lead into the existing studio film. */
body[data-page='home'] .hero { height: auto; min-height: 0; background: var(--deep); }
body[data-page='home'] .hero::after { background: rgba(38, 80, 60, .88); }
body[data-page='home'] .hero .inner-wrap { max-width: 1264px; height: auto; padding: 128px 32px 32px; margin-inline: auto; }
body[data-page='home'] .hero .top-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px 56px; height: auto; align-items: center; }
.hero-intro { grid-column: 1; grid-row: 1; max-width: 640px; margin: 0; text-align: left; }
.hero-intro__eyebrow { color: var(--white); margin-bottom: 24px; text-transform: uppercase; }
.hero-intro h1 { font-size: clamp(38px, 4.2vw, 60px); font-weight: 700; line-height: 1.03; letter-spacing: -.035em; color: var(--white); text-wrap: balance; }
.hero-intro__lede { max-width: 55ch; margin: 20px 0 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--white); }
.hero-intro__actions { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-action { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 48px; padding: 12px 22px; border: 1px solid rgba(246, 245, 243, .45); border-radius: 0; color: var(--white); font-size: 16px; }
.hero-action--primary { background: var(--white); color: var(--deep); border-color: var(--white); }
.hero-action:hover { background: #D2E9DD; color: var(--deep); }
.hero-action:focus-visible { outline: 2px solid var(--white); outline-offset: 5px; }
body[data-page='home'] .hero .text-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: auto; min-height: 0; padding: 24px 0; gap: 20px; }
body[data-page='home'] .hero .text-list li { position: relative; inset: auto; width: auto; max-width: none; padding: 0 0 0 16px; transform: none; justify-self: start; }
body[data-page='home'] .hero .text-list .js-scramble-text { font-size: 12px; line-height: 1.4; }
body[data-page='home'] .hero .video-thumb { position: relative !important; inset: auto; width: 100%; height: auto; aspect-ratio: 2 / 1; margin: 0; border-radius: 0; }
body[data-page='home'] .hero .bottom-wrap { padding: 28px 0 0; background-image: none; }
body[data-page='home'] .hero .scroll-cue { color: var(--white); }
body[data-page='home'] .hero .scroll-cue span { color: inherit; }
body[data-page='home'] .hero .scroll-cue svg path { fill: currentColor; }
@media (max-width: 767px) {
  body[data-page='home'] .hero .inner-wrap { padding: 124px 24px 28px; }
  body[data-page='home'] .hero .top-wrap { grid-template-columns: 1fr; gap: 20px; }
  .hero-intro { text-align: left; margin-bottom: 0; }
  .hero-intro h1 { font-size: clamp(38px, 9.8vw, 58px); }
  .hero-intro__actions { justify-content: flex-start; }
  .hero-action { flex: 1 1 140px; gap: 12px; padding-inline: 14px; }
  body[data-page='home'] .hero .text-list { gap: 12px; padding: 20px 0 8px; }
  body[data-page='home'] .hero .text-list .js-scramble-text { font-size: 10px; }
}
/* A readable, in-flow process statement between the studio and capabilities. */
.system-path {
  position: relative;
  z-index: 2;
  padding: clamp(64px, 7vw, 112px) 32px;
  background: #D2E9DD;
  color: var(--deep);
}
.system-path__layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(48px, 7vw, 112px);
  max-width: 1200px;
  margin-inline: auto;
}
.system-path__eyebrow,
.system-path__route,
.system-path__number {
  font-family: var(--font-suisse);
  font-size: 12px;
  line-height: 1.4;
}
.system-path__eyebrow { margin: 0 0 32px; letter-spacing: .06em; }
.system-path h2 {
  margin: 0;
  color: var(--deep);
  font-size: clamp(48px, 5.6vw, 82px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.045em;
}
.system-path h2 span { color: var(--deep); }
.system-path__route { display: flex; align-items: center; gap: 16px; max-width: 340px; margin-top: 40px; }
.system-path__line { flex: 1; height: 1px; background: currentColor; opacity: .4; }
.system-path__steps { list-style: none; padding: 0; margin: 0; }
.system-path__steps li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 24px;
  gap: 20px;
  padding: 32px 0;
  border-top: 1px solid rgba(38, 80, 60, .28);
}
.system-path__steps li:last-child { border-bottom: 1px solid rgba(38, 80, 60, .28); }
.system-path__number { padding-top: 8px; }
.system-path__steps h3 { margin: 0 0 12px; font-size: clamp(28px, 2.7vw, 40px); line-height: 1.1; letter-spacing: -.025em; color: inherit; }
.system-path__steps p { margin: 0; font-size: 17px; line-height: 1.5; color: inherit; }
@media (max-width: 767px) {
  .system-path { padding: 56px 24px; }
  .system-path__layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .system-path h2 { font-size: clamp(46px, 12vw, 72px); }
  .system-path__eyebrow { margin-bottom: 24px; }
  .system-path__route { margin-top: 28px; }
  .system-path__steps li { padding: 24px 0; gap: 12px; grid-template-columns: 28px minmax(0, 1fr) 20px; }
  .system-path__steps p { font-size: 16px; }
}

/* Keep supporting labels in one quiet row below the main hero content. */
body[data-page='home'] .hero .text-list { grid-column: 1 / -1; grid-row: 2; max-width: 780px; padding: 12px 0 0; }
body[data-page='home'] .hero .video-thumb { grid-column: 2; grid-row: 1; }
.hero-intro__eyebrow { margin-bottom: 18px; letter-spacing: .06em; }
@media (max-width: 767px) {
  body[data-page='home'] .hero .inner-wrap { padding-top: 104px; }
  .hero-intro h1 { font-size: clamp(34px, 8.7vw, 52px); }
  .hero-intro__lede { font-size: 16px; line-height: 1.5; }
  body[data-page='home'] .hero .video-thumb { grid-column: 1; grid-row: 2; max-width: 420px; }
  body[data-page='home'] .hero .text-list { grid-row: 3; }
}

@media (max-width: 479px) {
  .hero-action { font-size: 14px; gap: 8px; padding-inline: 12px; }
}
/* Open service text: titles and longer descriptions share a reading row. */
html body #more-services { padding-block: clamp(40px, 5vw, 64px); }
html body #more-services .sx__head { margin-bottom: 24px; }
#more-services .service-text__list {
  display: grid;
  gap: 28px;
}
#more-services .service-text__row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  column-gap: clamp(24px, 4vw, 56px);
  row-gap: 8px;
  padding: 0;
  border: 0;
}
#more-services .service-text__row .sx-feature__title {
  grid-column: 1;
  grid-row: 1 / 3;
  margin: 0;
}
#more-services .service-text__row .sx-feature__body {
  grid-column: 2;
  margin: 0;
  max-width: 62ch;
}
#more-services .service-text__row .hws__link {
  grid-column: 2;
  justify-self: start;
  margin: 0;
}
@media (max-width: 767px) {
  #more-services .service-text__row {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    gap: 8px;
  }
  #more-services .service-text__row :is(.sx-feature__title, .sx-feature__body, .hws__link) {
    grid-column: 1;
    grid-row: auto;
  }
}