/* corePHP wireframe v2 - EDITORIAL DIRECTION
   DNA Hash: 41f21332015a
   DNA: editorial-serif-dramatic | editorial-magazine | centered-minimal
        | warm-neutral-editorial | editorial-understated | photography-editorial
        | cinematic-slow | very-generous | editorial-curtain-overlay | paper-organic
   Mutations: oversized-heading, decorative-drop-cap, viewport-section,
              paper-texture, accent-font
*/

:root {
  /* === TYPOGRAPHY (editorial-serif-dramatic) === */
  --font-display: "Fraunces", "PP Editorial New", "Playfair Display", Georgia, serif;
  --font-italic: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body: "Inter", "Söhne", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --display-weight: 500;
  --display-weight-light: 300;
  --display-weight-bold: 600;
  --display-letterspacing: -0.025em;
  --display-letterspacing-tight: -0.04em;
  --display-line-height: 0.94;
  --body-size: 17px;
  --body-weight: 400;
  --body-line-height: 1.6;
  --body-letterspacing: -0.005em;
  --max-line-length: 64ch;

  /* === COLOR (warm-neutral-editorial) === */
  --ivory: #F5F0E5;
  --ivory-warm: #EBE3D2;
  --bone: #E0D8C5;
  --ink: #0E0E0E;
  --ink-soft: #1F1F1F;
  --ink-mute: #5C594F;
  --ink-faint: #8A877C;
  --brand-red: #C8102E;
  --red-deep: #A50E26;
  --red-wash: #F5E0E2;
  --paper-elevated: #FAF6EC;

  /* === SPACING (responsive — tightens on phones) === */
  --space-section: clamp(72px, 12vh, 180px);
  --space-section-sm: clamp(56px, 9vh, 120px);
  --space-block: clamp(36px, 6vh, 64px);
  --space-paragraph: clamp(16px, 2vh, 22px);
  --gutter: clamp(20px, 3vw, 40px);

  /* === ANIMATION (cinematic-slow) === */
  --ease-cinematic: cubic-bezier(0.7, 0, 0.3, 1);
  --ease-slow: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-quick: 320ms;
  --dur-slow: 700ms;
  --dur-curtain: 850ms;

  /* === LAYOUT (editorial-magazine) === */
  --max-width: 1280px;
  --rule: 1px solid var(--bone);
  --rule-strong: 1px solid var(--ink);

  /* === NAV === */
  --nav-height: 84px;
}

/* === BASE === */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;     /* gentle snap - only when close to a snap point */
  overflow-x: clip;                  /* belt-and-braces with body clip: catches the closed curtain panel and any decorative bleed */
}

/* Snap-points removed: hero is pinned via GSAP and the brief slides up
   naturally over it - scroll-snap would conflict with the pin. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
}
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letterspacing);
  font-feature-settings: "ss01", "ss02", "kern", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip` prevents horizontal overflow without creating a scroll context,
     so position:sticky descendants (like the cinema HUD) keep working. */
  overflow-x: clip;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-letterspacing);
  line-height: var(--display-line-height);
  margin: 0;
  font-style: normal;
  /* Fraunces/serif optical adjustments */
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

/* Italic variant for editorial accents */
.italic-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--display-weight);
  font-variation-settings: "opsz" 144, "SOFT" 80;
}

/* Drop cap - mutation */
.drop-cap::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 5.4em;
  line-height: 0.86;
  padding: 0.05em 0.12em 0 0;
  color: var(--brand-red);
  font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

/* Eyebrow */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}

/* Type scale */
.t-mega   { font-size: clamp(72px, 12vw, 200px); line-height: 0.92; letter-spacing: -0.04em; }
.t-xl     { font-size: clamp(48px, 6.4vw, 104px); line-height: 0.96; letter-spacing: -0.035em; }
.t-l      { font-size: clamp(34px, 4.2vw, 68px);  line-height: 1.0; letter-spacing: -0.025em; }
.t-m      { font-size: clamp(24px, 2.4vw, 36px);  line-height: 1.15; }
.t-lede   { font-size: clamp(22px, 2.4vw, 30px);  line-height: 1.4; font-family: var(--font-display); font-weight: 400; color: var(--ink); }

/* Body variants */
.body-large { font-size: 19px; line-height: 1.55; }
.body-mid   { font-size: 17px; line-height: 1.55; }
.body-small { font-size: 14px; line-height: 1.5; color: var(--ink-mute); }

/* Reading column max */
.col-read { max-width: 64ch; }
.col-narrow { max-width: 48ch; }

/* Section rules */
.section-rule { border-top: var(--rule); }
.section-rule-strong { border-top: var(--rule-strong); }

/* === BUTTONS (text-with-arrow + thin pill) === */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: color var(--dur-quick) var(--ease-soft),
              border-color var(--dur-quick) var(--ease-soft),
              gap var(--dur-quick) var(--ease-soft);
  position: relative;
}
.btn-link:hover {
  color: var(--brand-red);
  border-color: var(--brand-red);
  gap: 18px;
}
.btn-link .arr { transition: transform var(--dur-quick) var(--ease-soft); display: inline-block; }
.btn-link:hover .arr { transform: translateX(3px); }

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  padding: 16px 28px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  transition: background-color var(--dur-quick) var(--ease-soft),
              color var(--dur-quick) var(--ease-soft),
              border-color var(--dur-quick) var(--ease-soft);
  background: transparent;
}
.btn-pill:hover {
  background: var(--ink);
  color: var(--ivory);
}
.btn-pill.is-red {
  background: var(--brand-red);
  color: var(--ivory);
  border-color: var(--brand-red);
}
.btn-pill.is-red:hover {
  background: var(--ink);
  border-color: var(--ink);
}

/* === PAPER GRAIN OVERLAY (mutation: paper-texture) === */
.paper-grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 1;
  mix-blend-mode: multiply;
  opacity: 0.10;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.85'/%3E%3C/svg%3E");
}

/* === HEADER === */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  z-index: 80;                            /* above pin'd hero, brief, and curtain backdrop */
  background: rgba(245, 240, 229, 0.92);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-quick) var(--ease-soft),
              border-color var(--dur-quick) var(--ease-soft);
}
.site-header[data-scrolled="true"] {
  background: rgba(245, 240, 229, 0.94);
  border-bottom-color: var(--bone);
}
.header-inner {
  max-width: var(--max-width);
  height: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* === REDRAWN WORDMARK (slab serif, true to the original 2010 mark)
   Uses Roboto Slab throughout. Tick marks are real slab-serif apostrophe
   characters set in Black weight - matching the original's typographic
   approach (the original ticks were drawn from the same slab letterforms,
   not separate geometric shapes).
   - 'core' kept thinner (400) per user feedback
   - 'PHP' heavy (900) for the original weight contrast
   - Both letters in ink, ticks in brand red as the only color accent
   - Zero gap between core and PHP (negative inline space)
*/
/* Wordmark renders as the official corePHP logo PNG (BW for light bgs,
   WHITE for dark bgs via .wordmark-inverse). The image is set to a fixed
   pixel height; width auto-scales to the source aspect. */
.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
  transition: opacity var(--dur-quick) var(--ease-soft);
}
.wordmark img {
  display: block;
  height: 28px;
  width: auto;
}
.wordmark:hover { opacity: 0.78; }
.wordmark-inverse img { height: 36px; }

/* === INLINE QUICK NAV === */
.quick-nav {
  display: none;
  align-items: center;
  gap: 0;
}
@media (min-width: 1080px) {
  .quick-nav { display: inline-flex; }
}
.quick-nav-link {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 22px;
  position: relative;
  transition: color var(--dur-quick) var(--ease-soft);
}
.quick-nav-link::after {
  content: "";
  position: absolute;
  left: 22px; right: 22px;
  bottom: 6px;
  height: 1.5px;
  background: var(--ink);
  transform-origin: left;
  transform: scaleX(0.0);
  transition: transform var(--dur-slow) var(--ease-cinematic),
              background-color var(--dur-quick) var(--ease-soft);
}
.quick-nav-link:hover { color: var(--brand-red); }
.quick-nav-link:hover::after {
  transform: scaleX(1);
  background-color: var(--brand-red);
}
.quick-nav-sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--brand-red);
  display: inline-block;
  opacity: 0.55;
}

/* === HEADER ACTIONS === */
.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--ivory);
  background: var(--brand-red);
  border: 1px solid var(--brand-red);
  border-radius: 999px;
  padding: 10px 20px;
  text-decoration: none;
  transition: background-color var(--dur-quick) var(--ease-soft),
              border-color var(--dur-quick) var(--ease-soft),
              transform var(--dur-quick) var(--ease-soft);
  white-space: nowrap;
}
.header-cta:hover {
  background: var(--ink);
  border-color: var(--ink);
}
.header-cta .arr { display: inline-block; transition: transform var(--dur-quick) var(--ease-soft); }
.header-cta:hover .arr { transform: translate(2px, -2px); }

/* On phones, hide the "Start a project" pill — the floating
   "Talk to us" sticky CTA covers the same intent without crowding
   the header. Keep just logo + Menu trigger. */
@media (max-width: 720px) {
  .header-cta { display: none; }
  .header-actions { gap: 8px; }
}

