:root {
  /* Palette sampled from firstchair.law brand:
     #171e2c ink-blue, #404d63 slate, #4c6492 mid-blue, #a7a7a7 chrome grey */
  --paper: #eef1f6; /* cool off-white, brief paper tinted toward the brand blues */
  --paper-2: #dde3ed;
  --ink: #171e2c; /* brand ink blue */
  --ink-2: #2a3142;
  --rule: #171e2c;
  --rule-soft: rgba(23, 30, 44, 0.14);
  --accent: #4c6492; /* brand mid-blue */
  --accent-2: #404d63; /* brand slate */
  --serif: "Instrument Serif", "Libre Caslon Text", Georgia, serif;
  --sans: "Geist", -apple-system, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Global reset: upright em everywhere. Testimonials override below. */
em {
  font-style: normal;
}
/* Titles: <em> marks the blue accent inside a heading, and that accent
   renders italic site-wide. Every heading-level em in this codebase is
   an accent mark (there is no non-blue em in a title), so this pairs
   with the color rules below rather than fighting them. Instrument
   Serif is loaded with ital@0;1, so this is a true italic. */
h1 em,
h2 em,
h3 em {
  font-style: italic;
}
/* hatched paper texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(13, 16, 19, 0.025) 0 1px,
      transparent 1px 14px
    ),
    radial-gradient(
      1200px 800px at 80% -10%,
      rgba(107, 32, 25, 0.06),
      transparent 60%
    );
}

/* ---------- nav: ledger-style ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}
.nav-inner {
  position: relative;
  z-index: 60;
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
}
.nav-logo img {
  height: 54px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  gap: 4px;
  justify-self: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 2px;
  transition: background 0.15s;
}
.nav-links a:hover {
  background: rgba(13, 16, 19, 0.06);
}
.nav-links a.active {
  background: var(--ink);
  color: var(--paper);
}
.nav-cta {
  display: flex;
  gap: 8px;
}
.nav-hamburger {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--ink);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}
.nav-hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
  position: relative;
  transition:
    transform 0.25s ease,
    opacity 0.2s ease;
}
.nav-hamburger span::before,
.nav-hamburger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
  transition:
    transform 0.25s ease,
    top 0.25s ease,
    opacity 0.2s ease;
}
.nav-hamburger span::before {
  top: -6px;
}
.nav-hamburger span::after {
  top: 6px;
}
.nav-hamburger.open {
  border-color: transparent;
}
.nav-hamburger.open span {
  background: transparent;
}
.nav-hamburger.open span::before {
  top: 0;
  transform: rotate(45deg);
}
.nav-hamburger.open span::after {
  top: 0;
  transform: rotate(-45deg);
}
.nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 49;
  background: var(--paper);
  padding: 88px 32px 32px;
  overflow-y: auto;
}
.nav-mobile.open {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Direct-child selector so these styles don't cascade into the
   .btn / .btn-solid inside .mob-cta (which would force their text
   color to var(--ink) and render the solid CTA as an invisible
   label on a white bar). */
.nav-mobile > a {
  display: block;
  padding: 20px 0;
  border-bottom: 1px solid rgba(13, 16, 19, 0.12);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.nav-mobile > a:first-of-type {
  border-top: 1px solid rgba(13, 16, 19, 0.12);
}
/* Current page. The desktop nav inverts the pill for this, which would be
   heavy across a full-width row, so the mobile list marks it in accent
   instead. Same direct-child selector as above, for the same reason. */
.nav-mobile > a.active {
  color: var(--accent);
}
.nav-mobile .mob-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 32px;
}
.nav-mobile .mob-cta .btn {
  justify-content: center;
  padding: 16px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 11px 18px;
  border: 1px solid var(--ink);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  transition: all 0.18s;
}
.btn:hover {
  background: var(--ink);
  color: var(--paper);
}
.btn-solid {
  background: var(--ink);
  color: var(--paper);
}
.btn-solid:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

/* ---------- masthead: filed-document header ---------- */
.masthead {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 32px 24px;
  border-bottom: 3px double var(--ink);
}
.masthead-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.75;
  margin-bottom: 28px;
}
.masthead-top span.sep {
  padding: 0 10px;
  opacity: 0.4;
}
.seal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--ink);
  padding: 4px 10px;
}
.seal .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.headline {
  display: grid;
  grid-template-columns: 1.2fr auto;
  gap: 40px;
  align-items: end;
  padding: 8px 0 24px;
}
.headline h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(56px, 10vw, 148px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--ink);
}
.headline h1 em {
  color: var(--accent);
  font-weight: 400;
}
.headline-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink);
  opacity: 0.65;
  line-height: 1.9;
  border-left: 1px solid var(--ink);
  padding-left: 20px;
}
.headline-meta strong {
  display: block;
  color: var(--ink);
  opacity: 1;
  font-weight: 500;
  letter-spacing: 0.22em;
}
.dek {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--ink);
  margin-top: 24px;
}
.dek > div {
  padding: 22px 24px 4px 0;
  border-right: 1px solid var(--rule-soft);
}
.dek > div:last-child {
  border-right: none;
  padding-right: 0;
}
.dek > div:not(:first-child) {
  padding-left: 24px;
}
.dek .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
  margin-bottom: 6px;
}
.dek .v {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
}

