/* Bleach Bypass: shared styles for the Rough Cut and Ryan Podolsky sites.
   Every photograph gets the same grade: the SVG filter #bb (defined inline at the top of each page)
   drains color, crushes the blacks, silvers the highlights and adds a cool steel cast. A fixed
   layer of coarse grain moves over everything like film.
   Motion runs regardless of the OS reduce-motion setting, by the site owner's choice. */

:root {
  --black: #14161A;      /* gunmetal black */
  --black-2: #0D0E11;    /* deeper, for strips and frames */
  --panel: #1B1E23;
  --silver: #E6E4DE;     /* silvered white */
  --silver-2: #B8BAB7;   /* secondary text on dark */
  --steel: #5E6D78;
  --olive: #5A5A3C;
  --amber: #E0A43A;      /* tracer amber: the one signal accent, used sparingly */
  --line: rgba(230, 228, 222, .16);
  --line-2: rgba(230, 228, 222, .32);
  --stencil: 'Big Shoulders Stencil', 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Courier Prime', 'Courier New', ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 64px);
  --max: 1320px;
  --nav-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; background: var(--black); }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--black);
  color: var(--silver);
  font: 400 18px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ol, ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
blockquote { margin: 0; }
::selection { background: var(--amber); color: var(--black); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--silver); color: var(--black); font: 700 14px/1 var(--mono); text-decoration: none; }
.skip:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(80px, 11vw, 168px); }