/* === MENU TRIGGER (redesigned, "Menu" not "Index") === */
.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 10px 18px 10px 14px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-quick) var(--ease-soft),
              color var(--dur-quick) var(--ease-soft);
  white-space: nowrap;
}
.menu-trigger:hover {
  background: var(--ink);
  color: var(--ivory);
}
.menu-trigger:hover .menu-icon line { stroke: var(--ivory); }
.menu-icon {
  width: 22px;
  height: 14px;
  display: inline-block;
}
.menu-icon line {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform var(--dur-slow) var(--ease-cinematic),
              stroke var(--dur-quick) var(--ease-soft);
  transform-origin: center;
}
.menu-trigger:hover .menu-icon line:nth-child(1) { transform: translateX(-3px); }
.menu-trigger:hover .menu-icon line:nth-child(2) { transform: translateX(3px); }
.menu-trigger:hover .menu-icon line:nth-child(3) { transform: translateX(-3px); }

.menu-trigger .menu-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  margin-left: 4px;
}
.menu-trigger:hover .menu-num { color: rgba(245,240,229,0.65); }

/* === INDEX TRIGGER (signature menu) === */
.index-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 8px 12px 8px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-soft);
}
.index-trigger::before {
  content: "";
  width: 36px;
  height: 1px;
  background: currentColor;
  display: inline-block;
  transition: width var(--dur-quick) var(--ease-soft);
}
.index-trigger:hover { color: var(--brand-red); }
.index-trigger:hover::before { width: 50px; }
.index-trigger .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-red);
  display: inline-block;
}

/* === FOCUS === */
:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 4px;
}

/* === FORM === */
.field {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--ink);
  outline: none;
  transition: border-color var(--dur-quick) var(--ease-soft);
}
.field:focus { border-color: var(--brand-red); }
.field::placeholder { color: var(--ink-faint); }

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* === IMAGE TREATMENTS === */
.editorial-img {
  width: 100%;
  display: block;
  filter: grayscale(0.15) contrast(1.02);
}
.editorial-img.duotone {
  filter: grayscale(1) contrast(1.05);
}

/* === FIGURE / CAPTION === */
.fig {
  margin: 0;
}
.fig-cap {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.fig-cap .lead { color: var(--brand-red); }


/* === BRAND-MARK INLINE (red emphasis for corePHP and stack names) === */
.brand-mark { color: var(--brand-red); }

/* === PRACTICE - bento grid of services ===================================
   Build is the dark anchor (large, left, 2 rows). Market + Run stack on
   the right. byCORE is a featured red card spanning full width below.
*/
.practice {
  background: var(--ivory);
  padding: 120px 0 140px;
  position: relative;
}
.practice__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  gap: 64px;
}

.practice__head {
  display: grid;
  gap: 18px;
  max-width: 880px;
}
.practice__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-red);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.practice__eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--brand-red);
}
.practice__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
}
.practice__lede {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}

/* Bento grid - 12 cols, irregular row heights */
.practice__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px) {
  .practice__grid {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 20px;
  }
  .pcard--build  { grid-column: span 7; grid-row: span 2; }
  .pcard--market { grid-column: span 5; grid-row: span 1; }
  .pcard--run    { grid-column: span 5; grid-row: span 1; }
  .pcard--bycore { grid-column: 1 / -1; grid-row: span 1; }
}

/* Card base */
.pcard {
  position: relative;
  padding: 36px 36px 32px;
  border-radius: 6px;
  background: var(--paper-elevated);
  border: 1px solid var(--bone);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform var(--dur-quick) var(--ease-soft),
              box-shadow var(--dur-quick) var(--ease-soft);
}
.pcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -20px rgba(14,14,14,0.18);
}

.pcard__top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pcard__num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.pcard__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--bone);
  padding: 4px 10px;
}

.pcard__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 80px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0;
}
.pcard__dot { color: var(--brand-red); }
.pcard__copy {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

.pcard__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pcard__chips li {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 6px 14px;
  border: 1px solid var(--bone);
  border-radius: 999px;
  color: var(--ink-soft);
  background: transparent;
  transition: background-color var(--dur-quick) var(--ease-soft),
              color var(--dur-quick) var(--ease-soft),
              border-color var(--dur-quick) var(--ease-soft);
}
.pcard__chips li:hover {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
}

/* BUILD - dark anchor with ghosted architecture illustration */
.pcard--build {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
  overflow: hidden;
}
.pcard--build > *:not(.pcard__bg-art):not(.pcard__bg-code):not(.pcard__bg-sketch) {
  position: relative;
  z-index: 2;
}
.pcard__bg-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--ivory);
  opacity: 0.13;
  pointer-events: none;
  z-index: 1;
}

/* Napkin wireframe sketch as Build card background.
   Anchored bottom-right so it doesn't fight with text content above. */
.pcard__bg-sketch {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 70%;
  max-width: 600px;
  height: auto;
  color: var(--ivory);
  opacity: 0.10;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 900px) {
  .pcard__bg-sketch { width: 100%; opacity: 0.07; }
}

/* === Build card highlights block === */
.pcard__highlights {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(245,240,229,0.18);
}
.pcard__highlights-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,240,229,0.5);
  display: block;
  margin-bottom: 16px;
}
.pcard__highlights-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.pcard__highlights-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: rgba(245,240,229,0.92);
  line-height: 1.4;
  flex-wrap: wrap;
}
.hl-tick {
  font-family: var(--font-mono);
  color: var(--brand-red);
  font-size: 14px;
  flex-shrink: 0;
}
.hl-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(245,240,229,0.55);
  margin-left: auto;
  white-space: nowrap;
}

.pcard__cta { margin-top: 28px; }
.pcard__cta-link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--ivory);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--ivory);
  padding-bottom: 3px;
  transition: gap var(--dur-quick) var(--ease-soft),
              color var(--dur-quick) var(--ease-soft);
}
.pcard__cta-link:hover {
  gap: 14px;
  color: var(--brand-red);
  border-color: var(--brand-red);
}
.pcard--build .pcard__num,
.pcard--build .pcard__name { color: var(--ivory); }
.pcard--build .pcard__copy { color: rgba(245,240,229,0.78); }
.pcard--build .pcard__label {
  color: rgba(245,240,229,0.65);
  border-color: rgba(245,240,229,0.25);
}
.pcard--build .pcard__chips li {
  background: transparent;
  border-color: rgba(245,240,229,0.22);
  color: rgba(245,240,229,0.85);
}
.pcard--build .pcard__dot { color: var(--brand-red); }

/* byCORE - red feature card */
.pcard--bycore {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--ivory);
  padding: 44px 44px 40px;
}
.pcard--bycore .pcard__num,
.pcard--bycore .pcard__name { color: var(--ivory); }
.pcard--bycore .pcard__copy { color: rgba(245,240,229,0.92); max-width: 56ch; }
.pcard--bycore .pcard__label {
  color: rgba(245,240,229,0.85);
  border-color: rgba(245,240,229,0.4);
}
.pcard--bycore .pcard__dot { color: var(--ink); }
.pcard__badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--ivory);
  padding: 8px 14px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  border-bottom-left-radius: 6px;
  border-top-right-radius: 6px;
}
.pcard__badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-red);
  margin-right: 8px;
  vertical-align: middle;
  margin-top: -2px;
}

.pcard__bycore-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: end;
}
@media (min-width: 900px) {
  .pcard__bycore-body {
    grid-template-columns: 1fr 1.4fr;
    gap: 60px;
  }
}
.pcard__name--bycore {
  font-size: clamp(56px, 7vw, 120px);
  letter-spacing: -0.04em;
}
.bycore-by {
  font-style: italic;
  font-weight: 300;
}
.pcard__bycore-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pcard__link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--ivory);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--ivory);
  padding-bottom: 3px;
  align-self: flex-start;
  transition: gap var(--dur-quick) var(--ease-soft);
}
.pcard__link:hover { gap: 14px; }

@media (max-width: 700px) {
  .pcard { padding: 28px 24px; }
  .pcard__name { font-size: 44px; }
  .pcard__name--bycore { font-size: 56px; }
}

/* === BYCORE PRODUCT SHOWCASE ============================================
   3 SaaS product cards with mockup visuals and detailed callouts.
   Reads as a SaaS product page extracted into the corePHP narrative.
*/
.bycore {
  background: var(--ink);
  color: var(--ivory);
  padding: 120px 0 100px;
  position: relative;
}
.bycore__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}
.bycore__head {
  max-width: 920px;
  margin-bottom: 80px;
}
.bycore__url {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory);
  text-decoration: none;
  border: 1px solid rgba(245,240,229,0.25);
  border-radius: 999px;
  padding: 8px 16px;
  margin-bottom: 28px;
  transition: border-color var(--dur-quick) var(--ease-soft),
              background-color var(--dur-quick) var(--ease-soft);
}
.bycore__url:hover {
  border-color: var(--brand-red);
  background: rgba(200,16,46,0.12);
}
.bycore__url-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #28C840;
  box-shadow: 0 0 0 3px rgba(40,200,64,0.18);
}
.bycore__url-by { font-style: italic; font-weight: 400; opacity: 0.75; }
.bycore__url-tld { color: var(--brand-red); font-weight: 600; }
.bycore__url-arr { font-size: 14px; color: var(--brand-red); }

.bycore__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ivory);
  margin: 0;
  max-width: 22ch;
}
.bycore__lede {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: rgba(245,240,229,0.78);
  margin: 20px 0 0;
  max-width: 60ch;
}
.bycore__cp {
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 500;
  color: var(--ivory);
}
.bycore__cp .ph { font-weight: 900; }