/* ---------- the blueprint: full-bleed courtroom schematic ---------- */
.blueprint {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 32px 40px;
}
.blueprint-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 0;
}
.blueprint-head .left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.blueprint-head .kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.blueprint-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
.blueprint-head h2 em {
  color: var(--accent);
}
.blueprint-head .right {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.65;
  text-align: right;
  line-height: 1.7;
}

.courtroom {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  border-bottom: 1px solid var(--ink);
  align-items: start;
}

/* Floor plan stage, sticky so it stays as you scroll the module details */
.plan {
  position: sticky;
  top: 80px;
  padding: 40px 32px 40px 0;
  border-right: 1px solid var(--ink);
  height: calc(100vh - 100px);
  min-height: 560px;
  max-height: 780px;
  display: flex;
  flex-direction: column;
}
.plan-caption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.5;
  text-align: center;
  margin-top: 12px;
}
.plan-caption strong {
  color: var(--accent);
  opacity: 1;
  font-weight: 500;
  letter-spacing: 0.22em;
}
/* The index sits to the right until the courtroom stacks, then below it. */
.plan-caption i {
  font-style: normal;
}
.plan-caption .dir-y {
  display: none;
}
.plan-svg {
  width: 100%;
  flex: 1;
  display: block;
  min-height: 0;
}

/* Stacked module detail panels (replaces the old plan-list + drawer) */
.mods-stack {
  padding: 40px 0 40px 32px;
  display: flex;
  flex-direction: column;
}
.mod-card {
  padding: 56px 0;
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  gap: 22px;
  scroll-margin-top: 120px;
}
.mod-card:first-child {
  padding-top: 24px;
}
.mod-card:last-child {
  border-bottom: none;
}
.mod-card .top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.65;
}
.mod-card .top .exhibit {
  color: var(--accent);
  opacity: 1;
  font-weight: 500;
  letter-spacing: 0.22em;
}
.mod-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
}
.mod-card h3 em {
  color: var(--accent);
}
.mod-card p {
  font-size: 16.5px;
  line-height: 1.6;
  margin: 0;
  color: var(--ink-2);
  font-weight: 300;
  max-width: 620px;
}
.mod-card .feats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.mod-card .feat {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 11px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
.mod-card .spec {
  margin-top: 8px;
  border: 1px solid var(--ink);
  background: var(--paper-2);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
}
.mod-card .spec .row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mod-card .spec .k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
}
.mod-card .spec .v {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.2;
}
/* active highlight when scrolled into view */
.mod-card.active .exhibit {
  color: var(--accent);
}
.mod-card .rule {
  width: 48px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.mod-card.active .rule {
  transform: scaleX(1);
}

/* Detail drawer under courtroom */
.drawer {
  max-width: 1400px;
  margin: 0 auto;
  padding: 48px 32px 72px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: start;
  border-bottom: 1px solid var(--ink);
  position: relative;
  z-index: 1;
}
.drawer-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.drawer-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--ink);
}
.drawer-tag .bar {
  width: 18px;
  height: 1px;
  background: var(--accent);
}
.drawer-left h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 0;
}
.drawer-left h3 em {
  color: var(--accent);
}
.drawer-left p {
  font-size: 17px;
  line-height: 1.6;
  max-width: 560px;
  margin: 0;
  color: var(--ink-2);
  font-weight: 300;
}
.drawer-feats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.feat {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 11px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
.drawer-right {
  border: 1px solid var(--ink);
  background: var(--paper-2);
  padding: 28px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
.drawer-right::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  bottom: 14px;
  left: 14px;
  border: 1px solid rgba(13, 16, 19, 0.25);
  pointer-events: none;
}
.spec-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(13, 16, 19, 0.2);
}
.spec-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(13, 16, 19, 0.2);
  font-size: 14px;
}
.spec-row:last-child {
  border-bottom: none;
}
.spec-row .k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
  white-space: nowrap;
}
.spec-row .v {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.25;
}

/* ---------- pull-quote / positioning band ---------- */
.band {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 60px;
  align-items: start;
  border-bottom: 1px solid var(--ink);
}
.band .kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  border-right: 1px solid var(--ink);
  padding: 4px 12px 4px 0;
}
.band blockquote {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 3.8vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 980px;
}
.band blockquote em {
  font-style: italic;
  color: var(--accent);
}
.band cite {
  display: block;
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-style: normal;
  opacity: 0.6;
}