/* ---------- Type ---------- */
.eyebrow, .cap, .mono {
  font: 400 13px/1.5 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.eyebrow { margin: 0 0 20px; color: var(--silver-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; }
.display {
  font-family: var(--stencil);
  font-weight: 800;
  font-size: clamp(50px, 8.6vw, 140px);
  line-height: .88;
  letter-spacing: .005em;
  text-transform: uppercase;
}
.h2 {
  font-family: var(--stencil);
  font-weight: 800;
  font-size: clamp(42px, 5.6vw, 88px);
  line-height: .9;
  text-transform: uppercase;
}
.lede {
  font-family: var(--cond);
  font-weight: 500;
  font-size: clamp(27px, 3.1vw, 44px);
  line-height: 1.12;
  letter-spacing: -.003em;
}
.cond { font-family: var(--cond); }
.muted { color: var(--silver-2); }

/* ---------- Actions ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 50px; padding: 12px 22px;
  border: 1px solid var(--silver);
  background: transparent; color: var(--silver);
  font: 600 16px/1.1 var(--cond); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--silver); color: var(--black); }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translate(2px, -2px); }
.btn-mail { text-transform: none; letter-spacing: .03em; font-size: 19px; font-weight: 500; max-width: 100%; overflow-wrap: anywhere; }
.link {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 16px/1.3 var(--cond); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 4px;
}
.link .arr { transition: transform .25s var(--ease); }
.link:hover .arr { transform: translate(2px, -2px); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  height: var(--nav-h); padding-inline: var(--gutter);
  background: linear-gradient(180deg, rgba(13, 14, 17, .6), rgba(13, 14, 17, 0));
  transition: background .3s, box-shadow .3s;
}
.nav.scrolled, .nav.open { background: rgba(13, 14, 17, .94); box-shadow: 0 1px 0 var(--line); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand .mark { width: 26px; height: 26px; }
.brand-word { font: 700 17px/1 var(--cond); letter-spacing: .2em; text-transform: uppercase; }
.brand-name { font: 800 24px/1 var(--stencil); letter-spacing: .04em; text-transform: uppercase; }
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font: 600 15px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; padding: 8px 0; position: relative;
}
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav .btn { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.nav-toggle { display: none; }
.nav-links .nav-m { display: none; }

@media (max-width: 900px) {
  :root { --nav-h: 60px; }
  .nav { gap: 12px; }
  .nav-links {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; gap: 0;
    padding: 4px var(--gutter) 24px;
    background: rgba(13, 14, 17, .98);
    box-shadow: 0 1px 0 var(--line);
    opacity: 0; visibility: hidden;
    transition: opacity .2s, visibility 0s .2s;
  }
  .nav.open .nav-links { opacity: 1; visibility: visible; transition: opacity .2s; }
  .nav-links a { font: 800 34px/1 var(--stencil); letter-spacing: .02em; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav-links a::after { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
    border: 1px solid var(--line-2); background: transparent; color: var(--silver);
    font: 600 14px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  }
  .nav .btn { display: none; }
  .nav-links .nav-m { display: block; }
}

/* ---------- Photographs: one grade for all of them ---------- */
.ph { position: relative; overflow: hidden; background: var(--black-2); }
.ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: url(#bb);
  transform-origin: var(--fx, 50%) var(--fy, 50%);
}
/* Vignette: the corners fall off like an old lens */
.ph::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 50%, transparent 55%, rgba(8, 9, 11, .55) 100%);
}
/* Slow push-in. bleach-bypass.js adds .live while a photo is on screen. */
@keyframes push { from { transform: scale(1.02); } to { transform: scale(1.16); } }
.push img { animation: push 30s cubic-bezier(.3, .1, .3, 1) both paused; will-change: transform; }
.push.live img { animation-play-state: running; }
/* Print: a photograph with a white border and a typed caption */
.print { background: var(--silver); padding: clamp(8px, 1vw, 12px); padding-bottom: 0; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.print .ph { aspect-ratio: var(--ar, 4 / 5); }
.print figcaption { color: #25272B; font: 400 12.5px/1.45 var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 12px 2px 14px; display: flex; justify-content: space-between; gap: 12px; }
.print figcaption b { font-weight: 700; }

/* ---------- Film grain: one fixed layer over the whole page, jumping like a projector ---------- */
.grain {
  position: fixed; inset: -100px; z-index: 70; pointer-events: none;
  opacity: .2; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 2.4 -1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  animation: grain .5s steps(1) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  12.5% { transform: translate(-37px, 22px); }
  25% { transform: translate(51px, -14px); }
  37.5% { transform: translate(-12px, 63px); }
  50% { transform: translate(28px, 41px); }
  62.5% { transform: translate(-58px, -33px); }
  75% { transform: translate(9px, -71px); }
  87.5% { transform: translate(66px, 18px); }
}

/* ---------- Reveals: a short rise, no dissolves ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Full-bleed hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; isolation: isolate; }
.hero > .ph { position: absolute; inset: 0; z-index: -1; }
.hero > .ph::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(13, 14, 17, .62) 0%, rgba(13, 14, 17, .3) 45%, rgba(13, 14, 17, 0) 70%),
    linear-gradient(180deg, rgba(13, 14, 17, .4) 0%, rgba(13, 14, 17, 0) 22%, rgba(13, 14, 17, .1) 40%, rgba(13, 14, 17, .8) 76%, rgba(13, 14, 17, .95) 100%);
}
.hero .eyebrow { color: var(--silver); text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.hero-copy { position: relative; padding-top: calc(var(--nav-h) + 48px); padding-bottom: clamp(28px, 5vw, 64px); }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center;
  margin-top: clamp(24px, 3vw, 40px); padding-top: 18px; border-top: 1px solid var(--line-2);
  font: 400 13px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--silver-2);
}
.hero-meta .fr { margin-left: auto; }
.rec { display: inline-flex; align-items: center; gap: 10px; }
.rec::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); animation: blink 1.6s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Corner crop marks, like the frame lines in a viewfinder */
.marks { position: absolute; inset: clamp(14px, 2vw, 24px); pointer-events: none; z-index: 2; }
.marks::before, .marks::after { content: ''; position: absolute; width: 22px; height: 22px; border: 0 solid rgba(230, 228, 222, .7); }
.marks::before { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.marks::after { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }

/* ---------- Section heads ---------- */
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.head p:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .head { grid-template-columns: 1fr; } }

/* ---------- Contact sheet strip ---------- */
.sheet { background: var(--black-2); padding-block: clamp(18px, 2.4vw, 28px); border-block: 1px solid var(--line); }
.sheet-row .edge { display: block; color: #8E9294; font: 400 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; white-space: nowrap; }
.sheet-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
.sheet-row figure { position: relative; }
.sheet-row .ph { aspect-ratio: 3 / 2; }
.sheet-row figcaption { margin-top: 10px; color: var(--silver-2); font: 400 12px/1.45 var(--mono); letter-spacing: .04em; text-transform: uppercase; display: flex; gap: 10px; }
.sheet-row figcaption b { color: var(--silver); font-weight: 700; }
/* The editor's pick, ringed in grease pencil */
.pick .fr { position: relative; }
.pick .ring {
  position: absolute; z-index: 2; inset: -6px; pointer-events: none;
  border: 3px solid var(--amber); border-radius: 10px 4px 12px 6px;
  transform: rotate(-.8deg); opacity: .92;
}
@media (max-width: 760px) {
  .sheet-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
}

/* ---------- Columns ---------- */
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); color: var(--silver-2); max-width: 980px; }
.cols p { margin: 0; }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }

