/* ==========================================================================
   BDS CORP — design system
   Near-black ground, cool-steel photography, lime used surgically.
   Display: Archivo (tight) · Body: Inter · Data: JetBrains Mono
   ========================================================================== */

:root {
  /* ground */
  --void:      #04060c;
  --ground:    #070a12;
  --surface:   #0b0f19;
  --surface-2: #101521;
  --elev:      #141a27;

  /* hairlines */
  --hair:   rgba(255, 255, 255, .065);
  --hair-2: rgba(255, 255, 255, .11);
  --hair-3: rgba(255, 255, 255, .18);

  /* ink */
  --ink:   #f4f6fa;
  --ink-2: #a6aebe;
  --ink-3: #6a7282;

  /* accent */
  --lime:      #a8d93f;
  --lime-hi:   #d2ff5e;
  --lime-dim:  rgba(168, 217, 63, .13);
  --lime-line: rgba(168, 217, 63, .30);
  --lime-glow: rgba(168, 217, 63, .22);
  --on-lime:   #060911;

  /* type */
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* metrics */
  --shell: 1300px;
  --r: 4px;
  --r-lg: 8px;

  /* motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-2);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

/* Every photo is wrapped in <picture> to serve WebP. `display: contents` drops
   the wrapper's own box so the <img> stays a direct layout child of whatever
   contained it before -- without this, rules like `.room-shot img { height:
   100% }` would resolve against the <picture> instead of the sized parent and
   collapse to nothing. */
picture { display: contents; }

::selection { background: var(--lime); color: var(--on-lime); }

/* iOS paints a translucent grey box over any tapped link. On a near-black
   layout that reads as a rendering fault rather than feedback. */
a, button, [role="button"], .sc-step, summary {
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--lime); text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.032em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 32px; }
@media (max-width: 700px) { .shell { padding: 0 20px; } }

/* ==========================================================================
   PRIMITIVES
   ========================================================================== */

.kicker {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--lime);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.kicker::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--lime);
  opacity: .55;
  flex: none;
}
.kicker--bare::before { display: none; }
.kicker--dim { color: var(--ink-3); }
.kicker--dim::before { background: var(--hair-3); opacity: 1; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .005em;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  overflow: hidden;
  transition: color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
  white-space: nowrap;
}
.btn svg { flex: none; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--solid { background: var(--lime); color: var(--on-lime); }
.btn--solid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lime-hi);
  transform: translateY(101%);
  transition: transform .45s var(--ease);
  z-index: 0;
}
.btn--solid:hover::after { transform: translateY(0); }
.btn--solid > * { position: relative; z-index: 1; }

.btn--line { border-color: var(--hair-2); color: var(--ink); }
.btn--line:hover { border-color: var(--lime); color: var(--lime); }

.btn--sm { padding: 10px 18px; font-size: .8rem; }

/* section rhythm.
   `contain: layout paint` scopes each band's layout and painting to itself, so
   scrolling one section can't force the browser to re-lay-out or repaint the
   rest of a very long page. This is most of why the page scrolls smoothly. */
.sec { position: relative; padding: 130px 0; contain: layout paint; }
.sec--tight { padding: 88px 0; }
.sec--flush { padding-bottom: 0; }
.sec--void { background: var(--void); }
.sec--line { border-top: 1px solid var(--hair); }
@media (max-width: 800px) { .sec { padding: 84px 0; } }

.sec-head { max-width: 780px; }
.sec-head h2 {
  font-size: clamp(2.15rem, 4.4vw, 3.5rem);
  margin: 26px 0 0;
}
.sec-head p { margin-top: 22px; font-size: 1.08rem; color: var(--ink-2); }
.sec-head--split {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  max-width: none;
}
.sec-head--split > div { max-width: 700px; }
.sec-head--split > .btn { margin-left: auto; flex: none; }
@media (max-width: 760px) {
  .sec-head--split { flex-direction: column; align-items: flex-start; }
  .sec-head--split > .btn { margin-left: 0; }
}

/* engineering grid ground */
.grid-ground::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 72px 72px;
}
.grid-ground > * { position: relative; z-index: 1; }