/* ---------- three-step process ---------- */
.process {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 32px;
  border-bottom: 1px solid var(--ink);
}
.process-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 0;
}
.process-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
}
.process-head h2 em {
  color: var(--accent);
}
.process-head .kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.step {
  padding: 36px 28px 36px 0;
  border-right: 1px solid var(--rule-soft);
}
.step:last-child {
  border-right: none;
  padding-right: 0;
}
.step:not(:first-child) {
  padding-left: 28px;
}
.step .n {
  font-family: var(--serif);
  font-size: 72px;
  line-height: 1;
  color: var(--accent);
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.step .n::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ink);
}
.step h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.step p {
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
  color: var(--ink-2);
  font-weight: 300;
}

/* ---------- final CTA (stamp card) ---------- */
.cta {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 80px auto;
  padding: 0 32px;
}
.cta-inner {
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 80px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-inner::before,
.cta-inner::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 8px;
  border: 1px dashed var(--ink);
  opacity: 0.35;
}
.cta-corner {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
}
.cta-corner.tl {
  top: 18px;
  left: 22px;
}
.cta-corner.tr {
  top: 18px;
  right: 22px;
}
.cta-corner.bl {
  bottom: 18px;
  left: 22px;
}
.cta-corner.br {
  bottom: 18px;
  right: 22px;
}
.cta h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(42px, 6vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 auto 20px;
  max-width: 900px;
  position: relative;
  z-index: 1;
}
.cta h2 em {
  color: var(--accent);
}
.cta p {
  max-width: 540px;
  margin: 0 auto 32px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 300;
  position: relative;
  z-index: 1;
}
.cta .btns {
  display: inline-flex;
  gap: 10px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
  justify-content: center;
}
/* Two mono labels side by side need about 350px of box. The CTA has 231
   at phone width, so without this they squeeze to 94px and set three
   lines each. */