/* ---------- Principles: one photograph per principle, hard cuts between them ---------- */
.stage-wrap { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--black-2); }
.stage .ph { position: absolute; inset: 0; visibility: hidden; }
.stage .ph.on { visibility: visible; }
html:not(.js) .stage .ph:first-child { visibility: visible; }
.stage::after { /* keeps the captions and frame counter readable */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(13, 14, 17, .7), rgba(13, 14, 17, 0) 62%), linear-gradient(0deg, rgba(13, 14, 17, .6), rgba(13, 14, 17, 0) 45%), linear-gradient(180deg, rgba(13, 14, 17, .7), rgba(13, 14, 17, 0) 28%);
}
.stage-hud { position: absolute; z-index: 3; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); top: calc(var(--nav-h) + 20px); left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; gap: 16px; color: var(--silver); pointer-events: none; }
.stage-list { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; }
.stage-list > li { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding-bottom: clamp(48px, 12vh, 120px); }
.card { max-width: 560px; background: rgba(13, 14, 17, .88); padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 36px); border-left: 3px solid var(--amber); }
.card .num { display: block; margin-bottom: 14px; color: var(--silver-2); font: 400 13px/1 var(--mono); letter-spacing: .08em; }
.card h3 { font: 800 clamp(38px, 4.6vw, 64px)/.92 var(--stencil); text-transform: uppercase; margin-bottom: 16px; }
.card p { margin: 0; color: var(--silver); font-size: 19px; line-height: 1.5; }
.card .cap { display: block; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--silver-2); font-size: 12px; }

/* ---------- Themes ---------- */
.themes { display: flex; flex-wrap: wrap; gap: 0 .32em; font: 800 clamp(40px, 6.4vw, 104px)/1 var(--stencil); text-transform: uppercase; }
.themes li { display: inline-flex; align-items: baseline; gap: .32em; }
.themes li:not(:last-child)::after { content: '/'; color: var(--steel); font-weight: 600; }

/* ---------- In development ---------- */
.slate { position: relative; }
.slate .ph { aspect-ratio: 2.39 / 1; }
.slate figcaption {
  position: absolute; z-index: 3; left: clamp(18px, 3vw, 40px); right: clamp(18px, 3vw, 40px); bottom: clamp(16px, 2.6vw, 36px);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap;
}
.slate .t-title { font: 800 clamp(32px, 4.8vw, 72px)/.9 var(--stencil); text-transform: uppercase; display: block; margin-top: 10px; text-shadow: 0 2px 30px rgba(0, 0, 0, .5); }
.slate .ph::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(13, 14, 17, .82), rgba(13, 14, 17, 0) 55%); }
@media (max-width: 640px) {
  .slate .ph { aspect-ratio: 4 / 3; }
}

/* ---------- Leadership + press ---------- */
.leader { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.leader .print { max-width: 460px; transform: rotate(-1.2deg); }
.leader-copy p { color: var(--silver-2); max-width: 36em; }
.role { font: 400 14px/1.4 var(--mono) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--silver) !important; margin: 14px 0 26px; }
.press-card { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; text-decoration: none; padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--line); transition: border-color .2s, background .2s; }
.press-card:hover { border-color: var(--line-2); background: rgba(230, 228, 222, .03); }
.press-card .ph { aspect-ratio: 4 / 3; }
.press-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--silver-2); margin-bottom: 14px; }
.press-card h3 { font: 600 clamp(24px, 2.4vw, 34px)/1.12 var(--cond); margin-bottom: 12px; }
.press-card .dek { color: var(--silver-2); }
@media (max-width: 900px) {
  .leader, .press-card { grid-template-columns: 1fr; }
  .leader .print { max-width: 380px; }
}