/* Card grid - 5 cards in 3+2 layout on desktop */
.bycore__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) {
  .bycore__grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
  }
  .bycore__grid--five > .bycard:nth-child(1),
  .bycore__grid--five > .bycard:nth-child(2),
  .bycore__grid--five > .bycard:nth-child(3) { grid-column: span 2; }
  .bycore__grid--five > .bycard:nth-child(4),
  .bycore__grid--five > .bycard:nth-child(5) { grid-column: span 3; }
}

/* Card */
.bycard {
  background: rgba(245,240,229,0.04);
  border: 1px solid rgba(245,240,229,0.10);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--dur-quick) var(--ease-soft),
              border-color var(--dur-quick) var(--ease-soft),
              background-color var(--dur-quick) var(--ease-soft);
}
.bycard:hover {
  transform: translateY(-4px);
  border-color: rgba(245,240,229,0.22);
  background: rgba(245,240,229,0.06);
}

/* Visual mockup area */
.bycard__visual {
  background: #1A1A1A;
  border-bottom: 1px solid rgba(245,240,229,0.08);
  padding: 0;
  position: relative;
  height: 240px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bycard__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.5);
  border-bottom: 1px solid rgba(245,240,229,0.08);
}
.bycard__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(245,240,229,0.18);
}
.bycard__chrome-label {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(245,240,229,0.45);
  flex: 1;
  text-align: center;
}
.bycard__visual-body {
  flex: 1;
  padding: 18px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  color: var(--ivory);
}

/* Sentinel - status rows */
.bycard__row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(245,240,229,0.85);
}
.bycard__row-status {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bycard__row-status--ok   { background: #28C840; box-shadow: 0 0 0 3px rgba(40,200,64,0.20); }
.bycard__row-status--warn { background: #FEBC2E; box-shadow: 0 0 0 3px rgba(254,188,46,0.20); }
.bycard__row-name { flex: 1; }
.bycard__row-meta { color: rgba(245,240,229,0.50); font-size: 10px; }
.bycard__chart {
  margin-top: auto;
  width: 100%;
  height: 60px;
  color: var(--brand-red);
}

/* Pulse - KPI boxes */
.bycard__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.bycard__kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: rgba(245,240,229,0.04);
  border: 1px solid rgba(245,240,229,0.08);
  border-radius: 4px;
}
.bycard__kpi-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,240,229,0.50);
}
.bycard__kpi-num {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ivory);
  letter-spacing: -0.02em;
}
.bycard__kpi-delta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
}
.bycard__kpi-delta--up { color: #28C840; }
.bycard__bars {
  margin-top: auto;
  width: 100%;
  color: var(--brand-red);
}

/* Forge - flow diagram */
.bycard__flow {
  width: 100%;
  height: 100%;
  color: var(--ivory);
}

/* coreCRM - pipeline kanban mock */
.bycard__pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.bycard__pipe-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(245,240,229,0.04);
  border: 1px solid rgba(245,240,229,0.08);
  border-radius: 4px;
  padding: 6px 6px 8px;
}
.bycard__pipe-head {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  color: rgba(245,240,229,0.6);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.bycard__pipe-card {
  display: block;
  height: 14px;
  background: rgba(245,240,229,0.10);
  border-radius: 2px;
}
.bycard__pipe-card--active {
  background: var(--brand-red);
  opacity: 0.85;
}
.bycard__pipeline-meta {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(245,240,229,0.10);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(245,240,229,0.55);
}
.bycard__pipeline-meta strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--ivory);
  letter-spacing: -0.015em;
}

/* coreSEO - rank rows */
.bycard__row-rank {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-red);
  width: 16px;
  flex-shrink: 0;
}

/* Card body (text content) */
.bycard__body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.bycard__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--brand-red);
}
.bycard__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ivory);
  margin: 0;
}
.bycard__name .by {
  font-style: italic;
  font-weight: 300;
  opacity: 0.85;
}
.bycard__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,240,229,0.55);
  margin: -8px 0 0;
}
.bycard__copy {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(245,240,229,0.78);
  margin: 0;
}
.bycard__features {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  border-top: 1px solid rgba(245,240,229,0.10);
  padding-top: 16px;
  display: grid;
  gap: 8px;
}
.bycard__features li {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: rgba(245,240,229,0.78);
  position: relative;
  padding-left: 18px;
}
.bycard__features li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  color: var(--brand-red);
  font-weight: 600;
}
.bycard__cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--ivory);
  text-decoration: none;
  border: 1px solid var(--ivory);
  border-radius: 999px;
  padding: 10px 18px;
  transition: background-color var(--dur-quick) var(--ease-soft),
              color var(--dur-quick) var(--ease-soft);
}
.bycard__cta:hover {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--ivory);
}

/* Footer block */
.bycore__foot {
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid rgba(245,240,229,0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.bycore__foot-copy {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 400;
  color: var(--ivory);
  margin: 0;
  max-width: 36ch;
}
.bycore__foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--ivory);
  background: var(--brand-red);
  border: 1px solid var(--brand-red);
  border-radius: 999px;
  padding: 14px 26px;
  text-decoration: none;
  transition: background-color var(--dur-quick) var(--ease-soft),
              border-color var(--dur-quick) var(--ease-soft);
}
.bycore__foot-cta:hover {
  background: var(--ivory);
  color: var(--ink);
}
.bycore__foot-by { font-style: italic; font-weight: 300; }

/* === TEAM (LEADERSHIP) =================================================
   Five-person leadership profile section. Two founders sit on a row of
   their own, three directors sit on the second row. Photos are real
   corePHP team headshots. The full team wall lives on /about.
*/
.team {
  background: var(--ivory);
  position: relative;
  padding: clamp(96px, 12vh, 160px) 32px clamp(72px, 9vh, 120px);
}
.team__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.team__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: clamp(48px, 6vh, 80px);
  max-width: 92ch;
}
.team__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-red);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.team__eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--brand-red);
}
.team__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 4.4vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
}
.team__lede {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 8px 0 0;
  max-width: 62ch;
}

/* Footer */
.team__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: clamp(32px, 4vh, 56px);
  padding-top: 28px;
  border-top: 1px solid var(--bone);
}
.team__foot-stat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  max-width: 56ch;
}
.team__foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--ivory);
  background: var(--brand-red);
  border: 1px solid var(--brand-red);
  border-radius: 999px;
  padding: 12px 22px;
  text-decoration: none;
  transition: background-color var(--dur-quick) var(--ease-soft),
              border-color var(--dur-quick) var(--ease-soft);
}
.team__foot-cta:hover {
  background: var(--ink);
  border-color: var(--ink);
}

/* === Team marquee — magnet-style continuous scroll =====================
   Lives outside .team__inner so it bleeds full-width. Two identical
   tracks scroll left in sync; the second covers the seam. Pauses on
   hover so a curious visitor can read names. */
.team__marquee {
  position: relative;
  margin-top: clamp(48px, 6vh, 80px);
  padding: 28px 0;
  overflow: hidden;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--ivory);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.team__marquee-track {
  display: inline-flex;
  align-items: center;
  gap: clamp(28px, 3vw, 48px);
  white-space: nowrap;
  width: max-content;
  animation: teamRoll 110s linear infinite;
  will-change: transform;
}
.team__marquee:hover .team__marquee-track { animation-play-state: paused; }
@keyframes teamRoll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.team__marquee-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: clamp(28px, 3vw, 56px);
  padding-right: clamp(28px, 3vw, 56px);
  border-right: 1px solid var(--bone);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-red);
}
.team__marquee-roll {
  display: inline-flex;
  align-items: center;
  gap: clamp(28px, 3vw, 48px);
}
/* Marquee item: small avatar + italic name */
.mq {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.mq img {
  width: clamp(48px, 4.4vw, 72px);
  height: clamp(48px, 4.4vw, 72px);
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(0.25) contrast(1.02);
  background: var(--bone);
  flex-shrink: 0;
}
.mq__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4.2vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .team__marquee-track { animation: none; transform: translateX(0); }
}

/* === LEADERSHIP GRID — single 5-up row ====================================
   All five leaders fit in one frame on desktop. The two founders are
   marked with a subtle red top accent so the hierarchy still reads,
   but their cards are the same size as the directors' cards.
*/
.leaders {
  list-style: none;
  margin: clamp(28px, 4vh, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;          /* mobile: 2-up */
  gap: clamp(12px, 1.6vw, 20px);
}
@media (min-width: 720px)  { .leaders { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px)  { .leaders { grid-template-columns: repeat(5, 1fr); } }

.leaders__card {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--paper-elevated);
  border: 1px solid var(--bone);
  border-radius: 8px;
  padding: 12px;
  transition: transform var(--dur-quick) var(--ease-soft),
              box-shadow var(--dur-quick) var(--ease-soft),
              border-color var(--dur-quick) var(--ease-soft);
}
.leaders__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -16px rgba(14,14,14,0.18);
  border-color: var(--ink-mute);
}

/* Subtle red top stripe marks the two founder cards */
.leaders__card--lead::before {
  content: "";
  position: absolute;
  top: 0; left: 12px; right: 12px;
  height: 2px;
  background: var(--brand-red);
  border-radius: 2px;
}

