/* ====================================================================
   SILICON — style.css  (shared by all pages)

   CONTENTS
   01  Design tokens
   02  Reset & base
   03  Utilities (.mono, .link-underline)
   04  Preloader (index, first visit only)
   05  Page transition panel
   06  Custom cursor
   07  Nav
   08  Hero (index)
   09  Page hero (sub-pages)
   10  Marquee (capabilities + CTA strip)
   11  Manifesto (index)
   12  Divisions sticky stack (index)
   13  CTA band (index)
   14  Footer (all pages)
   15  Section shells
   16  Motion fallbacks / reduced motion
   17  Responsive
==================================================================== */


/* --------------------------------------------------------------
   01  DESIGN TOKENS
   Palette is strictly: porcelain / ink / cobalt (sparing) / neutral.
   No dark sections, no gradients. Radius never exceeds 8px.
-------------------------------------------------------------- */
:root {
  --porcelain: #FAFAF7;
  --ink: #111110;
  --cobalt: #2547F4;
  --neutral: #E8E6E0;

  --font-display: "Clash Display", "General Sans", "Inter", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(1.25rem, 3.5vw, 3rem);
  --col-gap: clamp(0.75rem, 1.5vw, 1.5rem);
  --nav-h: 4.5rem;

  --hairline: rgba(17, 17, 16, 0.16);
  /* Solid grays, not alphas: both pass 4.5:1 on porcelain
     (#6B6963 ≈ 5.2:1, #706E67 ≈ 4.8:1) */
  --ink-55: #6B6963;
  --ink-45: #706E67;
}


/* --------------------------------------------------------------
   02  RESET & BASE
-------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: auto; /* ScrollSmoother owns scrolling */
}

body {
  background: var(--porcelain);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Native cursor is hidden only once JS confirms the custom dot runs */
html.has-cursor,
html.has-cursor a,
html.has-cursor button {
  cursor: none;
}

img,
svg,
figure {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

::selection {
  background: var(--cobalt);
  color: var(--porcelain);
}

/* Keyboard focus — cobalt ring on everything focusable */
:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}


/* --------------------------------------------------------------
   03  UTILITIES
-------------------------------------------------------------- */
.mono {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
}

/* Underline draws in from the left on hover, exits right on leave */
.link-underline {
  position: relative;
  display: inline-block;
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.2em;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

.link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}


/* --------------------------------------------------------------
   04  PRELOADER  (index.html only, first visit per session)
-------------------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: var(--porcelain);
  clip-path: inset(0% 0% 0% 0%);
}

.preloader__counter {
  position: absolute;
  left: var(--gutter);
  bottom: var(--gutter);
}


/* --------------------------------------------------------------
   05  PAGE TRANSITION PANEL
   Ink panel. Covers the viewport by default so every load starts
   covered; JS wipes it upward on entrance and slides it up from
   the bottom on exit. html.entrance-preloader hides it when the
   index preloader runs instead.
-------------------------------------------------------------- */
.transition {
  position: fixed;
  inset: 0;
  z-index: 240;
  background: var(--ink);
}

html.entrance-preloader .transition {
  display: none;
}

html.entrance-wipe .preloader {
  display: none;
}


/* --------------------------------------------------------------
   06  CUSTOM CURSOR
   White fill + difference blend renders as an ink dot over
   porcelain and inverts over dark type. Scales 4x on links (JS).
-------------------------------------------------------------- */
.cursor {
  position: fixed;
  top: -5px;
  left: -5px;
  z-index: 300;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0; /* revealed by JS on first mousemove */
}

@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none;
  }
}


/* --------------------------------------------------------------
   07  NAV
   Fixed and transparent. The hairline bottom border fades in
   only after scrolling past the hero (.is-scrolled via JS).
   The current page's item carries a small cobalt diamond.
-------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding-inline: var(--gutter);
  /* Porcelain-tinted frosted glass from page load (the bottom
     hairline still fades in on scroll — see .nav.is-scrolled) */
  background: rgba(250, 250, 247, 0.72);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}

/* No backdrop-filter support: fully opaque porcelain so the bar
   is never see-through */
@supports not (backdrop-filter: blur(1px)) {
  .nav {
    background: #FAFAF7;
  }
}

.nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--hairline);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.nav.is-scrolled::after {
  opacity: 1;
}

.nav__logo {
  display: flex;
  align-items: center;
  /* Type styles now only dress the <img>'s alt text if the logo
     file ever fails to load */
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Master logo lockup — 5.52:1, so height drives the footprint
   (28px tall ≈ 155px wide, against the 72px nav bar) */
.nav__logo-img {
  display: block;
  height: 28px;
  width: auto;
}

@media (max-width: 768px) {
  .nav__logo-img {
    height: 24px;
  }
}

.nav__menu {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.nav__menu a {
  transition: color 0.25s ease;
}

.nav__menu > a {
  display: flex;
  align-items: center;
}

.nav__menu a:hover {
  color: var(--cobalt);
}

.nav__menu a.is-current::before {
  content: "\25C6";
  display: inline-block;
  margin-right: 0.5em;
  font-size: 0.7em;
  color: var(--cobalt);
  transform: translateY(-0.1em);
}


/* --------------------------------------------------------------
   08  HERO  (index)
   Wordmark spans the top and overlaps the product figure
   (cols 7–12); tagline sits lower-left.
-------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto 1fr auto;
  column-gap: var(--col-gap);
  padding: calc(var(--nav-h) + 1.5rem) var(--gutter) var(--gutter);
}

.hero__meta {
  grid-column: 8 / -1;
  grid-row: 1;
  justify-self: end;
  text-align: right;
}

.hero__headline {
  grid-column: 1 / -1;
  grid-row: 2;
  z-index: 2;
  margin-top: clamp(1rem, 3vh, 2.5rem);
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 11rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.84;
  text-transform: uppercase;
}

.hero__figure {
  grid-column: 7 / 12;
  grid-row: 2 / 5;
  z-index: 1;
  align-self: start;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin-top: clamp(4rem, 9vw, 8rem); /* pulls figure up under the wordmark */
  background: var(--neutral);
  position: relative;
}

.hero__figure-caption,
.stack__figure-caption {
  position: absolute;
  left: 1rem;
  bottom: 0.875rem;
  color: var(--ink-45);
}

.hero__tagline {
  grid-column: 1 / 6;
  grid-row: 4;
  z-index: 2; /* stays above the figure as parallax drifts it downward */
  align-self: end;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  max-width: 22ch;
}


/* --------------------------------------------------------------
   09  PAGE HERO  (about / divisions / services / contact)
   Same scale system as the index wordmark; title sits low-left,
   metadata top-right.
-------------------------------------------------------------- */
.page-hero {
  position: relative;
  min-height: 80svh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--col-gap);
  padding: calc(var(--nav-h) + 1.5rem) var(--gutter) clamp(1.5rem, 4vh, 3rem);
}

.page-hero__meta {
  grid-column: 7 / -1;
  grid-row: 1;
  justify-self: end;
  text-align: right;
}

.page-hero__title {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 11rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.84;
  text-transform: uppercase;
}


/* --------------------------------------------------------------
   10  MARQUEE  (capabilities rows + CTA strip reuse these)
-------------------------------------------------------------- */
.marquee {
  padding-block: clamp(3rem, 7vw, 6rem);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.marquee__row {
  overflow: hidden;
}

.marquee__row + .marquee__row {
  margin-top: clamp(0.75rem, 2vw, 1.5rem);
}

.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
}

.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee__diamond {
  color: var(--cobalt);
  font-size: 0.875rem;
  padding-inline: clamp(1.25rem, 2.5vw, 2.25rem);
}