/* ---------- Full-bleed band with copy over a photograph ---------- */
.band { position: relative; isolation: isolate; padding-block: clamp(110px, 16vw, 220px); }
.band > .ph { position: absolute; inset: 0; z-index: -1; }
.band > .ph::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(13, 14, 17, .58); }
.band-fade > .ph::before { background: linear-gradient(180deg, var(--black) 0%, rgba(20, 22, 26, .55) 30%, rgba(20, 22, 26, .6) 70%, var(--black) 100%); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 4vw, 64px); margin-top: clamp(48px, 6vw, 80px); padding-top: 28px; border-top: 1px solid var(--line-2); }
.contact-grid p { margin: 0; }
.contact-grid a { text-decoration-color: var(--amber); text-underline-offset: 4px; overflow-wrap: anywhere; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.footer { background: var(--black-2); padding-block: clamp(56px, 7vw, 96px) 36px; border-top: 1px solid var(--line); }
.footer-word { display: flex; align-items: center; gap: 18px; font: 800 clamp(48px, 9vw, 132px)/.85 var(--stencil); text-transform: uppercase; letter-spacing: .01em; }
.footer-word svg { width: .8em; height: .8em; flex: none; }
.footer-row { display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: space-between; margin-top: clamp(36px, 5vw, 56px); padding-top: 22px; border-top: 1px solid var(--line); color: var(--silver-2); font: 400 13px/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.footer-row a { text-decoration: none; }
.footer-row a:hover { color: var(--silver); }
.credits { margin-top: 26px; color: var(--silver-2); font: 400 12.5px/1.7 var(--mono); letter-spacing: .02em; max-width: 72em; }
.credits a { text-decoration-color: rgba(230, 228, 222, .4); text-underline-offset: 3px; }
.credits a:hover { color: var(--silver); text-decoration-color: var(--amber); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(24px, 4vw, 64px); align-items: start; }
.footer-links { display: grid; gap: 8px; }
.footer-links a { text-decoration: none; font: 600 18px/1.3 var(--cond); letter-spacing: .1em; text-transform: uppercase; overflow-wrap: anywhere; }
.footer-links a:hover { color: var(--amber); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr; } }

/* =========================================================
   Rough Cut
   ========================================================= */
.rc-hero .ph img { --fx: 62%; --fy: 52%; object-position: 62% 50%; }
.rc-hero .mark-lg { width: clamp(56px, 6vw, 84px); height: clamp(56px, 6vw, 84px); margin-bottom: clamp(22px, 3vw, 36px); }
.rc-hero h1 { max-width: 11.5em; }
.rc-company .lede { max-width: 21em; margin-bottom: clamp(28px, 4vw, 48px); }
.rc-themes { border-top: 1px solid var(--line); }
.rc-themes .lede { max-width: 22em; }
.rc-contact { padding-bottom: clamp(72px, 9vw, 120px); }
.rc-contact > .ph img { object-position: 50% 60%; }

/* =========================================================
   Ryan Podolsky
   ========================================================= */
.rp-hero .ph img { object-position: 50% 40%; }
.rp-hero h1 { font-size: clamp(64px, 14.5vw, 236px); line-height: .82; }
.rp-sub { max-width: 30em; margin: clamp(20px, 2.6vw, 30px) 0 0; font: 500 clamp(20px, 1.9vw, 26px)/1.3 var(--cond); color: var(--silver); }

.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.about-grid .print { max-width: 440px; transform: rotate(1deg); position: sticky; top: calc(var(--nav-h) + 32px); }
.about-copy .lede { margin-bottom: 32px; }
.about-copy .body p { color: var(--silver-2); max-width: 36em; }
.about-copy .lede a, .about-copy .body a { text-decoration-color: var(--amber); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.edu { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.edu p { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; }
.edu .org { font: 600 22px/1.2 var(--cond); letter-spacing: .02em; }
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-grid .print { position: static; max-width: 360px; }
}

/* Career: four frames, each with a typed caption */
.frames { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 44px); }
.frame .ph { aspect-ratio: 3 / 2; }
.frame-cap { display: flex; justify-content: space-between; gap: 16px; margin: 12px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--silver-2); font: 400 12.5px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.frame .eyebrow { margin-bottom: 8px; color: var(--silver); }
.frame h3 { font: 800 clamp(34px, 3.6vw, 52px)/.92 var(--stencil); text-transform: uppercase; margin-bottom: 14px; }
.frame p { color: var(--silver-2); max-width: 30em; margin: 0; }
.frame .btn { margin-top: 24px; }
.frame .print { padding: 10px 10px 0; }
.frame .print .ph { aspect-ratio: 3 / 2; }
@media (max-width: 760px) { .frames { grid-template-columns: 1fr; } }

.service-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); }
.service-grid .body p { color: var(--silver-2); }
.service-grid .body p:first-child { color: var(--silver); }
@media (max-width: 900px) { .service-grid { grid-template-columns: 1fr; } }