/* ==========================================================================
   SCROLL PROGRESS + HEADER
   ========================================================================== */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--lime), var(--lime-hi));
  z-index: 200;
  will-change: transform;
}

.hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.hdr.stuck {
  background: rgba(7, 10, 18, .78);
  border-bottom-color: var(--hair);
}

/* The blur is desktop-only, and this is the single biggest scroll cost on a
   phone: a backdrop-filter on a full-width position:fixed bar forces the
   compositor to re-sample and re-blur the strip of page behind it on EVERY
   scrolled frame, which is exactly the budget a phone does not have. Desktop
   GPUs absorb it, so desktop keeps the frosted glass verbatim; a coarse
   pointer gets a near-opaque bar that costs one cheap paint instead. */
@media (hover: hover) and (pointer: fine) {
  .hdr.stuck {
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
  }
}
@media (hover: none), (pointer: coarse) {
  .hdr.stuck { background: rgba(7, 10, 18, .94); }
}
.hdr-in { display: flex; align-items: center; gap: 28px; height: 78px; }

.brand { display: flex; align-items: center; gap: 14px; flex: none; }
.brand img { height: 30px; width: auto; }
.brand .bar { width: 1px; height: 20px; background: var(--hair-3); }
.brand .tag {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.4;
  max-width: 90px;
}

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a {
  position: relative;
  color: var(--ink-2);
  font-size: .86rem;
  font-weight: 500;
  padding: 9px 14px;
  transition: color .28s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 1px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .38s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }

.burger {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--hair-2);
  border-radius: var(--r);
  /* 44x44 is the minimum comfortable touch target on both platforms. The old
     box computed to 42x34.5 and was genuinely awkward to hit. */
  min-width: 44px;
  min-height: 44px;
  padding: 10px 12px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
}
.burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); }
.burger span + span { margin-top: 4px; }

@media (max-width: 1020px) {
  .burger { display: flex; }
  .hdr .btn--solid { display: none; }
  .brand .tag, .brand .bar { display: none; }
  .nav {
    position: fixed;
    top: 78px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--void);
    border-bottom: 1px solid var(--hair);
    padding: 12px 20px 24px;
    display: none;
    /* The menu is taller than a landscape phone, and previously the overflow
       was simply unreachable -- the last item could not be tapped at all. */
    max-height: calc(100dvh - 78px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.open { display: flex; }
  .nav a {
    padding: 14px 4px;
    font-size: 1rem;
    border-bottom: 1px solid var(--hair);
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .nav a::after { display: none; }

  /* The header sits above the open menu but only paints a background once
     .stuck lands, so opening the menu at the top of the page left the brand
     and burger floating over the page content behind them. */
  .hdr.menu-open {
    background: var(--void);
    border-bottom-color: var(--hair);
  }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 126px 0 0;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: -8% 0 0 0;
  z-index: -2;
  will-change: transform;
  transform: translateZ(0);   /* own layer, so the parallax never repaints the hero */
}
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1100px 620px at 12% 18%, rgba(168, 217, 63, .10), transparent 62%),
    linear-gradient(180deg, rgba(4, 6, 12, .82) 0%, rgba(4, 6, 12, .55) 34%, rgba(4, 6, 12, .93) 82%, var(--ground) 100%);
}
.hero-in { width: 100%; padding-bottom: 0; }