/* --------------------------------------------------------------
   11  MANIFESTO  (index — pinned statement + stats)
   Statement on cols 1–7 inks in line by line under scrub;
   stats sit on cols 9–12, deliberately offset lower.
-------------------------------------------------------------- */
.manifesto {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: var(--col-gap);
  padding: calc(var(--nav-h) + 2rem) var(--gutter) clamp(2rem, 6vh, 4rem);
}

.manifesto__statement {
  grid-column: 1 / 8;
  grid-row: 1;
  align-self: center;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.manifesto__stats {
  grid-column: 9 / -1;
  grid-row: 1 / 3;
  align-self: start;
  margin-top: clamp(6rem, 22vh, 12rem); /* intentional off-axis drop */
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vh, 3rem);
}

.stat {
  border-top: 1px solid var(--hairline);
  padding-top: 1rem;
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.stat__label {
  margin-top: 0.5rem;
  color: var(--ink-55);
}

.manifesto__link {
  grid-column: 10 / -1;
  grid-row: 2;
  justify-self: end;
  align-self: end;
  color: var(--cobalt);
}


/* --------------------------------------------------------------
   12  DIVISIONS STICKY STACK  (index)
   Five full-viewport panels; each pins and the next slides over
   while the covered panel's inner scales down slightly (JS).
   Backgrounds alternate porcelain / neutral so edges read.
   Layout varies per panel — no two spreads share a composition.
-------------------------------------------------------------- */
.stack {
  position: relative;
}

.stack__panel {
  position: relative;
  min-height: 100svh;
}

.stack__inner {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: var(--col-gap);
  /* Text safe area: 12svh bottom padding lifts every bottom-anchored
     row (descriptions, lists, EXPLORE links, panel-05's name) so all
     text ends by 88svh while the panel is pinned — nothing hides
     below the fold on short viewports. (Mobile overrides this.) */
  padding: calc(var(--nav-h) + 1.5rem) var(--gutter) max(2.5rem, 12svh);
  background: var(--porcelain);
  overflow: clip;
  will-change: transform;
}

.stack__panel--tint .stack__inner {
  background: var(--neutral);
}

.stack__index {
  position: absolute;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(14rem, 30vw, 26rem);
  font-weight: 600;
  line-height: 0.8;
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}

.stack__name {
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.9;
  text-transform: uppercase;
}

.stack__desc {
  z-index: 1;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  max-width: 32ch;
}

.stack__list {
  z-index: 1;
}

.stack__list li {
  border-top: 1px solid var(--hairline);
  padding: 0.55rem 0;
}

.stack__figure {
  position: relative;
  z-index: 1;
  align-self: start;
  width: 100%;
  aspect-ratio: 4 / 5;
  /* Height cap: the figures are what push panel text below the fold
     on short viewports. Clamping them keeps every panel's content
     grid inside the pinned viewport (text safe area = top 88svh);
     the img is object-fit cover, so a squatter frame just crops. */
  max-height: 56svh;
  background: var(--neutral);
}

/* TINT-PANEL SEAM FIX — wrapper-level blend.
   The parallax transform on .stack__figure creates a stacking
   context, so an img-level multiply can only composite against the
   FIGURE's own background — never the panel. Instead the figure
   itself multiplies: its whole group (img + caption) composites
   directly onto the panel's #E8E6E0, so a white-normalized render
   background becomes the panel tone exactly. Background transparent —
   the PANEL is the loading state (nothing to seam against). */
.stack__panel--tint .stack__figure {
  background: transparent;
  mix-blend-mode: multiply;
}

/* No double-multiply inside the blended group */
.stack__panel--tint .stack__figure img {
  mix-blend-mode: normal;
}

/* ai-02's corners hold scene content, so normalization tops out at
   ~#F7F6F5 — a small brightness lift clips its edges to pure white
   pre-blend (same remedy as the AV environmental renders) */
.stack__panel--v2 .stack__figure img {
  filter: brightness(1.07);
}

.stack__link {
  z-index: 2;
  align-self: end;
  justify-self: start;
  transition: color 0.25s ease;
}

.stack__link:hover {
  color: var(--cobalt);
}

/* Line items are deep links into divisions/services — mono look
   unchanged, underline draws on hover, cobalt arrow slides in */
.stack__item {
  display: inline-block;
}

.stack__item-arrow {
  display: inline-block;
  margin-left: 0.45em;
  color: var(--cobalt);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.stack__item:hover .stack__item-arrow {
  opacity: 1;
  transform: none;
}

/* — Panel 01 · AV — figure right bleed, copy left */
.stack__panel--v1 .stack__index { top: 1.5rem; left: -1vw; }
.stack__panel--v1 .stack__name { grid-column: 1 / 9; grid-row: 1; }
.stack__panel--v1 .stack__figure { grid-column: 8 / 13; grid-row: 1 / 4; }
.stack__panel--v1 .stack__desc { grid-column: 1 / 5; grid-row: 2; margin-top: 2.5rem; }
.stack__panel--v1 .stack__list { grid-column: 5 / 8; grid-row: 2; margin-top: 2.5rem; align-self: start; }
.stack__panel--v1 .stack__link { grid-column: 1 / 4; grid-row: 3; }

/* — Panel 02 · AI — figure left, name overlaps from the right */
.stack__panel--v2 .stack__index { right: 1rem; bottom: 0; }
.stack__panel--v2 .stack__figure { grid-column: 1 / 6; grid-row: 1 / 4; }
.stack__panel--v2 .stack__name { grid-column: 5 / 13; grid-row: 1; margin-top: 2rem; }
.stack__panel--v2 .stack__desc { grid-column: 6 / 11; grid-row: 2; margin-top: 2rem; }
.stack__panel--v2 .stack__list { grid-column: 6 / 9; grid-row: 3; align-self: end; }
.stack__panel--v2 .stack__link { grid-column: 11 / 13; grid-row: 3; justify-self: end; }

/* — Panel 03 · Hardware — full-width name, centered figure.
   The ghost "03" must NOT sit behind the centered figure (opaque,
   z-index 1) — that's what made it invisible. Bottom-left is clear. */
.stack__panel--v3 .stack__index { bottom: 2%; left: -1vw; }
.stack__panel--v3 .stack__name { grid-column: 1 / 13; grid-row: 1; }
.stack__panel--v3 .stack__desc { grid-column: 1 / 4; grid-row: 2; margin-top: 3rem; }
.stack__panel--v3 .stack__figure { grid-column: 5 / 10; grid-row: 2 / 4; margin-top: 1.5rem; }
.stack__panel--v3 .stack__list { grid-column: 10 / 13; grid-row: 2; margin-top: 3rem; align-self: start; }
.stack__panel--v3 .stack__link { grid-column: 10 / 13; grid-row: 3; }

/* — Panel 04 · Banking — figure upper right, name cuts across it.
   Figure spans ALL rows (like panels 01/02) so the bottom row of
   text sits WITHIN its height instead of after it — this is what
   kept the description/list/link below the fold on short screens. */
.stack__panel--v4 .stack__index { top: 0.5rem; right: -1vw; }
.stack__panel--v4 .stack__figure { grid-column: 7 / 12; grid-row: 1 / 4; }
.stack__panel--v4 .stack__name { grid-column: 1 / 9; grid-row: 2; align-self: center; }
.stack__panel--v4 .stack__desc { grid-column: 1 / 4; grid-row: 3; align-self: end; }
.stack__panel--v4 .stack__list { grid-column: 4 / 7; grid-row: 3; align-self: end; }
.stack__panel--v4 .stack__link { grid-column: 11 / 13; grid-row: 3; justify-self: end; }

/* — Panel 05 · Networks — figure left-center, name along the bottom */
.stack__panel--v5 .stack__index { bottom: -1.5rem; left: 0; }
.stack__panel--v5 .stack__desc { grid-column: 9 / 13; grid-row: 1; }
.stack__panel--v5 .stack__figure { grid-column: 2 / 7; grid-row: 1 / 3; }
.stack__panel--v5 .stack__list { grid-column: 8 / 11; grid-row: 2; align-self: center; }
.stack__panel--v5 .stack__name { grid-column: 1 / 10; grid-row: 3; align-self: end; }
.stack__panel--v5 .stack__link { grid-column: 10 / 13; grid-row: 3; justify-self: end; }


/* --------------------------------------------------------------
   13  CTA BAND  (index, after the stack)
-------------------------------------------------------------- */
.cta {
  /* Positioned + opaque so it slides OVER released stack panels,
     whose bottoms can hang below the viewport on tall content */
  position: relative;
  z-index: 2;
  background: var(--porcelain);
  border-top: 1px solid var(--hairline);
  padding-top: clamp(5rem, 12vh, 8rem);
}

.cta__headline {
  display: block;
  padding-inline: var(--gutter);
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 8vw, 8.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.cta__headline:hover {
  color: var(--cobalt);
}

.cta__strip {
  margin-top: clamp(3rem, 8vh, 5rem);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-block: 0.8rem;
}

.cta__strip .marquee__diamond {
  font-size: 0.625rem;
  padding-inline: 1.5rem;
}


/* --------------------------------------------------------------
   14  FOOTER  (all pages)
   Mono columns above a huge cropped wordmark.
-------------------------------------------------------------- */
.footer {
  position: relative;
  z-index: 2; /* above released stack panels, like .cta */
  /* Distinct zone: a hair cooler/darker than the page porcelain
     (#FAFAF7) so the footer reads as its own band without going
     gray or heavy, plus a clear top edge. No frost — it sits on
     solid porcelain and never overlaps content. */
  background: #F4F2EC;
  border-top: 1px solid rgba(17, 17, 16, 0.12);
  padding: clamp(3.5rem, 8vh, 5.5rem) var(--gutter) 0;
  overflow: clip;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}

.footer__col--sitemap { grid-column: 1 / 4; }
.footer__col--contact { grid-column: 5 / 9; }
.footer__col--meta { grid-column: 10 / -1; }

.footer__heading {
  color: var(--ink-45);
  margin-bottom: 0.6rem;
}

.footer__col a {
  transition: color 0.25s ease;
}

.footer__col a:hover {
  color: var(--cobalt);
}

.footer__wordmark {
  display: block; /* it's a link now — back to top / home */
  margin-top: clamp(4rem, 10vh, 7rem);
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 14vw, 13.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.78;
  text-transform: uppercase;
  color: var(--ink);
  transform: translateY(0.08em); /* crops the baseline into the page edge */
  transition: opacity 0.3s ease;
}

/* Opacity (not a char transform) — SplitText owns the chars' inline
   transforms, so a CSS shift would fight the rise animation */
.footer__wordmark:hover {
  opacity: 0.85;
}


/* --------------------------------------------------------------
   15  SECTION SHELLS
   Empty for now — each gets its own composition in later passes.
-------------------------------------------------------------- */
.section {
  position: relative;
}


/* --------------------------------------------------------------
   16  MOTION FALLBACKS
   If GSAP fails to load, or the visitor prefers reduced motion,
   the page must still be fully readable.
-------------------------------------------------------------- */
html.no-motion .preloader,
html.no-motion .transition {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .preloader,
  .transition {
    display: none;
  }
}


/* --------------------------------------------------------------
   17  RESPONSIVE
-------------------------------------------------------------- */
@media (max-width: 820px) {
  .hero__meta { grid-column: 5 / -1; }
  .hero__figure { grid-column: 4 / -1; }
  .hero__tagline { grid-column: 1 / 9; }

  .page-hero__meta { grid-column: 4 / -1; }

  .manifesto__statement {
    grid-column: 1 / -1;
    align-self: start;
    margin-top: 2rem;
  }

  .manifesto__stats {
    grid-column: 1 / 9;
    grid-row: auto;
    margin-top: 4rem;
  }

  .manifesto__link {
    grid-column: 7 / -1;
    grid-row: auto;
    margin-top: 3rem;
  }

  /* Stack panels collapse to a single editorial column */
  .stack__inner {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding-bottom: 3.5rem;
  }

  .stack__index {
    font-size: clamp(9rem, 40vw, 14rem);
  }

  .stack__figure {
    width: 72%;
    align-self: flex-end;
  }

  .stack__name {
    order: -1;
  }

  .footer__col--sitemap { grid-column: 1 / 6; }
  .footer__col--contact { grid-column: 7 / -1; }
  .footer__col--meta { grid-column: 1 / -1; margin-top: 2rem; }
}


/* ====================================================================
   DIVISIONS PAGE  (sections 18–25)

   18  Brand glyph & section markers
   19  Sticky mini-index
   20  SEC. 01 — AV horizontal gallery
   21  SEC. 02 — AI pinned scroll-swap
   22  SEC. 03 — Hardware masonry wall
   23  SEC. 04 — Banking ledger
   24  SEC. 05 — Networks process line
   25  Divisions responsive
==================================================================== */


/* --------------------------------------------------------------
   18  BRAND GLYPH & SECTION MARKERS
-------------------------------------------------------------- */
.glyph {
  display: inline-block;
  width: 1em;
  height: 0.76em; /* 132:100 viewBox ratio */
  fill: currentColor;
}

.preloader__glyph {
  position: absolute;
  left: var(--gutter);
  bottom: calc(var(--gutter) + 2.2rem);
  width: 34px;
  height: 26px;
  color: var(--cobalt);
}

.figcap {
  position: absolute;
  left: 1rem;
  bottom: 0.875rem;
  color: var(--ink-45);
}

.sec-marker {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.sec-marker__glyph {
  width: 0.9em;
  height: 0.69em;
  color: var(--cobalt);
}

.sec-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  padding: clamp(4rem, 10vh, 7rem) var(--gutter) clamp(2rem, 5vh, 3.5rem);
}

/* Off-axis variant — title pushed right of the left margin */
.sec-head--indent .sec-title {
  margin-left: clamp(0rem, 16vw, 18rem);
}

.sec-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.9;
  text-transform: uppercase;
}


/* --------------------------------------------------------------
   19  STICKY MINI-INDEX  (fixed, right edge)
-------------------------------------------------------------- */
.mini-index {
  position: fixed;
  top: 50%;
  right: calc(var(--gutter) * 0.5);
  z-index: 90;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: right;
}

.mini-index a {
  color: var(--ink-45);
  transition: color 0.25s ease;
}

.mini-index a:hover {
  color: var(--ink);
}

.mini-index a.is-current {
  color: var(--cobalt);
}


/* --------------------------------------------------------------
   20  SEC. 01 — AV HORIZONTAL GALLERY
   Section pins; the track scrubs horizontally (JS). will-change
   applies only while the pin is active (.is-active via JS).
-------------------------------------------------------------- */
.sec-av {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding-bottom: clamp(4rem, 9vh, 6rem);
  /* Banner geometry: figures are a uniform 3:2 (width capped by the
     viewport height), so the banner band — full figure height, from
     figure top to figure bottom — sits at the same screen-Y on every
     slide AND every gap. --av-band-top = the slides' padding-top
     (where figures start). */
  --av-fig-w: min(70vw, calc(52svh * 1.5));
  --av-fig-h: calc(var(--av-fig-w) * 2 / 3);
  --av-band-top: clamp(2.5rem, 4vw, 3.5rem);
}

.sec-head--av {
  position: absolute;
  top: calc(var(--nav-h) + 0.75rem);
  left: calc(var(--gutter) - 0.4em);
  z-index: 5; /* above slides passing beneath */
  gap: 0.5rem;
  padding: 0.2em 0.4em;
  background: var(--porcelain); /* backing bar keeps it legible */
}

/* Persistent section heading stays small — slide titles own the
   large display scale */
.sec-head--av .sec-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
}

.hscroll__track {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 5vw;
  padding-inline: var(--gutter);
  width: max-content;
  /* Continuous banner strip: one flat #EDEBE4 band, full figure
     height, spanning the ENTIRE track — behind every slide and every
     5vw gap. The figure fills carry the SAME #EDEBE4 (the parallax
     transform on the fill isolates the imgs' multiply blend to the
     fill, so the fill must BE the band color — the result is pixel-
     identical to blending against the track). Renders are white-point
     normalized, so bg × band = band exactly: one uniform surface. */
  background: linear-gradient(
    to bottom,
    transparent 0,
    transparent 0.5rem,
    #EDEBE4 0.5rem,
    #EDEBE4 calc(var(--av-band-top) + var(--av-fig-h)),
    transparent calc(var(--av-band-top) + var(--av-fig-h)),
    transparent 100%
  );
}

.sec-av.is-active .hscroll__track,
.sec-av.is-active .hslide__fill {
  will-change: transform;
}

.hslide {
  position: relative;
  flex: none;
  width: 70vw;
  padding-top: var(--av-band-top); /* links padding to the banner top variable */
}

.hslide__name {
  position: absolute;
  /* Sits ABOVE the figure, on the banner — resolving any intersection
     or interference with the product images below. */
  top: 0.5rem;
  left: 0;
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.hslide__figure {
  position: relative;
  /* 3:2 matches the source renders (1264×848) so products are not
     over-cropped; width backs off on short viewports instead of
     squashing the ratio */
  width: min(100%, calc(52svh * 1.5));
  aspect-ratio: 3 / 2;
  overflow: hidden;
  /* Transparent — the img (multiply) provides the visible surface; any
     sub-pixel edge then shows page porcelain, not a block */
  background: transparent;
}

/* Fill is 112% and centered: the extra 12% is the parallax travel budget,
   so the drift (JS, capped under ±6%) never exposes an edge or crops
   beyond that margin. Its color IS the banner (#EDEBE4): all renders
   are white-point normalized (tools/normalize-av-bg.py), so bg × band
   via the img's multiply = the band exactly — the figure interior and
   the track band are one uniform surface, zero seams. */
.hslide__fill {
  position: absolute;
  top: -6%;
  left: -6%;
  width: 112%;
  height: 112%;
  background: #EDEBE4;
}

/* The two environmental renders (conferencing / meeting room) have
   scene content in their corners, so normalization can only reach
   ~#F6F6F6 there — a brightness boost pre-blend clips their edges to
   pure white so they too multiply to exactly the band. Tuned per
   slide: the conferencing scene's edges are the grayest and need the
   most lift. */
.hslide:nth-child(4) .hslide__fill img {
  filter: brightness(1.1) contrast(1.01);
}

.hslide:nth-child(5) .hslide__fill img {
  filter: brightness(1.05) contrast(1.01);
}

/* FIG. captions read on the banner tone — full-opacity ink */
.hslide .figcap {
  color: var(--ink);
}

.hslide__desc {
  margin-top: 1.1rem;
  max-width: 48ch;
}

.hslide__spec {
  margin-top: 0.4rem;
  color: var(--ink-55);
}

.hscroll__progress {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(2rem, 4.5vh, 3rem);
  height: 2px;
  background: var(--hairline);
}

.hscroll__progress-bar {
  position: absolute;
  inset: 0;
  background: var(--cobalt);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Reduced motion / no GSAP: plain horizontal scroll instead of pin */
html.no-motion .sec-av {
  overflow-x: auto;
}


/* --------------------------------------------------------------
   21  SEC. 02 — AI PINNED SCROLL-SWAP
   Titles/descs/figures are stacked; JS swaps them per step.
   Without JS only the first of each stack is visible.
-------------------------------------------------------------- */
.sec-ai {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.sec-ai__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  padding-inline: var(--gutter);
  align-items: center;
}

.sec-ai__left {
  grid-column: 1 / 7;
}

.sec-ai__kicker {
  margin-top: 2.2rem;
  color: var(--ink-55);
}

.ai-titles {
  position: relative;
  margin-top: 1.2rem;
  min-height: clamp(7rem, 13vw, 11rem);
}

.ai-step__title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
}

.ai-step__title:not(:first-child) {
  opacity: 0; /* JS overrides with inline styles; keeps no-JS readable */
}

.ai-descs {
  position: relative;
  margin-top: 1.4rem;
  min-height: 6rem;
}

.ai-step__desc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 44ch;
}

.ai-step__desc:not(:first-child) {
  opacity: 0;
}

.ai-counter {
  margin-top: 2rem;
  color: var(--cobalt);
}

.sec-ai__right {
  grid-column: 8 / 13;
  margin-top: clamp(3rem, 10vh, 6rem); /* off-axis drop */
}

.ai-figures {
  position: relative;
  aspect-ratio: 1 / 1;
}

.ai-figure {
  position: absolute;
  inset: 0;
  background: var(--neutral);
}

.ai-figure:not(:first-child) {
  opacity: 0;
}

.sec-ai.is-active .ai-figure {
  will-change: transform, opacity;
}


/* --------------------------------------------------------------
   22  SEC. 03 — HARDWARE MASONRY WALL
   Items span varied widths with varied data-speed (0.85–1.1),
   so the wall shears under ScrollSmoother.
-------------------------------------------------------------- */
.wall {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  padding-inline: var(--gutter);
}

.wall__intro {
  grid-column: 1 / 7;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

.wall__intro-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.wall__intro-copy {
  margin-top: 1.1rem;
  max-width: 46ch;
  color: var(--ink-55);
}

.wall__item {
  position: relative;
  margin-bottom: clamp(3rem, 7vh, 5.5rem);
}

.wall__frame {
  position: relative;
  overflow: hidden;
  background: var(--neutral);
}

.wall__frame--r43 { aspect-ratio: 4 / 3; }
.wall__frame--r45 { aspect-ratio: 4 / 5; }
.wall__frame--r11 { aspect-ratio: 1 / 1; }
.wall__frame--r1610 { aspect-ratio: 16 / 10; }

.wall__fill {
  position: absolute;
  inset: 0;
  background: var(--neutral);
  transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.wall__item:hover .wall__fill {
  transform: scale(1.04);
}

.wall__cat {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.wall__line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.3rem;
  color: var(--ink-55);
}

.wall__arrow {
  color: var(--cobalt);
  font-family: var(--font-body);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.wall__item:hover .wall__arrow {
  opacity: 1;
  transform: none;
}

/* Asymmetric placements — no two rows align */
.wall__item--i1 { grid-column: 8 / 13; margin-top: -2rem; }
.wall__item--i2 { grid-column: 1 / 6; margin-top: -6rem; }
.wall__item--i3 { grid-column: 7 / 12; margin-top: 4rem; }
.wall__item--i4 { grid-column: 2 / 6; margin-top: -3rem; }
.wall__item--i5 { grid-column: 6 / 11; margin-top: 5rem; }
.wall__item--i6 { grid-column: 1 / 5; margin-top: -4rem; }
.wall__item--i7 { grid-column: 8 / 13; margin-top: 2rem; }
.wall__item--i8 { grid-column: 3 / 8; margin-top: -2rem; }


/* --------------------------------------------------------------
   23  SEC. 04 — BANKING LEDGER
   Ruled rows; hover floods neutral and a 4:5 preview follows
   the cursor (JS). Rows reveal via clip-path stagger (JS).
-------------------------------------------------------------- */
.ledger {
  border-bottom: 1px solid var(--hairline);
}

.ledger__row {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  align-items: center;
  column-gap: var(--col-gap);
  padding: 1.35rem var(--gutter);
  border-top: 1px solid var(--hairline);
  background: transparent;
  transition: background-color 0.35s ease;
}

.ledger__row:hover {
  background: var(--neutral);
}

.ledger__idx {
  color: var(--ink-45);
}

.ledger__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.ledger__spec {
  text-align: right;
  color: var(--ink-55);
}

.ledger__preview {
  /* NOTE: must live OUTSIDE #smooth-content — position:fixed inside
     its transform resolves against the content, not the viewport */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 150;
  width: min(300px, 26vw);
  aspect-ratio: 4 / 5;
  background: var(--neutral);
  border: 1px solid var(--hairline);
  opacity: 0;
  pointer-events: none;
}

/* Touch fallback — tapping a row expands its image inline */
.ledger__row-media {
  grid-column: 1 / -1;
  position: relative;
  width: min(320px, 70vw);
  aspect-ratio: 4 / 5;
  margin-top: 1rem;
  overflow: hidden;
  background: var(--neutral);
  display: none;
}

.ledger__row.is-open .ledger__row-media {
  display: block;
}

@media (hover: none), (pointer: coarse) {
  .ledger__preview {
    display: none;
  }
}


/* --------------------------------------------------------------
   24  SEC. 05 — NETWORKS PROCESS LINE
   Cobalt line occupies column 6 and draws down under scrub (JS);
   dots light up as passed. Nodes alternate left/right with an
   offset vertical rhythm.
-------------------------------------------------------------- */
.process {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, auto);
  column-gap: var(--col-gap);
  padding: clamp(2rem, 5vh, 4rem) var(--gutter) clamp(4rem, 10vh, 7rem);
}

.process__line {
  grid-column: 6 / 7;
  grid-row: 1 / 7;
  justify-self: center;
  width: 2px;
  height: 100%;
  background: var(--cobalt);
  transform-origin: top center;
}

.process__dot {
  grid-column: 6 / 7;
  justify-self: center;
  align-self: start;
  margin-top: 0.5rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--porcelain);
  border: 2px solid var(--hairline);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.process__dot.is-lit {
  background: var(--cobalt);
  border-color: var(--cobalt);
}

.process__node {
  padding-bottom: clamp(3.5rem, 8vh, 6rem);
}

.process__node--left {
  grid-column: 1 / 6;
}

.process__node--right {
  grid-column: 7 / 12;
  margin-top: clamp(3rem, 8vh, 5.5rem); /* offset rhythm */
}

.process__phase {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.process__desc {
  margin-top: 0.8rem;
  max-width: 38ch;
}

.process__tag {
  margin-top: 0.7rem;
  color: var(--ink-55);
}

/* CTA variant used to close pages without the marquee strip */
.cta--end {
  padding-bottom: clamp(4rem, 10vh, 7rem);
}


/* --------------------------------------------------------------
   38  PARTNERS & SUPPLIERS  (index — calm logo marquee)
   A breather between the stack and the CTA, not a feature
   section. The filter chain renders text tokens and real logo
   imgs identically (near-ink monochrome), so swapping tokens for
   /images/partners/ files needs no CSS changes.
-------------------------------------------------------------- */
.partners {
  /* Positioned + opaque like .cta: released stack panels can hang
     below the viewport and must not paint over this strip */
  position: relative;
  z-index: 2;
  background: var(--porcelain);
  border-top: 1px solid var(--hairline);
  padding: clamp(2.5rem, 6vh, 4rem) 0 clamp(2.75rem, 6.5vh, 4.5rem);
}

.partners__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 0 var(--gutter);
  margin-bottom: clamp(1.75rem, 4vh, 2.75rem);
}

.partners__label {
  color: var(--ink-55);
  white-space: nowrap;
}

.partners__line {
  color: var(--ink-55);
  text-align: right;
  max-width: 52ch;
}

.partners__group {
  display: flex;
  align-items: center;
  flex: none;
  gap: clamp(3rem, 6vw, 5.5rem);
  padding-right: clamp(3rem, 6vw, 5.5rem); /* keeps the loop gap even */
}

.partners__item {
  display: flex;
  align-items: center;
}

/* Identical normalization for imgs AND text tokens: grayscale +
   crush to near-ink, calm at 0.75, full ink on hover */
.partners__item img,
.partners__token {
  display: block;
  filter: grayscale(1) brightness(0.25);
  opacity: 0.75;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.partners__item img {
  width: auto;
  max-width: 140px;
}

.partners__token {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.partners__item:hover img,
.partners__item:hover .partners__token {
  opacity: 1;
  filter: grayscale(1) brightness(0);
}

/* Reduced motion: static single row, scrollable if it overflows */
html.no-motion .partners__row {
  overflow-x: auto;
}

html.no-motion .partners__group[aria-hidden="true"] {
  display: none;
}


/* --------------------------------------------------------------
   25  DIVISIONS RESPONSIVE
-------------------------------------------------------------- */
@media (max-width: 1100px) {
  .mini-index {
    display: none;
  }
}

@media (max-width: 820px) {
  .hslide {
    width: 85vw;
  }

  /* Slides widen to 85vw here, so the shelf's figure-height term must
     track that (keeps the track ground line aligned with the fills) */
  .sec-av {
    --av-fig-w: min(85vw, calc(52svh * 1.5));
  }

  .sec-ai__grid {
    align-items: start;
  }

  .sec-ai__left {
    grid-column: 1 / -1;
  }

  .sec-ai__right {
    grid-column: 2 / -1;
    margin-top: 2.5rem;
  }

  .wall__intro,
  .wall__item--i1, .wall__item--i2, .wall__item--i3, .wall__item--i4,
  .wall__item--i5, .wall__item--i6, .wall__item--i7, .wall__item--i8 {
    margin-top: 0;
  }

  .wall__intro { grid-column: 1 / -1; }
  .wall__item--i1 { grid-column: 4 / -1; }
  .wall__item--i2 { grid-column: 1 / 9; }
  .wall__item--i3 { grid-column: 3 / -1; }
  .wall__item--i4 { grid-column: 1 / 8; }
  .wall__item--i5 { grid-column: 4 / -1; }
  .wall__item--i6 { grid-column: 1 / 8; }
  .wall__item--i7 { grid-column: 5 / -1; }
  .wall__item--i8 { grid-column: 1 / 9; }

  .ledger__row {
    grid-template-columns: 3.5rem 1fr;
    row-gap: 0.3rem;
  }

  .ledger__spec {
    grid-column: 2;
    text-align: left;
  }

  .process {
    grid-template-rows: none;
  }

  .process__line {
    grid-column: 1 / 2;
    grid-row: 1 / 7;
    justify-self: start;
  }

  .process__dot {
    grid-column: 1 / 2;
    justify-self: start;
    margin-left: -5px;
  }

  .process__node--left,
  .process__node--right {
    grid-column: 2 / -1;
    margin-top: 0;
  }
}


/* --------------------------------------------------------------
   26  IMAGERY
   Frames keep the neutral fill as the loading state. Images cover
   their frame; multiply fuses the near-porcelain render
   backgrounds with the page (multiply can only darken, so product
   blacks are preserved).
-------------------------------------------------------------- */
.img-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-blend {
  mix-blend-mode: multiply;
}

/* Reveal scale / parallax must stay inside their frames */
.hero__figure,
.stack__figure,
.ai-figures,
.ledger__preview {
  overflow: hidden;
}

/* Ledger preview holds one image per row; the active one shows */
.ledger__preview-img {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ledger__preview-img.is-active {
  opacity: 1;
}


/* ====================================================================
   ABOUT / SERVICES / CONTACT  (sections 27–30)

   27  About — principles + numbers band
   28  Services — intro + AMC callout
   29  Contact — split, details, form, chips, map
   30  Sibling-pages responsive
==================================================================== */


/* --------------------------------------------------------------
   27  ABOUT — PRINCIPLES & NUMBERS
   Principles reuse the ledger rows (and its clip reveal) with a
   body-copy elaboration column instead of the mono spec.
-------------------------------------------------------------- */
.ledger--principles .ledger__row {
  grid-template-columns: 6rem 1.2fr 1fr;
  align-items: start;
  padding-block: clamp(1.75rem, 4vh, 2.75rem);
}

.ledger__elab {
  max-width: 38ch;
  justify-self: end;
  color: var(--ink);
}

/* Four count-up stats on an off-axis grid — no two share a baseline */
.numbers {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  padding: clamp(4rem, 10vh, 7rem) var(--gutter);
}

.numbers .stat--n1 { grid-column: 1 / 4; grid-row: 1; }
.numbers .stat--n2 { grid-column: 5 / 8; grid-row: 1; margin-top: clamp(2rem, 6vh, 4rem); }
.numbers .stat--n3 { grid-column: 9 / 12; grid-row: 1; margin-top: clamp(4rem, 10vh, 6.5rem); }
.numbers .stat--n4 { grid-column: 3 / 6; grid-row: 2; margin-top: clamp(2.5rem, 6vh, 4rem); }


/* --------------------------------------------------------------
   28  SERVICES — INTRO & AMC CALLOUT
-------------------------------------------------------------- */
.intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  padding: clamp(3rem, 8vh, 6rem) var(--gutter) clamp(1rem, 3vh, 2rem);
}

.intro__statement {
  grid-column: 1 / 9;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

/* Full-width neutral band; three ruled TEXT columns (not cards) */
.amc {
  margin-top: clamp(4rem, 10vh, 7rem);
  padding: clamp(4rem, 10vh, 6.5rem) var(--gutter) clamp(4.5rem, 11vh, 7.5rem);
  background: var(--neutral);
}

.amc__title {
  margin-top: 1.2rem;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.5vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.92;
  text-transform: uppercase;
}

.amc__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

.amc__col {
  border-left: 1px solid var(--hairline);
  padding-left: clamp(1rem, 2vw, 1.75rem);
}

.amc__col-head {
  color: var(--ink);
}

.amc__col-body {
  margin-top: 0.7rem;
  font-size: 0.9375rem;
  color: var(--ink-55);
  max-width: 34ch;
}


/* --------------------------------------------------------------
   29  CONTACT — SPLIT, DETAILS, FORM, CHIPS, MAP
-------------------------------------------------------------- */
.contact-split {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  padding: clamp(2rem, 5vh, 4rem) var(--gutter) clamp(5rem, 12vh, 8rem);
}

.contact-split__left {
  grid-column: 1 / 6;
}

.contact-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.9;
  text-transform: uppercase;
}

.contact-details {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  border-bottom: 1px solid var(--hairline);
}

.contact-detail {
  display: grid;
  grid-template-columns: 6rem 1fr;
  column-gap: var(--col-gap);
  align-items: baseline;
  padding: 0.9rem 0;
  border-top: 1px solid var(--hairline);
}

.contact-detail__key {
  color: var(--ink-45);
}

/* Form — right column, deliberately dropped lower */
.contact-split__right {
  grid-column: 7 / 13;
  margin-top: clamp(4rem, 12vh, 8rem);
}

.form__hp {
  position: absolute;
  left: -9999px;
}

.form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--col-gap);
}

.field {
  margin-bottom: clamp(1.5rem, 3.5vh, 2.25rem);
  border: none; /* fieldset reset */
  padding: 0;
}

.field__label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--ink-45);
}

/* No boxes: bottom hairline only, inking fully on focus */
.field__input {
  width: 100%;
  padding: 0.55rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(17, 17, 16, 0.2);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  caret-color: var(--cobalt);
  transition: border-color 0.35s ease;
}

.field__input:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

/* Keyboard users still get the ring (must follow the :focus rule) */
.field__input:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}