.quote blockquote p { font: 800 clamp(44px, 7vw, 116px)/.92 var(--stencil); text-transform: uppercase; max-width: 13em; margin-bottom: 28px; }
.quote .q { color: var(--amber); }
.quote cite { font: 400 13px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; font-style: normal; color: var(--silver-2); }
.quote cite a { text-underline-offset: 3px; }

.notes { border-top: 1px solid var(--line-2); }
.notes li { display: grid; grid-template-columns: 120px minmax(0, 5fr) minmax(0, 6fr); gap: 8px clamp(20px, 3vw, 48px); padding: 26px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.notes .idx { font: 400 13px/1.4 var(--mono); letter-spacing: .08em; color: var(--silver-2); text-transform: uppercase; }
.notes h3 { font: 600 clamp(24px, 2.4vw, 32px)/1.1 var(--cond); }
.notes p { margin: 0; color: var(--silver-2); }
@media (max-width: 760px) { .notes li { grid-template-columns: 1fr; } }

.press-row { display: grid; grid-template-columns: 170px 200px minmax(0, 1fr) auto; gap: 8px 28px; align-items: baseline; padding: 24px 0; border-block: 1px solid var(--line); text-decoration: none; transition: background .2s; }
.press-row:hover { background: rgba(230, 228, 222, .03); }
.press-row + .press-row { border-top: 0; }
.press-row .d, .press-row .pub { font: 400 13px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--silver-2); }
.press-row .t { font: 600 clamp(22px, 2.2vw, 30px)/1.15 var(--cond); }
.press-row .arr { color: var(--amber); font-size: 22px; }
@media (max-width: 900px) { .press-row { grid-template-columns: 1fr; } .press-row .arr { display: none; } }

.rc-band-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.rc-band-inner .mark-lg { width: clamp(84px, 11vw, 160px); height: clamp(84px, 11vw, 160px); }
.rc-band-inner .display { font-size: clamp(42px, 6.4vw, 104px); max-width: 12em; margin-bottom: 32px; }
@media (max-width: 760px) { .rc-band-inner { grid-template-columns: 1fr; } }

/* Service: the headline sits on the dark ground below the ridge, under the helicopter */
.rp-service .band { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding-block: calc(var(--nav-h) + 40px) clamp(24px, 4vw, 56px); }
.rp-service .band > .ph img { object-position: 60% 32%; }
.rp-service .band-fade > .ph::before { background: linear-gradient(180deg, var(--black) 0%, rgba(20, 22, 26, 0) 22%, rgba(20, 22, 26, 0) 50%, rgba(20, 22, 26, .7) 82%, var(--black) 100%); }
.eyebrow .dot + span:last-child { flex: 1 1 0; min-width: 0; }
.rp-rc > .ph::before { background: linear-gradient(90deg, rgba(13, 14, 17, .74), rgba(13, 14, 17, .5)); }