.leaders__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bone);
}
.leaders__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.25) contrast(1.03);
  transition: filter var(--dur-slow) var(--ease-soft),
              transform var(--dur-slow) var(--ease-cinematic);
}
.leaders__card:hover .leaders__photo img {
  filter: grayscale(0) contrast(1.05);
  transform: scale(1.02);
}

.leaders__role {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-red);
  font-weight: 500;
  display: block;
  margin-top: 4px;
}
.leaders__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(15px, 1.2vw, 18px);
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: var(--ink);
  margin: 0;
}
.leaders__bio {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}
.leaders__bio em {
  font-style: italic;
  color: var(--brand-red);
  font-weight: 400;
}

/* On the smallest screens cards stay 2-up but bios drop to keep
   the row scannable in one viewport. */
@media (max-width: 540px) {
  .leaders__card { padding: 10px; gap: 8px; }
  .leaders__bio { display: none; }
}

/* === SELECTED WORK: CINEMA REEL =========================================
   Dark pinned-scroll stage. Each scene = ~viewport-tall slab. The image
   is the hero, animated with a subtle Ken Burns pan + desaturate-to-color
   reveal on enter. Massive client wordmark sits over the bottom.
   Sticky chapter HUD top-right ticks as scenes pass.
*/
.cinema {
  position: relative;
  background: var(--ink);
  color: var(--ivory);
  /* Bleed full-width — break out of any parent max-width */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  /* DO NOT use overflow:hidden here — it breaks position:sticky on the HUD.
     Children that need clipping clip themselves. */
  isolation: isolate;
}
.cinema::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image:
    repeating-radial-gradient(circle at 25% 35%, rgba(255,255,255,0.08) 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 75% 65%, rgba(0,0,0,0.10) 0 1px, transparent 1px 3px);
  background-size: 3px 3px;
}

/* Sticky chapter HUD ----------------------------------------------------- */
.cinema__hud {
  position: sticky;
  top: 110px;
  margin-left: auto;
  margin-right: 32px;
  width: max-content;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translateY(0);
}
.cinema__hud-num {
  color: var(--brand-red);
  font-weight: 500;
  min-width: 5ch;
  display: inline-block;
}
.cinema__hud-rule {
  width: 18px;
  height: 1px;
  background: rgba(255,255,255,0.4);
}
.cinema__hud-label {
  color: rgba(255,255,255,0.78);
}

/* Section opener -------------------------------------------------------- */
.cinema__intro {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 18px;
  padding: clamp(56px, 9vh, 120px) clamp(24px, 4vw, 56px) clamp(28px, 5vh, 64px);
  max-width: 1200px;
  margin: 0 auto;
}
.cinema__intro-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-red);
}
.cinema__intro-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ivory);
  margin: 0;
  max-width: 22ch;
}
.cinema__intro-title em {
  font-style: italic;
  color: var(--brand-red);
  font-weight: 400;
}
.cinema__intro-cue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.cinema__intro-arrow {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--brand-red);
  animation: cinemaCueDown 2.2s var(--ease-soft) infinite;
}
@keyframes cinemaCueDown {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* === Scene ============================================================ */
.scene {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Tighter padding so scenes don't add huge gaps between each other */
  padding: clamp(20px, 3vh, 48px) clamp(16px, 3vw, 56px);
  z-index: 1;
}
.scene__stage {
  position: relative;
  width: 100%;
  max-width: 1400px;
  aspect-ratio: 16 / 9;
  display: block;
}
/* On phones, switch the stage to a portrait-friendly aspect so the
   image actually fills the viewport instead of leaving a tall band
   of empty black above and below. */
@media (max-width: 720px) {
  .scene__stage { aspect-ratio: 4 / 5; max-width: 100%; }
}

/* The hero shot — Ken Burns + desat-to-color via JS-driven CSS vars */
.scene__shot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 4px;
  box-shadow:
    0 60px 120px -50px rgba(0,0,0,0.7),
    0 18px 36px -16px rgba(0,0,0,0.5);
}
.scene__shot img {
  position: absolute;
  inset: -4%;          /* slight overscan so Ken Burns doesn't reveal edges */
  width: 108%;
  height: 108%;
  object-fit: cover;
  filter: saturate(var(--shot-sat, 0)) contrast(1.04) brightness(var(--shot-bri, 0.85));
  transform: scale(var(--shot-scale, 1.08)) translate(var(--shot-tx, 0), var(--shot-ty, 0));
  transition: filter 800ms var(--ease-cinematic),
              transform 1500ms var(--ease-cinematic);
  will-change: filter, transform;
}
/* Letterbox bars — slim film-frame */
.scene__shot-letterbox {
  position: absolute;
  left: 0; right: 0;
  height: 8px;
  background: var(--ink);
  z-index: 2;
}
.scene__shot-letterbox--top { top: 0; }
.scene__shot-letterbox--bot { bottom: 0; }

/* Chrome (top label overlaid on the stage). Editorial, not tech-print. */
.scene__chrome {
  position: absolute;
  top: 28px;
  right: 28px;
  z-index: 3;
  pointer-events: none;
}
.scene__mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: -0.005em;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.scene__mark i {
  font-style: italic;
  font-weight: 500;
  color: var(--brand-red);
  font-size: 1.05em;
  margin-right: 2px;
}

/* Copy block (overlaid bottom of the stage) */
.scene__copy {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 3;
  display: grid;
  gap: 12px;
  /* Lift effect from JS: --copy-y goes 16->0 on enter */
  transform: translateY(var(--copy-y, 24px));
  opacity: var(--copy-op, 0);
  transition: transform 700ms var(--ease-cinematic),
              opacity 700ms var(--ease-soft);
}
.scene__client {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 9vw, 152px);
  letter-spacing: -0.045em;
  line-height: 0.88;
  color: var(--ivory);
  margin: 0;
  text-shadow: 0 6px 32px rgba(0,0,0,0.55);
  max-width: 18ch;
}
.scene__line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 1.9vw, 28px);
  line-height: 1.4;
  color: rgba(255,255,255,0.92);
  margin: 0;
  max-width: 44ch;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.scene__line em {
  font-style: italic;
  color: var(--brand-red);
}
.scene__foot {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 28px;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.22);
}
.scene__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.3vw, 19px);
  color: rgba(255,255,255,0.78);
  letter-spacing: -0.005em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.scene__cta {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--ivory);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid var(--ivory);
  padding-bottom: 3px;
  transition: color var(--dur-quick) var(--ease-soft),
              border-color var(--dur-quick) var(--ease-soft),
              gap var(--dur-quick) var(--ease-soft);
  pointer-events: auto;
}
.scene__cta:hover {
  color: var(--brand-red);
  border-color: var(--brand-red);
  gap: 14px;
}

/* When a scene is "active" (data-scene-active set by JS), bring it alive */
.scene[data-scene-active="true"] {
  --shot-sat: 1;
  --shot-scale: 1;
  --shot-bri: 1;
  --copy-y: 0px;
  --copy-op: 1;
}

/* Outro ----------------------------------------------------------------- */
.cinema__outro {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(36px, 6vh, 72px) clamp(24px, 4vw, 56px) clamp(48px, 7vh, 88px);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.cinema__outro-line {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.35;
  color: var(--ivory);
  margin: 0;
  max-width: 52ch;
}
.cinema__outro-line em {
  font-style: italic;
  color: var(--brand-red);
}
.cinema__outro-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  transition: background-color var(--dur-quick) var(--ease-soft),
              color var(--dur-quick) var(--ease-soft),
              border-color var(--dur-quick) var(--ease-soft);
}
.cinema__outro-cta:hover {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--ivory);
}

/* Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .scene[data-scene-active="true"] .scene__shot img,
  .scene .scene__shot img,
  .scene .scene__copy {
    transition-duration: 1ms !important;
  }
  .cinema__intro-arrow { animation: none; }
}

/* Mobile collapse: scenes stack with full content visible, no parallax */
@media (max-width: 720px) {
  .cinema__hud { top: 80px; margin-right: 16px; }
  .scene { min-height: 88vh; padding: 28px 16px; }
  .scene__chrome { top: 12px; left: 12px; right: 12px; }
  .scene__copy { left: 12px; right: 12px; bottom: 14px; }
  .scene__client { font-size: clamp(40px, 12vw, 80px); }
  .scene__foot { flex-direction: column; align-items: flex-start; gap: 10px; }
}


/* === STUDIO DOC (Concept B - dossier with penguin watermark) ============
   Studio brief styled as a printed sheet sitting on a paper-elevated
   background. Subtle Tux-style penguin watermark sits behind the sheet,
   visible in the bottom-right margin as an easter-egg/mascot moment.
*/
.studio-doc {
  background: transparent;          /* fully transparent - ONLY the sheet renders */
  padding: 100px 32px 120px;
  position: relative;
  overflow: visible;
  z-index: 2;
}
.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;       /* ensure full viewport coverage when pinned */
}
.studio-doc__penguin {
  position: absolute;
  right: clamp(20px, 6vw, 100px);
  bottom: -40px;
  width: clamp(220px, 28vw, 360px);
  color: var(--ink);
  opacity: 0.10;
  pointer-events: none;
  z-index: 1;
  transform: rotate(-6deg);
}
.studio-doc__sheet {
  max-width: 920px;
  margin: 0 auto;
  background: var(--paper-elevated);
  border: 1px solid var(--bone);
  box-shadow: 0 30px 60px -30px rgba(14,14,14,0.28),
              0 8px 20px -10px rgba(14,14,14,0.12);
  padding: 56px 64px;
  position: relative;
  z-index: 2;
}
.studio-doc__sheet::before {
  content: ""; position: absolute;
  top: 0; left: 0; right: 0; height: 6px;
  background: var(--brand-red);
}

