/* ══════════════════════════════════════════════════════════════
   RA MARKETING RESULTS — v3, photography-led
   Base design system (palette, type, motion) carried over unchanged
   from the approved v2 build — broadcast-dark, signal-cyan. What's
   new here is the photo system: every full-bleed photograph on the
   site is graded through one shared treatment (.photo-grade) so the
   site reads as one consistent look rather than eight different
   stock photos with eight different moods. That consistency is what
   separates a photography-led agency site from a generic one — see
   PHOTO-CREDITS.md for sourcing and licensing.
   ══════════════════════════════════════════════════════════════ */
:root {
  --g0: #06090d;            /* page ground */
  --g1: #0b1219;            /* raised */
  --g2: #111c26;            /* card */
  --g3: #17252f;            /* card hover */
  --navy: #293d4c;          /* brand navy, mid-tone here */
  --line: rgba(255,255,255,.085);
  --line-2: rgba(255,255,255,.17);
  --text: #eff5f9;
  --muted: #94a9b8;
  --faint: #647a8b;
  --cyan: #00adef;
  --cyan-hot: #5cd2ff;
  --cyan-dim: rgba(0,173,239,.13);
  --paper: #f2f5f2;         /* the one light surface */
  --radius: 3px;
  --ease: cubic-bezier(.22,1,.36,1);
  --shell: 1280px;
  --pad: clamp(20px, 5vw, 76px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--g0);
  color: var(--text);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--cyan-hot); outline-offset: 3px; }

.disp { font-family: "Archivo", ui-sans-serif, sans-serif; font-variation-settings: "wdth" 100; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }

/* ── Type scale ────────────────────────────────────────────── */
h1, h2, h3 { margin: 0; font-family: "Archivo", ui-sans-serif, sans-serif; }
h1 {
  font-weight: 900; font-variation-settings: "wdth" 112;
  font-size: clamp(40px, 6.6vw, 94px);
  line-height: .92; letter-spacing: -.035em; text-transform: uppercase;
}
h2 {
  font-weight: 900; font-variation-settings: "wdth" 112;
  font-size: clamp(30px, 4.6vw, 60px);
  line-height: .94; letter-spacing: -.03em; text-transform: uppercase;
}
h3 { font-weight: 700; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.2; letter-spacing: -.015em; }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--cyan);
}
.kicker.on-photo { color: var(--cyan-hot); }
.kicker i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 0 4px var(--cyan-dim); flex: none;
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(0,173,239,.13); }
  50%     { box-shadow: 0 0 0 9px rgba(0,173,239,0); }
}
.lede { font-size: clamp(16.5px, 1.5vw, 20px); line-height: 1.62; color: var(--muted); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: 15px; letter-spacing: .01em;
  padding: 17px 30px; border-radius: var(--radius); overflow: hidden;
  background: var(--cyan); color: #04121a; border: 1px solid var(--cyan);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s;
}
.btn:hover { background: var(--cyan-hot); transform: translateY(-2px); box-shadow: 0 12px 34px -12px rgba(0,173,239,.6); }
.btn svg { transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn--ghost:hover { background: rgba(255,255,255,.05); border-color: var(--text); box-shadow: none; }
.btn--on-photo { border-color: rgba(255,255,255,.55); }
.btn--on-photo:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ── Reveal on scroll ──────────────────────────────────────── */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
section[id], div[id="top"] { scroll-margin-top: 104px; }

/* ══ NAV ═══════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.stuck {
  background: rgba(6,9,13,.82);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--line);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 86px; }
.brand { display: flex; align-items: center; gap: 13px; flex: none; }
.brand-mark { position: relative; width: 42px; height: 42px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px var(--line-2); }
.brand-mark img { width: 100%; height: 100%; border-radius: 50%; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand-txt b { font-family: "Archivo", sans-serif; font-weight: 900; font-variation-settings: "wdth" 112; font-size: 16px; letter-spacing: -.01em; text-transform: uppercase; }
.brand-txt span { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: .2em; color: var(--faint); text-transform: uppercase; }

.nav-links { display: flex; gap: 6px; }
.nav-links a { position: relative; font-size: 14px; font-weight: 500; color: var(--muted); padding: 10px 16px; border-radius: var(--radius); transition: color .25s, background .25s; }
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-tel { font-family: "IBM Plex Mono", monospace; font-size: 13.5px; font-weight: 500; color: var(--text); border: 1px solid var(--line-2); border-radius: 999px; padding: 10px 18px; transition: border-color .3s, color .3s; }
.nav-tel:hover { border-color: var(--cyan); color: var(--cyan-hot); }
.burger { display: none; width: 44px; height: 44px; border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid var(--line-2); color: var(--text); align-items: center; justify-content: center; cursor: pointer; }
@media (max-width: 940px) { .nav-links, .nav-tel, .nav-right .btn { display: none; } .burger { display: inline-flex; } }

.drawer {
  position: fixed; inset: 0; z-index: 70; display: none;
  flex-direction: column; padding: 24px var(--pad) 40px;
  background: rgba(6,9,13,.97);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.drawer.open { display: flex; }
.drawer-top { display: flex; justify-content: flex-end; }
.drawer-x { width: 46px; height: 46px; border-radius: var(--radius); cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); color: var(--text); display: flex; align-items: center; justify-content: center; }
.drawer nav { display: flex; flex-direction: column; margin-top: 26px; }
.drawer nav a { font-family: "Archivo", sans-serif; font-weight: 900; font-variation-settings: "wdth" 112; font-size: clamp(30px, 9vw, 44px); letter-spacing: -.03em; text-transform: uppercase; padding: 18px 0; border-bottom: 1px solid var(--line); }
.drawer-foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.drawer-foot .mono { font-size: 13.5px; color: var(--muted); }

/* ══ PHOTO SYSTEM ═════════════════════════════════════════════
   One shared grade applied to every photograph on the site — cool,
   slightly desaturated, deepened shadows, so eight different stock
   sources read as a single consistent house look rather than eight
   different moods. This is the one thing research on high-end
   agency sites called out as the actual differentiator over
   "generic stock" — not a per-image filter, a site-wide one. */
.photo-grade {
  filter: saturate(.88) contrast(1.1) brightness(.86) grayscale(.1);
}
.photo-full {
  position: relative; overflow: hidden;
}
/* Absolutely positioned so it never occupies flow space of its own —
   without this, the <img> and any caption content after it (.shell)
   stack one below the other in normal flow instead of overlaying,
   and the caption gets pushed below the visible box and clipped by
   overflow:hidden. Caught this the hard way: three sections
   (field-band, approach-photo, work-photo) had invisible captions
   until this was fixed. */
.photo-full img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Uniform navy wash — a flat tint, not a directional fade, so text
   placed over the photo reads as sitting on a treated surface rather
   than fighting a gradient. Composition/crop choice does the rest of
   the legibility work by keeping copy over the photo's own plain
   regions. */
.photo-full::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,9,13,.34) 0%, rgba(6,9,13,.62) 100%);
  mix-blend-mode: multiply;
}
.photo-full::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(0,20,32,.14);
}
.photo-cred {
  position: absolute; z-index: 2; right: 14px; bottom: 10px;
  font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: .1em;
  color: rgba(255,255,255,.38); text-transform: uppercase;
}