@media (max-width: 560px) {
  .cta .btns {
    display: flex;
    width: 100%;
  }
  .cta .btns .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* .btn sets 38px, under the 44px touch minimum, and it is the shared
   button for every page: the CTA pair, the module links, the 404. Fixed
   once here rather than patched per page. Height only, so nothing
   reflows.

   Scoped to 1024 rather than 640 because that is where this site decides
   it is on a touch device: styles.css hides .nav-links and shows the
   hamburger at 1024. At 640 the hero CTAs were still 38px on a tablet the
   site had already treated as mobile. */
@media (max-width: 1024px) {
  .btn {
    min-height: 44px;
  }
}

/* ---------- footer ---------- */
footer {
  position: relative;
  z-index: 1;
  background: var(--ink);
  color: var(--paper);
  padding: 56px 32px 32px;
}
.foot-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(243, 239, 230, 0.15);
}
.foot-brand img {
  height: 26px;
  width: auto;
  display: block;
  margin-bottom: 18px;
}
.foot-brand p {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(243, 239, 230, 0.7);
  max-width: 320px;
  font-weight: 300;
}
.foot-col h5 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: rgba(243, 239, 230, 0.55);
  font-weight: 500;
}
.foot-col a {
  display: block;
  color: rgba(243, 239, 230, 0.85);
  text-decoration: none;
  padding: 4px 0;
  font-size: 13.5px;
}
.foot-col a:hover {
  color: var(--paper);
}
.foot-fine {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  font-size: 10px;
  color: rgba(243, 239, 230, 0.5);
  line-height: 1.6;
  font-family: var(--mono);
  letter-spacing: 0.05em;
}
.foot-fine p {
  margin: 0;
  max-width: 820px;
}
.foot-fine-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
  text-align: right;
}
.foot-powered {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(243, 239, 230, 0.6);
  text-decoration: none;
}
.foot-powered span {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.foot-powered img {
  height: 18px;
  display: block;
  opacity: 0.55;
  transition: opacity 0.2s;
}
.foot-powered:hover img {
  opacity: 0.85;
}

/* ---------- tweaks panel ---------- */
.tweaks-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 16px 18px;
  min-width: 240px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  font-family: var(--sans);
  display: none;
}
.tweaks-panel.on {
  display: block;
}
.tweaks-panel h6 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: rgba(243, 239, 230, 0.6);
  font-weight: 500;
}
.trow {
  margin-bottom: 10px;
}
.trow label {
  display: block;
  font-size: 11.5px;
  color: rgba(243, 239, 230, 0.8);
  margin-bottom: 6px;
}
.topts {
  display: flex;
  gap: 4px;
}
.topts button {
  flex: 1;
  background: transparent;
  border: 1px solid rgba(243, 239, 230, 0.3);
  color: rgba(243, 239, 230, 0.75);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 8px;
  cursor: pointer;
}
.topts button.on {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .nav-links {
    display: none;
  }
  .nav-cta {
    display: none;
  }
  .nav-hamburger {
    display: flex;
  }
  .nav-inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
  .headline {
    grid-template-columns: 1fr;
  }
  .headline-meta {
    text-align: left;
    border-left: none;
    border-top: 1px solid var(--ink);
    padding: 16px 0 0;
    width: 100%;
    max-width: none;
  }
  .masthead {
    padding-left: 20px;
    padding-right: 20px;
  }
  .masthead-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .blueprint {
    padding-left: 20px;
    padding-right: 20px;
  }
  .band {
    padding-left: 20px;
    padding-right: 20px;
    gap: 40px;
  }
  .process {
    padding-left: 20px;
    padding-right: 20px;
  }
  .mod-card p {
    font-size: 15px;
  }
  .dek {
    grid-template-columns: 1fr;
  }
  .dek > div {
    border-right: none;
    border-bottom: 1px solid var(--rule-soft);
    padding: 16px 0 !important;
  }
  .courtroom {
    grid-template-columns: 1fr;
  }
  .plan {
    position: relative;
    top: 0;
    height: auto;
    max-height: none;
    min-height: 420px;
    border-right: none;
    border-bottom: 1px solid var(--ink);
    padding: 24px 0;
  }
  .plan-caption .dir-x {
    display: none;
  }
  .plan-caption .dir-y {
    display: inline;
  }
  .mods-stack {
    padding: 24px 0;
  }
  .mod-card {
    padding: 40px 0;
  }
  .band {
    grid-template-columns: 1fr;
  }
  .band .kicker {
    writing-mode: horizontal-tb;
    transform: none;
    border: none;
    padding: 0;
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .step {
    border-right: none;
    border-bottom: 1px solid var(--rule-soft);
    padding: 28px 0 !important;
  }
  .foot-inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .foot-brand {
    grid-column: 1 / -1;
    padding-bottom: 8px;
  }
  .foot-brand p {
    max-width: none;
  }
  .foot-fine {
    flex-direction: column;
    gap: 12px;
  }
  .foot-fine-right {
    align-items: flex-start;
    text-align: left;
  }

  .seal {
    width: 100%;
    justify-content: center;
  }

  .seal-2 {
    justify-content: center;
    text-align: center;
    align-items: center;
    align-self: center;
    margin: auto;
  }
}

/* The plan is a 1:48 scale drawing in a 600-unit viewBox. Once the column
   is narrower than this it renders under half size and the labels land
   between 4 and 9px, so it stops being a drawing you can read and starts
   being texture. The cards below carry the same six rooms in words. */
@media (max-width: 700px) {
  .plan {
    display: none;
  }
  .courtroom {
    border-bottom: none;
  }
}

/* ---------- theme variants (all anchored to brand blue family) ---------- */

/* Default "brand" is set in :root, light paper, blue ink, mid-blue accent */

/* Deep inverse, the dark hero treatment from firstchair.law */
body[data-theme="ink"] {
  --paper: #171e2c; /* brand ink navy, single uniform background */
  --paper-2: #1e2638; /* subtle lift for panels */
  --ink: #e7ebf2; /* cool off-white */
  --ink-2: #b9c1d1;
  --rule: #e7ebf2;
  --rule-soft: rgba(231, 235, 242, 0.14);
  --accent: #7e9bc8; /* lifted brand blue for legibility on dark */
  --accent-2: #4c6492;
}
body[data-theme="ink"] footer {
  background: #171e2c;
  border-top: 1px solid rgba(231, 235, 242, 0.14);
  color: #e7ebf2;
}
body[data-theme="ink"] footer .foot-tag {
  color: rgba(231, 235, 242, 0.65);
  font-size: 13px;
  line-height: 1.55;
  max-width: 320px;
  font-weight: 300;
  margin: 0;
}
body[data-theme="ink"] footer .foot-col h6 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: rgba(231, 235, 242, 0.55);
  font-weight: 500;
}
body[data-theme="ink"] footer .foot-col a {
  display: block;
  color: rgba(231, 235, 242, 0.85);
  text-decoration: none;
  padding: 4px 0;
  font-size: 13.5px;
}
body[data-theme="ink"] footer .foot-col a:hover {
  color: #e7ebf2;
}
body[data-theme="ink"] footer .foot-rule {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  font-size: 11.5px;
  color: rgba(231, 235, 242, 0.5);
  line-height: 1.6;
  font-family: var(--mono);
  letter-spacing: 0.05em;
}
body[data-theme="ink"] .hero {
  background: #171e2c;
}
body[data-theme="ink"] .hero::before {
  opacity: 0.2;
}

/* Mid, slate blue paper */
body[data-theme="slate"] {
  --paper: #d9e0ec;
  --paper-2: #c3cde0;
  --ink: #171e2c;
  --ink-2: #2a3142;
  --rule: #171e2c;
  --rule-soft: rgba(23, 30, 44, 0.18);
  --accent: #2a3c60;
  --accent-2: #4c6492;
}

/* Coffee, deep coffee brown panel, cream type, brass accent */
body[data-theme="coffee"] {
  --paper: #4b371c; /* coffee brown */
  --paper-2: #5a4426; /* lifted panel */
  --ink: #efe4cf; /* warm cream type */
  --ink-2: #d6c7ab;
  --rule: #efe4cf;
  --rule-soft: rgba(239, 228, 207, 0.16);
  --accent: #d9a653; /* polished brass */
  --accent-2: #b57d2f;
}
body[data-theme="coffee"] footer {
  background: #2e2010;
}

