/* ============================================================
   Shared layout + responsive rules.

   The formula: FLUID CHROME, FIXED-ASPECT SCALED STAGES.

   Two zones with different rules.

   Zone 1 — chrome (rail, header, headings, points, grid, gutters).
   Ordinary responsive layout. Reflows and stretches freely, because
   stretching text and cards costs nothing.

   Zone 2 — the scenes (.stage). Every animated tile interior is
   absolutely positioned on a fixed pixel artboard, so it CANNOT
   reflow — the desk would separate from the person standing at it.
   Each stage instead keeps its native size and takes a single
   UNIFORM transform: scale(k) — same k on both axes, aspect locked.
   Nothing is ever stretched or squashed, so every hand-placed offset
   and every walk distance stays exactly as authored.

   k is set per-stage by the ResizeObserver in site.js (CSS can't
   divide a length by a length portably yet), and is CAPPED so that
   on a wide monitor the art stops growing and the extra width goes
   to gutters instead of inflating the sprites.
   ============================================================ */

:root {
  --ink: #0B0F14;
  --panel: #101720;
  --raised: #121922;
  --line: #1E2B3A;
  --line2: #22303F;
  --hair: #1A2430;
  --text: #F4F1EA;
  --body: #A9B8C7;
  --muted: #7C8FA3;
  --muted2: #55697D;

  /* the designed content column: 1440 - 112 padding - 76 rail - 24 gap */
  --design-col: 1228px;
  --maxw: 1600px;
  --pad: clamp(16px, 3.6vw, 56px);
  --gap: clamp(10px, 1.4vw, 13px);
}

html { background: var(--ink); }
body { margin: 0; background: var(--ink); }
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; }

/* ---------- page shell ---------- */
.page {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100vh;
  padding: clamp(20px, 2.6vw, 40px) var(--pad);
  background: var(--ink);
  display: flex;
  gap: clamp(14px, 1.8vw, 24px);
  /* clip, not hidden: contains the handoff walk without turning the page
     into a scroll container (overflow-x:hidden would force overflow-y:auto
     and break the sticky floor). */
  overflow-x: clip;
}

/* the content column beside the rail. min-width:0 is load-bearing —
   without it the tile grid refuses to shrink below its content. */
.col {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- the left spine ---------- */
.rail {
  width: 76px;
  flex: 0 0 76px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

/* ---------- header / stat rows ---------- */
.headrow { flex-wrap: wrap; gap: 16px; }
.stats { flex-wrap: wrap; }
.page h1 { font-size: clamp(30px, 3.4vw, 42px); }

/* ---------- tile grids ---------- */
.tilegrid { display: grid; gap: var(--gap); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* oracle's centred bottom row of two */
.tilerow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 381px));
  justify-content: center;
  gap: var(--gap);
}

/* ---------- tile + stage: the no-stretch rule ---------- */
.tile {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  /* aspect locked to the designed artboard, so the tile's height always
     tracks its width and the scene inside never distorts */
  aspect-ratio: var(--sw) / var(--sh);
  /* Cap the TILE at the same 1.3x the stage is capped at, rather than letting
     it keep growing and leaving the scene letterboxed inside it. The grid
     column keeps the extra width as gutter and the tile centres in it. */
  max-width: calc(var(--sw) * 1.3px);
  justify-self: center;
  width: 100%;
}

.stage {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--sw) * 1px);
  height: calc(var(--sh) * 1px);
  transform-origin: 0 0;
  /* --kx centres the art once --k has hit its cap on wide screens.
     The trailing translateY pushes the art down by the caption height
     (--cap, in stage px): the caption takes the top strip, and the empty
     floor strip the art was authored above slides out past the tile's
     bottom edge and is clipped. Every scene offset stays as authored. */
  transform: translateX(var(--kx, 0px)) scale(var(--k, 1)) translateY(calc(var(--cap, 0) * 1px));
}

/* ---------- tile caption: a strip pinned to the top of the tile ----------
   Lives inside the stage so it scales with the art; top is negative to
   cancel the stage's translateY and land flush with the tile's top edge. */