/* ══ HERO ══════════════════════════════════════════════════
   Photography-led per research: a full-bleed real photo carries the
   hero, the "reach" canvas motif from v2 rides on top of it in
   screen blend mode (a signal spreading across the skyline, not
   decoration competing with it) rather than replacing either. */
.hero { position: relative; padding: clamp(140px, 20vh, 200px) 0 clamp(76px, 9vw, 108px); overflow: hidden; min-height: 92vh; display: flex; align-items: flex-end; }
.hero-photo { position: absolute; inset: 0; z-index: 0; }
.hero-photo img {
  width: 100%; height: 100%; object-fit: cover;
  /* Pushes the lit skyline cluster toward the right edge, clearing the
     text column — chosen with the headline in mind, not cropped blind. */
  object-position: 84% 38%;
}
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  /* Text sits over the bridge/water/sky, not the buildings: the dark
     zone now covers the full column the headline occupies (through
     ~72% width) rather than fading out at the halfway point. */
  background: linear-gradient(100deg, rgba(4,6,9,.97) 0%, rgba(4,6,9,.93) 40%, rgba(4,6,9,.74) 60%, rgba(4,6,9,.32) 82%, rgba(4,6,9,.5) 100%),
              linear-gradient(0deg, rgba(4,6,9,.55) 0%, rgba(4,6,9,0) 38%),
              linear-gradient(180deg, rgba(4,6,9,.4) 0%, rgba(4,6,9,0) 22%);
}
#reach { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; mix-blend-mode: screen; opacity: .85; }
.hero-glow { position: absolute; z-index: 1; pointer-events: none; width: 900px; height: 900px; right: -280px; top: -340px; border-radius: 50%; background: radial-gradient(circle, rgba(0,173,239,.14) 0%, rgba(0,173,239,0) 62%); }
.hero-in { position: relative; z-index: 2; }
.hero h1 { max-width: 15ch; }
.hero h1 .ln { display: block; overflow: hidden; }
.hero h1 .ln > span { display: block; transform: translateY(105%); animation: rise 1.05s var(--ease) forwards; }
/* Four lines now (the third used to wrap "advertising that" onto two
   visual lines inside a mask built for one, which clipped the wrapped
   word — split into its own .ln so each line gets a clean reveal). */