.studio-doc__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 18px;
  margin-bottom: 36px;
  flex-wrap: wrap;
  gap: 12px;
}
.studio-doc__name {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.studio-doc__name img {
  display: block;
  height: 28px;
  width: auto;
}
.studio-doc__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.studio-doc__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 36px;
  max-width: 24ch;
}

.studio-doc__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  padding: 18px 0;
  border-top: 1px solid var(--bone);
  align-items: baseline;
}
.studio-doc__row:last-of-type {
  border-bottom: 1px solid var(--bone);
  margin-bottom: 36px;
}
.studio-doc__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-red);
  align-self: start;
  padding-top: 4px;
}
.studio-doc__copy {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.studio-doc__copy strong { color: var(--ink); font-weight: 600; }

.studio-doc__metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding: 24px 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--bone);
  margin-bottom: 36px;
}
@media (min-width: 700px) {
  .studio-doc__metrics { grid-template-columns: repeat(4, 1fr); }
}
.studio-doc__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
}
.studio-doc__num em { color: var(--brand-red); font-style: normal; }
.studio-doc__numlabel {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 8px;
}

.studio-doc__sig {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}
.studio-doc-sig {
  border-top: 1px solid var(--ink);
  padding-top: 8px;
  min-width: 220px;
}
.studio-doc-sig__name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
}
.studio-doc-sig__role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: block;
  margin-top: 4px;
}
.studio-doc__stamp {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-red);
  border: 2px solid var(--brand-red);
  padding: 12px 18px;
  transform: rotate(-3deg);
  line-height: 1.2;
  text-align: center;
}
.studio-doc__stamp strong { display: block; font-size: 14px; letter-spacing: 0.16em; }

@media (max-width: 700px) {
  .studio-doc__sheet { padding: 40px 28px; }
  .studio-doc__row { grid-template-columns: 1fr; gap: 8px; }
  .studio-doc__penguin { width: 180px; right: -20px; bottom: -20px; opacity: 0.08; }
}

/* Update scroll-snap target for new class */
.studio-doc {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* === STUDIO (deprecated - replaced by studio-doc) ======================
   Numbered principles in a 2x2 grid, clean sans-serif body, monospace
   stats. No drop caps, no chapter markers, no editorial italic.
*/
.studio {
  background: var(--ivory);
  padding: 120px 0 140px;
  position: relative;
}
.studio__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  gap: 80px;
}

/* Header */
.studio__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 880px;
}
.studio__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-red);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.studio__eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--brand-red);
}
.studio__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
}
.studio__lede {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 12px 0 0;
  max-width: 60ch;
}

/* Principles - 2x2 grid */
.studio__principles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--bone);
}
@media (min-width: 900px) {
  .studio__principles {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
}
.principle {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 36px 0;
  border-bottom: 1px solid var(--bone);
  align-items: baseline;
}
@media (min-width: 900px) {
  .principle:nth-child(odd) { padding-right: 48px; border-right: 1px solid var(--bone); }
  .principle:nth-child(even) { padding-left: 48px; }
  .principle { padding: 48px 0; }
}
.principle__num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--brand-red);
  align-self: flex-start;
  padding-top: 4px;
}
.principle__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 10px;
}
.principle__copy {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 48ch;
}

/* Stat strip */
.studio__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  border-top: 1px solid var(--ink);
  padding-top: 36px;
}
@media (min-width: 700px) {
  .studio__stats { grid-template-columns: repeat(4, 1fr); }
}
.studio-stat { display: flex; flex-direction: column; gap: 8px; }
.studio-stat__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 3.4vw, 52px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.studio-stat__plus { color: var(--brand-red); }
.studio-stat__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* === SHOWCASE (deprecated - kept for reference) =========================
   Section pins for ~150% scroll. A central code window scales from 0.55
   to 1.05 across that range. Three phrases crossfade above the window
   based on scroll progress. Pure dev shop aesthetic - no editorial bits.
*/
.showcase {
  background: var(--ink);
  color: var(--ivory);
  position: relative;
  /* GSAP ScrollTrigger handles the pinning + scroll distance */
}
.showcase__pin {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 32px;
}

/* Phrases overlay - centered above the frame */
.showcase__story {
  position: absolute;
  top: 80px;
  left: 0; right: 0;
  text-align: center;
  z-index: 5;
  padding: 0 32px;
  pointer-events: none;
}
.showcase-phrase {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: -0.025em;
  color: var(--ivory);
  margin: 0;
  position: absolute;
  top: 0;
  left: 0; right: 0;
  opacity: 0;
  transform: translateY(20px);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
}
.showcase-phrase[data-phrase="1"] { opacity: 1; transform: translateY(0); }
.showcase-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--brand-red);
  font-weight: 500;
  align-self: center;
}
.showcase-strong {
  color: var(--brand-red);
  font-weight: 600;
}

/* Central frame that scales */
.showcase__frame {
  width: min(90vw, 980px);
  transform: scale(0.55);
  transform-origin: center center;
  will-change: transform;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Code window component */
.code-window {
  background: #0E0E0E;
  border: 1px solid #2A2A2A;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6),
              0 0 0 1px rgba(255,255,255,0.04);
  font-family: var(--font-mono);
}
.code-window__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #1A1A1A;
  border-bottom: 1px solid #2A2A2A;
  font-size: 11px;
  color: rgba(245,240,229,0.5);
}
.code-dot {
  width: 11px; height: 11px; border-radius: 50%;
  display: inline-block;
}
.code-dot--r { background: #FF5F57; }
.code-dot--y { background: #FEBC2E; }
.code-dot--g { background: #28C840; }
.code-window__title {
  margin-left: 14px;
  letter-spacing: 0.06em;
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
}
.code-window__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--brand-red);
  color: var(--ivory);
  padding: 3px 8px;
  border-radius: 3px;
}
.code-window__body {
  padding: 22px 24px;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(245,240,229,0.92);
  background: #0E0E0E;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(200, 16, 46, 0.06), transparent 50%);
}
.code-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
}
.code-num {
  display: inline-block;
  width: 24px;
  text-align: right;
  color: rgba(245,240,229,0.25);
  font-size: 12px;
  user-select: none;
}
.code-prompt {
  color: var(--brand-red);
  font-weight: 600;
}
.code-cmd { color: var(--ivory); font-weight: 500; }
.code-out { color: rgba(245,240,229,0.72); }
.code-out .code-num { /* same gutter alignment */ }
.code-ok { color: #28C840; }
.code-arrow { color: var(--brand-red); }
.code-hl { color: #FEBC2E; }
.code-success { color: var(--ivory); }
.code-success .code-ok { color: var(--brand-red); }

/* Stat strip below code window - sits inside the frame so it scales too */
.showcase__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(245,240,229,0.12);
  padding-top: 18px;
  margin-top: 4px;
}
.showcase-stat {
  text-align: center;
  border-right: 1px solid rgba(245,240,229,0.08);
  padding: 0 12px;
}
.showcase-stat:last-child { border-right: none; }
.showcase-stat__num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 22px;
  color: var(--ivory);
  letter-spacing: -0.01em;
}
.showcase-stat__plus { color: var(--brand-red); }
.showcase-stat__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,240,229,0.5);
  margin-top: 6px;
}

/* Mobile: simpler, no pin scrolling - just static frame */
@media (max-width: 768px) {
  .showcase { height: auto; padding: 80px 0; }
  .showcase__pin { position: relative; height: auto; min-height: auto; padding: 16px; }
  .showcase__frame { transform: scale(1) !important; width: 100%; }
  .showcase__story { position: relative; top: auto; margin-bottom: 32px; }
  .showcase-phrase { position: relative; opacity: 1 !important; transform: none !important; font-size: 24px; }
  .showcase-phrase[data-phrase="2"], .showcase-phrase[data-phrase="3"] { display: none; }
  .code-window__body { font-size: 12px; padding: 16px; }
  .code-line { white-space: normal; }
  .showcase__stats { grid-template-columns: repeat(2, 1fr); }
}

/* === INK BREAK (clean dark-band section divider)
   A full-bleed dark ink band that visually separates the cream hero
   from the cream studio. The contrasting color is the break itself -
   no decorative numerals, no animated rules, just a literal page turn. */
.ink-break {
  background: var(--ink);
  color: var(--ivory);
  padding: 32px;
  margin: 56px 0 0;
}
.ink-break__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}
.ink-break__phrase {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ivory);
}
.ink-break__phrase em {
  font-style: italic;
  color: var(--brand-red);
  margin: 0 2px;
}

/* === TICKER (subtle marquee) === */
.ticker {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--ivory-warm);
  overflow: hidden;
  padding: 18px 0;
}
.ticker-track {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  animation: ticker 50s linear infinite;
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.ticker-track span { display: inline-flex; align-items: center; gap: 56px; }
.ticker-dot { color: var(--brand-red); }
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* =====================================================================
   SIGNATURE CURTAIN MENU
   Slide-in side panel with item-level hover preview teaser, ESC close,
   backdrop click close, blurred page-shell behind.
===================================================================== */
.curtain-root {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 90;                              /* above site-header (80) so the Close button is reachable */
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}
.curtain-root.is-open { pointer-events: auto; visibility: visible; }

/* When curtain is open, fade the site-header out of focus so the panel owns the screen. */
body.curtain-open .site-header {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-quick) var(--ease-soft);
}