.field__input--area {
  resize: vertical;
  min-height: 6.5rem;
}

/* Division toggle chips — thin ink border, cobalt when selected */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip span {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.chip input:checked + span {
  background: var(--cobalt);
  border-color: var(--cobalt);
  color: var(--porcelain);
}

.chip input:focus-visible + span {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}

.form__submit {
  width: 100%;
  padding: 1.15rem;
  margin-top: 0.5rem;
  background: var(--ink);
  border: none;
  border-radius: 0;
  color: var(--porcelain);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.form__submit:hover {
  background: var(--cobalt);
}

.form__success-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 18ch;
}

.map-band {
  padding: 0 var(--gutter) clamp(3rem, 7vh, 5rem);
}

.map-band__caption {
  color: var(--ink-45);
  margin-bottom: 0.8rem;
}

.map-band__frame {
  height: clamp(320px, 45vh, 420px); /* fixed box — zero CLS on load */
  border: 1px solid rgba(17, 17, 16, 0.12);
  background: var(--neutral); /* shows while the lazy iframe loads */
}

.map-band__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}


/* --------------------------------------------------------------
   30  SIBLING-PAGES RESPONSIVE
-------------------------------------------------------------- */
@media (max-width: 820px) {
  .ledger--principles .ledger__row {
    grid-template-columns: 3.5rem 1fr;
  }

  .ledger__elab {
    grid-column: 2;
    justify-self: start;
  }

  .numbers .stat--n1 { grid-column: 1 / 7; grid-row: auto; }
  .numbers .stat--n2 { grid-column: 8 / -1; grid-row: auto; }
  .numbers .stat--n3 { grid-column: 1 / 7; grid-row: auto; }
  .numbers .stat--n4 { grid-column: 8 / -1; grid-row: auto; }

  .intro__statement {
    grid-column: 1 / -1;
  }

  .amc__cols {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }

  .contact-split__left,
  .contact-split__right {
    grid-column: 1 / -1;
  }

  .contact-split__right {
    margin-top: 3.5rem;
  }

  .form__grid {
    grid-template-columns: 1fr;
  }
}