.hero h1 {
  font-size: clamp(2.8rem, 6.6vw, 5.9rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .97;
  margin: 26px 0 0;
  max-width: 17ch;
}
.hero h1 .lime { color: var(--lime); }
.hero-sub {
  margin-top: 26px;
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.68;
  color: var(--ink-2);
  max-width: 56ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* stat rail pinned to the bottom of the hero */
.rail {
  margin-top: 48px;
  border-top: 1px solid var(--hair-2);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.rail-item { padding: 30px 28px 34px; border-right: 1px solid var(--hair); }
.rail-item:first-child { padding-left: 0; }
.rail-item:last-child { border-right: 0; }
.rail-item b {
  display: block;
  font-family: var(--display);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -.035em;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rail-item span {
  display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .rail { grid-template-columns: 1fr 1fr; }
  .rail-item:nth-child(2) { border-right: 0; }
  .rail-item:nth-child(3) { padding-left: 0; border-top: 1px solid var(--hair); }
  .rail-item:nth-child(4) { border-top: 1px solid var(--hair); }
}
@media (max-width: 900px) { .hero { min-height: auto; padding: 128px 0 0; } }

/* ==========================================================================
   BRAND PLATES  (real company logos, native brand colours)
   ========================================================================== */

/* Each logo sits on a tile filled with that company's OWN brand colour — the
   source logos have their brand background baked in, so matching the tile makes
   them read as clean marks instead of pasted rectangles. */
.plates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.plates--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .plates, .plates--3 { grid-template-columns: 1fr 1fr; gap: 18px; } }
@media (max-width: 520px) { .plates, .plates--3 { grid-template-columns: 1fr; } }

.plate { display: block; }
.plate-tile {
  display: grid;
  place-items: center;
  background: var(--brand, var(--elev));
  border-radius: var(--r);
  aspect-ratio: 16 / 9;
  padding: 26px 24px;
  overflow: hidden;
  position: relative;
  filter: grayscale(1);
  transition: filter .6s var(--ease), transform .55s var(--ease), box-shadow .55s var(--ease);
}
/* A solid veil sits over the tile at rest and slides DOWN out of it on hover,
   wiping the company's own colour in from the top, while the tile desaturates
   back to full colour underneath.
   NOTE: the veil deliberately does NOT use backdrop-filter. Backdrop-filter
   forces the compositor to re-read and re-filter everything behind the element
   on every frame, which visibly janked scrolling with three of these on screen.
   A plain translated overlay plus a cheap filter on the tile costs almost
   nothing and reads the same. */
.plate-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: #0b0f19;
  opacity: .82;
  transform: translateY(0);
  transition: transform .62s var(--ease);
}
.plate:hover .plate-tile,
.plate:focus-visible .plate-tile {
  filter: none;
  transform: translateY(-6px);
  box-shadow: 0 30px 64px -28px rgba(0, 0, 0, .95);
}
.plate:hover .plate-tile::after,
.plate:focus-visible .plate-tile::after { transform: translateY(100%); }

/* :hover never fires on a touch screen, so on a phone every plate sat at its
   REST state forever -- grayscale(1) under an 82% black veil -- which is why
   the logos read as blank dark rectangles. The wipe is kept exactly as it is
   on desktop; on a coarse pointer it plays when the plate scrolls into view
   instead of on hover. The pre-wipe state is gated on .js so that if the
   reveal never runs the tile is simply shown rather than blacked out. */
@media (hover: none), (pointer: coarse) {
  .plate-tile { filter: none; }
  .plate-tile::after { transform: translateY(100%); }
  .js .plate[data-reveal]:not(.in) .plate-tile { filter: grayscale(1); }
  .js .plate[data-reveal]:not(.in) .plate-tile::after { transform: translateY(0); }
}
/* the source logos have very different aspect ratios (Publisive is 3.2:1, the
   Badass B is square) — size each so they read at the same optical weight */
.plate-tile img {
  max-height: var(--lh, 58px);
  width: auto;
  transition: transform .6s var(--ease);
}
.plate:hover .plate-tile img { transform: scale(1.05); }

.plate-meta { display: block; margin-top: 16px; }
.plate-meta b {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  transition: color .3s var(--ease);
}
.plate:hover .plate-meta b { color: var(--lime); }
.plate-meta i {
  display: block;
  font-style: normal;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ==========================================================================
   DIVISION PANELS
   ========================================================================== */

.divs { display: grid; gap: 1px; background: var(--hair); border-block: 1px solid var(--hair); }

.div-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ground);
  min-height: 520px;
}
.div-panel:nth-child(even) .div-media { order: 2; }
@media (max-width: 940px) {
  .div-panel { grid-template-columns: 1fr; }
  .div-panel:nth-child(even) .div-media { order: 0; }
}

.div-media { position: relative; overflow: hidden; min-height: 340px; background: var(--void); }
.div-media img.ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .42;
  transition: transform 1.4s var(--ease), opacity .7s var(--ease);
}
.div-panel:hover .div-media img.ph { transform: scale(1.06); opacity: .58; }
.div-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(4, 6, 12, .72), rgba(4, 6, 12, .28));
}
.div-logo {
  position: absolute;
  z-index: 2;
  left: 46px;
  bottom: 46px;
  background: var(--brand, #fff);
  border-radius: var(--r);
  padding: 18px 24px;
  display: grid;
  place-items: center;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9);
}
.div-logo img { max-height: 42px; width: auto; }
@media (max-width: 700px) { .div-logo { left: 22px; bottom: 22px; padding: 14px 18px; } }