/* Backdrop covers main content - left side */
.curtain-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 14, 14, 0.32);
  opacity: 0;
  transition: opacity var(--dur-curtain) var(--ease-cinematic);
  cursor: pointer;
  border: 0;
}
.curtain-root.is-open .curtain-backdrop { opacity: 1; }

/* Curtain panel slides from right - uniform background, no shadow strip */
.curtain-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 100vw;
  background: var(--ivory-warm);
  transform: translateX(100%);
  transition: transform var(--dur-curtain) var(--ease-cinematic);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.curtain-root.is-open .curtain-panel { transform: translateX(0); }
@media (min-width: 900px) {
  .curtain-panel { width: 60vw; max-width: 880px; }
}

/* Curtain header - integrated, no heavy strip */
.curtain-header {
  padding: 22px 48px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
@media (min-width: 900px) {
  .curtain-header { padding: 26px 80px 10px; }
}
.curtain-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.curtain-eyebrow .dash {
  width: 28px; height: 1px; background: var(--brand-red);
  display: inline-block;
}
.curtain-close {
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink);
  transition: background-color var(--dur-quick) var(--ease-soft),
              color var(--dur-quick) var(--ease-soft);
  display: inline-flex; align-items: center; gap: 10px;
}
.curtain-close:hover {
  background: var(--ink);
  color: var(--ivory);
}
.curtain-close .x { font-size: 14px; line-height: 1; }

/* Curtain body - tight top spacing */
.curtain-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 48px 36px;
  gap: 0;
}
@media (min-width: 900px) {
  .curtain-body { padding: 20px 80px 48px; }
}

.curtain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.curtain-item {
  border-top: 1px solid var(--bone);
  display: block;
}
.curtain-item:last-child { border-bottom: 1px solid var(--bone); }
.curtain-item > a {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: baseline;
  gap: 20px;
  padding: 18px 0;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  transition: padding var(--dur-slow) var(--ease-cinematic),
              color var(--dur-quick) var(--ease-soft);
}
.curtain-item > a:visited { color: var(--ink); }
.curtain-item > a:hover {
  padding-left: 24px;
  color: var(--brand-red);
}
.curtain-item > a::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--brand-red);
  transition: width var(--dur-slow) var(--ease-cinematic);
}
.curtain-item > a:hover::before { width: 4px; }

.curtain-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  font-weight: 500;
}
.curtain-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.curtain-name .ital {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.curtain-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: right;
}

/* === CURTAIN CONTACT STRIP (at top, always visible) === */
.curtain-contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 14px 48px 14px;
  background: transparent;
}
@media (min-width: 700px) {
  .curtain-contact { grid-template-columns: 1fr 1fr 1fr; gap: 40px; padding: 16px 48px 20px; }
}
@media (min-width: 900px) {
  .curtain-contact { padding: 18px 80px 22px; }
}
.contact-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: var(--ink);
  transition: color var(--dur-quick) var(--ease-soft);
}
.contact-link:hover { color: var(--brand-red); }
.contact-link-static { cursor: default; }
.contact-link-static:hover { color: var(--ink); }
.contact-link .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.contact-link .val {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* === CURTAIN TAG LINE === */
.curtain-tag {
  margin: 24px 0 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--ink-mute);
  border-top: 1px solid var(--bone);
  padding-top: 18px;
}

/* When curtain is open, main content gets a soft blur overlay.
   NOTE: do NOT set filter on .page-shell at rest - filter creates a
   containing block for position:fixed descendants, which breaks the
   hero pin and any other fixed positioning inside the shell. */
.page-shell {
  transition: filter var(--dur-curtain) var(--ease-cinematic);
}
body.curtain-open .page-shell {
  filter: blur(3px);
}

/* === CURTAIN PREVIEW (hover-revealed teaser, sits flush against panel)
   Vertical position is set per-item by JS to align with the hovered link.
*/
.curtain-preview {
  position: absolute;
  top: 50%;
  right: 60vw;
  margin-right: 16px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) translateX(8px);
  transition: opacity 320ms var(--ease-cinematic),
              transform 320ms var(--ease-cinematic),
              top 360ms var(--ease-cinematic);
  z-index: 71;
  display: none;
  width: 320px;
  max-width: 320px;
}
@media (min-width: 900px) {
  .curtain-preview { display: block; }
}
.curtain-preview.is-active {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.preview-card {
  position: relative;
  background: var(--ivory);
  border: 1px solid var(--bone);
  padding: 22px 24px;
  box-shadow: 0 24px 48px -24px rgba(14,14,14,0.35);
  width: 100%;
}
.preview-card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -7px;
  width: 12px;
  height: 12px;
  background: var(--ivory);
  border-right: 1px solid var(--bone);
  border-top: 1px solid var(--bone);
  transform: translateY(-50%) rotate(45deg);
}
.preview-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-red);
}
.preview-title {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 12px 0 14px;
  font-weight: 500;
}
.preview-body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-mute);
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  body.curtain-open .page-shell { transform: none; filter: none; }
}

/* ====================================================================
   FLOATING STICKY "TALK TO US" CTA
   Bottom-right, fades in after the hero scrolls past. Persistent
   contact affordance. Hides if the curtain/cinema menu is open.
==================================================================== */
.float-cta {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 16px;
  background: var(--ink);
  color: var(--ivory);
  border-radius: 999px;
  text-decoration: none;
  box-shadow:
    0 18px 36px -16px rgba(14,14,14,0.45),
    0 4px 10px -4px rgba(14,14,14,0.18);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  /* Hidden by default; visible class added by JS once user scrolls past hero */
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition:
    opacity 400ms var(--ease-soft),
    transform 500ms var(--ease-cinematic),
    background-color 200ms var(--ease-soft),
    padding 200ms var(--ease-soft);
}
.float-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.float-cta:hover {
  background: var(--brand-red);
  padding-right: 26px;
}
.float-cta__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-red);
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.65);
  animation: floatCtaPulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
.float-cta:hover .float-cta__dot {
  background: var(--ivory);
  box-shadow: 0 0 0 0 rgba(255,255,255,0.55);
}
@keyframes floatCtaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.55); }
  60%      { box-shadow: 0 0 0 8px rgba(200, 16, 46, 0); }
}
.float-cta__label { white-space: nowrap; }
.float-cta__arrow {
  font-family: var(--font-display);
  font-size: 17px;
  margin-left: -2px;
  transition: transform 200ms var(--ease-soft);
}
.float-cta:hover .float-cta__arrow { transform: translateX(3px); }
@media (max-width: 600px) {
  /* On phone-width screens the float CTA stops adding value:
     the Menu button at the top is one tap away, and content edges
     are already tight. Hide it entirely. */
  .float-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .float-cta__dot { animation: none; }
}

/* ====================================================================
   CTA BANDS — full-bleed strips that interrupt content with a
   primary call-to-action. Two variants: dark (between studio doc
   and services) and light (after selected work).
==================================================================== */
.cta-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(56px, 8vh, 112px) 0;
}
.cta-band__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
}
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
.cta-band__copy { display: grid; gap: 16px; max-width: 60ch; }
.cta-band__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.cta-band__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 64px);
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0;
  /* Inherit so dark/light variants both color correctly (overrides
     the global h2 ink color rule). */
  color: inherit;
}
.cta-band__lede {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  margin: 0;
  max-width: 56ch;
}
.cta-band__actions {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
@media (min-width: 900px) {
  .cta-band__actions { align-items: flex-end; text-align: right; }
}
.cta-band__primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  transition: background-color var(--dur-quick) var(--ease-soft),
              transform var(--dur-quick) var(--ease-soft);
}
.cta-band__primary .arr {
  font-family: var(--font-display);
  font-size: 18px;
  transition: transform 200ms var(--ease-soft);
}
.cta-band__primary:hover { transform: translateY(-1px); }
.cta-band__primary:hover .arr { transform: translate(2px, -2px); }
.cta-band__secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap 200ms var(--ease-soft);
}
.cta-band__secondary:hover { gap: 14px; }
.cta-band__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
}
.cta-band__contact-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms;
}
.cta-band__contact-link:hover { border-color: currentColor; }

/* Dark variant */
.cta-band--dark {
  background: var(--ink);
  color: var(--ivory);
}
.cta-band--dark .cta-band__eyebrow { color: var(--brand-red); }
.cta-band--dark .cta-band__primary { background: var(--brand-red); color: var(--ivory); }
.cta-band--dark .cta-band__primary:hover { background: var(--ivory); color: var(--ink); }
.cta-band--dark .cta-band__contact-link { color: rgba(245,240,229,0.8); }
.cta-band--dark .cta-band__contact-link:hover { color: var(--ivory); }
.cta-band--dark .cta-band__secondary { color: var(--ivory); }
.cta-band--dark .cta-band__secondary:hover { color: var(--brand-red); }