/* Wood, courtroom-pew warm wood tones (paper + accent emote wood, not type) */
body[data-theme="wood"] {
  --paper: #e8dcc3; /* aged oak paper */
  --paper-2: #d4c4a3; /* darker walnut panel */
  --ink: #2a1d10; /* deep walnut type */
  --ink-2: #3d2c1a;
  --rule: #2a1d10;
  --rule-soft: rgba(42, 29, 16, 0.16);
  --accent: #7a4e24; /* mid walnut */
  --accent-2: #a6753b; /* burnished brass/walnut */
}

/* ============================================================
   INDEX PAGE SECTIONS
   ============================================================ */

/* ---------- hero ---------- */
.hero {
  position: relative;
  z-index: 1;
  background: var(--ink);
  color: #e7ebf2;
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
  min-height: 560px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  pointer-events: none;
  z-index: 2;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(231, 235, 242, 0.04) 0 1px,
    transparent 1px 14px
  );
}

/* Hero media: full-bleed video on the right side, fades into ink on the left */
.hero-media {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 72%;
  z-index: 0;
  pointer-events: none;
  background: #0a0f1a;
}
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Horizontal fade: fully transparent on the left, solid by ~55% across */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 15%,
    rgba(0, 0, 0, 0.55) 32%,
    rgba(0, 0, 0, 0.88) 48%,
    #000 62%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 15%,
    rgba(0, 0, 0, 0.55) 32%,
    rgba(0, 0, 0, 0.88) 48%,
    #000 62%
  );
}
/* extra ink wash sitting over the left of the video for richer blend */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    #171e2c 0%,
    rgba(23, 30, 44, 0.85) 18%,
    rgba(23, 30, 44, 0.35) 38%,
    transparent 58%
  );
}
.hero-media-pill {
  position: absolute;
  bottom: 28px;
  right: 32px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(12, 18, 32, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(231, 235, 242, 0.18);
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  max-width: 380px;
  pointer-events: auto;
}
.hero-media-pill img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid rgba(231, 235, 242, 0.2);
}
.hero-media-pill span {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(231, 235, 242, 0.85);
  font-weight: 300;
}
.hero-media-pill strong {
  color: #e7ebf2;
  font-weight: 500;
}

@media (max-width: 900px) {
  .hero-media {
    position: relative;
    width: 100%;
    height: 360px;
    margin-top: 20px;
  }
  .hero-media video {
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 70%,
      transparent 100%
    );
    mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  }
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 64px 32px 80px;
  display: grid;
  grid-template-columns: minmax(0, 620px) 1fr;
  gap: 60px;
  align-items: center;
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(231, 235, 242, 0.75);
  padding: 6px 12px;
  border: 1px solid rgba(231, 235, 242, 0.4);
  margin-bottom: 28px;
}
.hero-kicker .bar {
  width: 18px;
  height: 1px;
  background: #7e9bc8;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 8.5vw, 128px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 36px;
  color: #e7ebf2;
}
.hero h1 em {
  color: #7e9bc8;
  font-weight: 400;
}
.hero-lede {
  font-size: 18px;
  line-height: 1.55;
  max-width: 520px;
  color: rgba(231, 235, 242, 0.82);
  font-weight: 300;
  margin: 0 0 32px;
}
.hero-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.hero .btn {
  border-color: rgba(231, 235, 242, 0.35);
  color: #e7ebf2;
  background: transparent;
}
.hero .btn:hover {
  background: #e7ebf2;
  color: #171e2c;
  border-color: #e7ebf2;
}
.hero .btn-solid {
  background: #7e9bc8;
  color: #0c1220;
  border-color: #7e9bc8;
}
.hero .btn-solid:hover {
  background: #e7ebf2;
  border-color: #e7ebf2;
  color: #171e2c;
}
.hero-stats {
  display: flex;
  gap: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(231, 235, 242, 0.18);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero-stats .stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Phone. Four stats in a nowrap row want 264px of text plus 96px of gaps,
   360px in a 311px box, so they wrap to a 2x2 instead of overhanging.

   Sits below the base rule rather than in the 640px block further up,
   because .hero-stats declares gap:32px here at the same specificity: an
   override higher in the file had flex-wrap apply and gap silently not,
   which is how it shipped wrapping at a 32px row gap. */
@media (max-width: 640px) {
  .hero-stats {
    flex-wrap: wrap;
    gap: 20px 24px;
  }
}
.hero-stats .v {
  font-family: var(--serif);
  font-size: 30px;
  letter-spacing: 0;
  text-transform: none;
  color: #e7ebf2;
  line-height: 1;
}
.hero-stats .k {
  opacity: 0.6;
}

/* Hero media: full-bleed video on the right side, fades into ink on the left */
.hero-media-OLD {
  position: relative;
  aspect-ratio: 4/5;
  /* let the video bleed past the grid cell on the right so it hits the edge */
  margin-right: -32px;
}
.hero-media-OLD video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Diagonal soft-edge fade: fully visible top-right quadrant, fades into ink on the left and bottom */
  -webkit-mask-image: radial-gradient(
    ellipse 120% 120% at 85% 40%,
    #000 45%,
    rgba(0, 0, 0, 0.85) 60%,
    transparent 92%
  );
  mask-image: radial-gradient(
    ellipse 120% 120% at 85% 40%,
    #000 45%,
    rgba(0, 0, 0, 0.85) 60%,
    transparent 92%
  );
}
.hero-media-pill-OLD {
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(12, 18, 32, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(231, 235, 242, 0.18);
  padding: 10px 16px 10px 10px;
  border-radius: 999px;
  max-width: 360px;
}
.hero-media-pill-OLD img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid rgba(231, 235, 242, 0.2);
}
.hero-media-pill-OLD span {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(231, 235, 242, 0.85);
  font-weight: 300;
}
.hero-media-pill-OLD strong {
  color: #e7ebf2;
  font-weight: 500;
}