.hero h1 .ln:nth-child(1) > span { animation-delay: .10s; }
.hero h1 .ln:nth-child(2) > span { animation-delay: .19s; }
.hero h1 .ln:nth-child(3) > span { animation-delay: .28s; }
.hero h1 .ln:nth-child(4) > span { animation-delay: .37s; }
@keyframes rise { to { transform: none; } }
.hero h1 em { font-style: normal; color: var(--cyan-hot); }

.fade-up { opacity: 0; animation: fadeUp .95s var(--ease) forwards; }
.d1 { animation-delay: .5s; } .d2 { animation-delay: .62s; } .d3 { animation-delay: .74s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero .kicker { margin-bottom: 26px; }
.hero .lede { max-width: 56ch; margin: 28px 0 0; color: #dbe4ea; text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.creds { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; margin-top: clamp(56px, 8vw, 84px); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.creds > div { background: rgba(6,9,13,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 24px 26px; display: flex; flex-direction: column; gap: 9px; }
.creds b { font-family: "Archivo", sans-serif; font-weight: 900; font-variation-settings: "wdth" 112; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.03em; line-height: 1; }
.creds span { font-size: 13.5px; color: #b7c4cd; line-height: 1.45; }
@media (max-width: 780px) { .creds { grid-template-columns: 1fr; } }
.hero-photo-cred {
  position: absolute; z-index: 2; right: var(--pad); bottom: 18px;
  font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: .12em;
  color: rgba(255,255,255,.4); text-transform: uppercase;
}

/* ══ IN THE FIELD — new full-bleed section band ══════════════
   The first thing a visitor sees after the hero is a real production
   photograph, not another block of text — the "vertical stack of
   full-width image cards" pattern research identified as the
   easiest high-end pattern to execute cleanly. */
.field-band { position: relative; height: clamp(320px, 42vw, 480px); }
.field-band .shell { position: relative; z-index: 2; height: 100%; display: flex; align-items: flex-end; padding-bottom: clamp(28px, 4vw, 44px); }
.field-cap { max-width: 46ch; }
.field-cap .kicker { margin-bottom: 14px; }
.field-cap h3 { color: #fff; font-family: "Archivo", sans-serif; font-weight: 800; font-variation-settings: "wdth" 112; font-size: clamp(20px, 2.2vw, 27px); text-transform: uppercase; letter-spacing: -.02em; }
.field-cap p { margin: 10px 0 0; color: #cbd7de; font-size: 15px; line-height: 1.55; max-width: 52ch; }

/* ══ CHANNEL BAND ══════════════════════════════════════════ */
.chband { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--g1); padding: clamp(30px, 4vw, 44px) 0; }
.chband-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(18px, 2.4vw, 30px) 28px; }
@media (max-width: 860px) { .chband-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px) { .chband-grid { grid-template-columns: 1fr; } }
.chband-grid > div { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.chband-grid .n { font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--cyan); flex: none; }
.chband-grid b { font-family: "Archivo", sans-serif; font-weight: 800; font-variation-settings: "wdth" 112; font-size: clamp(17px, 1.75vw, 23px); letter-spacing: -.02em; text-transform: uppercase; color: var(--text); line-height: 1.1; }

/* ══ LOCAL BROADCAST — now a photo/content split ═════════════
   Split-screen per research pattern: a real photograph on one side,
   the actual station roster on the other — rather than photography
   competing with the data, they sit side by side. */
.broadcast-split { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; }
@media (max-width: 980px) { .broadcast-split { grid-template-columns: 1fr; } }
.broadcast-photo { position: relative; min-height: 460px; }
.broadcast-photo .photo-full { position: absolute; inset: 0; }
.broadcast-text { padding: clamp(48px, 6vw, 80px) var(--pad); display: flex; flex-direction: column; justify-content: center; background: var(--g0); }
@media (min-width: 981px) { .broadcast-text { padding-left: clamp(40px, 5vw, 72px); } }

.stations { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: clamp(28px, 4vw, 40px); }
@media (max-width: 560px) { .stations { grid-template-columns: 1fr; } }

.station { position: relative; overflow: hidden; background: var(--g2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; transition: background .45s var(--ease), transform .45s var(--ease), border-color .45s; }
.station::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); }
.station:hover { background: var(--g3); transform: translateY(-4px); border-color: var(--line-2); }
.station:hover::before { transform: scaleX(1); }
.station-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.station-ch { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .16em; color: var(--faint); text-transform: uppercase; }
.station-net { font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); border: 1px solid rgba(0,173,239,.34); background: var(--cyan-dim); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.station-logo { height: 46px; display: flex; align-items: center; justify-content: flex-start; }
.station-logo img { max-height: 46px; width: auto; }
.station-call { font-family: "Archivo", sans-serif; font-weight: 900; font-variation-settings: "wdth" 112; font-size: clamp(24px, 2.6vw, 32px); line-height: .92; letter-spacing: -.03em; text-transform: uppercase; color: var(--text); }
.station-meta { font-size: 12.5px; color: var(--faint); }

.also { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 9px; }
.also span { font-size: 12.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; background: rgba(255,255,255,.02); }

/* ══ SECTION FURNITURE ════════════════════════════════════ */
section.blk { padding: clamp(68px, 8.5vw, 112px) 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: clamp(40px, 6vw, 64px); }
.sec-head .kicker { margin-bottom: 16px; }
.sec-head p { max-width: 44ch; margin: 0; color: var(--muted); font-size: 16px; }
@media (max-width: 860px) { .sec-head { flex-direction: column; align-items: flex-start; gap: 20px; } }

/* ══ APPROACH — photo band + card grid ═══════════════════════ */
.approach-photo { position: relative; height: clamp(240px, 30vw, 360px); margin-bottom: clamp(40px, 6vw, 64px); border-radius: var(--radius); overflow: hidden; }
.approach-photo .shell { position: relative; z-index: 2; height: 100%; display: flex; align-items: flex-end; padding-bottom: clamp(24px, 3.5vw, 36px); }
/* A solid chip, not bare text on the photo — a whiteboard's own
   background is nearly white, and white text on it simply vanishes.
   A chip is legible regardless of what happens to be behind it. */
.approach-photo blockquote {
  margin: 0; background: rgba(6,9,13,.86); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius);
  padding: 18px 24px; font-family: "Archivo", sans-serif; font-weight: 700;
  font-size: clamp(17px, 1.9vw, 23px); line-height: 1.32; letter-spacing: -.015em;
  color: #fff; max-width: 30ch;
}

.approach { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.card { position: relative; background: var(--g2); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px 38px; overflow: hidden; display: flex; flex-direction: column; gap: 16px; transition: background .45s var(--ease), transform .45s var(--ease), border-color .45s; }
.card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); }
.card:hover { background: var(--g3); transform: translateY(-5px); border-color: var(--line-2); }
.card:hover::before { transform: scaleX(1); }
.card-n { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .18em; color: var(--cyan); text-transform: uppercase; }
.card p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.62; }
.card-ico { color: var(--cyan); margin-bottom: 4px; }
@media (max-width: 940px) { .approach { grid-template-columns: 1fr; } }

