/* =========================================================================
   Apex Procurement LLC — v3
   Structure follows the Pinnacle App Design Standard: 4px grid, restrained
   radii, glass on chrome only, mono tabular figures right-aligned on every
   dollar amount, 120-280ms ease-out. The accent is Apex's own magenta-purple,
   sampled from apex-mark.svg. Not PHG gold — Apex is its own company.
   ========================================================================= */

:root{
  /* Sampled from the mark */
  --magenta:#C12399;
  --magenta-mid:#A62A9C;
  --purple:#7F3AA1;
  --purple-field:#8039A1;
  --lilac:#AD80C3;

  --bg:#0B0910;
  --bg-deep:#070509;
  --surface:#151020;
  --surface-2:#1B1428;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.055);

  --ink:#F4F1F7;
  --ink-2:#B9B0C6;
  --ink-3:#8C8398;

  --grad:linear-gradient(96deg,var(--magenta) 0%,var(--magenta-mid) 52%,var(--purple) 100%);

  --ff-display:"Fraunces",ui-serif,Georgia,serif;
  --ff-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.16,.72,.24,1);
  --t:200ms;

  --wrap:1220px;
  --gut:clamp(20px,4vw,56px);
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-ui);
  font-size:19px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

a{color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--surface);color:var(--ink);
  padding:12px 20px;border:1px solid var(--line);border-radius:4px;
}
.skip:focus{left:16px;top:16px}

:focus-visible{outline:2px solid var(--lilac);outline-offset:3px;border-radius:2px}

/* Every financial number on this page. The single biggest lever there is for
   making a screen read as real software rather than a brochure. */
.num{
  font-family:var(--ff-mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:-.01em;
}

/* ---------------------------------------------------------------- chrome */

.chrome{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding-top:14px;padding-bottom:14px;
}
.chrome::before{
  content:"";position:absolute;inset:0 0 auto 0;height:230%;z-index:-1;
  background:linear-gradient(to bottom,rgba(6,4,9,.78),rgba(6,4,9,.34) 46%,rgba(6,4,9,0));
  pointer-events:none;
}
.chrome-in{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;gap:28px;
}

.brand{
  display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto;
}
.brand-mark{width:28px;height:auto;filter:drop-shadow(0 1px 10px rgba(0,0,0,.5))}
.brand-type{display:flex;flex-direction:column;line-height:1.05}
.brand-type b{
  font-family:var(--ff-ui);font-weight:600;font-size:15px;
  letter-spacing:.15em;color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.6);
}
.brand-type i{
  font-style:normal;font-size:11px;letter-spacing:.24em;
  color:var(--lilac);text-transform:uppercase;
}