.div-body { padding: 62px 58px; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 700px) { .div-body { padding: 42px 22px; } }
.div-body h3 {
  font-size: clamp(1.75rem, 2.9vw, 2.4rem);
  margin-top: 20px;
}
.div-role {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.div-body > p { margin-top: 22px; font-size: 1.01rem; max-width: 52ch; }

.metrics {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 190px));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  width: fit-content;
}
.metric { background: var(--surface); padding: 15px 20px; }
.metric b {
  display: block;
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.02em;
}
.metric span {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.div-links { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.link-out {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .89rem;
  font-weight: 600;
  color: var(--lime);
  border-bottom: 1px solid var(--lime-line);
  padding-bottom: 2px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.link-out:hover { color: var(--lime-hi); border-color: var(--lime-hi); }
.link-out svg { transition: transform .4s var(--ease); }
.link-out:hover svg { transform: translate(3px, -3px); }
.link-quiet { font-size: .89rem; color: var(--ink-2); border-bottom: 1px solid var(--hair-2); padding-bottom: 2px; }
.link-quiet:hover { color: var(--ink); border-color: var(--ink-3); }

/* ==========================================================================
   PLATFORM SHOWCASE  (sticky media, scroll-linked steps)
   ========================================================================== */

.showcase { display: grid; grid-template-columns: 1.32fr .68fr; gap: 56px; margin-top: 74px; align-items: start; }
@media (max-width: 1000px) { .showcase { grid-template-columns: 1fr; gap: 34px; } }

.sc-media { position: sticky; top: 120px; }
@media (max-width: 1000px) { .sc-media { position: relative; top: 0; } }

/* browser-chrome frame */
.frame {
  position: relative;
  border: 1px solid var(--hair-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 50px 100px -40px rgba(0, 0, 0, .95);
}
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.frame-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--hair);
  background: var(--surface-2);
}
.frame-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--hair-3); flex: none; }
.frame-bar .url {
  margin-left: 10px;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .05em;
  color: var(--ink-3);
  background: var(--void);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 4px 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.frame-stage { position: relative; aspect-ratio: 16 / 10; background: var(--void); }
.frame-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity .6s var(--ease), transform .9s var(--ease);
}
.frame-stage img.on { opacity: 1; transform: scale(1); }
.frame-note {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sc-steps { display: grid; }
.sc-step {
  padding: 26px 0 26px 30px;
  border-left: 1px solid var(--hair);
  position: relative;
  cursor: pointer;
  transition: border-color .4s var(--ease);
}
.sc-step::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--lime);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .5s var(--ease);
}
.sc-step.on::before { transform: scaleY(1); }
.sc-step .no {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  color: var(--ink-3);
  transition: color .4s var(--ease);
}
.sc-step.on .no { color: var(--lime); }
.sc-step h3 {
  font-size: 1.32rem;
  margin-top: 10px;
  color: var(--ink-3);
  transition: color .4s var(--ease);
}
.sc-step.on h3 { color: var(--ink); }
.sc-step p {
  margin-top: 10px;
  font-size: .95rem;
  color: var(--ink-3);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .55s var(--ease), opacity .45s var(--ease), margin .4s var(--ease);
}
.sc-step.on p { max-height: 160px; opacity: 1; color: var(--ink-2); }
.sc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s var(--ease), opacity .45s var(--ease); }
.sc-step.on .sc-tags { max-height: 80px; opacity: 1; }

