/* ABOUT PAGE — PERSONNEL FILE / DOSSIER
   Visual language locked to index.html + contact.html.
   ─────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --black:#000; --surface:#0a0a0a; --surface2:#111;
  --border:#1e1e1e; --border2:#2a2a2a;
  --dim:#444; --mid:#666; --light:#999;
  --text:#d4d0c8; --bright:#f0ece0; --red:#c0392b;
  --mono:'Space Mono', monospace;
  --display:'Chakra Petch', sans-serif;
}
html { scroll-behavior: smooth; }
body {
  background: var(--black); color: var(--text);
  font-family: var(--mono); font-size: 13px; line-height: 1.55;
  min-height: 100vh; overflow-x: hidden;
  display: flex; flex-direction: column;
}
a { color: inherit; text-decoration: none; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #222; }

/* ─── NAV (mirrors contact.html) ─── */

main { flex: 1; display: flex; flex-direction: column; }

/* ─── DOSSIER HEADER STRIP ─── */
.dossier-strip {
  display: flex; align-items: center;
  height: 32px; padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to right, rgba(192,57,43,0.10), transparent 40%);
  font-size: 10px; letter-spacing: 3px; color: var(--mid);
  gap: 24px;
}
.dossier-strip .ds-cls { color: var(--red); font-weight: 700; }
.dossier-strip .ds-cls::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  background: var(--red); border-radius: 50%; margin-right: 8px;
  box-shadow: 0 0 6px var(--red);
  animation: pulse 1.6s ease-in-out infinite;
  vertical-align: 2px;
}
.dossier-strip .ds-spacer { flex: 1; }
.dossier-strip .ds-meta { color: var(--dim); }

@keyframes pulse {
  0%,100% { opacity: 1; } 50% { opacity: 0.35; }
}

/* ─── HERO / SUBJECT FRAME ─── */
.subject {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  border-bottom: 1px solid var(--border);
  min-height: 78vh;
}
.subject-portrait {
  position: relative;
  overflow: hidden;
  background: #000;
}
.subject-portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 28%;
  filter: grayscale(0.6) contrast(1.05) brightness(0.78);
  opacity: 0.92;
}
.subject-portrait::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.85) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}
.subject-portrait::after {
  content: ''; position: absolute; inset: 0; z-index: 3;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.018) 3px 4px);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.sp-corner {
  position: absolute; z-index: 4;
  font-size: 9px; letter-spacing: 2.5px; color: var(--light);
  font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.sp-corner.tl { top: 18px; left: 20px; }
.sp-corner.tr { top: 18px; right: 20px; }
.sp-corner.bl { bottom: 20px; left: 20px; }
.sp-corner.br { bottom: 20px; right: 20px; color: var(--red); }
.sp-corner .crosshair { width: 14px; height: 14px; position: relative; }
.sp-corner .crosshair::before, .sp-corner .crosshair::after {
  content: ''; position: absolute; background: currentColor;
}
.sp-corner .crosshair::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.sp-corner .crosshair::after { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }
.sp-id-block {
  position: absolute; bottom: 56px; left: 24px; z-index: 5;
  display: flex; flex-direction: column; gap: 10px;
}
.sp-id {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--bright);
  letter-spacing: 0.3px; line-height: 1;
  text-transform: uppercase;
}
.sp-id em { font-style: normal; color: var(--red); }
.sp-id-meta {
  font-size: 10px; letter-spacing: 3px; color: var(--mid);
  display: flex; gap: 18px; flex-wrap: wrap;
}
.sp-id-meta span { color: var(--light); }
.sp-id-meta .red { color: var(--red); }