/* Hero frame: framed AI-attorneys image */
.hero-frame {
  position: relative;
  aspect-ratio: 4/5;
  background: #141b2c;
  border: 1px solid rgba(231, 235, 242, 0.35);
  padding: 14px;
}
.hero-frame::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(231, 235, 242, 0.2);
  pointer-events: none;
}
.hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.02) saturate(1.05);
}
.hero-frame .corner {
  position: absolute;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(231, 235, 242, 0.65);
  padding: 4px 8px;
  background: var(--ink);
  z-index: 2;
}
.hero-frame .corner.tl {
  top: -1px;
  left: 18px;
  border: 1px solid rgba(231, 235, 242, 0.35);
  border-bottom: none;
  transform: translateY(-50%);
  padding: 2px 10px;
}
.hero-frame .corner.br {
  bottom: -1px;
  right: 18px;
  border: 1px solid rgba(231, 235, 242, 0.35);
  border-top: none;
  transform: translateY(50%);
  padding: 2px 10px;
}

/* ---------- test-drive band (dark full-bleed) ---------- */
.testdrive {
  position: relative;
  z-index: 1;
  background: var(--paper-2);
  border-bottom: 1px solid var(--ink);
}
.testdrive-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 32px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
}
.testdrive-inner > div:first-child {
  text-align: center;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.testdrive-inner .video-frame {
  width: 100%;
  aspect-ratio: 21/9;
}
.testdrive-cta {
  margin-top: 8px;
  padding: 20px 36px;
  font-size: 14px;
  letter-spacing: 0.22em;
  min-width: 280px;
  justify-content: center;
}
.testdrive .tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--ink);
  margin-bottom: 24px;
}
.testdrive .tag .bar {
  width: 18px;
  height: 1px;
  background: var(--accent);
}
.testdrive h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}
.testdrive h2 em {
  color: var(--accent);
}
.testdrive p {
  font-size: 17px;
  line-height: 1.55;
  max-width: 520px;
  color: var(--ink-2);
  font-weight: 300;
  margin: 0 auto 28px;
}
.video-frame {
  position: relative;
  aspect-ratio: 16/10;
  border: 1px solid var(--ink);
  background: #000;
  overflow: hidden;
}
.video-frame.borderless {
  border: 0;
  background: transparent;
  -webkit-mask-image: radial-gradient(
    ellipse 90% 90% at 50% 50%,
    #000 55%,
    rgba(0, 0, 0, 0.6) 80%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 90% 90% at 50% 50%,
    #000 55%,
    rgba(0, 0, 0, 0.6) 80%,
    transparent 100%
  );
}
.video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-frame .vcorner {
  position: absolute;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--paper);
  z-index: 2;
}
.video-frame .vcorner.tl {
  top: 12px;
  left: 12px;
}
.video-frame .vcorner.br {
  bottom: 12px;
  right: 12px;
  background: var(--accent);
}
.video-frame .play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(12, 18, 32, 0.25);
  transition: background 0.2s;
}
.video-frame .play:hover {
  background: rgba(12, 18, 32, 0.12);
}
.video-frame .play.hidden {
  display: none;
}
.video-frame .play-disc {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
}

/* ---------- Master Every Stage, alternating full-bleed rows ---------- */
.stages {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--ink);
}
.stages-head {
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 32px 40px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: end;
  border-bottom: 1px solid var(--ink);
}
.stages-head .kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.stages-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 820px;
}
.stages-head h2 em {
  color: var(--accent);
}
.stages-head .right {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink);
  opacity: 0.65;
  line-height: 1.7;
}

.stage-row {
  display: none;
}

/* ---------- PLATES (3×2 numbered trading cards) ---------- */
#stages[data-stage-mode="playlist"] .stage-plates {
  display: none;
}
#stages[data-stage-mode="plates"] .stage-playlist {
  display: none;
}