/* ====================================================================
   POLISH PASS  (sections 31–35)

   31  Mobile nav (hamburger + full-screen overlay)
   32  Mobile typography & editorial stacking
   33  AV native carousel / AI vertical sequence (mobile modes)
   34  Reduced motion
   35  404
==================================================================== */


/* --------------------------------------------------------------
   31  MOBILE NAV
-------------------------------------------------------------- */
.nav__toggle {
  display: none;
  align-items: center;
  gap: 0.6em;
  padding: 0.4rem 0;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}

.nav__toggle-lines {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 9px;
}

.nav__toggle-lines::before,
.nav__toggle-lines::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
}

.nav__toggle-lines::before { top: 0; }
.nav__toggle-lines::after { bottom: 0; }

/* Overlay sits UNDER the fixed nav (z 100) so the toggle stays
   clickable; links are vertically centered below the nav bar.
   CLOSED IS THE DEFAULT on every viewport — the base state is
   invisible, untouchable, and clipped shut. JS only ever ADDS
   .is-open; it never has to set the closed state. (The previous
   `hidden` attribute was silently defeated by display:flex.) */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--porcelain);
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 1rem) var(--gutter) 12vh;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(0% 0% 100% 0%);
}

.mobile-menu.is-open {
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0% 0% 0% 0%);
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mobile-menu__nav a {
  width: max-content;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 12.5vw, 4.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
}