/* LEFT COLUMN — vital signs / specs */
.subject-vitals {
  display: flex; flex-direction: column;
  background: var(--black);
  border-right: 1px solid var(--border);
}
.sv-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px;
  border-bottom: 1px solid var(--border);
  font-size: 10px; letter-spacing: 3px; color: var(--mid);
}
.sv-head .sv-tag { color: var(--red); font-weight: 700; }
.sv-head .sv-rev { color: var(--dim); }
.sv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
}
.sv-cell {
  padding: 22px 28px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.sv-cell:nth-child(2n) { border-right: none; }
.sv-cell .sv-lbl {
  font-size: 9px; letter-spacing: 3px; color: var(--dim);
  display: flex; align-items: center; gap: 8px;
}
.sv-cell .sv-lbl::before {
  content: '+'; color: var(--red); font-weight: 700;
}
.sv-cell .sv-val {
  font-family: var(--display); font-weight: 700;
  font-size: 22px; color: var(--bright);
  letter-spacing: 1px; line-height: 1.1;
}
.sv-cell .sv-sub {
  font-size: 11px; color: var(--light);
  letter-spacing: 0.5px;
}
.sv-cell.span-2 {
  grid-column: 1 / -1;
  border-right: none;
}
.sv-cell .sv-bars {
  display: flex; gap: 3px; margin-top: 4px;
}
.sv-cell .sv-bars i {
  display: block; width: 5px; height: 14px; background: var(--border2);
}
.sv-cell .sv-bars i.on { background: var(--red); box-shadow: 0 0 4px rgba(192,57,43,0.7); }

.sv-statement {
  padding: 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(192,57,43,0.04);
}
.sv-statement .sv-st-tag {
  font-size: 10px; letter-spacing: 3px; color: var(--red);
  font-weight: 700; margin-bottom: 14px;
}
.sv-statement p {
  font-family: var(--display);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.35; color: var(--bright);
  font-weight: 600; letter-spacing: 0.2px;
  text-wrap: balance;
}
.sv-statement p em { font-style: normal; color: var(--red); }

/* ─── BIO / SIGNAL ─── */
.bio {
  display: grid;
  grid-template-columns: 280px 1fr;
  border-bottom: 1px solid var(--border);
}
.bio-side {
  padding: 56px 28px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 18px;
  background: linear-gradient(180deg, rgba(192,57,43,0.05), transparent 60%);
}
.bio-side .bs-num {
  font-family: var(--display); font-weight: 700;
  font-size: 64px; line-height: 0.85; color: var(--red);
  letter-spacing: -2px;
}
.bio-side .bs-tag {
  font-size: 10px; letter-spacing: 3px; color: var(--mid);
}
.bio-side .bs-sub {
  font-size: 11px; color: var(--light); line-height: 1.6;
  margin-top: 8px;
}
.bio-side .bs-rule {
  width: 40px; height: 1px; background: var(--red);
  margin: 8px 0;
}
.bio-side .bs-meta {
  margin-top: auto;
  font-size: 10px; letter-spacing: 2px; color: var(--dim);
  display: flex; flex-direction: column; gap: 6px;
}
.bio-side .bs-meta span { color: var(--light); }

.bio-body {
  padding: 56px 8% 64px 56px;
  display: flex; flex-direction: column; gap: 22px;
  max-width: 78ch;
}
.bio-body h2 {
  font-family: var(--display);
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.05; color: var(--bright);
  font-weight: 700; letter-spacing: -0.5px;
  text-wrap: balance;
  margin-bottom: 4px;
}
.bio-body h2 em { font-style: normal; color: var(--red); }
.bio-body p {
  /* 2026-05-16 — bumped 14 → 15.5px ("a little bigger even on desktop"). */
  font-size: 15.5px; line-height: 1.75; color: var(--text);
  text-wrap: pretty;
}
.bio-body p strong { color: var(--bright); font-weight: 700; }
.bio-body p em { color: var(--red); font-style: normal; font-weight: 600; }
.bio-body .pull {
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.3; color: var(--bright); font-weight: 600;
  border-left: 2px solid var(--red);
  padding: 10px 0 10px 22px;
  margin: 14px 0 6px;
  text-wrap: balance;
}

/* ─── OPERATING PRINCIPLES ─── */
.principles {
  border-bottom: 1px solid var(--border);
  background: var(--black);
}
.princ-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 32px 56px 18px;
  border-bottom: 1px solid var(--border);
}
.princ-head .ph-tag {
  font-size: 10px; letter-spacing: 3px; color: var(--red); font-weight: 700;
}
.princ-head h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 2.8vw, 36px);
  letter-spacing: -0.3px; color: var(--bright);
  flex: 1; padding: 0 32px;
}
.princ-head .ph-count {
  font-size: 10px; letter-spacing: 3px; color: var(--dim);
}
.princ-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.princ-card {
  padding: 36px 28px 32px;
  border-right: 1px solid var(--border);
  position: relative;
  min-height: 230px;
  display: flex; flex-direction: column; gap: 14px;
  transition: background 0.2s;
}
.princ-card:nth-child(4n) { border-right: none; }
.princ-card:nth-child(n+5) { border-top: 1px solid var(--border); }
.princ-card:hover { background: rgba(192,57,43,0.05); }
.princ-card .pc-num {
  font-family: var(--display); font-weight: 700;
  font-size: 22px; letter-spacing: 1.5px; color: var(--red);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.princ-card .pc-title {
  font-family: var(--display); font-weight: 700;
  font-size: 19px; letter-spacing: 0.3px; color: var(--bright);
  line-height: 1.2;
}
.princ-card .pc-body {
  font-size: 14px; line-height: 1.65; color: var(--light);
}

/* ─── DISCIPLINES (BAR ROWS) ─── */
.disciplines {
  border-bottom: 1px solid var(--border);
}
.disc-head {
  padding: 32px 56px 22px;
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.disc-head h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 2.8vw, 36px); color: var(--bright);
  letter-spacing: -0.3px;
}
.disc-head .dh-tag {
  font-size: 10px; letter-spacing: 3px; color: var(--red); font-weight: 700;
}
.disc-row {
  display: grid;
  grid-template-columns: 80px 1.2fr 1fr 80px 60px;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.disc-row:last-child { border-bottom: none; }
.disc-row:hover { background: rgba(192,57,43,0.04); }
.disc-row > div {
  padding: 22px 24px;
  display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid var(--border);
}
.disc-row > div:last-child { border-right: none; }
.disc-row .dr-num {
  font-family: var(--display); font-weight: 700;
  font-size: 22px; color: var(--red); letter-spacing: 1px;
}
.disc-row .dr-name {
  font-family: var(--display); font-weight: 700;
  font-size: 18px; color: var(--bright); letter-spacing: 0.3px;
  line-height: 1.2;
}
.disc-row .dr-name span {
  display: block; font-family: var(--mono); font-weight: 400;
  font-size: 10px; letter-spacing: 2px; color: var(--mid);
  margin-top: 4px;
}
.disc-row .dr-desc { font-size: 12.5px; color: var(--light); line-height: 1.55; }
.disc-row .dr-bars { gap: 0; flex-direction: row; align-items: center; padding: 22px 18px; }
.disc-row .dr-bars .bset { display: flex; gap: 3px; }
.disc-row .dr-bars i {
  display: block; width: 5px; height: 16px; background: var(--border2);
}
.disc-row .dr-bars i.on { background: var(--red); }
.disc-row .dr-tag { font-size: 10px; letter-spacing: 2px; color: var(--mid); align-items: center; }

/* ─── CURRENTLY (NOW STATUS) ─── */
.now {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border);
}
.now-col {
  padding: 40px 44px 48px;
  display: flex; flex-direction: column; gap: 18px;
}
.now-col.left { border-right: 1px solid var(--border); background: rgba(192,57,43,0.03); }
.now-col h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px); color: var(--bright);
  letter-spacing: -0.2px;
}
.now-col .nc-tag {
  font-size: 10px; letter-spacing: 3px; color: var(--red); font-weight: 700;
}
.now-list { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.now-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px; align-items: baseline;
  padding-bottom: 14px; border-bottom: 1px dashed var(--border2);
}
.now-item:last-child { border-bottom: none; }
.now-item .ni-time {
  font-size: 10px; letter-spacing: 1.5px; color: var(--red); font-weight: 700;
}
.now-item .ni-text {
  font-size: 13px; color: var(--text); line-height: 1.55;
}
.now-item .ni-text strong { color: var(--bright); font-weight: 700; }