.stage-plates {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 32px 100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-left: 1px solid var(--rule-soft);
  border-top: 1px solid var(--rule-soft);
}
.plate {
  position: relative;
  padding: 0 0 28px;
  min-height: 360px;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: background 0.3s ease;
  animation: plateIn 0.7s ease both;
  animation-delay: var(--plate-delay);
}
@keyframes plateIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.plate:hover {
  background: var(--paper-2);
}
.plate:hover .plate-roman {
  transform: translateX(2px);
}
.plate:hover .plate-media video {
  transform: scale(1.02);
}

/* Plate media: ambient video thumbnail at top of each plate */
.plate-media {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #0a0f1a;
  border-bottom: 1px solid var(--rule-soft);
}
.plate-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.plate-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 55%,
    rgba(13, 16, 19, 0.45) 100%
  );
}
body[data-theme="ink"] .plate-media::after {
  background: linear-gradient(
    to bottom,
    transparent 55%,
    rgba(10, 15, 26, 0.6) 100%
  );
}
.plate-media-stamp {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(12, 18, 32, 0.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 5px 9px;
  border: 1px solid rgba(231, 235, 242, 0.22);
}

/* Plate text content gets its own padding since .plate lost it */
.plate-head,
.plate-body {
  padding-left: 28px;
  padding-right: 28px;
}
.plate-head {
  padding-top: 26px;
}
.plate-body {
  padding-bottom: 0;
  gap: 14px;
}

.plate-head {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.75;
}
.plate-roman {
  font-family: var(--serif);
  font-size: 72px;
  letter-spacing: -0.03em;
  color: var(--accent);
  line-height: 0.82;
  opacity: 1;
  min-width: 56px;
  transition: transform 0.3s ease;
}
.plate-rule {
  flex: 1;
  height: 1px;
  background: var(--ink);
  opacity: 0.25;
}
.plate-kicker {
  white-space: nowrap;
}

.plate-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.plate-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0;
}
.plate-body h3 em {
  color: var(--accent);
}
.plate-body p {
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
  color: var(--ink-2);
  font-weight: 300;
}
.plate-foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.plate-feats {
  color: var(--ink);
  opacity: 0.6;
  line-height: 1.4;
}
/* The plate's one action, so it takes the site button, same as the
   module cards on /features. It used to share a line with the feature
   list at 9.5px and read as a third caption. */
.plate-link {
  width: 100%;
  justify-content: center;
  padding: 14px 18px;
  font-size: 11px;
  letter-spacing: 0.18em;
}
.plate-link .arr {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  transition: transform 0.18s;
}
.plate-link:hover .arr {
  transform: translateX(4px);
}

/* ---------- PLAYLIST (one hero + chapter list) ---------- */
.stage-playlist {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 32px 100px;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 48px;
  align-items: start;
}
.play-stage {
  display: grid;
  grid-template-rows: auto auto;
  gap: 36px;
}
.play-marquee {
  position: relative;
  aspect-ratio: 16/11;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0 39px,
      var(--rule-soft) 39px 40px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 39px,
      var(--rule-soft) 39px 40px
    );
}
.play-roman-xl {
  font-family: var(--serif);
  font-size: clamp(180px, 22vw, 320px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--accent);
  animation: fadeSwap 0.5s ease;
}
@keyframes fadeSwap {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.play-marquee .mcorner {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: var(--ink);
  color: var(--paper);
  z-index: 2;
}
.play-marquee .mcorner.br {
  top: auto;
  bottom: 14px;
  left: auto;
  right: 14px;
  background: var(--accent);
}

.play-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px 28px;
  align-items: start;
}
.play-num {
  font-family: var(--serif);
  font-size: 96px;
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--accent);
  grid-row: span 3;
}
.play-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
}
.play-body h3 em {
  color: var(--accent);
}
.play-body .lede {
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0;
  color: var(--ink-2);
  font-weight: 300;
  max-width: 560px;
}
.play-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 28px;
  border-top: 1px solid var(--rule-soft);
  padding-top: 18px;
  margin-top: 2px;
}
.pm-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pm-k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
  color: var(--ink);
}
.pm-v {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.2;
  color: var(--ink);
}

.play-list {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink);
}
.play-item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-bottom: 1px solid var(--rule-soft);
  text-align: left;
  transition:
    padding 0.25s ease,
    background 0.25s ease;
  font-family: inherit;
  color: inherit;
}
.play-item:hover {
  padding-left: 14px;
}
.pl-roman {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0.3;
  transition:
    color 0.3s,
    opacity 0.3s;
  text-align: left;
}
.play-item[aria-selected="true"] .pl-roman {
  color: var(--accent);
  opacity: 1;
}
.pl-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pl-n {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}
.pl-title {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.pl-bar {
  width: 42px;
  height: 1px;
  background: var(--ink);
  opacity: 0.2;
  transition: all 0.3s ease;
}
.play-item[aria-selected="true"] {
  background: var(--paper-2);
}
.play-item[aria-selected="true"] .pl-bar {
  width: 60px;
  opacity: 1;
  background: var(--accent);
  height: 2px;
}

/* ---------- Founders / About band ---------- */
.founders {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 100px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  border-bottom: 1px solid var(--ink);
}
.founders .kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  display: block;
}
.founders h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
}
.founders h2 em {
  color: var(--accent);
}
.founders p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  font-weight: 300;
  margin: 0 0 18px;
  max-width: 560px;
}