.nav{display:flex;gap:26px;margin-left:auto}
.nav a{
  font-size:14px;color:rgba(255,255,255,.82);text-decoration:none;
  text-shadow:0 1px 16px rgba(0,0,0,.6);
  transition:color var(--t) var(--ease);
}
.nav a:hover{color:#fff}

/* Chapter readout — narrative and progress in one piece of chrome. */
.readout{
  margin-left:auto;display:flex;align-items:center;gap:12px;
  min-width:156px;justify-content:flex-end;
  transition:opacity var(--t) var(--ease);
}
.readout.spent{opacity:0;pointer-events:none}
.readout-t{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.2em;
  color:rgba(255,255,255,.72);text-transform:uppercase;white-space:nowrap;
  text-shadow:0 1px 14px rgba(0,0,0,.7);
  transition:opacity var(--t) var(--ease);
}
.readout-bar{
  width:52px;height:2px;background:rgba(255,255,255,.18);
  position:relative;overflow:hidden;border-radius:2px;
}
.readout-bar i{
  position:absolute;inset:0 auto 0 0;width:0%;
  background:var(--grad);display:block;
}

/* ---------------------------------------------------------------- buttons */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ff-ui);font-size:16px;font-weight:500;
  padding:14px 26px;border-radius:4px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:transform var(--t) var(--ease),background var(--t) var(--ease),
             border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.btn-primary{background:var(--grad);color:#fff;font-weight:600}
.btn-primary:hover{transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{border-color:rgba(255,255,255,.24);color:#fff;background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.07)}
.btn-sm{padding:9px 17px;font-size:13px}

/* ---------------------------------------------------------------- type */

.display{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(38px,6.4vw,86px);
  line-height:1.02;
  letter-spacing:-.022em;
  margin:0;
}
.grad{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

.h2{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(28px,3.6vw,46px);line-height:1.1;letter-spacing:-.018em;
  margin:0 0 20px;
}
.h3{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(21px,2.2vw,29px);line-height:1.18;letter-spacing:-.012em;
  margin:0 0 12px;
}
.h4{
  font-family:var(--ff-ui);font-weight:600;font-size:19px;line-height:1.3;
  letter-spacing:-.005em;margin:0 0 10px;
}

.kicker{
  font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--lilac);margin:0 0 18px;
}

.lede{
  font-size:clamp(18px,1.5vw,21.5px);line-height:1.62;color:var(--ink-2);
  max-width:62ch;margin:0 0 28px;
}

/* =========================================================================
   THE FILM
   Semantic sections first; motion is layered on top. Under
   prefers-reduced-motion every scene below is an ordinary stacked section
   with its media at natural height and all copy present.
   ========================================================================= */

.scene{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  overflow:clip;
  isolation:isolate;
}

.scene-media{
  position:absolute;inset:0;z-index:-2;overflow:hidden;
}
.scene-media img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  will-change:transform;
}
/* Scrim so type is legible over every frame, bright or near-black. */
.scene-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(7,5,9,.62) 0%,rgba(7,5,9,.18) 34%,rgba(7,5,9,.5) 74%,rgba(7,5,9,.92) 100%),
    radial-gradient(78% 88% at 22% 52%,rgba(7,5,9,.66),rgba(7,5,9,.1) 62%,transparent 84%);
}

.scene-body{position:relative;z-index:1;width:100%;
  padding-top:clamp(64px,10vh,120px);padding-bottom:clamp(64px,10vh,120px)}

.scene-cap{
  position:absolute;left:var(--gut);bottom:26px;z-index:2;
  font-family:var(--ff-mono);font-size:12.5px;letter-spacing:.02em;
  color:rgba(255,255,255,.58);
  text-shadow:0 1px 14px rgba(0,0,0,.8);margin:0;
  max-width:calc(100% - var(--gut) * 2);
}

.beat{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(27px,4vw,54px);line-height:1.1;letter-spacing:-.02em;
  margin:0;max-width:17ch;
  text-shadow:0 2px 40px rgba(6,4,9,.72);
}
.beat-sub{
  font-size:clamp(17px,1.4vw,19.5px);line-height:1.6;color:var(--ink-2);
  max-width:48ch;margin:22px 0 0;
  text-shadow:0 1px 24px rgba(6,4,9,.8);
}

/* ------------------------------------------------------------ scene: hero */

.hero{min-height:100svh}
.hero .scene-body{padding-top:150px;padding-bottom:96px;display:flex;flex-direction:column;justify-content:center;min-height:100svh}
.hero .display{max-width:17ch}
.hero-word{display:inline-block;overflow:hidden;vertical-align:bottom}
.hero-word > i{display:inline-block;font-style:inherit}
.hero-word > i.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.hero-lede{
  font-size:clamp(17.5px,1.46vw,20.5px);line-height:1.62;color:var(--ink-2);
  max-width:56ch;margin:26px 0 0;
  text-shadow:0 1px 22px rgba(6,4,9,.85);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* The manifest strip. A stranger has the number, the count and the years
   inside the first screen — before any argument is made. */
.manifest{
  margin-top:52px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 28px;
  max-width:900px;
}
.manifest div{display:flex;flex-direction:column;gap:5px}
.manifest dt{
  font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.5);order:2;
}
.manifest dd{
  margin:0;order:1;
  font-family:var(--ff-mono);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  font-size:clamp(17px,1.9vw,25px);color:#fff;letter-spacing:-.02em;
}