.mobile-menu__nav a.is-current::before {
  content: "\25C6";
  display: inline-block;
  margin-right: 0.3em;
  font-size: 0.35em;
  color: var(--cobalt);
  transform: translateY(-0.5em);
}

@media (max-width: 768px) {
  .nav__menu { display: none; }
  .nav__toggle { display: inline-flex; }
}


/* --------------------------------------------------------------
   32  MOBILE TYPOGRAPHY & EDITORIAL STACKING
   clamp() floors re-tuned so display type fills 480px width;
   tracking tightened where glyphs get close at small sizes.
   Deliberate stacking order + kept overlaps per section.
-------------------------------------------------------------- */
@media (max-width: 768px) {
  .hero__headline {
    font-size: clamp(3.5rem, 19vw, 7rem);
    letter-spacing: -0.035em;
  }

  .page-hero__title {
    font-size: clamp(2.75rem, 16vw, 6.5rem);
    letter-spacing: -0.035em;
  }

  .sec-title {
    font-size: clamp(2rem, 7.5vw, 3.5rem);
  }

  .cta__headline {
    font-size: clamp(2.25rem, 9.5vw, 4.5rem);
  }

  .footer__wordmark {
    font-size: clamp(3.25rem, 15.5vw, 6.5rem);
  }

  .sec-head--indent .sec-title {
    margin-left: 0;
  }

  /* Homepage stack panels: name → figure (tucked under the name's
     baseline — the kept overlap) → desc → list → link */
  .stack__name { order: -2; }
  .stack__figure {
    order: -1;
    margin-top: -0.75rem;
  }

  /* Hardware wall keeps one true overlap on mobile */
  .wall__item--i2 { margin-top: -2.5rem; }
}