/* ══ FLIGHT CHART ═════════════════════════════════════════ */
.plan { background: var(--g1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.chart-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: var(--g0); overflow-x: auto; }
.chart { min-width: 720px; }
.chart-hd, .chart-row { display: grid; grid-template-columns: 168px repeat(12, minmax(0,1fr)); align-items: center; }
.chart-hd { border-bottom: 1px solid var(--line); }
.chart-hd > span { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; padding: 14px 0; text-align: center; }
.chart-hd > span:first-child { text-align: left; padding-left: 22px; }
.chart-row { border-bottom: 1px solid var(--line); }
.chart-row:last-child { border-bottom: 0; }
.chart-row > .ch { font-size: 14px; font-weight: 500; padding: 0 0 0 22px; color: var(--text); display: flex; align-items: center; gap: 10px; height: 52px; }
.chart-row > .ch i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); opacity: .55; flex: none; }
.cell { height: 52px; border-left: 1px solid rgba(255,255,255,.045); position: relative; }
.bar { position: absolute; top: 50%; transform: translateY(-50%) scaleX(0); left: 3px; right: 3px; height: 15px; border-radius: 2px; background: var(--cyan); transform-origin: left; transition: transform .8s var(--ease); }
.in .bar { transform: translateY(-50%) scaleX(1); }
.w-hi { opacity: 1; } .w-mid { opacity: .62; } .w-low { opacity: .34; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 20px; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--faint); }
.chart-legend div { display: flex; align-items: center; gap: 8px; }
.chart-legend em { width: 22px; height: 9px; border-radius: 2px; background: var(--cyan); display: block; }
.chart-note { margin: 18px 0 0; font-size: 13.5px; color: var(--faint); max-width: 70ch; }