/* ----------------------------------------------------------- scene: draw */

.deliverables{
  list-style:none;margin:34px 0 0;padding:0;
  max-width:640px;
}
.deliverables li{
  display:flex;gap:18px;align-items:baseline;
  padding-top:13px;padding-bottom:13px;
  border-top:1px solid rgba(255,255,255,.11);
}
.deliverables li:last-child{border-bottom:1px solid rgba(255,255,255,.11)}
.deliverables span{
  font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.14em;
  color:var(--lilac);flex:0 0 34px;
}
.deliverables em{font-style:normal;font-size:17.5px;color:var(--ink)}

/* -------------------------------------------------------- scene: specify */
/* A finish board is chips and rooms side by side. The generated material
   samples appear at chip scale only — they are material studies, never a
   claim about a specific property's finish. */

.board{
  position:relative;overflow:clip;background:var(--bg-deep);
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
}
.board-head{padding:112px 0 30px}
.track-vp{overflow:hidden}
.track{
  display:flex;align-items:center;gap:26px;
  width:max-content;padding-inline:var(--gut);padding-bottom:64px;
}

.chip{
  flex:0 0 auto;width:210px;
}
.chip img{
  width:210px;height:210px;max-height:26vh;object-fit:cover;border-radius:3px;
  border:1px solid var(--line);
}
.chip p{
  margin:12px 0 0;font-family:var(--ff-mono);font-size:13px;
  letter-spacing:.02em;color:var(--ink-3);
}
.chip b{display:block;font-weight:400;color:var(--ink-2);letter-spacing:.16em}

.plate{
  flex:0 0 auto;width:min(52vw,580px);
}
.plate .fr{
  display:block;overflow:hidden;border-radius:3px;border:1px solid var(--line);
}
.plate img{
  width:100%;aspect-ratio:4/3;max-height:44vh;object-fit:cover;
}
.plate figcaption{
  margin-top:13px;display:flex;justify-content:space-between;gap:20px;
  font-family:var(--ff-mono);font-size:12.5px;letter-spacing:.02em;
  color:var(--ink-3);
}
.plate figcaption b{font-weight:400;color:var(--ink-2)}

/* ------------------------------------------------------------ scene: buy */
/* The darkest ground in the film. Procurement gets its own scene and it is
   carried by type and figures, because that is the honest material. */

.buy{background:var(--bg-deep)}
.buy .scene-media img{opacity:.34}
.buy .scene-media::after{
  background:
    linear-gradient(to bottom,rgba(7,5,9,.86),rgba(7,5,9,.6) 42%,rgba(7,5,9,.92)),
    radial-gradient(70% 70% at 26% 46%,rgba(7,5,9,.62),transparent 76%);
}
.buy-grid{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(32px,5vw,80px);align-items:start;
}
.po{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--line);
}
.po li{
  display:grid;grid-template-columns:38px 1fr;gap:16px;align-items:baseline;
  padding-top:15px;padding-bottom:15px;border-bottom:1px solid var(--line-2);
}
.po span{
  font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.14em;color:var(--lilac);
}
.po em{font-style:normal;font-size:17.5px;color:var(--ink);line-height:1.45}
.po i{display:block;font-style:normal;font-size:15.5px;color:var(--ink-3);margin-top:3px}

/* -------------------------------------------------------- scene: account */

.account{background:var(--bg)}
.account .beat{font-size:clamp(23px,2.9vw,36px);max-width:none}
.account .scene-body{padding-top:clamp(48px,6.5vh,92px);padding-bottom:clamp(40px,6vh,64px)}