/* --------------------------------------------------------------
   33  MOBILE SECTION MODES
   .sec-av--native / .sec-ai--seq are added by JS below 768px:
   the gallery becomes a scroll-snap carousel, the AI swap a
   plain vertical sequence. No pins on mobile.
-------------------------------------------------------------- */
.sec-av--native {
  min-height: auto;
  padding-top: calc(var(--nav-h) + 0.75rem);
  overflow: visible;
}

.sec-av--native .sec-head--av {
  position: static;
  margin-bottom: 1.5rem;
}

.sec-av--native .hscroll__track {
  width: auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1.25rem;
  scrollbar-width: none;
}

.sec-av--native .hscroll__track::-webkit-scrollbar { display: none; }

.sec-av--native .hslide {
  scroll-snap-align: center;
}

.sec-av--native .hscroll__progress {
  position: static;
  margin: 1rem var(--gutter) 0;
}

.sec-ai--seq {
  min-height: auto;
  padding-block: clamp(2rem, 6vh, 4rem);
}

.sec-ai--seq .ai-titles,
.sec-ai--seq .ai-descs,
.sec-ai--seq .sec-ai__right,
.sec-ai--seq .ai-counter {
  display: none; /* containers emptied into .ai-seq by JS */
}

.ai-seq {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 7vh, 4rem);
  margin-top: 2rem;
}