/* ══ WORK / PROOF — photo band above the honest logo wall ════
   The photography here is atmospheric (what "in production" looks
   like), not a claim about a specific client's shoot — the logo
   wall directly below is the actual, factual proof point. Keeping
   those two things visually distinct matters: nothing here implies
   the pictured people are RA's clients or staff. */
.work-photo { position: relative; height: clamp(220px, 26vw, 320px); border-radius: var(--radius); overflow: hidden; margin-bottom: clamp(36px, 5vw, 52px); }
.work-photo .shell { position: relative; z-index: 2; height: 100%; display: flex; align-items: flex-end; padding-bottom: clamp(22px, 3vw, 32px); }
.work-photo .wp-cap { color: #eef4f8; }
.work-photo .wp-cap b { display: block; font-family: "Archivo", sans-serif; font-weight: 800; font-variation-settings: "wdth" 112; font-size: clamp(17px, 1.9vw, 22px); text-transform: uppercase; letter-spacing: -.015em; }
.work-photo .wp-cap span { display: block; margin-top: 6px; font-size: 13.5px; color: #b7c4cd; max-width: 48ch; }

.logos { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.logo-tile { background: #fff; border-radius: var(--radius); height: 138px; display: flex; align-items: center; justify-content: center; padding: 24px 28px; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.logo-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 40px -20px rgba(0,0,0,.8); }
.logo-tile img { max-height: 100%; max-width: 100%; object-fit: contain; }
.logo-tile img.knockout { filter: brightness(0); }
@media (max-width: 900px) { .logos { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px) { .logos { grid-template-columns: 1fr; } }

.quote { margin-top: 22px; border: 1px dashed var(--line-2); border-radius: var(--radius); padding: clamp(28px, 5vw, 48px); background: rgba(255,255,255,.015); }
.quote blockquote { margin: 0; font-family: "Archivo", sans-serif; font-weight: 500; font-size: clamp(19px, 2.4vw, 30px); line-height: 1.32; letter-spacing: -.02em; color: var(--text); }
.quote footer { margin-top: 20px; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: .14em; color: var(--faint); text-transform: uppercase; }

/* ══ SIGNATURE (the one light surface) ════════════════════ */
.sig { background: var(--paper); color: #0f1a22; }
.sig-in { display: flex; align-items: center; gap: clamp(28px, 5vw, 56px); }
.sig img { width: clamp(88px, 12vw, 132px); height: clamp(88px, 12vw, 132px); border-radius: 50%; flex: none; }
.sig h2 { color: #17252f; max-width: 22ch; }
.sig p { margin: 18px 0 0; font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.6; color: #46565f; max-width: 62ch; }
@media (max-width: 720px) { .sig-in { flex-direction: column; align-items: flex-start; } }

/* ══ CONTACT ══════════════════════════════════════════════ */
.contact { position: relative; overflow: hidden; }
.contact::before { content: ""; position: absolute; z-index: 0; width: 760px; height: 760px; left: 50%; bottom: -430px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(0,173,239,.15) 0%, rgba(0,173,239,0) 62%); }
.contact-in { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.contact h2 { max-width: 18ch; }
.contact .lede { max-width: 48ch; margin: 24px auto 0; }
.contact-rows { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: clamp(44px, 7vw, 66px); width: 100%; text-align: left; }
.contact-rows a, .contact-rows div { background: var(--g0); padding: 26px 28px; display: flex; flex-direction: column; gap: 7px; transition: background .35s; }
.contact-rows a:hover { background: var(--g2); }
.contact-rows .lbl { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .18em; color: var(--faint); text-transform: uppercase; }
.contact-rows .val { font-size: 16.5px; font-weight: 500; color: var(--text); word-break: break-word; }
@media (max-width: 780px) { .contact-rows { grid-template-columns: 1fr; } }

/* ══ FOOTER ═══════════════════════════════════════════════ */
footer.ft { border-top: 1px solid var(--line); padding: 30px 0; }
.ft-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.ft-in .mono { font-size: 11.5px; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; }
.ft-links { display: flex; gap: 24px; font-size: 13px; color: var(--muted); }
.ft-links a:hover { color: var(--cyan-hot); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rv { opacity: 1; transform: none; }
  .hero h1 .ln > span { transform: none; }
  .fade-up { opacity: 1; }
  .bar { transform: translateY(-50%) scaleX(1) !important; }
}