.ledger{
  width:100%;border-collapse:collapse;margin-top:14px;
  font-size:17px;
}
.ledger caption{text-align:left}
.ledger th,.ledger td{padding:10px 14px;text-align:left;vertical-align:baseline}
.ledger thead th{
  font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400;
  border-bottom:1px solid var(--line);padding-top:0;padding-bottom:10px;
}
.ledger tbody th{
  font-weight:500;font-size:18px;color:var(--ink);padding-left:0;
}
.ledger tbody th em{
  display:block;font-style:normal;font-size:14.5px;color:var(--ink-3);
  margin-top:4px;letter-spacing:.02em;
}
.ledger tbody tr{border-bottom:1px solid var(--line-2)}
.ledger td{color:var(--ink-2);font-size:16px}
.ld-amt{
  text-align:right;padding-right:0;
  font-family:var(--ff-mono);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  font-size:18.5px !important;color:var(--ink) !important;letter-spacing:-.015em;
  white-space:nowrap;
}
.ledger tfoot th{
  padding-left:0;padding-top:15px;font-weight:600;font-size:18px;color:var(--ink);
}
.ledger tfoot th em{
  display:block;font-style:normal;font-size:14.5px;color:var(--ink-3);
  margin-top:4px;
}
.ledger tfoot td{padding-top:15px}
.ledger tfoot .ld-amt{
  font-size:clamp(22px,2.6vw,32px) !important;color:#fff !important;
}
.ledger tfoot tr{
  border-top:1px solid transparent;
  background-image:var(--grad);
  background-repeat:no-repeat;
  background-size:100% 2px;
  background-position:top left;
}
.ledger-note{
  margin:12px 0 0;font-size:14.5px;color:var(--ink-3);max-width:80ch;
}

/* The ledger scene is PINNED, which means a visitor has no way to scroll to a
   line that falls below the fold — the scene has to fit the viewport outright.
   It was already losing the last two lines of the dedupe note at 1366x768
   before the base type went up, and the note is the disclosure that makes
   $9,932,861 defensible. Everything below exists to make the whole scene fit
   at every common laptop height. Re-measure after ANY change to the type
   scale, the row set, or the note's wording. */
.ledger tbody th,.ledger tbody td{padding-block:7px}
.ledger tbody th{line-height:1.3}
.ledger tbody th em{line-height:1.4;margin-top:2px}
.ledger tfoot th,.ledger tfoot td{padding-top:12px}
.ledger tfoot th{line-height:1.3}
.ledger tfoot th em{line-height:1.4;margin-top:2px}
/* It is a table footnote, so it runs the width of the columns it annotates
   rather than floating at an 80ch measure underneath them. */
.ledger-note{max-width:none}

/* --------------------------------------------------- scene: the last piece */

.last{background:var(--bg-deep);min-height:100vh}
.last .scene-body{
  padding-top:120px;padding-bottom:120px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:38px;
}
.last-obj{
  width:min(340px,58vw);aspect-ratio:1;border-radius:3px;overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9);
}
.last-obj img{width:100%;height:100%;object-fit:cover}
.last .beat{max-width:20ch;text-align:center}

/* =========================================================================
   BELOW THE FILM
   ========================================================================= */

.sec{
  position:relative;
  padding-top:clamp(88px,11vh,140px);padding-bottom:clamp(88px,11vh,140px);
  min-height:min(88vh,880px);
  display:flex;align-items:center;
}
.sec > .wrap{width:100%}
.sec-alt{background:var(--surface);border-block:1px solid var(--line-2)}

/* ------------------------------------------------------- the line items */

.items{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:20px;margin-top:44px;
}
.item figure{margin:0}
.item img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px;
  border:1px solid var(--line);
}
.item figcaption{margin-top:14px}
.item b{
  display:block;font-family:var(--ff-ui);font-weight:600;font-size:16.5px;
  color:var(--ink);
}
.item span{
  display:block;font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin-top:5px;
}

/* ------------------------------------------------------------- services */

.split{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:20px;margin-top:44px;
}
.panel{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:5px;
  padding:34px;
  position:relative;overflow:hidden;
}
.panel::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:var(--grad);opacity:.85;
}
.panel-no{
  font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.2em;
  color:var(--lilac);margin:0 0 18px;
}
.panel-lede{color:var(--ink-2);font-size:17.5px;margin:0 0 24px;max-width:46ch}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{
  padding:11px 0 11px 24px;position:relative;font-size:17px;color:var(--ink);
  border-top:1px solid var(--line-2);
}
.ticks li::before{
  content:"";position:absolute;left:0;top:19px;width:9px;height:1px;
  background:var(--lilac);
}