/* ---------- Testimonials ---------- */
.testimonials {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--ink);
}
.testimonials-head {
  max-width: 1400px;
  margin: 0 auto;
  padding: 100px 32px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  border-bottom: 1px solid var(--ink);
}
.testimonials-head .kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.testimonials-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 1100px;
}
.testimonials-head h2 em {
  color: var(--accent);
}
.quotes {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.quote {
  padding: 48px 32px 40px;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
.quote:nth-child(3n) {
  border-right: none;
}
.quote:nth-last-child(-n + 3) {
  border-bottom: none;
}
.quote:first-child,
.quote:nth-child(4) {
  padding-left: 0;
}
.quote:nth-child(3n) {
  padding-right: 0;
}
.quote .qtop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
}
.quote .qtop .num {
  color: var(--accent);
  opacity: 1;
}
.quote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  flex: 1;
}
/* large decorative quotation mark removed, each blockquote now uses
   typographic quote marks inline instead. */
.quote cite {
  display: flex;
  align-items: center;
  gap: 12px;
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.8;
  padding-top: 14px;
  border-top: 1px dashed rgba(23, 30, 44, 0.2);
}
.quote cite .yr {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--accent);
  letter-spacing: -0.02em;
  text-transform: none;
}

/* ---------- FAQ ---------- */
.faq {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 32px;
  border-bottom: 1px solid var(--ink);
}
.faq-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 0;
}
.faq-head .kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.faq-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
.faq-head h2 em {
  color: var(--accent);
}
.faq-head .right {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink);
  opacity: 0.6;
  line-height: 1.7;
}
.faq-list {
  display: flex;
  flex-direction: column;
}
.faq-item {
  border-bottom: 1px solid var(--rule-soft);
  padding: 28px 0;
  cursor: pointer;
  display: grid;
  grid-template-columns: 60px 1fr 24px;
  gap: 24px;
  align-items: start;
  transition: padding 0.2s;
}
.faq-item:hover {
  background: rgba(76, 100, 146, 0.04);
}
.faq-item .fnum {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
  padding-top: 6px;
}
.faq-item .fq {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.faq-item .ftoggle {
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1;
  padding-top: 8px;
  color: var(--ink);
  transition: transform 0.3s;
}
.faq-item.open .ftoggle {
  transform: rotate(45deg);
  color: var(--accent);
}
.faq-ans {
  grid-column: 2;
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.4s ease,
    margin-top 0.3s;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  font-weight: 300;
}
.faq-item.open .faq-ans {
  max-height: 400px;
  margin-top: 14px;
}

/* ---------- responsive extras ---------- */
@media (max-width: 1180px) {
  .stage-plates {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 20px;
  }
  .testdrive-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 20px;
  }
  .testdrive-cta {
    padding: 14px 24px;
    font-size: 12px;
    min-width: 0;
  }
  .stage-row {
    display: none;
  }
  .stage-plates {
    grid-template-columns: 1fr;
    padding: 40px 20px;
  }
  /* The plate videos are 1920 wide with no max-width, and .plate is a grid
     item, so it defaults to min-width:auto and the 1fr column refuses to be
     narrower than the video inside it. That put a 395px column in a 311px
     box and dragged the document 53px wider than the screen. */
  .plate {
    min-width: 0;
  }
  .plate-media,
  .plate-media video {
    max-width: 100%;
  }
  .stage-playlist {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .play-list {
    position: static;
  }
  .play-body {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .play-num {
    grid-row: auto;
    font-size: 72px;
  }
  .founders {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 60px 22px;
  }

  .founders p {
    font-size: 15px;
  }
  .stages-head {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 40px 20px;
  }
  .stages-head .right {
    text-align: left;
  }
  .testimonials-head {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 40px 20px;
  }
  .quotes {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .quote {
    border-right: none !important;
    padding: 36px 0 !important;
  }
  .faq {
    padding: 40px 20px;
  }
  .faq-head {
    grid-template-columns: 1fr;
  }
  .faq-item {
    gap: 4px;
  }
  .faq-head .right {
    text-align: left;
  }
  .cta {
    padding: 40px 20px;
    margin: 0;
  }
  .cta-inner {
    padding: 80px 20px;
  }
  .cta-inner h2 {
    font-size: 38px;
  }
}

/* Only "Exhibit III · The Witness Stand" is long enough to overhang the
   plate, at 254px against the others' 164 to 197. The label is already
   mono at 10px, so it wraps rather than shrinking further.

   This sits at the bottom of the file on purpose. .plate-kicker sets
   nowrap around line 864, so the same rule in the 640px block further up
   loses on source order and silently does nothing. */
@media (max-width: 640px) {
  .plate-head,
  .plate-body {
    padding-left: 12px;
  }
  .plate-kicker {
    white-space: normal;
  }
  .plate-feats {
    max-width: 292px;
  }
}