/* Below 1000px the sticky media pane is already switched off, so the steps are
   just a list you scroll past -- but only the "on" one showed its description,
   and which one that was got swapped by a scroll-linked observer. That meant
   three of the four platforms were unreadable on a phone, and every swap
   animated max-height and margin (layout properties) mid-scroll. Open them all
   and stop animating geometry. */
@media (max-width: 1000px) {
  .sc-step p,
  .sc-step .sc-tags {
    max-height: none;
    opacity: 1;
    overflow: visible;
    transition: none;
  }
  .sc-step p { color: var(--ink-2); }
}
.tag {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  padding: 4px 10px;
}

/* ==========================================================================
   NUMBERS
   ========================================================================== */

.nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
@media (max-width: 860px) { .nums { grid-template-columns: 1fr 1fr; } }
.numb { background: var(--void); padding: 42px 30px 46px; }
.numb b {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -.04em;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.numb span { display: block; margin-top: 16px; font-size: .9rem; color: var(--ink-3); }

/* ---------- capability grid (own class — never override .nums inline, an
   inline grid-template-columns would beat the responsive media queries) ------ */
.caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}
@media (max-width: 900px) { .caps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .caps { grid-template-columns: 1fr; } }
.cap { background: var(--void); padding: 32px 28px 34px; transition: background .4s var(--ease); }
.cap:hover { background: var(--surface); }
.cap b {
  display: block;
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -.022em;
  color: var(--ink);
}
.cap span { display: block; margin-top: 12px; font-size: .91rem; color: var(--ink-3); }

/* ==========================================================================
   ROOMS  (real photographs of the head office, each with a caption)
   ========================================================================== */

.rooms { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 18px; margin-top: 56px; }
@media (max-width: 1000px) { .rooms { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .rooms { grid-template-columns: 1fr; } }

.room { margin: 0; display: flex; flex-direction: column; }
.room-shot {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: var(--void);
  aspect-ratio: 4 / 3;
}
.rooms .room:first-child .room-shot { aspect-ratio: 16 / 11; }
.room-shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.3s var(--ease), opacity .6s var(--ease);
  opacity: .92;
}
.room:hover .room-shot img { transform: scale(1.045); opacity: 1; }
.room-shot::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(4, 6, 12, .55) 100%);
}
.room figcaption { padding: 18px 2px 0; }
.room figcaption b {
  display: block;
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}
.room figcaption span { display: block; margin-top: 7px; font-size: .89rem; color: var(--ink-3); }

/* a single wide photograph used as a section rule */
.plate-wide {
  position: relative;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--void);
}
.plate-wide img { width: 100%; height: auto; display: block; opacity: .9; }
.plate-wide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 28px;
  background: linear-gradient(180deg, transparent, rgba(4, 6, 12, .92));
  font-size: .92rem; color: var(--ink-2);
}
.plate-wide figcaption b { display: block; font-family: var(--display); font-size: 1.15rem; color: var(--ink); margin-bottom: 5px; }

/* ==========================================================================
   JOURNAL
   ========================================================================== */