/* ------------------------------------------ the flagship's own interiors */

/* The AC Kansas City brand set is 1336x890 at source. That is a tile, and the
   layout has to respect it: four across a 1220 wrap is ~275px CSS, so the 760
   derivative is still a downscale at 2x. 3:2 rather than the line items'
   square — these are rooms, and a square crop throws the room away. */
.rooms{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px;margin-top:36px;
}
.room{margin:0}
.room img{
  width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px;
  border:1px solid var(--line);
}
.room figcaption{margin-top:12px}
.room b{
  display:block;font-family:var(--ff-ui);font-weight:600;font-size:16px;
  color:var(--ink);
}
/* Sentence case at 12px, not the uppercase micro-label the line items use:
   these category runs are long enough that all-caps stops being scannable. */
.room span{
  display:block;font-family:var(--ff-mono);font-size:13px;letter-spacing:.02em;
  color:var(--ink-3);margin-top:5px;line-height:1.45;
}

/* --------------------------------------------------------------- feature */

section[id]{scroll-margin-top:88px}

.feature-two{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  align-items:start;margin-top:64px !important;
}

.feature{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,64px);align-items:center;margin-top:44px;
}
.feature-fig{margin:0}
.feature-fig img{
  width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:5px;
  border:1px solid var(--line);
}
.feature-fig figcaption{
  margin-top:12px;font-family:var(--ff-mono);font-size:13px;
  letter-spacing:.02em;color:var(--ink-3);
}
.tag{
  font-family:var(--ff-mono);font-size:13px;letter-spacing:.02em;
  color:var(--lilac);margin:0 0 14px;
}
.figs{list-style:none;margin:26px 0 0;padding:0}
.figs li{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding-top:14px;padding-bottom:14px;border-top:1px solid var(--line-2);
}
.figs span{font-size:16px;color:var(--ink-2);max-width:34ch}
.figs b{
  font-family:var(--ff-mono);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;font-weight:400;
  font-size:18.5px;color:var(--ink);white-space:nowrap;letter-spacing:-.015em;
}
.figs .tot{border-top:1px solid var(--line);margin-top:6px;padding-top:18px}
.figs .tot b{font-size:clamp(21px,2.4vw,27px);color:#fff}
.figs .tot span{color:var(--ink)}

.chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:24px 0 0;padding:0}
.chips li{
  font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--line);border-radius:3px;padding:6px 10px;
}

.proplist{
  list-style:none;margin:40px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 28px;
}
.proplist li{
  padding-top:16px;padding-bottom:16px;border-top:1px solid var(--line-2);
  display:flex;flex-direction:column;gap:4px;
}
.proplist span{font-size:17px;color:var(--ink)}
.proplist em{font-style:normal;font-size:14.5px;color:var(--ink-3)}

/* -------------------------------------------------------------- approach */

.grid-3{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(24px,3vw,44px);margin-top:44px;
}
.reason p{color:var(--ink-2);font-size:17px;margin:0}

.steps{
  list-style:none;margin:56px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;
  border-top:1px solid var(--line);
}
.steps li{
  padding:24px 22px 24px 0;border-right:1px solid var(--line-2);
  display:flex;flex-direction:column;gap:7px;
}
.steps li:last-child{border-right:0}
.step-n{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.2em;color:var(--lilac)}
.step-t{font-family:var(--ff-display);font-size:23px;line-height:1.1}
.step-d{font-size:15.5px;color:var(--ink-3);line-height:1.5}

/* --------------------------------------------------------------- vendors */

.vendors{
  list-style:none;margin:40px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:0;
  border-top:1px solid var(--line-2);
}
.vendors li{
  flex:1 1 auto;padding:15px 26px 15px 0;
  font-size:17px;color:var(--ink-2);
  border-bottom:1px solid var(--line-2);
  white-space:nowrap;
}