.cap {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--cap, 0) * -1px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: .5px;
  color: var(--text);
}

/* ---------- points rows ---------- */
.prow {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent, #F2A93B);
  border-radius: 4px;
  padding: 11px 18px;
  min-height: 44px;
}
.prow > span:last-child { line-height: 1.4; }

/* ---------- the floor ---------- */
.floor {
  margin-top: auto;
  position: relative;
  height: 104px;
  border-top: 1px solid var(--hair);
}
.exits {
  position: absolute;
  right: 0;
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ============================================================
   BREAKPOINT LADDER
   <600 phone · 600-899 large phone/small tablet · 900-1199 tablet
   1200-1727 native desktop · >=1728 capped wide
   ============================================================ */

/* --- tablet and down: 3-col becomes 2-col, and the wide g2 scenes go
   single-column. A g2 tile is authored at 608px; held two-up at 1024 it
   scales to 0.69 and the 6px captions stop being readable. --- */
@media (max-width: 1279px) {
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g2 { grid-template-columns: minmax(0, 1fr); }
}

/* --- below 900: rail goes horizontal, floor art is retired ---
   The walk needs real room to read. Rather than squash it, the floor
   becomes a plain button row and the handoff cuts straight to the next
   agent (site.js checks the same 900px threshold). */
@media (max-width: 899px) {
  .page { flex-direction: column; gap: 14px; }

  .rail {
    width: 100%;
    flex: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .rail > a { flex: 0 0 auto; }
  .rail > div { display: none; } /* the vertical "AGENTS" caption */

  .floor {
    height: auto;
    padding-top: 18px;
    margin-top: 28px;
  }
  .floor .walker,
  .floor .incoming,
  .floor .paper { display: none; }

  .exits {
    position: static;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

}

/* --- one tile per row once two-up would drop below ~0.8 scale --- */
@media (max-width: 767px) {
  .g3 { grid-template-columns: minmax(0, 1fr); }
}

/* --- phone --- */
@media (max-width: 599px) {
  .tilerow { grid-template-columns: minmax(0, 1fr); }
  .headrow { align-items: flex-start; }
  .stats { gap: 18px; }
  .prow { align-items: flex-start; padding: 12px 14px; }
}

/* ============================================================
   NAV PAGES (index / product / contact)
   No rail and no tile stages — these are ordinary two-column
   layouts that simply need to wrap.
   ============================================================ */
.pagecol { flex-direction: column; gap: 0; }

.split {
  display: flex;
  gap: var(--split-gap, 44px);
  align-items: flex-start;
  flex-wrap: wrap;
}
.split > * { min-width: 0; }

/* index: the pitch column and the agent room */
.pitch {
  flex: 1 1 380px;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
}
.room { flex: 1 1 520px; display: flex; flex-direction: column; gap: 16px; }
.page h1 { font-size: clamp(30px, 3.4vw, 42px); }
.pagecol h1 { font-size: clamp(32px, 5vw, 62px); }

.topbar { flex-wrap: wrap; gap: 14px; height: auto !important; }
.topbar > nav { flex-wrap: wrap; gap: clamp(14px, 2vw, 32px) !important; }

/* contact */
.cmain { flex: 1 1 420px; }
.cart { flex: 1 1 360px; min-height: 520px; }

/* product: the row of five question boxes */
.qrow { display: flex; gap: 14px; flex-wrap: wrap; }
/* the hero's chart/PM card holds only absolutely positioned children, so it
   collapses to zero height the moment it stops being stretched by a sibling */
.sidecard {
  flex: 1 1 300px;
  border: 1px solid var(--line);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  min-height: 300px;
  max-width: 420px; /* authored at 340px — cap it rather than let it spread */
}

@media (max-width: 899px) {
  /* the pods: fixed 92px clips the scope line once it wraps */
  .pod { height: auto !important; min-height: 92px; padding: 12px 14px 12px 12px !important; }
  .cart { min-height: 420px; }
}

@media (max-width: 599px) {
  .pod .yr, .pod .meter { display: none !important; }
  .split { gap: 28px; }
}

/* index: the agent-room caption row */
.roomhead { flex-wrap: wrap; gap: 8px; }
@media (max-width: 599px) {
  .roomhead > span:last-child { display: none; } /* the scroll hint */
}

/* work.html — the older template, kept fluid so it doesn't break */
.workgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(14px, 2vw, 24px);
}

/* product: the five question boxes are flex:1 inline, which lets them
   collapse to nothing. Give them a real basis so they wrap into rows.
   !important is the only lever that beats an inline style. */
.qrow > div {
  flex: 1 1 200px !important;
  height: auto !important;
  min-height: 168px;
}
.qhead { flex-wrap: wrap; }
@media (max-width: 599px) {
  .qhead > span { display: none; }
  .qrow > div { flex-basis: 100% !important; }
}

/* product hero: a flex-grow child with basis:auto resolves to its max-content
   width, which forces the card beside it to wrap even on a wide screen */
.ptext { flex: 1 1 420px; min-width: 0; }

/* ============================================================
   AWARDS (agent pages, after the points)
   Cards tinted with the page's --accent so each company's awards
   read in its own colour. The trophy glints on a slow loop; the
   per-page reduced-motion block switches that off with the rest.
   ============================================================ */
.awards { margin-top: 18px; }
.awards-h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--accent, #F2A93B);
}
.awards-h::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
/* flex + center: one award or two, the row sits centred. Cards share a
   fixed basis so they match in width, and shrink to full width on a phone. */
.award-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  /* room for two 380px cards + gap: four awards read as 2x2, never 3+1 */
  max-width: 770px;
  margin: 0 auto;
}
.award {
  flex: 0 1 380px;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--accent, #F2A93B) 45%, var(--line));
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent, #F2A93B) 14%, var(--raised)), var(--raised) 65%);
}
.award svg { flex-shrink: 0; animation: glint calc(3.2s / var(--spd, 1)) ease-in-out infinite; }
.award b {
  display: block;
  font-family: 'Bricolage Grotesque', serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
}
.award .why { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--body); }
.award .when {
  display: block;
  margin-top: 7px;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--accent, #F2A93B);
}
@keyframes glint {
  0%, 70%, 100% { filter: none; }
  80% { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent, #F2A93B) 80%, transparent)); }
}

/* ============================================================
   SMALL-SCREEN FIXES (from a 360-1920px sweep)
   ============================================================ */
/* the logo and nav must not squash into each other; the nav wraps instead */
.topbar > * { flex-shrink: 0; }

/* replay buttons: one line, always */
[data-act="replay"] { white-space: nowrap; }

/* contact: social cards wrap two-then-one on a phone instead of clipping */
.socials { flex-wrap: wrap; }
.socials > a { flex: 1 1 160px !important; min-width: 0; }
.cemail { flex-wrap: wrap; row-gap: 6px; max-width: 100%; }

/* contact: the board scene is authored ~392px wide in absolute px.
   Below 480 it would clip, so scale it uniformly from the bottom-left. */
@media (max-width: 480px) {
  /* `scale`, not `transform`: the .fade reveal ends on transform:none and would cancel it */
  .cart { scale: .8; transform-origin: left bottom; min-height: 360px; }
}

/* product: the walk keyframes are fixed px distances along ONE row of five
   boxes. Once the boxes wrap (below ~1200) the walk would miss them, so the
   lane and its caption go, and the boxes simply open in place. */
@media (max-width: 1199px) {
  .pmlane, .qhead > span { display: none; }
}

/* patent cards are links: keep the award look, add a hover lift */
a.award { text-decoration: none; transition: border-color .2s, transform .2s; }
a.award:hover { transform: translateY(-2px); border-color: var(--accent, #F2A93B); }
a.award:focus-visible { outline: 2px solid var(--accent, #F2A93B); outline-offset: 2px; }