.jr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin-top: 60px; }
@media (max-width: 940px) { .jr-grid { grid-template-columns: 1fr; } }
.jr {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  padding: 34px 30px 30px;
  overflow: hidden;
  transition: background .45s var(--ease);
}
.jr:hover { background: var(--surface-2); }
.jr .co { font-family: var(--mono); font-size: .58rem; letter-spacing: .17em; text-transform: uppercase; color: var(--lime); }
.jr .dt { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; color: var(--ink-3); margin-left: auto; }
.jr .row { display: flex; align-items: center; gap: 12px; }
.jr h3 { font-size: 1.2rem; margin-top: 20px; line-height: 1.24; transition: color .35s var(--ease); }
.jr:hover h3 { color: var(--lime); }
.jr p { margin-top: 14px; font-size: .93rem; color: var(--ink-3); flex: 1; }
.jr .more { margin-top: 24px; font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.jr:hover .more { color: var(--lime); }

/* ==========================================================================
   SPLIT CTA
   ========================================================================== */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
@media (max-width: 840px) { .split { grid-template-columns: 1fr; } }
.split > div { background: var(--surface); padding: 52px 46px 54px; }
@media (max-width: 700px) { .split > div { padding: 38px 24px; } }
.split h3 { font-size: 1.7rem; margin-top: 22px; }
.split p { margin-top: 16px; font-size: 1rem; }
.split .btn { margin-top: 30px; }
.split address { font-style: normal; margin-top: 16px; font-size: 1rem; line-height: 1.8; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.ftr { background: var(--void); border-top: 1px solid var(--hair); padding: 84px 0 34px; }
.ftr-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; }
@media (max-width: 900px) { .ftr-grid { grid-template-columns: 1fr 1fr; gap: 38px; } }
@media (max-width: 560px) { .ftr-grid { grid-template-columns: 1fr; } }
.ftr-grid img { height: 32px; width: auto; margin-bottom: 20px; }
.ftr-blurb { font-size: .92rem; color: var(--ink-3); max-width: 310px; }
.ftr h4 { font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 18px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ftr ul a { color: var(--ink-2); font-size: .91rem; transition: color .28s var(--ease); }
.ftr ul a:hover { color: var(--lime); }
.ftr address { font-style: normal; font-size: .91rem; color: var(--ink-2); line-height: 1.85; }
.ftr address a { color: var(--ink-2); }
.ftr address a:hover { color: var(--lime); }
.ftr-btm {
  margin-top: 64px;
  padding-top: 26px;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--ink-3);
}
.ftr-btm .soc { display: flex; gap: 22px; }
.ftr-btm .soc a { color: var(--ink-3); }
.ftr-btm .soc a:hover { color: var(--lime); }

/* ==========================================================================
   INNER PAGES
   ========================================================================== */

.phero { position: relative; padding: 172px 0 76px; overflow: hidden; border-bottom: 1px solid var(--hair); }
.phero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(900px 460px at 8% 20%, rgba(168, 217, 63, .09), transparent 64%);
}
.phero .shell { position: relative; z-index: 1; }
.phero h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); font-weight: 700; letter-spacing: -.042em; margin-top: 26px; max-width: 20ch; }
.phero p { margin-top: 24px; font-size: 1.1rem; max-width: 62ch; }
.crumb { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--lime); }

.prose { max-width: 74ch; font-size: 1.07rem; line-height: 1.8; color: var(--ink-2); }
.prose > * + * { margin-top: 24px; }
.prose h2 { font-size: 1.85rem; margin-top: 56px; }
.prose h3 { font-size: 1.32rem; margin-top: 42px; }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 12px; }
.prose li::marker { color: var(--lime); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { border-bottom: 1px solid var(--lime-line); transition: border-color .3s var(--ease), color .3s var(--ease); }
.prose a:hover { color: var(--lime-hi); border-color: var(--lime-hi); }
.prose blockquote {
  margin: 40px 0;
  padding: 6px 0 6px 28px;
  border-left: 2px solid var(--lime);
  font-family: var(--display);
  font-size: 1.42rem;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.02em;
  color: var(--ink);
}
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--hair); }
.prose th { font-family: var(--mono); font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: var(--lime); font-weight: 500; }
.prose figure { margin: 40px 0; }
.prose figure img { border: 1px solid var(--hair); border-radius: var(--r-lg); }
.prose figcaption { margin-top: 12px; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

.note {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-left: 2px solid var(--lime);
  padding: 24px 26px;
  font-size: .98rem;
}
.note .k { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lime); margin-bottom: 10px; }

/* ==========================================================================
   REVEAL / MOTION
   ========================================================================== */

/* Gated on .js, which an inline script in every <head> sets before the first
   paint. Without that gate the whole page -- including everything above the
   fold -- ships at opacity:0 and depends on bds.js loading to become visible
   at all; one failed request and the site renders blank. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].in { opacity: 1; transform: none; }

/* headline word mask — `.words` is a state hook only; it must NOT alter the
   display of the heading it is applied to (that collapses the block). */