.pricing{
  margin-top:64px;padding:36px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:5px;
  max-width:820px;
}
.pricing .kicker{margin-bottom:14px}
.pricing-q{font-size:18.5px;color:var(--ink);margin:0 0 14px;line-height:1.55}
.pricing-a{font-size:17px;color:var(--ink-2);margin:0}

/* --------------------------------------------------------------- contact */

.contact{background:var(--surface);border-top:1px solid var(--line-2)}
.contact-in{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(32px,5vw,72px);align-items:start;
}
.people{list-style:none;margin:0;padding:0}
.people li{padding-top:22px;padding-bottom:22px;border-top:1px solid var(--line-2)}
.people li:first-child{border-top:0;padding-top:0}
.p-name{margin:0;font-weight:600;font-size:18px}
.p-role{
  margin:3px 0 10px;font-family:var(--ff-mono);font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--lilac);
}
.p-c{margin:0 0 4px;font-size:16.5px;color:var(--ink-2)}
.p-c a{color:var(--ink-2);text-decoration:none;transition:color var(--t) var(--ease)}
.p-c a:hover{color:var(--ink);text-decoration:underline}

/* ---------------------------------------------------------------- footer */

.foot{padding-top:44px;padding-bottom:44px;border-top:1px solid var(--line-2);background:var(--bg-deep)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px}
.foot-brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.foot-c{margin:0;font-size:15px;color:var(--ink-3)}

/* =========================================================================
   ARRIVAL MOTION — content below the film
   ========================================================================= */

.rise{opacity:0;transform:translateY(26px)}
.in{
  opacity:1;transform:none;
  transition:opacity .78s var(--ease),transform .78s var(--ease);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width:1080px){
  .nav{display:none}
  .buy-grid{grid-template-columns:1fr;gap:36px}
  .feature{grid-template-columns:1fr;gap:32px}
  .contact-in{grid-template-columns:1fr}
}