.ai-seq .ai-step__title,
.ai-seq .ai-step__desc {
  position: static;
  opacity: 1;
  width: auto;
}

.ai-seq .ai-step__desc { margin-top: 0.6rem; }

.ai-seq .ai-figure {
  position: relative;
  inset: auto;
  opacity: 1;
  width: 86%;
  aspect-ratio: 1 / 1;
  margin-top: 1.1rem;
  margin-left: auto; /* off-axis: figures hang right */
}

.ai-seq__num {
  color: var(--cobalt);
  margin-bottom: 0.4rem;
}


/* --------------------------------------------------------------
   34  REDUCED MOTION
   No smoother, pins, parallax, or wipes (handled in JS); the page
   arrives with a single 0.3s fade. Stacked AI steps must all be
   readable without the swap animation.
-------------------------------------------------------------- */
@keyframes rm-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: rm-fade 0.3s ease;
  }
}

html.no-motion .ai-step__title,
html.no-motion .ai-step__desc {
  position: static;
  opacity: 1;
  width: auto;
  margin-top: 0.8rem;
}

html.no-motion .ai-titles,
html.no-motion .ai-descs {
  min-height: 0;
}

html.no-motion .ai-figures {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

html.no-motion .ai-figure {
  position: relative;
  inset: auto;
  opacity: 1;
  aspect-ratio: 1 / 1;
}

html.no-motion .ai-counter { display: none; }

html.no-motion .sec-av,
html.no-motion .sec-ai {
  min-height: auto;
}

html.no-motion .sec-av .sec-head--av {
  position: static;
  margin-bottom: 1.5rem;
}

html.no-motion .sec-av {
  padding-top: calc(var(--nav-h) + 0.75rem);
}

html.no-motion .hscroll__track {
  width: auto;
  overflow-x: auto;
}


/* --------------------------------------------------------------
   35  404
-------------------------------------------------------------- */
.page-hero--404 {
  min-height: 92svh;
}

.page-hero__aside {
  grid-column: 8 / -1;
  grid-row: 2;
  align-self: end;
  padding-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  max-width: 30ch;
}

@media (max-width: 820px) {
  .page-hero__aside {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 2rem;
  }
}


/* --------------------------------------------------------------
   36  NAV SECTION DROPDOWNS  (desktop; built by initNavDropdowns)
   Flat editorial panels hanging from the frosted bar. Closed is
   the CSS default (visibility/pointer-events — never `hidden`,
   see gotcha #8); JS only adds .is-open.
-------------------------------------------------------------- */
.nav__menu {
  align-self: stretch;
  align-items: stretch;
}

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.nav__caret {
  padding: 0.3rem 0.1rem;
  background: none;
  border: 0;
  color: var(--ink-45);
  font-size: 0.55rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.25s ease, color 0.25s ease;
}

.nav__caret:hover {
  color: var(--cobalt);
}

.nav__caret[aria-expanded="true"] {
  transform: rotate(180deg);
  color: var(--cobalt);
}

.nav__dropdown {
  position: absolute;
  top: 100%; /* items stretch to bar height, so this is the bar's edge */
  left: -1.1rem;
  min-width: 16rem;
  padding: 0.55rem 0;
  /* Same frosted porcelain as the bar; sides + bottom hairline only —
     the panel reads as a continuation of the bar, not a card */
  background: rgba(250, 250, 247, 0.9);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(17, 17, 16, 0.12);
  border-top: 0;
  visibility: hidden;
  pointer-events: none;
}

@supports not (backdrop-filter: blur(1px)) {
  .nav__dropdown {
    background: #FAFAF7;
  }
}

.nav__dropdown.is-open {
  visibility: visible;
  pointer-events: auto;
}

/* Last item (CONTACT): right-align so the panel never overflows */
.nav__item:last-child .nav__dropdown {
  left: auto;
  right: -1.1rem;
}

.nav__dropdown a {
  display: block;
  padding: 0.55rem 1.1rem;
  white-space: nowrap;
}

.nav__dropdown a .link-underline {
  pointer-events: none; /* inner span only carries the underline */
}

.nav__dropdown .nav__dd-arrow {
  display: inline-block;
  margin-left: 0.5em;
  color: var(--cobalt);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav__dropdown a:hover .nav__dd-arrow {
  opacity: 1;
  transform: none;
}

/* Hover lands on the row <a>; the inner span carries the underline,
   so the draw must key off the parent's hover */
.nav__dropdown a:hover .link-underline::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__dropdown a.is-current::before {
  content: "\25C6";
  display: inline-block;
  margin-right: 0.5em;
  font-size: 0.7em;
  color: var(--cobalt);
  transform: translateY(-0.1em);
}

@media (max-width: 768px) {
  .nav__caret,
  .nav__dropdown {
    display: none; /* mobile uses the overlay's section sublinks */
  }
}

/* Mobile overlay: indented mono section links under each page link
   (built by initMobileMenu from the same NAV_SECTIONS data) */
.mobile-menu__sub {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0.3rem 0 1rem 1.5rem;
}

.mobile-menu__sub a {
  width: max-content;
  padding: 0.2rem 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
}


/* --------------------------------------------------------------
   37  SEC. 06 — SOFTWARE  (divisions; schematic line-work)
   A new animation language: self-drawing pen-plotter SVG +
   terminal type-on labels. No photography — thin ink node
   line-work, cobalt wires, tiny cobalt junction dots only.
   Shared stroke classes are used by the homepage panel too.
-------------------------------------------------------------- */
.soft-ink {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.soft-wire {
  fill: none;
  stroke: var(--cobalt);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.soft-dot {
  fill: var(--cobalt);
  stroke: none;
}

.sec-software {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: center;
  padding: calc(var(--nav-h) + 1.5rem) var(--gutter) clamp(3rem, 8vh, 5rem);
}

.soft-copy {
  grid-column: 1 / 6;
}

.soft-heading {
  margin-top: 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.soft-intro {
  margin-top: 0.9rem;
  max-width: 44ch;
  color: var(--ink-55);
}

.soft-groups {
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}

.soft-group {
  border-top: 1px solid var(--hairline);
  padding: 0.85rem 0;
}

.soft-group__idx {
  color: var(--cobalt);
}

.soft-group__name {
  margin-top: 0.15rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.soft-group__desc {
  margin-top: 0.25rem;
  font-size: 0.9rem;
  color: var(--ink-55);
  max-width: 46ch;
}

/* Schematic column: SVG scales inside a fixed-ratio frame so the
   %-positioned HTML labels track their nodes at every width */
.soft-schematic {
  grid-column: 6 / 13;
  position: relative;
  aspect-ratio: 760 / 620;
  align-self: center;
}

.soft-schematic svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.soft-node-label {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.625rem;
  color: var(--ink);
}

.soft-cursor {
  visibility: hidden; /* revealed per-label by the scrub (JS) */
  margin-left: 2px;
  color: var(--cobalt);
  animation: soft-blink 0.9s steps(1) infinite;
}

@keyframes soft-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Mobile / static mode (class added by JS below 768px): no pin,
   schematic pre-drawn, groups reveal on plain scroll */
.sec-software--static {
  min-height: auto;
}

/* — Homepage stack panel 06 · Software — schematic as the visual */
.stack__schematic {
  grid-column: 6 / 13;
  grid-row: 1 / 4;
  z-index: 1;
  align-self: center;
  opacity: 0.9;
}

.stack__schematic svg {
  width: 100%;
  height: auto;
}

.stack__panel--v6 .stack__index { bottom: -1rem; right: -1vw; }
.stack__panel--v6 .stack__name { grid-column: 1 / 8; grid-row: 1; }
.stack__panel--v6 .stack__link { grid-column: 11 / 13; grid-row: 1; justify-self: end; align-self: start; }
.stack__panel--v6 .stack__desc { grid-column: 1 / 5; grid-row: 2; margin-top: 2.5rem; }
.stack__panel--v6 .stack__list { grid-column: 1 / 5; grid-row: 3; align-self: end; }

@media (max-width: 820px) {
  .soft-copy,
  .soft-schematic {
    grid-column: 1 / -1;
  }

  .soft-schematic {
    margin-top: 2.5rem;
  }

  .stack__schematic {
    width: 88%;
    align-self: flex-end;
  }
}

/* ====================================================================
   SERVICES LEDGER ACCORDION REWORK
==================================================================== */
/* Remove E8E6E0 hover-flood and set up pointer for services page ledger rows */
.services-ledger .ledger__row {
  cursor: pointer;
  background: transparent;
  transition: border-color 0.3s ease;
  outline: none;
}

.services-ledger .ledger__row:hover {
  background: transparent; /* No flood on hover */
}

/* Row hover state: just the underline-draw on the service name + chevron nudges down 2px */
.services-ledger .ledger__row:hover .link-underline::after {
  transform: scaleX(1);
  transform-origin: left;
}

.services-ledger .ledger__row:hover .ledger__chev-wrapper {
  transform: translateY(2px);
}

/* Keyboard focus states: show underline and nudge chevron */
.services-ledger .ledger__row:focus-visible .link-underline::after {
  transform: scaleX(1);
  transform-origin: left;
}
.services-ledger .ledger__row:focus-visible .ledger__chev-wrapper {
  transform: translateY(2px);
}

/* Chevron layout and rotation */
.services-ledger .ledger__chev-wrapper {
  display: inline-block;
  transition: transform 0.2s ease;
}

.services-ledger .ledger__chev {
  display: inline-block;
  color: var(--ink-45);
  font-size: 1.15rem;
  line-height: 1;
  user-select: none;
}

/* Expanded panel base styles */
.services-ledger .ledger__panel {
  grid-column: 1 / -1; /* spans full width of ledger__row */
  overflow: hidden;
  height: 0;
  opacity: 0;
  visibility: hidden;
}

.services-ledger .ledger__panel-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  row-gap: 1.5rem;
  padding-top: 2.25rem;
  padding-bottom: 2.5rem;
  border-top: 1px solid var(--hairline);
  margin-top: 1.25rem;
}

/* Left ~7 cols: a 2-3 sentence description in body type */
.services-ledger .ledger__panel-desc {
  grid-column: 1 / 8;
  grid-row: 1 / 3;
  font-family: var(--font-body);
  font-size: clamp(0.925rem, 1.3vw, 1.05rem);
  line-height: 1.6;
  color: var(--ink-85);
}

.services-ledger .ledger__panel-desc p {
  position: relative;
  padding-left: 1.25rem;
  max-width: 60ch;
}

.services-ledger .ledger__panel-desc p::before {
  content: "\25C6"; /* using the matching diamond brand symbol as a bullet for design consistency */
  position: absolute;
  left: 0;
  color: var(--cobalt);
  font-size: 0.65em;
  line-height: 1;
  top: 0.5em;
}

.services-ledger .ledger__panel-desc p:not(:last-child) {
  margin-bottom: 1.25rem;
}

/* Right ~4 cols offset: SCOPE in small mono, then 3-5 mono line items */
.services-ledger .ledger__panel-scope {
  grid-column: 9 / 13;
  grid-row: 1;
  display: flex;
  flex-direction: column;
}

.services-ledger .ledger__panel-scope-head {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ink-45);
  margin-bottom: 0.85rem;
  letter-spacing: 0.08em;
}

.services-ledger .ledger__panel-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.services-ledger .ledger__panel-items li {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-85);
  line-height: 1.4;
  position: relative;
  padding-left: 0;
}

/* Bottom-right of panel: a small cobalt "START A PROJECT →" link */
.services-ledger .ledger__panel-cta {
  grid-column: 9 / 13;
  grid-row: 2;
  align-self: end;
  justify-self: start;
  margin-top: 1rem;
  color: var(--cobalt);
  font-family: var(--font-mono);
  font-size: 0.77rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: transform 0.3s ease, color 0.3s ease;
  line-height: 1.2;
}

.services-ledger .ledger__panel-cta:hover {
  transform: translateX(4px);
  color: var(--ink);
}

/* Mobile / Responsive overrides */
@media (max-width: 767px) {
  .services-ledger .ledger__row {
    grid-template-columns: 2.75rem 1fr auto;
    row-gap: 0;
    padding: 1.15rem var(--gutter);
  }

  .services-ledger .ledger__panel-grid {
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.85rem;
    margin-top: 1rem;
  }

  .services-ledger .ledger__panel-desc {
    grid-column: 1 / -1;
    grid-row: auto;
    font-size: 0.9rem;
  }

  .services-ledger .ledger__panel-scope {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .services-ledger .ledger__panel-cta {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: 1.5rem;
  }
}