.word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease);
  transition-delay: var(--d, 0ms);
}
.words.in .word > i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .word > i { transform: none; }
}

/* ==========================================================================
   MOBILE
   --------------------------------------------------------------------------
   Everything below is scoped to a phone-sized viewport or to a coarse pointer,
   so the desktop layout above is untouched. It exists because the desktop
   rules degrade in specific, measured ways on a small screen -- each block
   says which.
   ========================================================================== */

/* Display type was frozen on phones. Every clamp() above uses a bare `Nvw`
   middle term, and at 390px each one evaluates below its own floor -- so the
   floor is what renders, and a 320px phone and a 760px tablet got identical
   type. The hero H1 came out at 44.8px on a 390px screen, about eight
   characters to a line. These re-clamps add a rem base so the vw term actually
   engages, and each one's ceiling equals the old floor, so at the 760px
   breakpoint the size is exactly what it was and nothing above it moves. */
@media (max-width: 760px) {
  .hero h1     { font-size: clamp(2.05rem, 1.10rem + 4.6vw, 2.8rem); }
  .phero h1    { font-size: clamp(1.95rem, 1.15rem + 3.9vw, 2.4rem); }
  .sec-head h2 { font-size: clamp(1.75rem, 1.10rem + 3.2vw, 2.15rem); }
  .div-body h3 { font-size: clamp(1.45rem, 1.00rem + 2.2vw, 1.75rem); }
  .numb b      { font-size: clamp(1.95rem, 1.20rem + 3.6vw, 2.4rem); }
  .rail-item b { font-size: clamp(1.60rem, 1.05rem + 2.7vw, 2rem); }

  /* 130px top and bottom is a desktop rhythm. On a phone it is a third of the
     viewport spent on nothing between every pair of sections. */
  .sec        { padding: 72px 0; }
  .sec--tight { padding: 54px 0; }
  .sec--flush { padding-bottom: 0; }

  /* 172px of it sat above the title on 13 of the 16 pages -- more than half a
     phone screen before the heading. */
  .phero { padding: 116px 0 52px; }
}

/* The mono micro-labels are set in rem fractions that land at 9.0-9.9px on a
   phone. Several of them carry real content (the URL pill in the platform
   frame, the journal dates), not just decoration. */
@media (max-width: 760px) {
  .tag, .ftr h4, .sec-head .kicker, .brand .tag, .frame-bar .url,
  .prose th, .stepdot, .jr .co, .jr .dt { font-size: .68rem; }
}

/* Touch targets. Footer and address links were 17.5-20.7px tall with the rows
   only 11px apart, which on a phone is a coin toss as to which one opens. */
@media (hover: none), (pointer: coarse) {
  .ftr ul { gap: 4px; }
  .ftr ul a,
  .ftr address a,
  .ftr-btm .soc a,
  .ftr-btm a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .ftr-btm .soc { gap: 14px; }
}

/* Two columns of stat blocks at 320px leaves each one ~150px wide, and the
   numbers wrap unevenly against their labels. */
@media (max-width: 520px) {
  .nums { grid-template-columns: 1fr; }
  .numb { padding: 30px 22px 32px; }
}

/* Blog comparison tables are three columns of ~116px on a phone: every cell
   wraps to a dozen lines. Let the table keep its real width and scroll inside
   its own box rather than crushing the page. */
@media (max-width: 760px) {
  .prose .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin: 0 -20px;
    padding: 0 20px;
  }
  .prose .table-scroll table { min-width: 520px; }
  .prose th, .prose td { padding: 11px 12px; }
}

/* Standalone links were 20-30px tall and packed close together. Inline links
   inside a sentence are deliberately left alone -- WCAG exempts them, and
   forcing a 44px box onto a link mid-paragraph wrecks the line spacing around
   it. This only touches links that stand on their own. */
@media (hover: none), (pointer: coarse) {
  .btn { min-height: 44px; }
  .div-links a,
  .brand,
  address a,
  .crumb a,
  .jr .more,
  .link-quiet,
  .link-out {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .div-links { gap: 4px 22px; flex-wrap: wrap; }
}