@media (max-width:760px){
  body{font-size:18px}

  /* The chapter readout is desktop chrome. On a phone it is a stray dash
     between the wordmark and the button. */
  .readout{display:none}
  .chrome-in{gap:14px}
  .btn-sm{white-space:nowrap;padding:9px 14px;font-size:13px}

  .scene-body{padding-top:80px;padding-bottom:80px}
  .beat-sub{margin-top:16px;font-size:16.5px}
  .deliverables li{padding-top:10px;padding-bottom:10px}
  .po li{padding-top:11px;padding-bottom:11px;gap:12px;grid-template-columns:30px 1fr}
  .po i{font-size:14.5px;margin-top:2px}
  .board{min-height:100svh}
  .board-head{padding:0 0 26px}

  /* Two scenes carry more rows than a phone screen holds. Pinning them
     would clip the ledger, which is the one thing on this page that has to
     be readable in full. They scroll instead. */
  .buy,.account{min-height:0;display:block;overflow:clip}
  .buy .scene-body,.account .scene-body{padding-top:92px;padding-bottom:76px}
  .buy .scene-cap{position:static;margin:22px 0 0;padding-inline:var(--gut)}
  .manifest{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
  .scene-body{padding-top:96px;padding-bottom:96px}
  /* The manifest strip — and $9,932,861 with it — has to stay inside the first
     phone viewport; the README calls that load-bearing and it is. The hero
     overflows 100svh on a phone, so this padding is a straight top offset and
     it is the cheapest place to buy the room back. Re-measure after any change
     to the h1 or the lede. */
  .hero .scene-body{padding-top:104px;padding-bottom:78px}
  .steps{grid-template-columns:1fr}
  .steps li{border-right:0;border-bottom:1px solid var(--line-2);padding-right:0}
  .plate{width:84vw}
  .track{padding-bottom:24px;gap:18px}
  .chip,.chip img{width:150px}
  .chip img{height:150px}
  .ledger thead{display:none}
  .ledger tbody th,.ledger td{display:block;padding:0}
  .ledger tbody tr{
    display:grid;grid-template-columns:1fr auto;gap:4px 16px;
    padding-top:18px;padding-bottom:18px;align-items:baseline;
  }
  .ledger tbody th{grid-column:1;grid-row:1}
  .ledger .ld-brand{grid-column:1;grid-row:2;font-size:14.5px}
  .ledger .ld-scope{grid-column:1;grid-row:3;font-size:14.5px;margin-top:2px}
  .ledger .ld-amt{grid-column:2;grid-row:1/span 2;text-align:right}
  .ledger tfoot tr{
    display:grid;grid-template-columns:1fr auto;gap:16px;padding-top:22px;padding-bottom:22px;
    align-items:baseline;
  }
  .ledger tfoot th{grid-column:1;padding:0}
  .ledger tfoot td{padding:0}
  .ledger tfoot .ld-brand,.ledger tfoot .ld-scope{display:none}
  /* Property panels go one-up on a phone. Two-up puts a three-line caption
     under a 145px photograph — the label ends up outweighing the picture it
     is labelling, and the picture is the evidence. */
  .feature-two{grid-template-columns:1fr !important;gap:32px}

  .vendors li{flex:1 1 46%;padding-right:14px;white-space:normal}
}

/* =========================================================================
   SHORT SCREENS — the finish board
   Scene 03's head (470px) over its track (475px) is 945px of content in a
   PINNED scene, so on a laptop shorter than ~1000px the plate images were cut
   at the fold and their captions — "Public space · Hampton Inn & Suites,
   Conway AR" — never rendered at all. A pin gives the visitor no way to
   scroll to them, so that is a defect, not a crop.

   Every declaration here only ever REMOVES height, so it cannot introduce a
   clip anywhere it applies. Scoped away from the phone (min-width:761px),
   where the track is already an ordinary grid, and placed above the
   reduced-motion block so that layout keeps its own max-height:none.
   Anything taller than 900px — 1512x982 and up — is untouched.
   ========================================================================= */

@media (min-width:761px) and (max-height:900px){
  .board-head{padding-top:clamp(48px,7vh,112px)}   /* 470px head -> ~412px */
  .plate img{max-height:34vh}                      /* 44vh was the culprit */
  .chip img{max-height:20vh}
  .track{padding-bottom:40px}
}


/* =========================================================================
   REDUCED MOTION
   A complete, dignified static site. Nothing is pinned, nothing scrubs,
   nothing is hidden waiting for a trigger that will not fire. This link
   goes to hotel owners and lenders; it cannot be unreadable for anyone.
   ========================================================================= */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .rise{opacity:1 !important;transform:none !important}

  .scene{min-height:0;display:block}
  .scene-media{position:relative;inset:auto;height:auto}
  .scene-media img{height:auto;aspect-ratio:16/9}
  .scene-body{padding-top:72px;padding-bottom:72px}
  .scene-cap{position:static;margin:12px 0 0;padding-inline:var(--gut)}

  /* A chapter counter that never counts is meaningless chrome. */
  .readout{display:none}

  .hero{min-height:0}
  .hero .scene-media{position:absolute;inset:0;height:100%}
  .hero .scene-media img{height:100%;aspect-ratio:auto}
  .hero .scene-body{min-height:0;padding-top:132px;padding-bottom:84px}

  .last{min-height:0}
  .readout-bar{display:none}

  /* The horizontal run becomes an ordinary grid — but a room still has to
     outrank a material sample, or the board loses the point it was making. */
  .board{min-height:0;display:block}
  .board-head{padding:76px 0 28px}
  .track-vp{overflow:visible}
  .track{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    width:auto;gap:26px 22px;padding-bottom:76px;
    max-width:var(--wrap);margin-inline:auto;
  }
  .plate{grid-column:span 3}
  .plate,.chip,.chip img{width:100%}
  .chip img{height:auto;aspect-ratio:1;max-height:none}
  .plate img{max-height:none}
  .plate figcaption{flex-direction:column;gap:3px}
}