:root {
    --room-pit: #0a0a0c;
    --room-mid: #17161a;
    --room-wall: #57503f;
    --room-glow: #8a8172;
    --paper: #efebe0;
    --paper-dim: rgba(239, 235, 224, 0.55);
    --red: #d8302f;
    --tan: #c9bfa8;
    --line: rgba(239, 235, 224, 0.14);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--room-pit);
    color: var(--paper);
    font-family: "Chakra Petch", "Trebuchet MS", system-ui, sans-serif;
    font-weight: 300;
    overflow-x: hidden;
  }


  /* Ambient room: the light comes from the head, with no fixture. */
  html { color-scheme: dark; scroll-behavior: smooth; }
  body { background: #000; isolation: isolate; }
  .room { position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 50% 65% at 50% 48%, #0c0d0c 0%, #070808 50%, #000 100%); }
  .room::before { content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 32% 60% at 14% 48%, rgba(138,129,114,.065), transparent 75%),
      radial-gradient(ellipse 32% 60% at 86% 48%, rgba(138,129,114,.065), transparent 75%); }
  .room::after { content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse 72% 78% at 50% 48%, transparent 40%, #000 100%); }
  .floor { position: fixed; left: 50%; bottom: 6vh; width: min(72vw,900px); height: 12vh;
    transform: translateX(-50%); z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse,rgba(180,171,143,.055),transparent 70%); }
  .haze { position: fixed; inset: 12% -12% 7%; z-index: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 32% 9% at 35% 45%,rgba(189,182,159,.035),transparent 78%),
      radial-gradient(ellipse 40% 12% at 62% 62%,rgba(189,182,159,.028),transparent 80%);
    filter: blur(25px); animation: hazedrift 24s ease-in-out infinite alternate; }
  .head-glow { position: fixed; width: min(88vh,108vw); height: min(82vh,106vw);
    left: 50%; top: 49%; transform: translate(-50%,-50%); z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse,rgba(190,178,145,.038),rgba(120,121,101,.018) 42%,transparent 70%); }
  .stage { position: fixed; inset: 0; z-index: 1; display: flex; align-items: center;
    justify-content: center; pointer-events: none; mix-blend-mode: screen; }
  .bob { animation: bob 9s ease-in-out infinite alternate; }
  .rig { position: relative; width: min(68vh,84vw); aspect-ratio: 1;
    isolation: isolate; background: #000; }
  .rig video,.rig img { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; display: block; user-select: none; }
  .head-video { opacity: 0; transition: opacity .45s; }
  .rig.video-ready .head-video { opacity: 1; }
  .rig.video-ready .head-poster { opacity: 0; }
  /* A screen-space layer keeps the CRT lines distinct at every video display size. */
  .head-scanlines { position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: repeating-linear-gradient(to bottom,transparent 0px,transparent 2px,rgba(0,0,0,.23) 2px,rgba(0,0,0,.23) 3px,transparent 4px);
    mix-blend-mode: multiply; }
  .head-scanlines::after { content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse 72% 72%,transparent 55%,#000 100%);
    opacity: .14; }
  .frag { position: fixed; z-index: 1; pointer-events: none; opacity: .5;
    animation: fragdrift var(--d,18s) ease-in-out infinite alternate; }
  .frag svg { display: block; }
  @keyframes bob { from { transform: translateY(-1.6vh); } to { transform: translateY(1.6vh); } }
  @keyframes hazedrift { from { transform: translate(-2%,1%); } to { transform: translate(2%,-1%); } }
  @keyframes fragdrift { from { transform: translate(0,0) rotate(0deg); }
    to { transform: translate(var(--dx,20px),var(--dy,-30px)) rotate(var(--rot,40deg)); } }
  /* ============ CONTENT ============ */
  .content {
    position: relative;
    z-index: 2;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding-inline: clamp(16px, 5vw, 64px);
  }

  header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-block: clamp(18px, 3vh, 32px) 0;
  }
  .wordmark {
    font-family: "Michroma", "Chakra Petch", sans-serif;
    font-size: clamp(13px, 1.6vw, 17px);
    letter-spacing: 0.32em;
    color: var(--paper);
    white-space: nowrap;
  }
  .wordmark b { font-weight: 400; color: var(--red); }
  .tagline {
    font-family: "Michroma", sans-serif;
    font-size: clamp(8px, 1vw, 10px);
    letter-spacing: 0.42em;
    color: var(--paper-dim);
    white-space: nowrap;
  }

  .hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-block: 8vh;
    background: radial-gradient(58% 58% at 50% 50%, rgba(10,10,12,0.55) 0%, rgba(10,10,12,0.3) 55%, transparent 78%);
  }
  .eyebrow {
    font-family: "Michroma", sans-serif;
    font-size: clamp(9px, 1.1vw, 11px);
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    color: var(--tan);
    opacity: 0.8;
    margin: 0 0 2.2vh;
  }
  h1 {
    position: relative;
    font-family: "Michroma", "Chakra Petch", sans-serif;
    font-weight: 400;
    font-size: clamp(26px, 5.6vw, 74px);
    line-height: 1.14;
    letter-spacing: 0.06em;
    margin: 0;
    text-wrap: balance;
    text-shadow: 0 0 32px rgba(10,10,12,0.9), 0 0 4px rgba(10,10,12,0.8);
  }
  /* glitch echoes on the headline */
  h1::before, h1::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
  }
  h1::before {
    color: var(--red);
    animation: h1r 6s steps(1) infinite;
  }
  h1::after {
    color: #4fd8d0;
    animation: h1c 6s steps(1) infinite;
  }
  @keyframes h1r {
    0%, 55.9% { opacity: 0; }
    56% { opacity: 0.75; transform: translate(-3px, 1px); clip-path: inset(10% 0 55% 0); }
    57% { opacity: 0.75; transform: translate(2px, -1px); clip-path: inset(60% 0 15% 0); }
    58%, 100% { opacity: 0; }
  }
  @keyframes h1c {
    0%, 55.9% { opacity: 0; }
    56% { opacity: 0.6; transform: translate(3px, -1px); clip-path: inset(55% 0 20% 0); }
    57% { opacity: 0.6; transform: translate(-2px, 1px); clip-path: inset(5% 0 70% 0); }
    58%, 100% { opacity: 0; }
  }

  .lede {
    max-width: 52ch;
    font-size: clamp(14px, 1.5vw, 17px);
    line-height: 1.7;
    color: rgba(239, 235, 224, 0.72);
    margin: 3vh 0 0;
    text-shadow: 0 0 6px rgba(10,10,12,0.95), 0 0 18px rgba(10,10,12,0.9), 0 0 36px rgba(10,10,12,0.85);
  }
  .services {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 0;
    margin-top: 3.4vh;
    font-family: "Michroma", sans-serif;
    font-size: clamp(8px, 1vw, 10px);
    letter-spacing: 0.28em;
    color: var(--tan);
  }
  .services span { padding: 0 1.2em; }
  .services span + span { border-left: 1px solid var(--line); }

  .cta {
    display: inline-block;
    margin-top: 4.6vh;
    padding: 15px 42px;
    font-family: "Michroma", sans-serif;
    font-size: 11px;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    text-decoration: none;
    color: var(--paper);
    border: 1px solid rgba(239,235,224,0.4);
    background: rgba(10,10,12,0.35);
    transition: border-color 0.25s, color 0.25s, box-shadow 0.25s;
  }
  .cta:hover, .cta:focus-visible {
    border-color: var(--red);
    color: #fff;
    box-shadow: 0 0 24px rgba(216,48,47,0.35), inset 0 0 14px rgba(216,48,47,0.15);
    outline: none;
  }

  /* ============ CLIENT WALL ============ */
  .clients {
    position: relative;
    z-index: 2;
    padding: 10vh clamp(16px, 5vw, 64px) 12vh;
    background: linear-gradient(to bottom, transparent, rgba(10,10,12,0.55) 24%, rgba(10,10,12,0.55) 76%, transparent);
  }
  .clients-head {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto 7vh;
  }
  .clients-head h2 {
    font-family: "Michroma", sans-serif;
    font-weight: 400;
    font-size: clamp(10px, 1.2vw, 12px);
    letter-spacing: 0.5em;
    color: var(--tan);
    margin: 0;
    white-space: nowrap;
  }
  .clients-head::before, .clients-head::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
  }

  .logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6vh 2vw;
    max-width: 1100px;
    margin: 0 auto;
    align-items: center;
    justify-items: center;
  }
  .client {
    color: var(--paper-dim);
    transition: color 0.3s, opacity 0.3s, filter 0.3s;
    filter: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  .client:hover {
    color: var(--paper);
    filter: drop-shadow(0 0 10px rgba(239,235,224,0.25));
  }
  .client svg { display: block; fill: currentColor; }

  .lm {
    font-size: 21px;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .lm-oracle    { font-weight: 600; letter-spacing: 0.18em; font-size: 19px; }
  .lm-tanium    { font-weight: 600; letter-spacing: 0.3em; font-size: 17px; }
  .lm-twilio    { font-weight: 600; font-size: 20px; text-transform: lowercase; }
  .lm-anaplan   { font-weight: 400; font-size: 20px; text-transform: capitalize; letter-spacing: 0.04em; }
  .lm-servicetitan { font-weight: 600; font-size: 17px; }
  .lm-netflix   { font-family: "Michroma", sans-serif; font-size: 18px; letter-spacing: 0.12em; transform: scaleY(1.35); }
  .lm-newrelic  { font-weight: 300; font-size: 20px; letter-spacing: 0.02em; }
  .lm-newrelic b { font-weight: 600; }
  .lm-robotheart { font-family: "Michroma", sans-serif; font-size: 11px; letter-spacing: 0.22em; margin-left: 10px; }
  .lm-cloudflare { font-weight: 600; font-size: 19px; letter-spacing: 0.03em; }
  .lm-summit    { font-weight: 300; font-size: 19px; letter-spacing: 0.42em; text-indent: 0.42em; }
  .lm-thegrove  { font-weight: 400; font-size: 18px; letter-spacing: 0.24em; text-indent: 0.24em; }

  footer {
    position: relative;
    z-index: 2;
    padding: 0 clamp(16px, 5vw, 64px) calc(5vh + env(safe-area-inset-bottom, 0px));
    text-align: center;
    font-family: "Michroma", sans-serif;
    font-size: 8px;
    letter-spacing: 0.34em;
    color: rgba(239,235,224,0.35);
  }


  /* Scrolling copy stays above the fixed artwork throughout the document. */
  main { position: relative; z-index: 2; }
  .content { min-height: max(720px,100svh); }
  .hero { background: radial-gradient(ellipse 58% 58% at 50% 50%,rgba(0,0,0,.25),rgba(0,0,0,.10) 55%,transparent 78%); }
  .clients { background: linear-gradient(transparent,rgba(0,0,0,.35) 24%,rgba(0,0,0,.35) 76%,transparent); }
  h1 { text-shadow: 0 2px 3px #000,0 0 22px rgba(0,0,0,.98),0 0 48px rgba(0,0,0,.65); }
  .eyebrow { font-size: 12px; }
  .services { font-size: 11px; }
  .tagline { font-size: 10px; }
  .lede { font-size: clamp(16px,1.5vw,17px); color: rgba(239,235,224,.84); }
  .cta { min-height: 48px; background: rgba(0,0,0,.55); }
  .clients-head h2 { font-size: 12px; }
  footer { padding-bottom: max(94px,10vh); font-size: 10px; line-height: 1.8; }
  .motion-toggle { position: fixed; right: clamp(16px,4vw,48px);
    bottom: max(18px,env(safe-area-inset-bottom)); z-index: 5; display: inline-flex;
    gap: 9px; align-items: center; min-height: 44px; padding: 10px 13px;
    border: 1px solid rgba(239,235,224,.17); border-radius: 0;
    background: rgba(0,0,0,.76); color: rgba(239,235,224,.75);
    font: 12px "Chakra Petch",sans-serif; letter-spacing: .04em; cursor: pointer; }
  .motion-toggle[hidden] { display: none; }
  .motion-toggle:hover { color: #fff; border-color: rgba(239,235,224,.42); }
  .motion-icon { width: 10px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
  [data-paused="true"] .motion-icon { width: 0; height: 0; border: 6px solid transparent;
    border-left: 9px solid currentColor; border-right: 0; }
  a:focus-visible,button:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }
  .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; }
  .skip-link { position: fixed; top: 12px; left: 12px; z-index: 10; padding: 12px;
    background: var(--paper); color: #000; transform: translateY(-160%); }
  .skip-link:focus { transform: none; }
  [data-motion="paused"] .bob,[data-motion="paused"] .frag,[data-motion="paused"] .haze,
  [data-motion="paused"] h1::before,[data-motion="paused"] h1::after { animation-play-state: paused !important; }
  @media (max-width: 820px) {
    header { flex-direction: column; align-items: center; gap: 10px; }
    .tagline { letter-spacing: .28em; }
  }
  @media (max-width: 620px) {
    .rig { width: min(86vw,68svh); }
    .content { min-height: max(700px,100svh); }
    .hero { padding-block: 10vh; }
    .services { gap: 13px 0; font-size: 10px; line-height: 1.6; }
    .services span { border: 0 !important; padding: 0 .8em; }
    .wordmark { font-size: 13px; letter-spacing: .2em; }
    .eyebrow { font-size: 10px; letter-spacing: .32em; }
    .lede { font-size: 16px; }
    .logo-grid { gap: 5vh 12px; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .lm-cloudflare { font-size: 16px; }
    .clients { padding-bottom: 9vh; }
    .motion-toggle { font-size: 11px; }
    footer { letter-spacing: .17em; }
  }
  @media (max-width: 360px) { h1 { font-size: 24px; } .lm { font-size: 16px; }
    .lm-servicetitan { font-size: 15px; } .lm-summit { letter-spacing: .25em; } }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .bob,.frag,.haze,h1::before,h1::after { animation: none !important; }
    .head-video { transition: none; }
  }


/* ===== Oct 5 — four-pillar headline + real client logos ===== */
h1.pillars {
  white-space: pre-line;
  text-wrap: initial;
  font-size: clamp(22px, 4.3vw, 56px);
  line-height: 1.22;
  letter-spacing: 0.08em;
}
h1.pillars::before, h1.pillars::after { white-space: pre-line; }
.lede-2 { margin-top: 1.6vh; max-width: 58ch; color: rgba(239,235,224,0.62); }
.client .logo {
  display: block; width: auto; height: 26px; max-width: 180px; object-fit: contain;
  filter: brightness(0) invert(0.93); opacity: 0.6;
  transition: opacity 0.3s, filter 0.3s;
}
.client:hover .logo { opacity: 0.98; filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(239,235,224,0.25)); }
.client .logo-appletv { height: 36px; }
.client .logo-netflix { height: 22px; }
.client .logo-goldenvoice { height: 24px; }
.client .logo-spacex { height: 40px; width: 170px; object-fit: contain; }
.client .logo-coachella { height: 18px; }
.client .logo-neuralink { height: 30px; }
.client .logo-summit { height: 58px; }
.client .logo-thegrove { height: 70px; }
.client .logo-twilio { height: 30px; }
.client .logo-robotheart { height: 40px; }
.client .logo-recordingacademy { height: 30px; }
@media (max-width: 620px) {
  h1.pillars { font-size: clamp(22px, 7vw, 30px); }
  .client .logo { max-width: 130px; }
  .client .logo-spacex { width: 120px; }
  .client .logo-thegrove { height: 56px; } .client .logo-summit { height: 48px; }
}


/* ===== Oct 5 (rev 2) — title back to ARCA CEREBRUM, pillars become the large subtitle ===== */
.subtitle {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35em 0;
  margin: 2.6vh 0 0;
  font-family: "Michroma", "Chakra Petch", sans-serif;
  font-size: clamp(13px, 1.95vw, 25px);
  letter-spacing: 0.22em;
  line-height: 1.5;
  color: var(--paper);
  text-shadow: 0 2px 3px #000, 0 0 22px rgba(0,0,0,.98), 0 0 48px rgba(0,0,0,.65);
}
.subtitle span { padding: 0 0.9em; white-space: nowrap; }
.subtitle span + span { border-left: 1px solid rgba(239,235,224,0.28); }
.subtitle .br { flex-basis: 100%; height: 0; }
.subtitle .br + span { border-left: 0; }
.lede { margin-top: 3.2vh; }
@media (max-width: 620px) {
  .subtitle { font-size: clamp(13px, 3.9vw, 16px); letter-spacing: 0.18em; gap: 0.5em 0; }
  .subtitle span { border: 0 !important; padding: 0 0.6em; }
}