/* Light variant */
.cta-band--light {
  background: var(--paper-elevated);
  color: var(--ink);
  border-top: 1px solid var(--bone);
  border-bottom: 1px solid var(--bone);
}
.cta-band--light .cta-band__eyebrow { color: var(--brand-red); }
.cta-band--light .cta-band__primary { background: var(--ink); color: var(--ivory); }
.cta-band--light .cta-band__primary:hover { background: var(--brand-red); }
.cta-band--light .cta-band__secondary { color: var(--ink); }

/* =====================================================================
   FIELD NOTES — quiet single-column writing surface
   No metaphor, no decoration. Just titles, paragraphs, hairlines.
   Stripe Press / Substack mood: confident, readable, restrained.
===================================================================== */
.quiet-notes {
  padding: var(--space-section-sm) 0;
  background: var(--ivory);
}
.quiet-notes__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}
.quiet-notes__head {
  margin: 0 0 calc(var(--space-block) + 8px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quiet-notes__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 4px 0 0;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.quiet-notes__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
  row-gap: 0;
  border-top: 1px solid var(--bone);
}
@media (max-width: 880px) {
  .quiet-notes__list { grid-template-columns: 1fr; border-top: 0; }
}
.qn {
  padding: 48px 0;
  border-bottom: 1px solid var(--bone);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* On 2-col layout, give a clean visual rule between the columns
   and remove the bottom border from the last row pair. */
.qn:nth-child(2n) {
  border-left: 1px solid var(--bone);
  padding-left: 64px;
  margin-left: -64px;
}
@media (max-width: 880px) {
  .qn { border-top: 1px solid var(--bone); border-bottom: 0; }
  .qn:nth-child(2n) { border-left: 0; padding-left: 0; margin-left: 0; }
  .qn:last-child { border-bottom: 1px solid var(--bone); }
}
.qn__date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.qn__title-link {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
  transition: color var(--dur-quick) var(--ease-soft);
}
.qn__title-link:hover .qn__title { color: var(--brand-red); }
.qn__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  max-width: 30ch;
  font-variation-settings: "opsz" 96, "SOFT" 30;
  transition: color var(--dur-quick) var(--ease-soft);
}
.qn__body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  max-width: 64ch;
}
.qn__byline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 4px 0 0;
}
.quiet-notes__foot {
  margin-top: 48px;
  display: flex;
  justify-content: flex-end;
}

/* =====================================================================
   FIELD NOTES — workshop / blueprint (legacy, no longer in DOM)
   The notes section reads as an engineering drawing sheet, on graph
   paper. Drafting marks, dimension lines, registration crosses,
   numbered specimens. Mono type with Fraunces only for the section
   title to keep continuity with the rest of the page.
===================================================================== */
.bench {
  padding: var(--space-section-sm) 0;
  background: var(--ivory);
  background-image:
    repeating-linear-gradient(0deg,  rgba(14,14,14,0.045) 0, rgba(14,14,14,0.045) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, rgba(14,14,14,0.045) 0, rgba(14,14,14,0.045) 1px, transparent 1px, transparent 32px);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  position: relative;
}
.bench__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}
.bench__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 880px;
  margin: 0 0 56px;
}
.bench__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 6.4vw, 100px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 8px 0 0;
}
.bench__title em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.bench__lede {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 64ch;
  margin: 12px 0 0;
}

/* Engineering drawing SHEET */
.bench__sheet {
  position: relative;
  background: var(--paper-elevated);
  border: 1px solid var(--ink);
  /* Inner hairline to mimic a drawing's inset border */
  outline: 1px solid var(--ink);
  outline-offset: 8px;
  margin: 8px 16px 32px;
  padding: 24px 0 0;
  font-family: var(--font-mono);
}

/* Registration crosses at the four corners */
.bench__cross {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 400;
  color: var(--brand-red);
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.bench__cross--tl { top: -18px; left: -18px; }
.bench__cross--tr { top: -18px; right: -18px; }
.bench__cross--bl { bottom: -18px; left: -18px; }
.bench__cross--br { bottom: -18px; right: -18px; }

/* Sheet top meta strip */
.bench__meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--ink);
}
.bench__meta-cell {
  padding: 14px 20px;
  border-right: 1px solid var(--bone);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bench__meta-cell:last-child { border-right: 0; }
.bench__meta-key {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.bench__meta-val {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  font-weight: 500;
}
@media (max-width: 760px) {
  .bench__meta { grid-template-columns: repeat(2, 1fr); }
  .bench__meta-cell:nth-child(2n) { border-right: 0; }
  .bench__meta-cell:nth-child(-n+2) { border-bottom: 1px solid var(--bone); }
}

/* Drawing field with specimens */
.bench__field {
  padding: 0;
}
.spec {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 200px 80px;
  gap: 28px;
  align-items: center;
  padding: 22px 24px;
  border-bottom: 1px dashed var(--bone);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--dur-quick) var(--ease-soft);
  position: relative;
}
.spec:last-child { border-bottom: 0; }
.spec:hover { background: rgba(200, 16, 46, 0.04); }
.spec:hover .spec__id-num { color: var(--brand-red); }
.spec:hover .spec__view { color: var(--brand-red); }
.spec:hover .spec__dim-end { color: var(--brand-red); }

.spec__id {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--bone);
  padding-right: 24px;
}
.spec__id-key {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.spec__id-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: color var(--dur-quick) var(--ease-soft);
}

.spec__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.spec__cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-red);
}
.spec__title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin: 0;
  /* Slight all-caps small-caps mood without losing readability */
}
.spec__byline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin: 0;
}

/* Dimension line ─── 5 min ─── */
.spec__dim {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
  font-family: var(--font-mono);
  color: var(--ink-mute);
  width: 100%;
  max-width: 200px;
}
.spec__dim-end {
  color: var(--ink-mute);
  font-size: 13px;
  line-height: 1;
  transition: color var(--dur-quick) var(--ease-soft);
}
.spec__dim-line {
  flex: 1;
  height: 1px;
  background: var(--ink-mute);
}
.spec__dim-val {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  padding: 0 4px;
  white-space: nowrap;
}

.spec__view {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  justify-self: end;
  transition: color var(--dur-quick) var(--ease-soft);
  white-space: nowrap;
}

/* Bottom title block */
.bench__block {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
  background: var(--ivory-warm);
}
.bench__block-cell {
  padding: 14px 20px;
  border-right: 1px solid var(--bone);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bench__block-cell:last-child { border-right: 0; }
@media (max-width: 760px) {
  .bench__block { grid-template-columns: repeat(2, 1fr); }
  .bench__block-cell:nth-child(2n) { border-right: 0; }
  .bench__block-cell:nth-child(-n+2) { border-bottom: 1px solid var(--bone); }
}

/* Corner stamp/seal */
.bench__stamp {
  position: absolute;
  bottom: -28px;
  right: 32px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ivory);
  border: 1px solid var(--brand-red);
  color: var(--brand-red);
  padding: 12px 18px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  transform: rotate(-2deg);
  box-shadow: 0 6px 18px -10px rgba(200, 16, 46, 0.25);
}
.bench__stamp-key { font-weight: 500; color: var(--brand-red); }
.bench__stamp-sub { color: var(--ink-mute); font-size: 10px; letter-spacing: 0.2em; }
.bench__stamp-yr {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--brand-red);
  text-transform: none;
}

/* Foot row */
.bench__foot {
  margin-top: 56px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--bone);
}
.bench__foot-line {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  max-width: 48ch;
}
.bench__foot-line em {
  font-style: italic;
  font-weight: 400;
  color: var(--brand-red);
  font-variation-settings: "opsz" 96, "SOFT" 100;
}

/* Responsive: collapse spec rows on small screens */
@media (max-width: 760px) {
  .spec {
    grid-template-columns: 90px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 14px 18px;
    padding: 20px;
  }
  .spec__id { padding-right: 18px; }
  .spec__id-num { font-size: 18px; }
  .spec__body { grid-column: 2; grid-row: 1; }
  .spec__dim { grid-column: 1 / -1; justify-self: stretch; max-width: 100%; padding-top: 8px; }
  .spec__view {
    grid-column: 1 / -1;
    justify-self: start;
    border-top: 1px dashed var(--bone);
    padding-top: 10px;
  }
  .bench__stamp { right: 16px; bottom: -22px; padding: 10px 14px; }
}

/* =====================================================================
   FIELD NOTES (legacy press selectors — no longer in DOM)
===================================================================== */
.notes-press {
  padding: var(--space-section-sm) 0;
  background: var(--paper-elevated);
  border-top: 1px solid var(--bone);
  border-bottom: 1px solid var(--bone);
  position: relative;
}
.notes-press__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

/* Title row */
.notes-press__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 36px;
}
.notes-press__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 18px 0 0;
}
.notes-press__title em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.notes-press__head-cta { align-self: end; }

/* Masthead strip — newspaper feel */
.notes-press__strip {
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.notes-press__strip-key { color: var(--ink); font-weight: 500; }
.notes-press__strip-pub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink-mute);
  font-weight: 400;
}

/* Two-column press spread */
.notes-press__spread {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 0;
  margin-top: 0;
}
@media (max-width: 880px) {
  .notes-press__spread { grid-template-columns: 1fr; }
}