/* ─── INSTRUMENTS / STACK ─── */
.stack {
  border-bottom: 1px solid var(--border);
}
.stack-head {
  padding: 32px 56px 22px;
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.stack-head h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 2.8vw, 36px); color: var(--bright);
  letter-spacing: -0.3px;
}
.stack-head .sh-tag {
  font-size: 10px; letter-spacing: 3px; color: var(--red); font-weight: 700;
}
.stack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.stack-col {
  padding: 32px 28px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 16px;
}
.stack-col:last-child { border-right: none; }
.stack-col .sc-cat {
  font-size: 10px; letter-spacing: 3px; color: var(--red); font-weight: 700;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.stack-col .sc-list {
  display: flex; flex-direction: column; gap: 8px;
}
.stack-col .sc-list span {
  font-size: 12px; letter-spacing: 1px; color: var(--text);
  display: flex; align-items: baseline; gap: 8px;
}
.stack-col .sc-list span::before {
  content: '·'; color: var(--red); font-weight: 700;
}

/* ─── TIMELINE ─── */
.timeline {
  border-bottom: 1px solid var(--border);
}
.tl-head {
  padding: 32px 56px 22px;
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.tl-head h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 2.8vw, 36px); color: var(--bright);
  letter-spacing: -0.3px;
}
.tl-head .th-tag {
  font-size: 10px; letter-spacing: 3px; color: var(--red); font-weight: 700;
}
.tl-rows {
  display: flex; flex-direction: column;
}
.tl-row {
  display: grid;
  grid-template-columns: 110px 1fr 220px 80px;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.tl-row:last-child { border-bottom: none; }
.tl-row:hover { background: rgba(192,57,43,0.04); }
.tl-row > div {
  padding: 20px 24px;
  display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid var(--border);
}
.tl-row > div:last-child { border-right: none; }
.tl-year {
  font-family: var(--display); font-weight: 700;
  font-size: 20px; color: var(--red); letter-spacing: 1px;
}
.tl-title { font-size: 14px; color: var(--bright); font-weight: 700; letter-spacing: 0.3px; }
.tl-title span {
  display: block; font-weight: 400; font-size: 11px; color: var(--light);
  margin-top: 4px; letter-spacing: 0.5px;
}
.tl-meta { font-size: 11px; color: var(--mid); letter-spacing: 1.5px; }
.tl-tag { font-size: 10px; color: var(--mid); letter-spacing: 2px; align-items: center; text-align: right; }

/* ─── CTA STRIP ─── */
.cta {
  /* Padding pulled in 2026-05-15 (top 52→36, bottom 96→60) — Chris flagged
     too much wasted vertical space around "If the frequencies line up". */
  padding: 36px 56px 60px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse at 70% 50%, rgba(192,57,43,0.10), transparent 60%),
    var(--black);
  position: relative; overflow: hidden;
}
.cta::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(192,57,43,0.02) 3px 4px);
  pointer-events: none;
}
.cta-tag {
  font-size: 10px; letter-spacing: 4px; color: var(--red); font-weight: 700;
  margin-bottom: 22px; position: relative;
}
.cta h2 {
  /* Dialed back from clamp(38px, 5vw, 64px) — was outsized for the
     surrounding section hierarchy. max-width removed 2026-05-15 so
     "If the frequencies line up, let's talk." sits on one line at
     desktop width (was wrapping at "frequencies"). */
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1; color: var(--bright); letter-spacing: -0.5px;
  text-wrap: balance;
  margin-bottom: 20px; position: relative;
}
.cta h2 em { font-style: normal; color: var(--red); }
/* 2026-05-17 — mobile-only <br> after "line up," so "let's talk."
   drops to its own line instead of cramming both fragments on a tight
   single line. Hidden on desktop where the whole phrase fits cleanly
   on one line. Trailing space after the <br> keeps spacing correct
   when the br is collapsed (display: none). */