/* LEAD ARTICLE */
.press-lead {
  position: relative;
  padding: 40px 56px 40px 0;
  border-right: 1px solid var(--bone);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 880px) {
  .press-lead { padding: 36px 0 36px; border-right: 0; border-bottom: 1px solid var(--bone); }
}
.press-lead__index {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.press-lead__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-red);
}
.press-lead__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.press-lead__title em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.press-lead__deck {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  margin: 0;
  max-width: 52ch;
}
.press-lead__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  column-count: 1;
  margin: 0;
  max-width: 56ch;
}
@media (min-width: 1100px) {
  .press-lead__body { column-count: 2; column-gap: 36px; column-rule: 1px solid var(--bone); }
}
.press-lead__dropcap {
  float: left;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 76px;
  line-height: 0.85;
  padding: 8px 12px 0 0;
  color: var(--brand-red);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.press-lead__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 18px;
  margin-top: 8px;
  border-top: 1px solid var(--bone);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.press-lead__byline { color: var(--ink); font-weight: 500; }
.press-lead__meta { color: var(--ink-faint); }

/* SECONDARY STACK */
.press-stack {
  display: flex;
  flex-direction: column;
}
.press-item {
  padding: 40px 0 36px 56px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-bottom: 1px solid var(--bone);
  position: relative;
}
.press-item:last-child { border-bottom: 0; }
@media (max-width: 880px) {
  .press-item { padding: 36px 0; }
}
.press-item__index {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.press-item__kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-red);
}
.press-item__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 96, "SOFT" 30;
}
.press-item__title em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 96, "SOFT" 100;
}
.press-item__deck {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0;
  max-width: 48ch;
}
.press-item__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.press-item__byline { color: var(--ink); font-weight: 500; }
.press-item__meta { color: var(--ink-faint); }

/* Lower strip: also in this issue */
.notes-press__foot {
  margin-top: 32px;
  padding: 24px 0 0;
  border-top: 2px solid var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 220px) 1fr;
  gap: 32px;
}
@media (max-width: 720px) {
  .notes-press__foot { grid-template-columns: 1fr; gap: 16px; }
}
.notes-press__foot-key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 6px;
}
.notes-press__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.notes-press__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bone);
}
.notes-press__list li:last-child { border-bottom: 0; }
.notes-press__list a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-soft);
}
.notes-press__list a:hover { color: var(--brand-red); }
.notes-press__list-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* =====================================================================
   SELECTED WORK — editorial split spread (replaces the cinema reel)
   Each project is a 2-column spread on the cream page. Text panel +
   real screenshot in a soft browser-frame mount. Sides alternate to
   create a magazine-spread rhythm.
===================================================================== */
.selected-work {
  padding: var(--space-section) 0 var(--space-section-sm);
  background: var(--ivory);
  position: relative;
}
.selected-work__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}
.selected-work__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 880px;
  margin: 0 0 calc(var(--space-block) + 8px);
}
.selected-work__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 6.6vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 12px 0 0;
}
.selected-work__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--brand-red);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.selected-work__lede {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 64ch;
  margin: 18px 0 0;
}

/* A single project spread */
.case-spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 80px;
  align-items: center;
  padding: 56px 0;
  border-top: 1px solid var(--bone);
}
.case-spread:last-of-type { border-bottom: 1px solid var(--bone); }
.case-spread--reverse .case-spread__copy { order: 2; }
.case-spread--reverse .case-spread__shot { order: 1; }

/* Copy column */
.case-spread__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 48ch;
}
.case-spread__mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.012em;
  color: var(--ink-mute);
  font-variation-settings: "opsz" 96, "SOFT" 100;
}
.case-spread__mark i {
  font-style: italic;
  color: var(--brand-red);
  margin-right: 6px;
  font-weight: 500;
}
.case-spread__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-red);
  font-weight: 500;
}
.case-spread__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 4.8vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.case-spread__deck {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.case-spread__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.35;
  color: var(--ink);
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--bone);
  max-width: 38ch;
}
.case-spread__caption em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 96, "SOFT" 100;
}

/* CTA — labeled with the URL */
.case-spread__cta {
  margin-top: 16px;
  display: inline-grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 18px;
  padding: 14px 20px 14px 22px;
  background: var(--ink);
  color: var(--ivory);
  text-decoration: none;
  border-radius: 999px;
  width: fit-content;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background-color var(--dur-quick) var(--ease-soft);
}
.case-spread__cta:hover { background: var(--brand-red); }
.case-spread__cta-url {
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--ivory);
  font-weight: 400;
  font-variation-settings: "opsz" 96, "SOFT" 100;
}
.case-spread__cta-arr {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0;
}

/* Browser-frame shot */
.case-spread__shot { margin: 0; }
.case-spread__frame {
  background: var(--ivory-warm);
  border: 1px solid var(--bone);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 32px 64px -24px rgba(14, 14, 14, 0.22),
    0 8px 16px -8px rgba(14, 14, 14, 0.12);
  transform: translateZ(0);
  transition: transform var(--dur-slow) var(--ease-cinematic),
              box-shadow var(--dur-slow) var(--ease-cinematic);
}
.case-spread__frame:hover {
  transform: translateY(-4px);
  box-shadow:
    0 40px 72px -24px rgba(14, 14, 14, 0.26),
    0 10px 20px -8px rgba(14, 14, 14, 0.16);
}
.case-spread__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--paper-elevated);
  border-bottom: 1px solid var(--bone);
}
.case-spread__chrome-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bone);
  flex-shrink: 0;
}
.case-spread__chrome-dot:nth-child(1) { background: #E16C5A; }
.case-spread__chrome-dot:nth-child(2) { background: #E8B952; }
.case-spread__chrome-dot:nth-child(3) { background: #6CB87C; }
.case-spread__chrome-url {
  margin-left: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  background: var(--ivory);
  border: 1px solid var(--bone);
  padding: 4px 14px;
  border-radius: 999px;
}
.case-spread__frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Outro */
.selected-work__outro {
  margin-top: 64px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 24px;
}
.selected-work__outro-line {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  max-width: 38ch;
  font-weight: 400;
}
.selected-work__outro-line em {
  font-style: italic;
  font-weight: 400;
  color: var(--brand-red);
  font-variation-settings: "opsz" 96, "SOFT" 100;
}

/* Responsive */
@media (max-width: 980px) {
  .case-spread {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 0;
  }
  .case-spread--reverse .case-spread__copy { order: unset; }
  .case-spread--reverse .case-spread__shot { order: unset; }
}
@media (max-width: 600px) {
  .case-spread { padding: 36px 0; gap: 28px; }
  .case-spread__cta { padding: 12px 18px; gap: 12px; }
  .case-spread__chrome { padding: 8px 12px; }
  .case-spread__chrome-dot { width: 8px; height: 8px; }
  .case-spread__chrome-url { font-size: 10px; padding: 3px 10px; }
}

/* =====================================================================
   TALK — contact form + trust sidebar
   Form on the left (8/12), trust column on the right (4/12).
===================================================================== */
.talk {
  padding: var(--space-section) 0;
  background: var(--ivory);
}
.talk__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}
.talk__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: var(--space-block);
  max-width: 1080px;
}
.talk__title { max-width: 22ch; }
.talk__lede { margin-top: 12px; color: var(--ink-soft); }

.talk__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 96px;
  align-items: start;
}
@media (max-width: 980px) {
  .talk__grid { grid-template-columns: 1fr; gap: 64px; }
}

/* Form column */
.talk__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 32px;
}
@media (max-width: 600px) {
  /* On phone widths the 2-col form makes inputs too narrow for
     real email/URL values. Stack to single column. */
  .talk__form { grid-template-columns: 1fr; gap: 28px; }
}
.talk__field { display: block; }
.talk__field--full { grid-column: 1 / -1; }
.talk__submit {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 16px;
}
.talk__small {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Trust column */
.talk__trust {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 36px 36px 36px 36px;
  background: var(--paper-elevated);
  border: 1px solid var(--bone);
  border-radius: 4px;
  position: relative;
}

/* Section heads inside trust column */
.trust-block { display: flex; flex-direction: column; gap: 8px; }
.trust-block__key {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.trust-block__line {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 4px 0 0;
}
.trust-block__line em {
  font-style: italic;
  font-weight: 400;
  color: var(--brand-red);
  font-variation-settings: "opsz" 96, "SOFT" 100;
}

/* Contact list */
.trust-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.trust-list__link {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid var(--bone);
  text-decoration: none;
  color: var(--ink);
  transition: color var(--dur-quick) var(--ease-soft);
}
.trust-list li:last-child .trust-list__link { border-bottom: 1px solid var(--bone); }
.trust-list__link:hover { color: var(--brand-red); }
.trust-list__link--static { cursor: default; }
.trust-list__link--static:hover { color: var(--ink); }
.trust-list__lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.trust-list__val {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.trust-list__link:hover .trust-list__val,
.trust-list__link:hover .trust-list__lbl { color: var(--brand-red); }
.trust-list__link--static:hover .trust-list__val,
.trust-list__link--static:hover .trust-list__lbl { color: var(--ink-mute); }
.trust-list__link--static .trust-list__val { color: var(--ink); }
.trust-list__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.35;
  font-variation-settings: "opsz" 72, "SOFT" 100;
}

/* Twin signature block */
.trust-sig {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--ink);
}
.trust-sig__avatars { display: inline-flex; align-items: center; }
.trust-sig__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--paper-elevated);
  display: block;
}
.trust-sig__avatar + .trust-sig__avatar { margin-left: -18px; }
.trust-sig__line {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.trust-sig__line em {
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96, "SOFT" 100;
}
.trust-sig__sign {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}