.cta h2 .cta-mbreak { display: none; }
@media (max-width: 600px) {
  .cta h2 .cta-mbreak { display: inline; }
}
.cta-row {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  position: relative;
}
.cta-btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 28px; border: 1px solid var(--border2);
  font-size: 12px; letter-spacing: 2.5px; color: var(--bright);
  background: rgba(192,57,43,0.06);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cta-btn:hover { background: var(--red); border-color: var(--red); color: var(--bright); }
.cta-btn .br { color: var(--red); }
.cta-btn:hover .br { color: var(--bright); }
.cta-meta {
  font-size: 10px; letter-spacing: 2.5px; color: var(--dim);
  display: flex; gap: 18px;
}
.cta-meta span { color: var(--light); }

/* ─── FOOTER + STATUS BAR (mirrors contact) ─── */
footer {
  padding: 18px 24px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 24px;
  font-size: 10px; letter-spacing: 2.5px; color: var(--mid);
}
.footer-block { display: flex; align-items: center; gap: 8px; }
.footer-block.right { margin-left: auto; }
.live-dot {
  width: 6px; height: 6px; background: var(--red); border-radius: 50%;
  box-shadow: 0 0 6px var(--red); animation: pulse 1.6s ease-in-out infinite;
}
.status-bar {
  display: flex; align-items: center; padding: 10px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 9px; letter-spacing: 2px; color: var(--dim); gap: 22px;
}
.status-item { display: inline-flex; align-items: center; gap: 8px; }
.status-item .dot { width: 5px; height: 5px; background: var(--dim); border-radius: 50%; }
.status-item .dot.active { background: var(--red); box-shadow: 0 0 5px var(--red); }
.status-spacer { flex: 1; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1080px) {
  .princ-grid { grid-template-columns: repeat(2, 1fr); }
  .princ-card:nth-child(4n) { border-right: 1px solid var(--border); }
  .princ-card:nth-child(2n) { border-right: none; }
  .princ-card:nth-child(n+3) { border-top: 1px solid var(--border); }
  .stack-grid { grid-template-columns: 1fr; }
  .stack-col { border-right: none; border-bottom: 1px solid var(--border); }
  .stack-col:last-child { border-bottom: none; }
}
@media (max-width: 900px) {
  .subject { grid-template-columns: 1fr; min-height: auto; }
  .subject-portrait { order: -1; border-bottom: 1px solid var(--border); height: 60vh; }
  .subject-vitals { border-right: none; }
  .bio { grid-template-columns: 1fr; }
  .bio-side { border-right: none; border-bottom: 1px solid var(--border); padding: 32px 22px; }
  .bio-body { padding: 36px 22px 48px; }
  .now { grid-template-columns: 1fr; }
  .now-col.left { border-right: none; border-bottom: 1px solid var(--border); }
  .disc-row { grid-template-columns: 60px 1fr 60px; }
  .disc-row .dr-desc, .disc-row .dr-tag { display: none; }
  .tl-row { grid-template-columns: 80px 1fr 60px; }
  .tl-row .tl-meta { display: none; }
}
@media (max-width: 600px) {
  .princ-grid { grid-template-columns: 1fr; }
  .princ-card { border-right: none !important; }
  .princ-card:not(:first-child) { border-top: 1px solid var(--border); }
  .bio-body { padding: 28px 18px 40px; }
  .bio-body h2 { font-size: 28px; }
  /* 2026-05-16 — body copy bumped on mobile across the whole /about page.
     Was 14-15px in monospace, which reads small on a phone. Bumped to 16px
     with tighter line-height so paragraphs don't get airy.
     Covers: bio paragraphs (top hero), principle card body, insignia
     thesis + body, "Same hand. Different room." section. */
  .bio-body p,
  .subject-vitals--bio .bio-body--inline p,
  .princ-card .pc-body p,
  .princ-card p,
  .insignia .ins-thesis,
  .insignia .ins-seam,
  .closing-onsomething .os-body p,
  .closing-onsomething p { font-size: 16px; line-height: 1.65; }
  /* Keep the oversized lede + small meta lines at their original treatment */
  .closing-onsomething .os-lede { font-size: 22px !important; line-height: 1.25; }
  .closing-onsomething .os-meta { font-size: 10px; line-height: 1.4; }
  /* 2026-05-18 — "The hand stays. The instruments keep changing." pull-
     quote was hitting the 20px clamp minimum on mobile, which Chris
     flagged as too small relative to the desktop treatment. Bumped to
     28px on mobile (was 24px in v1 of this fix — Chris asked for "just
     a little bigger" after seeing 24px in situ). Carries weight without
     overwhelming the bio paragraphs above. */
  .bio-body .pull { font-size: 28px; line-height: 1.25; }
  .now-col { padding: 28px 18px; }
  .princ-head, .disc-head, .stack-head, .tl-head { padding: 24px 18px 14px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .princ-head h3 { padding: 0; }
  .cta { padding: 56px 22px 64px; }
  .sv-grid { grid-template-columns: 1fr; }
  .sv-cell:nth-child(2n) { border-right: none; }
  .sv-cell { border-right: none; }
  .sp-id-block { left: 18px; bottom: 38px; }
  .dossier-strip { padding: 0 14px; gap: 14px; font-size: 9px; letter-spacing: 2px; }
  .dossier-strip .ds-meta:nth-of-type(2) { display: none; }
}