/* The Urban Media Group — component chassis.
 *
 * Every value here comes from tokens.css. If a raw hex, size or space value
 * appears below, that is a bug: it means the newsletter's palette-drift failure
 * is starting again in a second place.
 *
 * Mobile-first. Most visitors arrive from an Instagram link on a phone.
 *
 * One rule about padding, learned the hard way: this file uses the LOGICAL
 * longhands (padding-inline / padding-block) everywhere and never the `padding`
 * shorthand on a class that another class also touches. In the newsletter, a
 * companion class using the shorthand silently zeroed padding-block on four of
 * nine sections.
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--navy-900);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The faint diagonal weave that keeps a large dark field from reading as flat.
   Pure CSS, no image request. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.014) 0 1px, transparent 1px 78px),
    repeating-linear-gradient(-115deg, rgba(255,255,255,.010) 0 1px, transparent 1px 112px);
}

body > * { position: relative; z-index: 1; }

img, svg, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--sp-3);
  inset-block-start: -100%;
  z-index: 100;
  background: var(--accent);
  color: var(--navy-900);
  padding-inline: var(--sp-3);
  padding-block: var(--sp-2);
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.skip-link:focus { inset-block-start: var(--sp-3); }

/* ---------------------------------------------------------------- layout -- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.section {
  padding-block: var(--sp-6);
}

.section--tight { padding-block: var(--sp-5); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block-end: var(--sp-4);
  padding-block-end: var(--sp-3);
  border-block-end: 1px solid var(--line);
}

.section-head h2 { font-size: var(--step-2); }

/* The small letterspaced uppercase label used above headings and inside
   cards. It is the one typographic device that carries across the whole site. */
.kicker {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.kicker--muted { color: var(--paper-45); }

.lede {
  color: var(--paper-70);
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 46ch;
}

/* ---------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--navy-900) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  border-block-end: 1px solid var(--line);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 68px;
}

.brandmark {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
  margin-inline-end: auto;
}

.brandmark img { width: 38px; height: 38px; }

.brandmark__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}

.brandmark__name span { color: var(--accent); }

.site-nav { display: none; }

/* Blueprint §3, mobile header: logo, menu icon, and optionally a compact CTA,
   "but not both if the header becomes crowded". At 390px the mark, the CTA and
   the menu button together overflow the bar, so the phone gets the mark and the
   menu; Work With Us is the last item inside the menu. */
.site-header .btn--primary { display: none; }

@media (min-width: 46rem) {
  .site-header .btn--primary { display: inline-flex; }
}

.site-nav a {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--paper-70);
  padding-block: var(--sp-2);
  transition: color .18s var(--ease);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--paper); }

.site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }

/* ---------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1px solid transparent;
  border-radius: 999px;
  padding-inline: var(--sp-4);
  padding-block: .7em;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease), color .18s var(--ease);
}

.btn:hover { transform: translateY(-1px); }

.btn--primary { background: var(--accent); color: var(--navy-900); }
.btn--primary:hover { background: var(--accent-dk); }

.btn--ghost { border-color: var(--line); color: var(--paper); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--sm { padding-inline: var(--sp-3); padding-block: .55em; }

.btn__arrow { transition: transform .18s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ------------------------------------------------------------ mobile nav -- */

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  /* 44px is the floor for a tap target, and this is the only way into the
     navigation on a phone. It was 42. */
  width: 44px;
  height: 44px;
  padding-inline: 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.nav-toggle:hover { background: transparent; }
.nav-toggle:focus-visible { outline: 0; }
.nav-toggle:focus-visible span { background: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent); }

.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--paper);
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  display: none;
  border-block-start: 1px solid var(--line);
  background: var(--navy-800);
}

.mobile-nav[data-open="true"] { display: block; }

.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding-inline: 0;
  padding-block: var(--sp-3);
}

.mobile-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-3);
  border-block-end: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: .01em;
}

.mobile-nav li:last-child a { border-block-end: 0; }
/* Written as a CSS escape, not a literal glyph, so the rule survives a server
   that serves this file without declaring UTF-8. */
.mobile-nav a::after { content: "\2192"; color: var(--accent); }

/* ------------------------------------------------- the photo grade (hero) --
 * The colour treatment lives here, not baked into the image files, so that
 * swapping in better photography inherits the look automatically. Three layers:
 *   1. the photo, desaturated and darkened by filter
 *   2. a navy wash in `color` blend mode — takes the hue from this layer and
 *      the luminance from the photo, which is what makes it read as one brand
 *      image rather than a stock picture sitting on a dark page
 *   3. scrims for text legibility, plus an accent bloom
 */

.grade {
  position: relative;
  overflow: hidden;
  background-color: var(--navy-900);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

.grade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.68) contrast(1.03) brightness(.86);
}

.grade::before,
.grade::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.grade::before {
  /* The tint is the city's, not a fixed navy — see the --grade tokens. The
     fallback keeps the old cool grade for any surface that sets no city class.
     The city sites take this the rest of the way to a duotone further down. */
  background: linear-gradient(180deg,
              var(--grade-top, #1B4463) 0%, var(--grade-bot, #0D2033) 100%);
  mix-blend-mode: color;
  opacity: .55;
}

/* The scrim is a legibility device, not decoration, and it was tuned against
   the old tint. The duotone is a far brighter, far more saturated picture, and
   measuring the actually-painted pixels behind the hero copy on a phone found
   the eyebrow at 1.64:1 against its background and 1.17:1 against the brightest
   part of it -- coral type on a coral-lit sky, effectively invisible, where
   small text needs 4.5:1. The old ramp was only 14% opaque at 30% height, which
   is exactly where the copy sits.

   These numbers are held by a test that samples the rendered page, so the next
   change to the grade cannot quietly take the text down with it. */
.grade::after {
  background:
    linear-gradient(180deg,
      rgba(8,16,24,.34) 0%,
      rgba(8,16,24,.40) 16%,
      rgba(8,16,24,.74) 30%,
      rgba(8,16,24,.78) 76%,
      rgba(8,16,24,.95) 100%);
}

/* The hero eyebrow is the one kicker on the site that does NOT get to be coral.
   Everywhere else a kicker sits on a solid dark band and measures fine. Here it
   sits on a coral-graded photograph, and coral on coral is not a contrast
   problem you can scrim your way out of: with the scrim above it still measured
   3.75:1 against its own background, under the 4.5:1 that 12.5px type needs,
   and the hue difference is nil so it reads as texture rather than as words.
   In paper it measures 9.7:1 on the same pixels. */
.city-atlanta .hero .kicker,
.city-savannah .hero .kicker { color: var(--paper); }

/* On wide screens the copy sits left, so the scrim leans left too. */
@media (min-width: 62rem) {
  .grade::after {
    background:
      linear-gradient(96deg, rgba(8,16,24,.90) 0%, rgba(8,16,24,.62) 38%, rgba(8,16,24,.10) 68%),
      linear-gradient(180deg, rgba(8,16,24,.34) 0%, transparent 28%, rgba(8,16,24,.72) 100%);
  }
}

/* ------------------------------------------------------------------ hero -- */

.hero { position: relative; }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  gap: var(--sp-5);
  padding-block: var(--sp-7) var(--sp-6);
  min-height: 88vh;
}

/* The measure is capped on the text only. Capping the whole column forced the
   two CTAs to stack on desktop, which §3.2 asks for on mobile only. */
.hero__copy { display: grid; gap: var(--sp-3); justify-items: start; }
.hero__copy > h1, .hero__copy > .lede { max-width: 26ch; }

.hero h1 {
  font-size: var(--step-4);
  letter-spacing: -.032em;
  line-height: .98;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-start: var(--sp-2);
}

/* V3 §3.2: the badge is a restrained corner watermark. Explicitly NOT a second
   giant logo beside the headline, which is what the previous version had. */
.hero__watermark {
  position: absolute;
  z-index: 2;
  inset-inline-end: var(--sp-4);
  inset-block-end: var(--sp-4);
  width: 74px;
  height: 74px;
  opacity: .5;
  pointer-events: none;
}

@media (min-width: 62rem) {
  .hero__inner { min-height: 80vh; }
  .hero__copy > h1 { max-width: 19ch; }
  .hero__copy > .lede { max-width: 42ch; }
  .hero__copy > .kicker { max-width: none; }
  .hero__watermark {
    inset-inline-end: var(--sp-6);
    inset-block-end: var(--sp-6);
    width: 128px;
    height: 128px;
  }
}

/* ------------------------------------------------------- the section rail --
 * The row of entry points under the hero. Replaces the mockup's icon strip,
 * using the blueprint's locked sections rather than invented categories. */

.rail {
  position: relative;
  z-index: 2;
  border-block-start: 1px solid var(--line);
  background: color-mix(in srgb, var(--navy-800) 82%, transparent);
  backdrop-filter: blur(10px);
}

/* Dividers come from a 1px gap over a line-coloured background rather than
   per-item borders. Border rules that assume a column count break the moment
   the grid reflows: at two columns, `li + li` puts a left border on the
   third item and leaves the first without one. */
.rail ul {
  list-style: none;
  margin: 0;
  padding-inline: 0;
  padding-block: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
}

.rail li { background: var(--navy-800); display: flex; }

.rail a {
  display: grid;
  gap: 2px;
  align-content: center;
  flex: 1;
  padding-block: var(--sp-3);
  padding-inline: var(--sp-3);
  transition: background-color .18s var(--ease);
}

.rail a:hover { background: var(--accent-08); }

.rail__label {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.rail__note { font-size: var(--step--1); color: var(--paper-45); letter-spacing: 0; text-transform: none; }

@media (min-width: 52rem) {
  .rail ul { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------ media cards --
 * V3 §3.4 and §3.5. Every Update and Project card carries an image or a
 * designed placeholder, and both occupy the same box so the composition does
 * not move when real media lands. */

.media {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--navy-700);
}

.media img, .media svg { width: 100%; height: 100%; display: block; object-fit: cover; }

.media--update, .media--campaign, .media--map { aspect-ratio: 16 / 9; }
.media--project { aspect-ratio: 4 / 3; }
.media--social  { aspect-ratio: 9 / 16; }

.media__credit {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding-inline: var(--sp-3);
  padding-block: var(--sp-1);
  font-size: 11px;
  color: var(--paper-70);
  background: linear-gradient(transparent, rgba(8,16,24,.85));
  text-align: end;
}

/* A quiet factual disclosure for the rare reviewed AI fallback. */
.media__ai-label {
  position: absolute;
  z-index: 4;
  inset-inline-end: .45rem;
  inset-block-start: .45rem;
  padding: .18rem .3rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(5, 17, 29, .48);
  color: rgba(255, 255, 255, .82);
  font-size: 7px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(2px);
}

.mcard {
  display: flex;
  flex-direction: column;
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 0;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}

.mcard:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-2px); }
.mcard__link { display: block; }
.mcard__link img, .mcard__link svg { transition: transform .4s var(--ease); }
.mcard:hover .mcard__link img { transform: scale(1.03); }

.mcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-inline: var(--sp-4);
  padding-block: var(--sp-4);
  flex: 1;
  min-width: 0;
}

.mcard__type {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
}

.mcard__title { font-size: var(--step-1); line-height: 1.16; }
.mcard__title a:hover { color: var(--accent); }
.mcard__sum { color: var(--paper-70); font-size: var(--step-0); line-height: 1.5; }
.mcard__where { color: var(--paper-45); font-size: var(--step--1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mcard__foot {
  margin-block-start: auto;
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--line);
  display: flex;
  gap: var(--sp-3);
  justify-content: space-between;
  align-items: center;
  font-size: var(--step--1);
  color: var(--paper-45);
  min-width: 0;
}

.mcard__date { flex: 0 0 auto; font-family: var(--font-mono); }
.mcard__rel { font-size: var(--step--1); color: var(--paper-45); }

.facts { display: grid; gap: var(--sp-2); margin: 0; grid-template-columns: 1fr 1fr; }
.fact dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-45); font-weight: 700; }
.fact dd { margin: 0; font-size: var(--step-0); color: var(--paper); }

/* -------------------------------------------------- social + campaign ---- */

.scard {
  display: grid;
  gap: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-800);
  max-width: 20rem;
}

.scard__art { border-radius: 0; }
.scard__topic { padding-inline: var(--sp-3); font-size: var(--step-0); font-weight: 600; line-height: 1.3; }
.scard__slots { display: flex; gap: var(--sp-4); padding-inline: var(--sp-3); padding-block-end: var(--sp-4); }
.slot { display: grid; gap: 2px; }
.slot b { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-45); }
.slot i { font-style: normal; color: var(--paper-70); font-size: var(--step--1); }

.ccard {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-800);
  color: var(--on-dark);
}

@media (min-width: 78rem) { .ccard { grid-template-columns: 1fr 1.3fr; } }

.ccard__body { display: grid; gap: var(--sp-3); align-content: start; padding-inline: var(--sp-4); padding-block: var(--sp-4); }
/* auto-fit rather than a fixed count: this card also appears inside a
   half-width column, where a media query on the viewport does not know the
   container is narrow and the figures collided. */
.ccard__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--sp-4) var(--sp-4); }
.ccard__stat b { display: block; font-family: var(--font-display); font-size: var(--step-1); font-variant-numeric: tabular-nums; color: var(--on-dark); }
.ccard__stat span { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-70); line-height: 1.3; }
.ccard__stat b { white-space: nowrap; }
.ccard__slot { font-size: var(--step--1); color: var(--on-dark-70); }

/* --------------------------------------------- milestone 1 approval grid -- */

.m1grid { display: grid; gap: var(--sp-5); }
@media (min-width: 62rem) { .m1grid { grid-template-columns: repeat(2, 1fr); } }

.m1slot { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
.m1slot__head h3 { font-size: var(--step-1); }
.m1slot__head p { font-size: var(--step--1); color: var(--paper-45); margin-block-start: var(--sp-1); }

/* A nav label whose page is not built yet. Shown, per §3.1, but not a link,
   per the quality rule against linking to pages that do not exist. */
.site-nav__soon,
.mobile-nav .site-nav__soon {
  color: var(--paper-45);
  cursor: default;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.mobile-nav .site-nav__soon {
  display: block;
  padding-block: var(--sp-3);
  border-block-end: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: .01em;
  text-transform: none;
}

/* ---------------------------------------------------------- section bands --
 * A long page of identical dark cards on an identical dark ground reads as one
 * undifferentiated block. Alternating the ground under a section is what gives
 * the page rhythm and lets the eye find where one idea ends. */

.band { border-block-start: 1px solid var(--line); }
.band--raised { background: var(--navy-800); }
.band--deep   { background: #070E15; }

/* The heading block. Small label, large heading, optional action on the right.
   One device, used at every section, so the page reads as one system. */
.head {
  display: grid;
  gap: var(--sp-3);
  margin-block-end: var(--sp-5);
}

.head__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
}

.head h2 { font-size: var(--step-3); letter-spacing: -.026em; }
.head p.lede { max-width: 58ch; }

/* ------------------------------------------------------------- stat band -- *
 * Hairline-divided figures on a single ground, rather than four filled boxes.
 * Tabular numerals so the digits sit on a common rhythm. */

.statband {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 52rem) { .statband { grid-template-columns: repeat(4, 1fr); } }

.statband__cell {
  padding-inline: var(--sp-4);
  padding-block: var(--sp-5);
  border-block-start: 1px solid var(--line);
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}

@media (min-width: 52rem) {
  .statband__cell { border-block-start: 0; border-inline-start: 1px solid var(--line); }
  .statband__cell:first-child { border-inline-start: 0; padding-inline-start: 0; }
}

.statband__n {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}

.statband__l {
  font-size: var(--step--1);
  color: var(--paper-45);
  letter-spacing: .04em;
  line-height: 1.4;
  max-width: 24ch;
}

/* ----------------------------------------------------------- lead story -- *
 * One item given real size, the rest as compact rows. Six identical cards give
 * the reader no way to tell what matters; a lead does. */

.lead {
  display: grid;
  gap: var(--sp-4);
  padding-block-end: var(--sp-5);
  border-block-end: 1px solid var(--line);
}

@media (min-width: 62rem) {
  .lead { grid-template-columns: 1.05fr .95fr; gap: var(--sp-6); align-items: start; }
}

.lead__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-block-end: var(--sp-3); }
.lead h3 { font-size: var(--step-2); line-height: 1.08; }
.lead h3 a:hover { color: var(--accent); }
.lead__sum { color: var(--paper-70); font-size: var(--step-1); line-height: 1.5; margin-block-start: var(--sp-3); }

.lead__facts { display: grid; gap: 0; align-self: start; }
.lead__fact {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-block-start: 1px solid var(--line);
  font-size: var(--step--1);
}
.lead__fact:first-child { border-block-start: 0; }
.lead__fact dt { color: var(--paper-45); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.lead__fact dd { margin: 0; color: var(--paper); }

/* ------------------------------------------------------------- row list -- */

.rowlist { display: grid; }

.rowlist__row {
  display: grid;
  gap: var(--sp-1) var(--sp-4);
  grid-template-columns: 1fr;
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--line);
  transition: background-color .16s var(--ease);
  min-width: 0;
}

.rowlist__row:hover { background: var(--accent-08); }
.rowlist__row:hover .rowlist__title { color: var(--accent); }

.rowlist__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); line-height: 1.2; }
.rowlist__side { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.rowlist__where { font-size: var(--step--1); color: var(--paper-45); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 52rem) {
  .rowlist__row { grid-template-columns: minmax(0, 1fr) 20rem; align-items: baseline; }
  .rowlist__side { justify-content: flex-end; }
}

/* --------------------------------------------------------- two-up paths -- */

.paths { display: grid; gap: var(--sp-4); }
@media (min-width: 52rem) { .paths { grid-template-columns: 1fr 1fr; } }

.path {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding-inline: var(--sp-5);
  padding-block: var(--sp-5);
  background: var(--navy-800);
}

.path h3 { font-size: var(--step-2); }
.path p { color: var(--paper-70); }
.path ul { margin: 0; padding-inline-start: 1.1em; color: var(--paper-45); font-size: var(--step--1); display: grid; gap: var(--sp-1); }
.path .btn { justify-self: start; margin-block-start: var(--sp-2); }

/* -------------------------------------------------------------- signup --- */

.footer-signup {
  display: grid;
  gap: var(--sp-4);
  padding-block-end: var(--sp-5);
  margin-block-end: var(--sp-5);
  border-block-end: 1px solid var(--line);
}

@media (min-width: 52rem) {
  .footer-signup { grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-6); }
}

.footer-signup__line { color: var(--paper-70); max-width: 46ch; margin-block-start: var(--sp-2); }

.signup { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

.signup input {
  flex: 1 1 15rem;
  min-width: 0;
  background: var(--navy-900);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--paper);
  font: inherit;
  font-size: var(--step--1);
  padding-inline: var(--sp-4);
  padding-block: .72em;
}

.signup input::placeholder { color: var(--paper-45); }
.signup input:focus-visible { border-color: var(--accent); }

.signup__note { flex: 1 0 100%; font-size: var(--step--1); color: var(--paper-45); min-height: 1.2em; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.footer-col__h {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--paper-45);
  margin-block: var(--sp-2) var(--sp-1);
}

/* ----------------------------------------------------------- proof strip -- */

.proof {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.proof__cell {
  background: var(--navy-800);
  padding-inline: var(--sp-4);
  padding-block: var(--sp-4);
  display: grid;
  gap: var(--sp-1);
}

.proof__num {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -.03em;
}

.proof__cap {
  font-size: var(--step--1);
  color: var(--paper-70);
  line-height: 1.35;
}

.proof__note {
  margin-block-start: var(--sp-3);
  font-size: var(--step--1);
  color: var(--paper-45);
  max-width: 74ch;
}

@media (min-width: 52rem) {
  .proof { grid-template-columns: repeat(4, 1fr); }
}

/* ----------------------------------------------------------------- chips -- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding-inline: .75em;
  padding-block: .28em;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--paper-70);
  text-transform: uppercase;
  white-space: nowrap;
}

.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* The verification vocabulary is the newsletter's, unchanged. Matched by prefix
   rather than in full: "verified · firsthand" carries a middot, and a selector
   holding a non-ASCII glyph breaks silently wherever the encoding is not
   declared. The prefixes are unambiguous across the four labels. */
.chip[data-verify^="official"] { color: var(--accent); border-color: var(--accent-15); }
.chip[data-verify^="verified"] { color: var(--accent); border-color: var(--accent-15); }
.chip[data-verify^="single"]   { color: var(--paper-70); }
.chip[data-verify^="developing"] { color: var(--paper-45); }

.chip--plain { text-transform: none; letter-spacing: .01em; }
.chip--plain::before { display: none; }

/* ----------------------------------------------------------------- cards -- */

.card-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 46rem) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  /* Grid items default to min-width:auto, so a single non-wrapping string
     inside — a long location like "Beltline TAD subareas 1, 2, 3, 8, 9, 10" —
     sets the whole column's minimum width and pushes the page into a sideways
     scroll. The chain of min-width:0 down to the ellipsis is what prevents it. */
  min-width: 0;
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding-inline: var(--sp-4);
  padding-block: var(--sp-4);
  transition: border-color .2s var(--ease), transform .2s var(--ease),
              background-color .2s var(--ease);
}

.card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--navy-700);
  transform: translateY(-2px);
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-block-end: var(--sp-1);
}

.card__date {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--paper-45);
  letter-spacing: .02em;
}

.card h3 {
  font-size: var(--step-1);
  line-height: 1.16;
  letter-spacing: -.012em;
}

.card__summary {
  color: var(--paper-70);
  font-size: var(--step-0);
  line-height: 1.55;
}

.card__foot {
  margin-block-start: auto;
  padding-block-start: var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  border-block-start: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--paper-45);
  min-width: 0;
}

.card__where { display: block; min-width: 0; flex: 1 1 auto; }
.card__where span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__date { flex: 0 0 auto; }

.card__go { color: var(--accent); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* A card that leads with the update type rather than a photo. Keeps the grid
   even while only some records carry a cleared image. */
.card__type {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ------------------------------------------------------------------ team -- */

.team {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 46rem) { .team { grid-template-columns: repeat(3, 1fr); } }

.team__member {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding-inline: var(--sp-4);
  padding-block: var(--sp-4);
  min-width: 0;
}

.team__member h3 { font-size: var(--step-1); margin-block-end: 2px; }
.team__member .kicker { margin-block-end: var(--sp-2); }

.team__photo { width: 62px; height: 62px; flex: 0 0 auto; border-radius: var(--radius-sm); }

/* --------------------------------------------------------------- article -- */

.article { padding-block: var(--sp-6); }

/* One centred reading column. 66ch is the measure; the head sits on the same
   axis so the page does not read as content pinned to a wall of empty space. */
.article__head {
  display: grid;
  gap: var(--sp-3);
  max-width: 66ch;
  margin-inline: auto;
}

.article__head h1 {
  font-size: var(--step-3);
  line-height: 1.05;
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.article__byline {
  font-size: var(--step--1);
  color: var(--paper-45);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--line);
}

.article__body {
  max-width: 66ch;
  margin-inline: auto;
  margin-block-start: var(--sp-5);
  display: grid;
  gap: var(--sp-5);
}

.article__body p { font-size: var(--step-1); line-height: 1.65; color: var(--paper); }

.article__continuity {
  border-inline-start: 3px solid var(--accent);
  padding: .85rem 1rem;
  background: var(--accent-08);
}

.article__continuity .kicker { margin-block-end: .35rem; color: var(--accent); }
.article__body .article__continuity p {
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--paper-70);
}
.article__continuity a {
  color: var(--paper);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

/* A social video is owned media inside the sourced story, not a platform
   embed. The player stays inside the reading column and the platform row is a
   quiet route back to the original placements. */
.story-video {
  display: grid;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-block: 1px solid var(--line);
}
.story-video__head { display: grid; gap: .35rem; }
.story-video__head h2 { font-size: var(--step-2); }
.story-video video {
  width: 100%;
  max-height: 44rem;
  display: block;
  background: var(--navy-800);
  border-radius: var(--radius-sm);
}
.story-video__platforms {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}
.story-video__platform {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--paper-70);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: .03em;
  text-decoration: none;
}
.story-video__platform:hover { color: var(--accent); }
.story-video__platform svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}
.story-video__transcript summary {
  cursor: pointer;
  color: var(--paper-70);
  font-size: var(--step--1);
  font-weight: 700;
}
.article__body .story-video__transcript p {
  margin-block-start: var(--sp-3);
  color: var(--paper-70);
  font-size: var(--step-0);
  line-height: 1.65;
}

.pullout {
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: var(--sp-4);
  display: grid;
  gap: var(--sp-2);
}

.pullout .kicker { color: var(--accent); }
.pullout p { color: var(--paper-70); font-size: var(--step-1); line-height: 1.55; }

.pullout__link {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Written as .pullout p.x rather than .x so it beats `.pullout p` on
   specificity without reaching for !important. */
.pullout p.pullout__note { font-size: var(--step--1); color: var(--paper-45); }

.details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.details__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-1);
  padding-inline: var(--sp-4);
  padding-block: var(--sp-3);
  border-block-end: 1px solid var(--line);
}

.details__row:last-child { border-block-end: 0; }

.details__key {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--paper-45);
}

.details__val { color: var(--paper); }

.details__val a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 46rem) {
  .details__row { grid-template-columns: 190px 1fr; gap: var(--sp-4); align-items: baseline; }
}

/* Sources carry the whole trust proposition, so they get the weight of a real
   section rather than a footnote. */
.sources {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-block-start: var(--sp-3);
}

.sources > * {
  display: flex;
  align-items: center;
  gap: .6em;
  padding-inline: var(--sp-4);
  padding-block: var(--sp-3);
  border-block-end: 1px solid var(--line);
  color: var(--paper);
  font-size: var(--step-0);
}

.sources > *:last-child { border-block-end: 0; }
.sources a:hover { color: var(--accent); background: var(--accent-08); }
.sources span:not(:only-child) { color: var(--paper-45); }

/* ---------------------------------------------------------------- footer -- */

.site-footer {
  margin-block-start: var(--sp-6);
  color: var(--paper);
  border-block-start: 1px solid var(--line);
  background: var(--navy-800);
  padding-block: var(--sp-6) var(--sp-4);
}
.site-footer .brandmark__name { color: var(--paper); }

.footer-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}

/* Brand block plus four link columns. It was cut for three, so when blueprint
   §12's "Legal and trust" group was finally built it wrapped underneath the
   brandmark and read as part of it. */
@media (min-width: 52rem) {
  .footer-grid { grid-template-columns: 1.3fr repeat(2, 1fr); gap: var(--sp-5) var(--sp-4); }
}

@media (min-width: 68rem) {
  .footer-grid { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); }
}

.footer-col h2, .footer-col h3 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--paper-45);
  margin-block-end: var(--sp-3);
}

.footer-col ul { list-style: none; margin: 0; padding-inline: 0; display: grid; gap: var(--sp-2); }
.footer-col a { color: var(--paper-70); font-size: var(--step-0); }
.footer-col a:hover { color: var(--accent); }

.footer-brand { display: grid; gap: var(--sp-3); }
.footer-brand p { color: var(--paper-45); font-size: var(--step--1); max-width: 38ch; }

.socials { display: flex; gap: var(--sp-2); }

.socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--paper-70);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}

.socials a:hover { color: var(--accent); border-color: var(--accent); }
.socials svg { width: 17px; height: 17px; fill: currentColor; }

.footer-base {
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
  align-items: center;
  font-size: var(--step--1);
  color: var(--paper-45);
}

.footer-base a { color: var(--paper-70); }
.footer-base a:hover { color: var(--accent); }

/* The city switcher. Deliberately quiet, per the blueprint: the parent brand is
   referenced, not imposed on the city experience. */
.switcher { display: inline-flex; gap: var(--sp-3); align-items: center; }

/* ----------------------------------------------------------- desktop nav -- */

@media (min-width: 62rem) {
  .site-nav { display: flex; gap: var(--sp-5); align-items: center; }
  .nav-toggle, .mobile-nav { display: none !important; }
  .brandmark img { width: 42px; height: 42px; }
  .section { padding-block: var(--sp-7); }
}

/* ======================================================== TUMG PARENT PAGE ==
 * Rebuilt against the owner's reference render. Every value below was measured
 * off that image rather than chosen: page #081522, bands and header #05111D,
 * eyebrow gold #E5C07E, body grey #9EA7B0.
 *
 * Scoped under .tumg throughout, because the brief is explicit that the Atlanta
 * and Savannah homepages must not change. Nothing here leaks out of this page.
 *
 * The two brand accents keep the values sampled from the owner's real logo
 * files. The render's coral and gold are a shade duller, but a generated image
 * is not a better source for a brand colour than the logo it depicts.
 */

.tumg {
  --tp-bg:      #081522;
  --tp-band:    #05111D;
  --tp-line:    #17242F;
  --tp-gold:    #E5C07E;
  /* Lifted from #9EA7B0 on 2026-08-22. The hero paragraph sits ON the city
     drawing rather than on flat colour, so its effective contrast is lower than
     any measurement against the background suggests, and the owner reported it
     blending into the artwork. This is not a new value invented for the fix --
     it is the one the About page had already been overriding to, so the two
     pages now agree instead of quietly disagreeing. 7.5:1 to 10.1:1 against the
     page ground; a lift, not a glare. */
  --tp-body:    #B9C2CB;
  --tp-atl:     #FF6260;
  --tp-sav:     #FFCD81;
  background: var(--tp-bg);
}

.tumg .twrap {
  width: 100%;
  max-width: 1460px;
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 3.74vw, 3.4rem);
}

.tumg .eyebrow {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--tp-gold);
  margin: 0;
}

.tumg .disp {
  font-family: var(--font-serif);
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1.06;
  letter-spacing: -.012em;
  font-size: clamp(2.4rem, 1.05rem + 4.35vw, 4.4rem);
  margin-block-start: .55rem;
}

.tumg .disp--2 { font-size: clamp(1.9rem, 1.1rem + 2.3vw, 2.85rem); }

.tumg .tbody {
  color: var(--tp-body);
  font-size: clamp(.92rem, .88rem + .16vw, 1.02rem);
  line-height: 1.72;
  max-width: 46ch;
}

/* The reference shows all three nav items at the same weight. Dimming the two
   unbuilt destinations made the header look broken rather than considered; they
   are still not links, which is what the no-dead-links rule actually requires. */
.tumg .soon { color: #C3CBD3; cursor: default; }
.tumg .tfoot__nav .soon { color: #C3CBD3; }

/* ------------------------------------------------------------------ pill -- */

.tumg .pill {
  display: inline-flex;
  align-items: center;
  gap: .62em;
  border-radius: 999px;
  padding-inline: 1.55em;
  padding-block: .82em;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .18s var(--ease), filter .18s var(--ease);
}

.tumg .pill--light { background: #F2F3F5; color: #0B1620; }
.tumg .pill:hover { transform: translateY(-1px); filter: brightness(1.06); }
.tumg .ar { transition: transform .18s var(--ease); }
.tumg .pill:hover .ar { transform: translateX(3px); }

/* ---------------------------------------------------------------- header -- */

.tumg .thead {
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--tp-band) 92%, transparent);
  backdrop-filter: blur(12px);
}

.tumg .thead__bar {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.75rem);
  min-height: 74px;
}

.tumg .thead__logo { margin-inline-end: auto; }
.tumg .thead__logo img { width: auto; height: 26px; }

.tumg .thead__nav {
  display: none;
  gap: clamp(1.25rem, 2.6vw, 2.6rem);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #C3CBD3;
}

.tumg .thead__nav a:hover { color: #FFFFFF; }

@media (min-width: 56rem) { .tumg .thead__nav { display: flex; } }

/* ------------------------------------------------------------------ hero -- */

.tumg .thero { position: relative; background: var(--tp-bg); overflow: clip;
               border-block-start: 1px solid rgba(255,255,255,.085); }

.tumg .thero__media {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 100%;
  z-index: 0;
}

/* One stage holds the photograph and its pulse overlay; the drift animates
   the stage, so both layers move as a single object and the pulses cannot
   shear off the artwork's lines while it breathes. The stage is a size
   container so the overlay can compute its cover size below. */
.tumg .thero__stage { position: absolute; inset: 0; overflow: clip; container-type: size; }

.tumg .thero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* The pulse layer re-creates object-fit:cover for the photograph's frame by
   hand, in container units: as wide/tall as the box demands on the binding
   axis, the other axis from the image's 2752:1536 ratio. The anchor pair
   (left P% + translate -P%) is exactly the object-position offset formula,
   and each breakpoint below mirrors the photograph's object-position. */
.tumg .npulse {
  position: absolute;
  inline-size: max(100cqw, 179.1667cqh);
  block-size: max(100cqh, 55.814cqw);
  inset-inline-start: 70%;
  inset-block-start: 40%;
  translate: -70% -40%;
  pointer-events: none;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.40) 24%, #000 50%);
}

.tumg .npulse__svg { display: block; inline-size: 100%; block-size: 100%; }

/* The pulses: one dash of light per route, sliding from the first node to the
   last along lines the artwork itself draws. The dash pattern's period is
   longer than the path, so the dash enters and leaves by geometry -- at
   offset 28 it has not arrived yet, at -1000 it has fully left -- and the
   rest of the cycle is dark. Durations and delays are per-path inline styles,
   mutually irregular, so only one or two pulses are ever travelling at once. */
.tumg .npulse__p,
.tumg .npulse__ph {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 28 1972;
  stroke-dashoffset: 28;
  animation-name: tumg-pulse;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.tumg .npulse__p { stroke: #FFF7E6; stroke-width: 3.2; opacity: .9; }
.tumg .npulse__ph { stroke: #FFEFC9; stroke-width: 9; opacity: .42; }

@keyframes tumg-pulse {
  0%   { stroke-dashoffset: 28px; }
  22%  { stroke-dashoffset: -1000px; }
  100% { stroke-dashoffset: -1000px; }
}

/* a browser without container units cannot place the layer correctly, and a
   misregistered pulse is worse than none */
@supports not (width: 1cqw) {
  .tumg .npulse { display: none; }
}

@media (max-width: 40rem) {
  .tumg .npulse { inset-inline-start: 72%; inset-block-start: 34%; translate: -72% -34%; }
}

@media (min-width: 56rem) {
  .tumg .npulse { inset-inline-start: 50%; inset-block-start: 30%; translate: -50% -30%; }
}

/* The owner's own night photograph, with the network overlay already in it.
   No grade: an earlier build was faking night from a daylight aerial, and the
   filter that did it would now crush a picture that is already correct. */
.tumg .thero__media {
  background-size: cover;
  background-position: center;
}

.tumg .thero__media img {
  object-fit: cover;
  /* phones crop this image to a narrow slice; centred at 50% that slice IS the
     unlit tower, which read as a dark stripe through the headline. 70% lands
     on the lit cluster. Desktop restores the approved 50% crop below. */
  object-position: 70% 40%;
}

/* Phones. Two things happen at once here: the hero grows to the taller mobile
   frame the V3 spec asked for, and that is also what makes the crop steerable —
   at a short height the box is wider-aspect than the photo, the full image
   width shows, and object-position has nothing to move, which is how the unlit
   tower kept landing mid-frame as a dark stripe. Taller box -> cover overflows
   horizontally -> the crop pins to the lit cluster, dark mass under the text. */
@media (max-width: 40rem) {
  .tumg .thero__in { min-block-size: 64vh; align-content: center; }
  .tumg .thero__media img { object-position: 72% 34%; }
  /* the copy spans nearly the full phone width, so its right end crosses the
     lit tower; the veil holds a little longer before releasing */
  .tumg .thero .thero__media::after {
    background:
      linear-gradient(180deg, var(--tp-bg) 0%, rgba(8,21,34,0) 15%),
      linear-gradient(0deg, var(--tp-bg) 0%, rgba(8,21,34,0) 16%),
      linear-gradient(96deg, rgba(8,21,34,.90) 0%, rgba(8,21,34,.60) 42%, rgba(8,21,34,.22) 66%, transparent 82%);
  }
}

.tumg .thero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* top and bottom dissolve into the page background so the photograph reads
     as part of the field, not a rectangle sitting on it */
  background:
    linear-gradient(180deg, var(--tp-bg) 0%, rgba(8,21,34,0) 15%),
    linear-gradient(0deg, var(--tp-bg) 0%, rgba(8,21,34,0) 16%),
    linear-gradient(96deg, rgba(8,21,34,.88) 0%, rgba(8,21,34,.52) 30%, rgba(8,21,34,.10) 56%, transparent 72%);
}

@media (min-width: 56rem) {
  /* the new artwork composes its own dark left field, so it runs full-bleed
     and the image, not a panel edge, carries the transition to the copy */
  .tumg .thero__media img { object-position: 50% 30%; }
  .tumg .thero__media::after {
    background:
      linear-gradient(180deg, var(--tp-bg) 0%, rgba(8,21,34,0) 13%),
      linear-gradient(0deg, var(--tp-bg) 0%, rgba(8,21,34,0) 15%),
      linear-gradient(90deg, rgba(8,21,34,.70) 0%, rgba(8,21,34,.26) 28%, transparent 50%);
  }
}

.tumg .thero__in {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: .85rem;
  padding-block: clamp(2.2rem, 3vw, 2.6rem);
  max-width: 100%;
}

.tumg .thero__in .tbody { max-width: 40ch; }
.tumg .thero__in .pill { margin-block-start: 1.1rem; }

@media (min-width: 56rem) {
  .tumg .thero__in { min-block-size: 26.5rem; align-content: center; }
  .tumg .thero__in > * { max-width: 40rem; }
  .tumg .thero__in > .tbody { max-width: 27rem; }
}

/* ----------------------------------------------------------------- bands -- */

/* Measured off the reference: the bands carry ~33px above and ~40px below the
   content, not the 74px a generic clamp produced. That single value was most of
   why the first build came out 1.37x the reference's length. */
/* The reference carries a hairline rule at every band edge. Sampling its left
   gutter at each boundary shows one lighter row: rgb(26,37,47) on the band. */
.tumg .tband { background: var(--tp-band); padding-block: 2.1rem 1.15rem;
               border-block-start: 1px solid rgba(255,255,255,.085); }
.tumg .tband--deep { background: var(--tp-bg); }

.tumg .tsplit { display: grid; gap: clamp(2.25rem, 4vw, 3.75rem); align-items: center; }

@media (min-width: 60rem) {
  .tumg .tsplit { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
  .tumg .tsplit--next { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); }
  .tumg .tsplit--next .disp--2 { max-width: none; white-space: nowrap; }
}

.tumg .tsplit__copy > .tbody { margin-block-start: 1.1rem; }

/* --------------------------------------------------------------- diagram -- *
 * Rebuilt against the owner's HD reference of this element. Four things it
 * showed that the first version had wrong:
 *
 *   1. the wires are ORTHOGONAL with tight rounded corners, not smooth S-curves
 *   2. the connector dots sit outside the card's left edge, with a soft glow
 *   3. the panel's label and its four items are centred AS A GROUP inside the
 *      panel, not left-aligned against a wide empty right side
 *   4. the corners are crisper than mine were. Radius drops from 14px to 10px
 *      across the whole page, which is what the owner meant by the reference
 *      feeling sharper and cleaner.
 */

.tumg .diagram {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
}

@media (min-width: 60rem) {
  /* The connector column's floor must cover the elbow's fixed margins
     (26px stub side + 22px dot side) plus a visible horizontal run. At the
     old 2.5rem minimum the elbow's box went negative on narrow desktops and
     the dots detached from the lines. 4.5rem keeps a 24px run at worst. */
  .tumg .diagram { grid-template-columns: 12.1rem minmax(4.5rem, 1fr) minmax(0, 23.1rem); }
}

.tumg .diagram__panel {
  border: 1px solid var(--tp-line);
  border-radius: 8px;
  padding-inline: 1.15rem;
  padding-block: 1.5rem;
  background: rgba(255,255,255,.012);
  min-block-size: 16.4rem;
  display: grid;
  align-content: center;
  justify-items: center;
}

.tumg .diagram__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #E6E9ED;
  margin-block-end: 1.15rem;
  text-align: center;
}

/* The list is centred as a block, and its items stay left-aligned inside it, so
   the icons form one column instead of ragging. */
.tumg .diagram__panel ul {
  list-style: none;
  margin: 0;
  padding-inline: 0;
  display: grid;
  gap: 1rem;
  justify-content: center;
}

.tumg .diagram__panel li {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .86rem;
  color: #D8DDE3;
}

.tumg .diagram__panel svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  stroke: var(--tp-gold);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Below the split, the panel is full width and four stacked rows leave a wide
   empty column beside them. One row of four removes that dead space. */
@media (max-width: 59.99rem) {
  .tumg .diagram__panel { min-block-size: 0; padding-block: 1.25rem; }
  .tumg .diagram__panel ul {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: clamp(.9rem, 3.4vw, 2.2rem);
    justify-content: center;
  }
  .tumg .diagram__panel li { font-size: .8rem; gap: .45rem; }
  .tumg .diagram__panel svg { width: 17px; height: 17px; }
}

@media (max-width: 30rem) {
  .tumg .diagram__panel ul { grid-auto-flow: row; grid-auto-columns: auto;
                             grid-template-columns: repeat(2, max-content); gap: .85rem 1.6rem; }
}

/* --------------------------------------------------------- the connectors --
 * Drawn with CSS borders, not stretched SVG. The old SVGs scaled non-uniformly
 * with the viewport, so their endpoints drifted off the dots and the lines
 * visibly broke at in-between widths. A border-drawn elbow cannot detach: the
 * vertical stroke, the horizontal stroke and the dot all share one geometry.
 */

/* Desktop: panel -> stub -> elbow up/down -> long run into a dot by each card. */
.tumg .wires { display: none; }

@media (min-width: 60rem) {
  .tumg .wires { display: block; position: relative; align-self: stretch; }
  .tumg .diagram__cards { align-self: stretch; grid-template-rows: 1fr 1fr; }
}

.tumg .wires__stub {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(50% - 1px);
  inline-size: 26px;
  block-size: 2px;
  background: linear-gradient(180deg, #FF6260 50%, #FFCD81 50%);
}

.tumg .wires__arm {
  position: absolute;
  inset-inline-start: 26px;
  inset-inline-end: 22px;
}

/* The cards column stretches to the row and splits it 1fr/1fr, so each card's
   centre sits at exactly 25%/75% -/+ gap/4 of the shared height. The strokes
   and dots below use those same numbers: alignment holds by construction, and
   it is identical for both cities. gap 1.25rem -> gap/4 = 5px. */
.tumg .wires__arm--a {
  inset-block-start: calc(25% - 6px);
  inset-block-end: calc(50% - 1px);
  border-block-start: 2px solid #FF6260;
  border-inline-start: 2px solid #FF6260;
  border-start-start-radius: 10px;
}

.tumg .wires__arm--s {
  inset-block-start: calc(50% - 1px);
  inset-block-end: calc(25% - 6px);
  border-block-end: 2px solid #FFCD81;
  border-inline-start: 2px solid #FFCD81;
  border-end-start-radius: 10px;
}

.tumg .wires__dot {
  position: absolute;
  inset-inline-end: 22px;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  translate: 50% -50%;
}

.tumg .wires__dot--a {
  inset-block-start: calc(25% - 5px);
  background: #FF6260;
  box-shadow: 0 0 0 5px rgba(255,98,96,.16);
}

.tumg .wires__dot--s {
  inset-block-start: calc(75% + 5px);
  background: #FFCD81;
  box-shadow: 0 0 0 5px rgba(255,205,129,.16);
}

/* Stacked: trunk down from the panel, arms out and down to a dot on each card.
   --dg mirrors the card grid's gap, so the verticals land on the card centres
   at every width by construction. */
.tumg .fork { display: none; }

@media (max-width: 59.99rem) {
  .tumg .fork { display: block; position: relative; height: 78px; --dg: 1rem; }
}

.tumg .fork::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(50% - 1px);
  inset-block-start: 0;
  block-size: 24px;
  inline-size: 2px;
  background: linear-gradient(90deg, #FF6260 50%, #FFCD81 50%);
}

.tumg .fork__arm {
  position: absolute;
  inset-block-start: 22px;
  inset-block-end: 4px;
}

/* Strokes are centred ON the card-centre lines (box edges sit 1px outside),
   and each dot is centred on its stroke, so line, dot and card agree exactly
   and the two sides mirror. */
.tumg .fork__arm--a {
  inset-inline-start: calc((100% - var(--dg)) / 4 - 1px);
  inset-inline-end: calc(50% - 1px);
  border-block-start: 2px solid #FF6260;
  border-inline-start: 2px solid #FF6260;
  border-start-start-radius: 10px;
}

.tumg .fork__arm--s {
  inset-inline-start: calc(50% - 1px);
  inset-inline-end: calc((100% - var(--dg)) / 4 - 1px);
  border-block-start: 2px solid #FFCD81;
  border-inline-end: 2px solid #FFCD81;
  border-start-end-radius: 10px;
}

.tumg .fork__dot {
  position: absolute;
  inset-block-end: 4px;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  translate: -50% 50%;
}

.tumg .fork__dot--a {
  inset-inline-start: calc((100% - var(--dg)) / 4);
  background: #FF6260;
  box-shadow: 0 0 0 5px rgba(255,98,96,.16);
}

.tumg .fork__dot--s {
  inset-inline-start: calc(100% - (100% - var(--dg)) / 4);
  background: #FFCD81;
  box-shadow: 0 0 0 5px rgba(255,205,129,.16);
}

.tumg .diagram__cards { display: grid; gap: 1.25rem; }

@media (max-width: 59.99rem) {
  .tumg .diagram__cards { grid-template-columns: 1fr 1fr; gap: 1rem; }
}

.tumg .dcard {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--tp-line);
  border-radius: 8px;
  padding-inline: 1.25rem;
  padding-block: 1.1rem;
  background: rgba(255,255,255,.012);
  min-block-size: 7.25rem;
}

@media (max-width: 59.99rem) {
  .tumg .dcard { flex-direction: column; text-align: center; gap: .7rem;
                 padding-block: 1.25rem; min-block-size: 0; }
}

.tumg .dcard img { width: auto; height: 64px; flex: 0 0 auto; }

.tumg .dcard span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, .82rem + .58vw, 1.5rem);
  letter-spacing: .035em;
  text-transform: uppercase;
  line-height: 1.15;
  color: #FFFFFF;
}

/* ------------------------------------------------------------ city cards -- */

.tumg .cgrid { display: grid; gap: 1.15rem; margin-block-start: 1.05rem; }
@media (min-width: 62rem) { .tumg .cgrid { grid-template-columns: 1fr 1fr; } }

.tumg .tcity {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--tp-line);
  border-radius: 8px;
  min-block-size: 24.6rem;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}

.tumg .tcity:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 55%, var(--tp-line)); }

/* The whole card is one link, laid under the content. The social icons sit
   above it and stop the click, so a tap on Instagram never follows the card. */
.tumg .tcity__hit { position: absolute; inset: 0; z-index: 1; }

.tumg .tcity__bg { position: absolute; inset: 0; z-index: 0; }
/* Explicit focal points. Left to its own devices the Savannah crop landed on
   dark canopy and the fountain, which is the subject, fell out of frame. */
.tumg .tcity__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.88) saturate(1.05); }
.tumg .tcity.city-atlanta .tcity__bg img { object-position: 50% 30%;
  /* The reference card is a warm sunset. This source is a blue-sky midday
     aerial, and no filter turns one into the other: 40% sepia leaves it blue
     and 100% flattens the whole photograph to brown. Graded honestly instead,
     and the sunset shot the owner offered is what closes this gap. */
  filter: brightness(.90) saturate(1.12) contrast(1.06); }
.tumg .tcity.city-savannah .tcity__bg img { object-position: 50% 72%;
  filter: brightness(.94) saturate(1.1) contrast(1.04); }

.tumg .tcity__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,15,25,.10) 0%, rgba(6,15,25,.62) 44%, rgba(6,15,25,.90) 100%);
}

.tumg .tcity__in {
  position: relative;
  z-index: 2;
  display: grid;
  gap: .66rem;
  justify-items: start;
  padding-inline: clamp(1.05rem, 1.7vw, 1.32rem);
  padding-block: clamp(1.05rem, 1.7vw, 1.32rem);
  pointer-events: none;
}

.tumg .tcity__in a { pointer-events: auto; }

.tumg .tcity__top { display: flex; align-items: center; gap: .95rem; }
.tumg .tcity__badge { width: 100px; height: 100px; flex: 0 0 auto; }

/* One line beside the badge, as in the reference. Wrapping to two lines made
   the card top read as a stack rather than a lockup. */
.tumg .tcity__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, .75rem + 1.6vw, 2.25rem);
  line-height: 1;
  letter-spacing: -.012em;
  color: #FFFFFF;
  white-space: nowrap;
}

.tumg .tcity__desc { color: #B9C1C9; font-size: .93rem; line-height: 1.6; max-width: 34ch; }

.tumg .tcity__metrics { display: flex; gap: clamp(.9rem, 1.8vw, 1.6rem); margin-block-start: .3rem; width: 100%; }
.tumg .tcity__metrics .tcity__m { min-width: 0; flex: 0 1 auto; }

.tumg .tcity__metrics .tcity__m + .tcity__m { border-inline-start: 1px solid rgba(255,255,255,.20); padding-inline-start: clamp(.9rem, 1.8vw, 1.6rem); }

.tumg .tcity__m b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 1rem + 1vw, 1.72rem);
  letter-spacing: -.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.tumg .tcity__m span { display: block; margin-block-start: .34rem; font-size: 11px; line-height: 1.35; color: #A9B2BB; white-space: nowrap; }

/* Every icon identical in size, weight, spacing and colour. The brief is
   explicit that no platform may be emphasised over another. */
.tumg .socrow { display: flex; margin-block-start: .2rem; }

.tumg .socrow { gap: 1rem; }

.tumg .soc {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: #DFE4E9;
  transition: color .18s var(--ease), transform .18s var(--ease);
}

.tumg .soc:hover { color: #FFFFFF; transform: translateY(-1px); }
.tumg .soc svg { width: 18px; height: 18px; fill: currentColor; }

.tumg .tcity .pill { margin-block-start: .35rem; background: var(--accent); color: #10161C; }

/* -------------------------------------------------------- southeast map --- */

/* THE MAP'S MARKERS AND THE TIMELINE RULE MUST NEVER MEET.
   The map scales with the column's WIDTH while the rule sits a fixed distance
   above the section's bottom edge, so on a wide screen the map grew until
   Savannah's marker landed on the rule -- three pixels apart, measured. The
   section reserves enough height that the rule always clears the marker, and
   the map is capped so it cannot grow into it. */
.tumg .semap { position: relative; min-block-size: 15.5rem; }
.tumg #next { overflow: clip; }

.tumg .semap__svg {
  position: absolute;
  /* Was -4.2rem, which parked the map's Savannah marker straight under the
     timeline rule -- the dot and the dashed stretch collided. Higher, the
     whole state sits clear of the timeline. */
  inset-block-start: -6.6rem;
  inset-inline: 0;
  width: 90%;
  height: auto;
  max-height: 24rem;
  margin-inline: auto;
  pointer-events: none;
}

/* The rule is its own layer so the three dots land at 0, 52 and 100 percent,
   which is where the reference puts them. Drawn from the grid columns instead,
   they landed at 0, 33 and 67 and the line stopped well short of the edge. */
.tumg .tline { position: absolute; inset-inline: 0; inset-block-end: 0; }

.tumg .tline__rule { position: relative; height: 12px; }

.tumg .tline__seg { position: absolute; inset-block-start: 5px; height: 2px; }
.tumg .tline__seg--live {
  inset-inline-start: 0; width: 52%;
  background: linear-gradient(90deg, var(--tp-atl), var(--tp-sav));
}
.tumg .tline__seg--soon {
  inset-inline-start: 52%; inset-inline-end: 0; height: 0;
  border-block-start: 2px dashed rgba(255,255,255,.28);
}

.tumg .tline__dot {
  position: absolute; inset-block-start: 0;
  width: 12px; height: 12px; border-radius: 50%; translate: -50% 0;
}
.tumg .tline__dot--atl  { inset-inline-start: 0;    translate: 0 0;
  background: var(--tp-atl); box-shadow: 0 0 0 5px rgba(255,98,96,.16); }
.tumg .tline__dot--sav  { inset-inline-start: 52%;
  background: var(--tp-sav); box-shadow: 0 0 0 5px rgba(255,205,129,.16); }
.tumg .tline__dot--next { inset-inline-end: 0; inset-inline-start: auto; translate: 0 0;
  background: transparent; border: 2px solid rgba(255,255,255,.45); }

.tumg .tline__labels {
  list-style: none; margin: 0; padding-inline: 0;
  position: relative; block-size: 2.6rem;
}

.tumg .tline__i { position: absolute; inset-block-start: .55rem; }
.tumg .tline__i--atl  { inset-inline-start: 0; }
.tumg .tline__i--sav  { inset-inline-start: 52%; }
.tumg .tline__i--next { inset-inline-end: 0; text-align: end; }

.tumg .tline__i b {
  display: block;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #E6E9ED;
  white-space: nowrap;
}

.tumg .tline__i i { display: block; margin-block-start: .34rem; font-style: normal; font-size: .82rem; white-space: nowrap; }
.tumg .tline__i--atl i  { color: var(--tp-atl); }
.tumg .tline__i--sav i  { color: var(--tp-sav); }
.tumg .tline__i--next i { color: #8A939C; }

/* ---------------------------------------------------------------- footer -- */

.tumg .tfoot { background: var(--tp-band); padding-block: 1.28rem;
               border-block-start: 1px solid rgba(255,255,255,.085); }

.tumg .tfoot__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: space-between;
}

.tumg .tfoot__brand img { width: auto; height: 24px; }
.tumg .tfoot__brand p { margin-block-start: .55rem; font-size: 11.5px; color: #79838D; }

.tumg .tfoot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.1rem, 2.4vw, 2.4rem);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #C3CBD3;
}

.tumg .tfoot__nav a:hover { color: #FFFFFF; }

/* These read at 19px tall, which is a small thing to hit with a thumb. The
   padding grows the hit area and the matching negative margin means nothing
   moves: same rhythm, a target half again as tall. */
.tumg .tfoot__nav a {
  display: inline-block;
  padding-block: .4rem;
  margin-block: -.4rem;
}

/* ------------------------------------------------------ interaction layer --
 * The evidence from the research pass: a page feels premium at three to five
 * purposeful animations, and chaotic past that. These are the five: reveals on
 * scroll, the stat count-up, the wires drawing in, a slow drift on the hero
 * photograph, and the header gaining its edge on scroll. Every one is inert
 * under prefers-reduced-motion, and none is load-bearing: script stripped, the
 * page is complete and static.
 */

/* Gated, like the city reveal: hidden only once a script has confirmed it can
   un-hide it. Ungated, a page whose script is stripped, blocked or never run in
   a hidden document renders completely blank -- which it did, in the review
   bundle, until this was caught by test_site_css_contract. */
.js-anim .tumg .reveal,
.js-anim.tumg .reveal { opacity: 0; translate: 0 18px; }
.tumg .reveal.is-in {
  opacity: 1;
  translate: 0 0;
  transition: opacity .65s var(--ease), translate .65s var(--ease);
}
.tumg .cgrid .reveal.is-in:nth-child(2) { transition-delay: .1s; }

/* The connectors DRAW themselves once the connector region itself is half in
 * view (.is-live, set by the trigger observer): stub first, then each elbow
 * sweeps its vertical stroke and runs the horizontal one -- a two-phase
 * clip-path wipe over the same border geometry, so nothing about the proven
 * alignment changes -- and the dot pops when the line arrives.
 */
.tumg .wires > i, .tumg .fork::before, .tumg .fork > i { opacity: 0; }

@keyframes tumg-grow-x { from { opacity: 1; scale: 0 1; } to { opacity: 1; scale: 1 1; } }
@keyframes tumg-grow-y { from { opacity: 1; scale: 1 0; } to { opacity: 1; scale: 1 1; } }

.tumg .diagram.is-live .wires__stub {
  animation: tumg-grow-x .2s var(--ease) both;
  transform-origin: 0 50%;
}

/* arm--a: up the left edge from the stub, then right along the top */
@keyframes tumg-elbow-a {
  0%   { opacity: 1; clip-path: inset(100% calc(100% - 12px) 0 0); }
  38%  { opacity: 1; clip-path: inset(0 calc(100% - 12px) 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
/* arm--s: down the left edge from the stub, then right along the bottom */
@keyframes tumg-elbow-s {
  0%   { opacity: 1; clip-path: inset(0 calc(100% - 12px) 100% 0); }
  38%  { opacity: 1; clip-path: inset(0 calc(100% - 12px) 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
.tumg .diagram.is-live .wires__arm--a { animation: tumg-elbow-a .95s cubic-bezier(.3,.6,.2,1) .15s both; }
.tumg .diagram.is-live .wires__arm--s { animation: tumg-elbow-s .95s cubic-bezier(.3,.6,.2,1) .15s both; }

@keyframes tumg-dot-pop { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
.tumg .diagram.is-live .wires__dot { animation: tumg-dot-pop .4s var(--ease) 1s both; }

/* stacked fork: trunk drops, arms run outward then down, dots land */
.tumg .diagram.is-live .fork::before {
  animation: tumg-grow-y .2s var(--ease) both;
  transform-origin: 50% 0;
}
@keyframes tumg-fork-a {
  0%   { opacity: 1; clip-path: inset(0 0 calc(100% - 12px) 100%); }
  45%  { opacity: 1; clip-path: inset(0 0 calc(100% - 12px) 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes tumg-fork-s {
  0%   { opacity: 1; clip-path: inset(0 100% calc(100% - 12px) 0); }
  45%  { opacity: 1; clip-path: inset(0 0 calc(100% - 12px) 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
.tumg .diagram.is-live .fork__arm--a { animation: tumg-fork-a .85s cubic-bezier(.3,.6,.2,1) .15s both; }
.tumg .diagram.is-live .fork__arm--s { animation: tumg-fork-s .85s cubic-bezier(.3,.6,.2,1) .15s both; }
.tumg .diagram.is-live .fork__dot { animation: tumg-dot-pop .4s var(--ease) .9s both; }

/* The roadmap timeline draws the same way when IT reaches the viewport: the
 * lived segment sweeps Atlanta -> Savannah, the dashed future follows, and
 * each milestone dot and label arrives as the line passes it. */
.tumg .tline__seg, .tumg .tline__dot { opacity: 0; }
.tumg .tline__i { opacity: 0; translate: 0 8px; }

.tumg .tline.is-live .tline__seg--live {
  animation: tumg-grow-x .7s cubic-bezier(.3,.6,.2,1) .1s both;
  transform-origin: 0 50%;
}
.tumg .tline.is-live .tline__seg--soon {
  animation: tumg-grow-x .55s cubic-bezier(.3,.6,.2,1) .8s both;
  transform-origin: 0 50%;
}
.tumg .tline.is-live .tline__dot--atl  { animation: tumg-dot-pop .35s var(--ease) .1s both; }
.tumg .tline.is-live .tline__dot--sav  { animation: tumg-dot-pop .35s var(--ease) .75s both; }
.tumg .tline.is-live .tline__dot--next { animation: tumg-dot-pop .35s var(--ease) 1.3s both; }

@keyframes tumg-label-in {
  from { opacity: 0; translate: 0 8px; }
  to   { opacity: 1; translate: 0 0; }
}
.tumg .tline.is-live .tline__i--atl  { animation: tumg-label-in .45s var(--ease) .2s both; }
.tumg .tline.is-live .tline__i--sav  { animation: tumg-label-in .45s var(--ease) .85s both; }
.tumg .tline.is-live .tline__i--next { animation: tumg-label-in .45s var(--ease) 1.4s both; }

/* the hero photograph drifts, barely -- on the stage, so the pulse overlay
   drifts with it in perfect register */
@keyframes tumg-drift { from { transform: scale(1); } to { transform: scale(1.055); } }
.tumg .thero__stage {
  animation: tumg-drift 38s linear infinite alternate;
  transform-origin: 62% 30%;
}

.tumg .thead { transition: box-shadow .25s var(--ease), background-color .25s var(--ease); }
.tumg .thead.is-scrolled {
  background: rgba(4, 14, 24, .97);
  box-shadow: 0 1px 0 rgba(255,255,255,.10), 0 14px 34px rgba(0,0,0,.35);
}

/* film grain, static. Texture is what keeps a flat dark field from reading as
   cheap; the noise is an inline SVG so it costs no request. */
.tumg::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.tumg ::selection { background: #FF6260; color: #081522; }

@media (prefers-reduced-motion: reduce) {
  .tumg .reveal,
  .tumg .wires > i, .tumg .fork::before, .tumg .fork > i,
  .tumg .tline__seg, .tumg .tline__dot, .tumg .tline__i {
    opacity: 1 !important;
    animation: none !important;
    clip-path: none !important;
    scale: none !important;
  }
  /* only the elements whose translate is MOTION; the dots' translate is
     centring geometry and must survive */
  .tumg .reveal, .tumg .tline__i { translate: none !important; }
  .tumg .thero__stage { animation: none; }
  /* the pulse layer is nothing but motion, so the layer is removed wholesale */
  .tumg .npulse { display: none; }
}

/* (hero pulse overlay: see the .npulse rules beside the hero img block; the
   pulses themselves are SMIL inside the inline svg, which needs no CSS here
   and keeps animating in the script-stripped bundle) */

/* ------------------------------------------------------------- menu tab --- */

.tumg .menu { position: relative; }

/* The three-line icon, morphing to a close mark when open. */
/* Just the three lines, white, no box. The boxed version read as bulky. */
.tumg .menu-btn {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: opacity .18s var(--ease);
}

.tumg .menu-btn:hover { opacity: .75; }

/* The close mark must always outrank the panel it closes. */
.tumg .menu-btn { position: relative; z-index: 90; }

.tumg .menu-btn span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: #F2F3F5;
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}

.tumg .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tumg .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tumg .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.tumg .menu__panel {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 10px);
  min-inline-size: 14rem;
  background: #071320;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  padding-block: .5rem;
  z-index: 80;
}

@keyframes tumg-menu-in { from { opacity: 0; translate: 0 -6px; } }
.tumg .menu__panel:not([hidden]) { animation: tumg-menu-in .16s var(--ease); }
.tumg .menu__sub:not([hidden])   { animation: tumg-menu-in .16s var(--ease); }

.tumg .menu__row { display: flex; align-items: center; }
.tumg .menu__row .menu__item { flex: 1; }

/* The chevron that extends Cities into the two city sites. */
.tumg .menu__more {
  border: 0;
  background: transparent;
  color: #8A939C;
  width: 34px;
  height: 34px;
  margin-inline-end: .45rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}

.tumg .menu__more:hover { background: rgba(255,255,255,.07); color: #FFFFFF; }
.tumg .menu__more svg { width: 12px; height: 12px; transition: rotate .2s var(--ease); }
.tumg .menu__more[aria-expanded="true"] svg { rotate: 180deg; }

.tumg .menu__sub {
  border-block-end: 1px solid rgba(255,255,255,.08);
  padding-block-end: .35rem;
  margin-block-end: .35rem;
}

.tumg .menu__item {
  display: block;
  padding-inline: 1.1rem;
  padding-block: .55rem;
  font-size: .92rem;
  font-weight: 600;
  color: #E6E9ED;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}

.tumg a.menu__item:hover { background: rgba(255,255,255,.06); color: #FFFFFF; }
.tumg .menu__item.soon { color: #55606B; cursor: default; }

/* On a phone the desktop dropdown read as a fragment: a 224px card floating in
   the top right with the headline running out from behind it on three sides.
   Same panel and same items, sized and separated for the screen it is on.
   The scrim is a pseudo-element, so no extra markup and nothing for the script
   to keep in sync — it appears and leaves with the panel it belongs to. */
@media (max-width: 46rem) {
  .tumg .menu__panel {
    /* fixed, not absolute: the panel's positioning ancestor is the small menu
       wrapper, so insetting both edges against THAT collapsed it to 12px wide.
       Against the viewport it spans the screen as intended. 84px clears the
       74px header and keeps the 10px gap the desktop panel uses. */
    position: fixed;
    inset-inline: 1rem;
    inset-block-start: 84px;
    min-inline-size: 0;
    padding-block: .6rem;
  }
  .tumg .menu__panel::before {
    content: "";
    position: fixed;
    /* STARTS BELOW THE HEADER. At inset:0 this scrim covered the whole
       viewport -- including the header it belongs to -- so the close mark and
       the wordmark sat underneath it, dimmed and untappable. The menu could be
       opened and then not closed. It dims the page; the header stays live. */
    inset: 74px 0 0 0;
    z-index: -1;
    background: rgba(4, 11, 19, .55);
  }
  .tumg .menu__item { padding-block: .8rem; }
  .tumg .menu__more { width: 44px; height: 44px; }
}

/* Each city carries its accent as a dot, so the submenu reads as the brands. */
.tumg .menu__item--sub {
  padding-inline-start: 2rem;
  font-weight: 500;
  color: #C3CBD3;
  position: relative;
}

.tumg .menu__item--sub::before {
  content: "";
  position: absolute;
  inset-inline-start: 1.1rem;
  inset-block-start: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  translate: 0 -50%;
}

.tumg .menu__sub .menu__item--sub:nth-of-type(1)::before { background: #FF6260; }
.tumg .menu__sub .menu__item--sub:nth-of-type(2)::before { background: #FFCD81; }

/* Anchored sections stop below the sticky header instead of under it, and the
   counting numerals hold a fixed width so the count-up cannot jitter. */
.tumg section[id] { scroll-margin-block-start: 5.2rem; }
.tumg .cnt { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- notices -- */

.notice {
  border: 1px dashed var(--accent);
  background: var(--accent-08);
  border-radius: var(--radius-sm);
  padding-inline: var(--sp-3);
  padding-block: var(--sp-2);
  font-size: var(--step--1);
  color: var(--paper-70);
}

/* ===================================== TUMG ABOUT + CONTACT ==
 * Six sections, no diagrams, no cards. The homepage is the source of truth for
 * navy, cream, gold, the serif/sans pairing, the header, the footer and the
 * pill; this page is the calmer, more editorial member of the same family.
 *
 * The only bordered surfaces left are the contact form's actual controls.
 * Everything else is carried by type, fine gold rules and negative space.
 */

/* (.tumg .about no longer overrides --tp-body: the default IS this value now.) */
/* ~64 characters. The two statement bands run a touch wider (~70) because
   their column is wider; both sit inside the 60-75 band. */
.tumg .about .tbody { }
.tumg .about .why__body .tbody,
.tumg .about .story__body .tbody { max-width: 36rem; }
.tumg .about > section { }
.tumg .about > section + section { border-block-start: 1px solid rgba(255, 255, 255, .07); }
.tumg .about .eyebrow + * { margin-block-start: .875rem; }

/* ------------------------------------------------------------------ hero -- */

/* The homepage's hero gets its depth from scrims over a photograph. This one
   has no photograph, so the depth is a wash: a wide, very low warm pool behind
   the drawing and a cool fall-off to the left, which is what stops the band
   reading as flat navy with an object dropped on it. */
.tumg .ahero {
  position: relative;
  overflow: clip;
  border-block-start: 1px solid rgba(255, 255, 255, .085);
  padding-block: clamp(2rem, 3.2vw, 3.5rem) clamp(1.6rem, 3vw, 2.6rem);
  background:
    radial-gradient(120% 90% at 74% 52%, rgba(229, 192, 126, .05), transparent 62%),
    radial-gradient(90% 120% at 0% 0%, rgba(255, 255, 255, .022), transparent 55%);
}

/* A whisper of tone between neighbouring bands. Not the homepage's alternating
   fills — at 1.2% it reads as depth, not as stripes. */
.tumg .about > section:nth-of-type(even) { background: rgba(255, 255, 255, .012); }

.tumg .ahero__in { position: relative; display: grid; gap: clamp(1.2rem, 2.6vw, 2rem); }

/* Asymmetric: the copy holds the left, the drawing takes the right and is
   allowed to run past the section's bottom edge. */
@media (min-width: 64rem) {
  /* The homepage hero is a photograph that runs to the page edges and fills the
     top of the screen. This one was a drawing politely boxed inside the right
     column, which is why the two heroes did not carry the same weight. The
     drawing now bleeds off the right edge of the viewport and fills the band,
     masked so it dissolves into the copy rather than ending on a boundary. */
  .tumg .ahero__in {                          ;
  }

  .tumg .ahero__art {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 60%;
    display: grid;
    align-content: center;
    margin: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 88%, transparent 100%);
  }

  .tumg .ahero__art .civ { max-block-size: 32rem; }
}

.tumg .ahero__copy { max-width: 33rem; }

.tumg .ahero .disp {
  font-size: clamp(2.35rem, 1.2rem + 3.8vw, 4.5rem);
  max-width: 15ch;
  text-wrap: balance;
}

.tumg .about .ahero .tbody--lead {                                                 ;
  color: #CBD4DC;
}

.tumg .about .ahero .tbody { margin-block-start: .85rem; }

/* No image container: the artwork is masked so its edges dissolve into the
   navy instead of ending on a straight line. */
/* The drawing carries its own glow, so the mask only needs to soften the very
   outside edge -- an aggressive fade was eating the light it makes. */
.tumg .ahero__art {
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 78%, transparent 100%);
  mask-image: radial-gradient(closest-side at 50% 50%, #000 78%, transparent 100%);
  pointer-events: none;
}

@media (min-width: 64rem) {
  /* let it run toward the edge of the field rather than sitting inside the
     text column's gutter */
  .tumg .ahero__art { margin-inline-end: clamp(-3.4rem, -2.4vw, -1rem); }
}

.tumg .civ { display: block; width: 100%; height: auto; }
.tumg .civ--supplied { max-block-size: 30rem; object-fit: contain; margin-inline: auto; }

@media (max-width: 63.99rem) {
  /* Beneath the opening copy, edge to edge, at a controlled height. */
  .tumg .ahero__art {
    margin-inline: calc(-1 * clamp(1.15rem, 3.74vw, 3.4rem));
    margin-block-start: .4rem;
  }
  .tumg .ahero__art .civ { max-block-size: 26rem; margin-inline: auto; inline-size: 100%; }
}

/* ------------------------------------------------- the city builds itself --
 * The page's scroll is the clock. Ground and streets are there from the first
 * frame; low structures, mid-rise, towers, light and finally the routes arrive
 * as the reader moves down. Every stage animates opacity and transform only —
 * no layout is recalculated — and the whole thing is inert under reduced
 * motion, where the finished city is simply present from the start.
 */
/* THE BUILD IS CONTINUOUS, NOT FIVE STEPS.
 *
 * It used to switch between five states, so the city arrived in five visible
 * jumps however slowly you scrolled. Every piece now has its own threshold on
 * the same 0-to-1 scroll figure the script publishes as --build, and fades in
 * across a window of its own. Nothing snaps: at any scroll position some pieces
 * are part-way in, which is what makes it read as construction rather than as
 * slides. --build is a registered property so it interpolates smoothly even
 * when frames are dropped.
 */
@property --build {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

/* The per-piece build figure is computed in the driver, not here.
 *
 * Two attempts to do it in CSS both failed silently and both shipped: first a
 * self-referential `--t` (invalid, so opacity fell back to 1 and the sequence
 * opened on a finished city), then a nested calc inside an unregistered custom
 * property (which resolved to nothing, so nothing past stage 1 ever appeared).
 * Neither threw; both just rendered wrong. The arithmetic lives in JavaScript
 * where it can be read back and checked.
 */
.tumg .civ__st {
  /* fill-box is LOAD-BEARING: without it the percentage origin resolves
     against the whole drawing's viewBox, so a building scaling up would
     stretch from the SVG's floor instead of growing out of its own lot. */
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: opacity .22s linear, transform .22s linear;
}

@media (prefers-reduced-motion: reduce) {
  .tumg .civ__st {                ; }
}

@media (prefers-reduced-motion: reduce) {
  .tumg .civ__st { opacity: 1 !important; transform: none !important; transition: none; }
}

/* The homepage's hero photograph drifts on a 38s clock. This drawing does the
   same at half the amplitude — enough that the hero is never quite static,
   which is the difference between the two heroes when you sit on the page. */
@keyframes civ-drift { from { scale: 1; } to { scale: 1.028; } }

.tumg .ahero__art .civ {
  animation: civ-drift 38s linear infinite alternate;
  transform-origin: 52% 56%;
}

@media (prefers-reduced-motion: reduce) {
  .tumg .ahero__art .civ { }
}

/* The motion is the homepage's own: one dash of light per route, sliding from
   one end to the other and fading at both ends, over a static dotted line. A
   supplied flat image simply sits still instead. */
.tumg .civ__route { stroke-width: 1.1; }

.tumg .civ__pulse {
  will-change: stroke-dashoffset;
  /* A POINT of light, not a capsule. At dash 30 and 2.6px with a round cap
     this drew as a bright white pill sliding along the wire -- it read as a
     rendering glitch, not as light. A short dash inside a much wider, much
     softer halo is what actually looks like something travelling. */
  stroke-dasharray: 7 993;
  stroke-dashoffset: 1000;
  stroke-linecap: round;
  animation-name: civ-run;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: .85;
}

/* No blur filter: an infinitely animating stroke behind a CSS filter forces a
   repaint of the whole layer every frame and stalled the compositor. A wider,
   softer stroke gives the same glow for nothing. */
.tumg .civ__pulse--halo { stroke-width: 18; stroke-opacity: .085; stroke-dasharray: 26 974; }

@keyframes civ-run {
  0%   { stroke-dashoffset: 1000; opacity: 0; }
  12%  { opacity: .95; }
  86%  { opacity: .95; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tumg .civ__pulse { display: none; }
}

/* ---------------------------------------------------------- why we exist -- */

.tumg .why, .tumg .aclose {               ; }

.tumg .why__in, .tumg .aclose__in {           ; }

/* The emotional centre: one line at the size it deserves, its support beside
   it, and a single gold rule. Nothing else. */
.tumg .why__in { display: grid; gap: 1.6rem; }

@media (min-width: 62rem) {
  /* Spans the same content width as the belief columns and the team row: the
     fixed 63rem pair left a dead third at the right of every wide screen. */
  .tumg .why__in {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 6vw, 7rem);
    align-items: start;
  }
}

/* ========================= CITY LAUNCH POLISH, 2026-08-24 =============== */
/* TUMG-style sequencing for the city chassis. The container is observed once;
   its children arrive as one composed thought. */
.js-anim.city-atlanta .seq:not(.is-in) > *,
.js-anim.city-savannah .seq:not(.is-in) > *,
.js-anim .city-atlanta .seq:not(.is-in) > *,
.js-anim .city-savannah .seq:not(.is-in) > * { opacity: 0; translate: 0 28px; }
.city-atlanta .seq > *, .city-savannah .seq > * {
  transition: opacity 1.5s cubic-bezier(.22, .68, .28, 1),
              translate 1.5s cubic-bezier(.22, .68, .28, 1);
}
.city-atlanta .seq > *:nth-child(2), .city-savannah .seq > *:nth-child(2) { transition-delay: .2s; }
.city-atlanta .seq > *:nth-child(3), .city-savannah .seq > *:nth-child(3) { transition-delay: .4s; }
.city-atlanta .seq > *:nth-child(4), .city-savannah .seq > *:nth-child(4) { transition-delay: .6s; }
.city-atlanta .seq > *:nth-child(n+5), .city-savannah .seq > *:nth-child(n+5) { transition-delay: .78s; }
.city-atlanta .reveal.is-in, .city-savannah .reveal.is-in,
.js-anim .city-atlanta .reveal.is-in, .js-anim .city-savannah .reveal.is-in {
  transition-duration: 1.5s;
  transition-timing-function: cubic-bezier(.22, .68, .28, 1);
}
.hero-enter { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero-enter { animation: city-hero-enter 1.2s .08s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes city-hero-enter {
    from { opacity: 0; translate: 34px 16px; scale: .98; }
    to { opacity: 1; translate: 0 0; scale: 1; }
  }
}

/* The Brief: a labelled, editorial product map. */
.brief-anatomy { overflow: clip; color: #1E1B19; background: #F3E8D7; }
.brief-anatomy__head { max-width: 62rem; margin-block-end: clamp(2.5rem, 5vw, 5rem); }
.brief-anatomy__head h2 {
  max-width: 15ch; margin-block: .65rem 1rem; font-family: var(--font-serif);
  font-size: clamp(3rem, 5.6vw, 6rem); font-weight: 400; line-height: .93;
  letter-spacing: -.035em;
}
.brief-anatomy__head > p:last-child { max-width: 60ch; color: #655B52; line-height: 1.65; }
.brief-dissection {
  margin: 0;
  border: 1px solid #BFAE96;
  background:
    linear-gradient(rgba(169, 50, 46, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169, 50, 46, .055) 1px, transparent 1px),
    #EDE0CD;
  background-size: 3.5rem 3.5rem;
  box-shadow: 0 28px 70px rgba(64, 45, 29, .12);
}
.brief-dissection__bar {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 5rem;
  padding: 1rem 1.25rem;
  color: #F7F1E7;
  border-block-end: 1px solid #3B3D3E;
  background: #17191A;
}
.brief-dissection__bar > div { display: grid; gap: .2rem; }
.brief-dissection__bar b {
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.brief-dissection__bar span {
  color: #B9B3AA;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.brief-dissection__bar a {
  flex: 0 0 auto;
  color: #FF7A73;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.brief-dissection__stage {
  position: relative;
  min-height: 5248px;
  overflow: hidden;
}
.brief-dissection__issue {
  position: absolute;
  inset: 0 auto auto 50%;
  z-index: 0;
  width: 410px;
  height: 5248px;
  overflow: hidden;
  border-inline: 1px solid #BFAE96;
  background: #F1EBDC;
  box-shadow: 0 0 0 9px rgba(255, 253, 248, .62), 0 22px 55px rgba(64, 45, 29, .2);
  translate: -50% 0;
}
.brief-dissection__issue iframe {
  display: block;
  width: 640px;
  height: 8200px;
  overflow: hidden;
  border: 0;
  background: #F1EBDC;
  pointer-events: none;
  scrollbar-width: none;
  transform: scale(.64);
  transform-origin: 0 0;
}
.brief-dissection__issue iframe::-webkit-scrollbar { display: none; }
.brief-dissection__lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.brief-dissection__lines path {
  fill: none;
  stroke: #A9322E;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.brief-dissection__anchor {
  position: absolute;
  z-index: 3;
  width: .8rem;
  height: .8rem;
  border: 3px solid #FFFDF8;
  border-radius: 50%;
  background: #A9322E;
  box-shadow: 0 0 0 1px #A9322E;
  opacity: 0;
  translate: -50% -50%;
  transition: opacity .2s ease;
}
.brief-dissection__callouts { margin: 0; padding: 0; list-style: none; }
.brief-dissection__callout {
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  gap: .85rem;
  width: min(25%, 17.5rem);
  min-height: 8.4rem;
  padding: 1.05rem;
  border: 1px solid #A9322E;
  background: rgba(255, 253, 248, .96);
  box-shadow: 8px 10px 0 rgba(169, 50, 46, .11), 0 14px 32px rgba(64, 45, 29, .12);
  opacity: 0;
  transition: opacity .2s ease;
}
.brief-dissection__callout--left { left: 2.2%; }
.brief-dissection__callout--right { right: 2.2%; }
.brief-dissection.is-mapped .brief-dissection__lines,
.brief-dissection.is-mapped .brief-dissection__anchor,
.brief-dissection.is-mapped .brief-dissection__callout { opacity: 1; }
.brief-dissection__number {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  color: #FFF8EA;
  border-radius: 50%;
  background: #A9322E;
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.brief-dissection__callout h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.7vw, 1.65rem);
  font-weight: 400;
  line-height: 1.02;
}
.brief-dissection__callout p {
  margin-block-start: .5rem;
  color: #665B50;
  font-size: .78rem;
  line-height: 1.48;
}
.brief-dissection__note {
  display: flex;
  gap: .8rem;
  align-items: center;
  padding: .9rem 1.25rem;
  color: #5F554C;
  border-block-start: 1px solid #BFAE96;
  background: rgba(255, 253, 248, .78);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.brief-dissection__note span { color: #A9322E; font-size: 1rem; }
.brief-methods .offer { position: relative; padding-block-start: 8rem; }
.brief-methods .offer__emblem { position: absolute; inset: 1.2rem 1.2rem auto auto; width: 6rem; height: 6rem; color: var(--accent); opacity: .92; }
.brief-methods .offer__emblem .emblem { width: 100%; height: 100%; }

/* Advertising disclosure controls: clearly labelled actions, not clock faces. */
.offer-expand > summary .offer-expand__action,
.partner-roster > summary .offer-expand__action {
  display: inline-flex; align-items: center; gap: .7rem; flex: 0 0 auto;
  min-height: 2.8rem; padding: .55rem .75rem; border: 1px solid currentColor;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.offer-expand__action > b { font-size: .95rem; transition: rotate .25s ease; }
.offer-expand[open] > summary .offer-expand__action > b,
.partner-roster[open] > summary .offer-expand__action > b { rotate: 180deg; }

.seg-grid--interactive { align-items: stretch; }
.seg-grid--interactive .fit-card {
  position: relative; min-height: 18rem; overflow: hidden; transition: transform .38s cubic-bezier(.16,1,.3,1), background .38s ease, box-shadow .38s ease;
}
.fit-card__prompt { color: var(--accent-hi) !important; font-family: var(--font-mono); font-size: .58rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.fit-card > div:last-child > span { display: inline-flex; gap: .5rem; margin-block-start: 1rem; color: var(--accent-hi); font-family: var(--font-mono); font-size: .6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: 0; translate: 0 .7rem; transition: opacity .3s ease, translate .35s ease; }
.fit-card:hover, .fit-card:focus-visible { z-index: 2; transform: translateY(-.55rem) scale(1.035); background: #1B1D1E; box-shadow: 0 22px 44px rgba(0,0,0,.34); outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.fit-card:hover > div:last-child > span, .fit-card:focus-visible > div:last-child > span { opacity: 1; translate: 0 0; }

/* Each promotion-fit tile has a deliberate second face: the live example and
   the public metrics appear only after the reader asks to see the format. */
.work-page .seg-grid--interactive .format-card {
  display: block;
  grid-template-columns: none;
  min-height: 25rem;
  padding: 0;
  overflow: visible;
  perspective: 1100px;
  background: transparent;
}
.format-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
}
.format-card__face {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-hi);
  background: #111314;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .62s cubic-bezier(.16, 1, .3, 1), opacity .2s ease;
}
.format-card__face--front {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1.4rem;
  align-items: center;
  padding: 1.6rem;
  cursor: pointer;
}
.format-card__toggle,
.format-card__actions a,
.format-card__actions button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  appearance: none;
  padding: 0;
  color: var(--accent-hi);
  border: 0;
  background: none;
  font: 700 .6rem var(--font-mono);
  letter-spacing: .07em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.format-card__toggle { margin-block-start: 1rem; }
.format-card__toggle:hover,
.format-card__actions a:hover,
.format-card__actions button:hover { color: #FFF7EA; }
.format-card__toggle:focus-visible,
.format-card__actions a:focus-visible,
.format-card__actions button:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: .3rem; }
.format-card__face--back {
  display: grid;
  grid-template-columns: minmax(10rem, .82fr) minmax(0, 1.18fr);
  transform: rotateY(180deg);
  opacity: 0;
  pointer-events: none;
  color: #FFF7EA;
}
.format-card[data-flipped] .format-card__face--front { transform: rotateY(-180deg); opacity: 0; pointer-events: none; }
.format-card[data-flipped] .format-card__face--back { transform: rotateY(0deg); opacity: 1; pointer-events: auto; }
.format-card__media {
  min-width: 0;
  min-height: 100%;
  background: #060708;
}
.format-card__media iframe { display: block; width: 100%; height: 100%; min-height: 24.9rem; border: 0; }
.format-card__proof { display: grid; align-content: center; gap: .75rem; min-width: 0; padding: 1.25rem; }
.format-card__proof h3 { color: #FFF7EA; font-size: clamp(1.55rem, 2.2vw, 2.35rem); line-height: .98; }
.format-card__client { margin: 0; color: rgba(255,247,234,.66) !important; font-family: var(--font-mono); font-size: .62rem !important; letter-spacing: .07em; text-transform: uppercase; }
.format-card__mechanics { display: grid; gap: .25rem; margin: 0; color: rgba(255,247,234,.72) !important; font-size: .7rem !important; line-height: 1.45 !important; }
.format-card__mechanics b { color: var(--accent-hi); font: 700 .5rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.format-card__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block-start: 1px solid rgba(255,255,255,.16); border-inline-start: 1px solid rgba(255,255,255,.16); }
.format-card__metrics span { display: grid; gap: .25rem; min-width: 0; padding: .65rem; border-inline-end: 1px solid rgba(255,255,255,.16); border-block-end: 1px solid rgba(255,255,255,.16); font: 700 .7rem var(--font-mono); }
.format-card__metrics b { color: rgba(255,247,234,.56); font-size: .5rem; letter-spacing: .07em; text-transform: uppercase; }
.format-card__source { margin: 0; color: rgba(255,247,234,.52) !important; font-size: .62rem !important; line-height: 1.4 !important; }
.format-card__actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding-block-start: .2rem; }
.format-card[data-flipped]:hover { transform: none; box-shadow: 0 22px 44px rgba(0,0,0,.34); }

@media (max-width: 59.99rem) {
  .work-page .seg-grid--interactive .format-card { min-height: 25rem; }
  .format-card__media iframe { min-height: 24.9rem; }
}
@media (max-width: 37.49rem) {
  .work-page .seg-grid--interactive .format-card { min-height: 38rem; }
  .format-card__face--front { grid-template-columns: 5.25rem minmax(0, 1fr); gap: 1rem; padding: 1.15rem; }
  .format-card__face--front .seg__emblem { width: 5.25rem; }
  .format-card__face--back { grid-template-columns: 1fr; grid-template-rows: 17rem minmax(0, 1fr); }
  .format-card__media iframe { min-height: 17rem; }
  .format-card__proof { align-content: start; padding: 1rem; }
  .format-card__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .format-card__actions { align-content: start; }
}

.sponsor-model--visual { display: grid; gap: clamp(3.5rem, 7vw, 7rem); }
.sponsor-model__chapter { display: grid; gap: 2rem; }
.sponsor-proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #BFAF98; }
.sponsor-proof__item { position: relative; min-width: 0; min-height: 19rem; padding: 7.5rem 1.25rem 1.4rem; background: #FFF8EB; }
.sponsor-proof__item + .sponsor-proof__item { border-inline-start: 1px solid #BFAF98; }
.sponsor-proof__item > div { position: absolute; inset: 1.25rem auto auto 1.25rem; width: 5.5rem; height: 5.5rem; color: #A8322E; }
.sponsor-proof__item .emblem { width: 100%; height: 100%; }
.sponsor-proof__item > span { position: absolute; inset: 1.2rem 1.2rem auto auto; color: #A8322E; font-family: var(--font-mono); font-size: .62rem; }
.sponsor-proof__item h4, .sponsor-fit__item h4 { min-width: 0; color: #211B18; font-family: var(--font-serif); font-size: clamp(1.55rem, 2.1vw, 2rem); font-weight: 400; line-height: 1; overflow-wrap: anywhere; }
.sponsor-proof__item p, .sponsor-fit__item p { min-width: 0; margin-block-start: .75rem; color: #655B52; font-size: .82rem; line-height: 1.55; overflow-wrap: anywhere; }
.sponsor-fit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sponsor-fit__item { display: grid; min-width: 0; grid-template-columns: 5rem minmax(0, 1fr); gap: .35rem 1.1rem; align-content: start; padding: 1.4rem; border: 1px solid #BFAF98; background: #E9DCC6; }
.sponsor-fit__item > div { grid-row: 1 / span 2; width: 5rem; height: 5rem; color: #A8322E; }
.sponsor-fit__item .emblem { width: 100%; height: 100%; }
.sponsor-fit__item p { grid-column: 2; }

.partner-roster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  min-width: 0;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  overflow: hidden;
  border-block: 1px solid #BFAF98;
}
.partner-roster__head {
  display: flex; gap: 2rem; width: 100%; align-items: end; justify-content: space-between;
  box-sizing: border-box; min-width: 0;
  padding-inline: clamp(1rem, 3vw, 2.5rem); list-style: none;
}
.partner-roster__head::-webkit-details-marker { display: none; }
.partner-roster__head > span:first-child { display: grid; gap: .65rem; max-width: 48rem; }
.partner-roster__title { display: block; font-family: var(--font-serif); font-size: clamp(2.1rem, 4vw, 4rem); font-weight: 400; line-height: .98; }
.partner-roster__dek { display: block; max-width: 55ch; color: #655B52; }
.partner-marquee__toolbar {
  display: flex;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}
.partner-marquee__toolbar p {
  color: #655B52;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.partner-marquee__controls { display: flex; gap: .45rem; }
.partner-marquee__controls button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid #A8322E;
  border-radius: 50%;
  background: transparent;
  color: #A8322E;
  font-size: 1.1rem;
  cursor: pointer;
  transition: color .2s var(--ease), background-color .2s var(--ease), translate .2s var(--ease);
}
.partner-marquee__controls button:hover,
.partner-marquee__controls button:focus-visible {
  color: #FFF9EE;
  background: #A8322E;
  outline: none;
  translate: 0 -.1rem;
}
.partner-marquee {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  cursor: grab;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.partner-marquee::-webkit-scrollbar { display: none; }
.partner-marquee:focus-visible { outline: 2px solid #A8322E; outline-offset: .35rem; }
.partner-marquee.is-dragging { cursor: grabbing; user-select: none; scroll-behavior: auto; }
.partner-marquee__belt { display: flex; width: max-content; }
.partner-marquee__track {
  display: flex;
  align-items: center;
  flex: none;
  gap: clamp(2rem, 4vw, 4.5rem);
  margin: 0;
  padding: 0 clamp(1rem, 2vw, 2rem);
  list-style: none;
}
.partner-mark { display: grid; flex: 0 0 clamp(9.25rem, 12vw, 11rem); place-items: center; min-height: 10rem; }
.partner-mark > a {
  display: grid;
  width: clamp(8.5rem, 10.5vw, 10rem);
  min-height: 9.25rem;
  grid-template-rows: 5.7rem minmax(2rem, auto);
  gap: .55rem;
  place-items: center;
  padding: .75rem .8rem .7rem;
  color: #090B0C;
  border: 1px solid #FFF8EB;
  border-radius: .55rem;
  background: #FFF8EB;
  text-decoration: none;
  box-shadow: 0 .6rem 1.4rem rgba(45, 32, 22, .08);
  transition: translate .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.partner-mark > a:hover, .partner-mark > a:focus-visible {
  translate: 0 -.25rem;
  border-color: #090B0C;
  box-shadow: 0 1rem 2rem rgba(45, 32, 22, .13);
  outline: none;
}
.partner-mark__graphic { display: grid; width: 100%; height: 5.7rem; place-items: center; }
.partner-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.partner-mark__name {
  display: grid;
  min-height: 2rem;
  place-items: center;
  color: #090B0C;
  font: 800 .58rem/1.18 var(--font-mono);
  letter-spacing: .055em;
  text-align: center;
  text-transform: uppercase;
}
.partner-mark--word span {
  max-width: 12ch;
  color: #090B0C;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .partner-roster__head { align-items: start; }
  .partner-marquee__toolbar { align-items: end; }
  .partner-marquee__toolbar p { max-width: 25ch; }
}

.sponsor-case {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border: 1px solid #BFAF98;
  background: #FFF8EB;
}
.sponsor-case + .sponsor-case { margin-block-start: 1.5rem; }
.sponsor-case__head { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.4rem; align-items: center; }
.sponsor-case__head > img { width: 7rem; height: 7rem; object-fit: contain; border-radius: 50%; background: #fff; }
.sponsor-case__head > div { display: grid; min-width: 0; gap: .55rem; }
.sponsor-case__head h3 { max-width: 100%; font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 400; line-height: .98; overflow-wrap: anywhere; }
.sponsor-case__head > div > p:last-child { max-width: 62ch; color: #655B52; }
.sponsor-case--hungryaf .sponsor-case__head h3 { color: #211B18; }
.sponsor-case--hungryaf .social-rail-head p { color: #655B52; }
.sponsor-case__metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid #C6B49C;
  background: #F4E9D7;
}
.sponsor-case__metrics > div { min-width: 0; padding: 1rem .85rem; }
.sponsor-case__metrics > div + div { border-inline-start: 1px solid #C6B49C; }
.sponsor-case__metrics strong,
.sponsor-case__metrics span { display: block; }
.sponsor-case__metrics strong {
  color: #A8322E;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 400;
  line-height: 1;
}
.sponsor-case__metrics span {
  margin-block-start: .35rem;
  color: #655B52;
  font: 700 .52rem/1.35 var(--font-mono);
  letter-spacing: .075em;
  text-transform: uppercase;
}
.sponsor-case__mechanics {
  display: grid;
  gap: .9rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid #C6B49C;
  background: rgba(244,233,215,.58);
}
.sponsor-case__mechanics ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.sponsor-case__mechanics li { display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: .7rem; min-width: 0; padding: .75rem 1rem; }
.sponsor-case__mechanics li + li { border-inline-start: 1px solid #C6B49C; }
.sponsor-case__mechanics li > span { color: #A8322E; font: 700 .58rem var(--font-mono); letter-spacing: .08em; }
.sponsor-case__mechanics li p { margin: 0; color: #655B52; font-size: .82rem; line-height: 1.5; }
.sponsor-case__result > .ccard { grid-template-columns: 1fr; min-height: 0; }
.sponsor-case--topdog { color: #FFF8EB; border-color: #343738; background: #17191A; }
.sponsor-case--topdog .sponsor-case__head > div > p:last-child,
.sponsor-case--topdog .ccard__ctx,
.sponsor-case--topdog .mcard__type { color: #C9C1B7; }
.sponsor-case--topdog .ccard {
  border-color: #4B4E50;
  background: #101213;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.sponsor-case--topdog .ccard .kicker,
.sponsor-case--topdog .ccard .mcard__type { color: #FF7771; }
.sponsor-case--topdog .ccard__client,
.sponsor-case--topdog .ccard__stat b { color: #FFF8EB; }
.sponsor-case--topdog .ccard__stat span { color: #D6D0C7; }
.sponsor-case--topdog .ccard__ctx { color: #D0C9C0; }
.sponsor-case--topdog .social-rail-head p { color: #D0C9C0; }
.sponsor-case--topdog .rail-controls button { color: #FFF8EB; }
.sponsor-case--topdog .sponsor-case__mechanics { border-color: #4B4E50; background: #101213; }
.sponsor-case--topdog .sponsor-case__mechanics li + li { border-color: #4B4E50; }
.sponsor-case--topdog .sponsor-case__mechanics li p { color: #D0C9C0; }
.sponsor-case--topdog .ccard__stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid #46494B;
  background: #191B1C;
}
.sponsor-case--topdog .ccard__stat { padding: 1rem; }
.sponsor-case--topdog .ccard__stat + .ccard__stat { border-inline-start: 1px solid #46494B; }

@media (max-width: 61.99rem) {
  .brief-dissection__stage { min-height: 4346px; }
  .brief-dissection__issue { width: 339px; height: 4346px; }
  .brief-dissection__issue iframe { transform: scale(.53); }
  .brief-dissection__callout {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: .7rem;
    width: min(27%, 13.5rem);
    min-height: 7.5rem;
    padding: .85rem;
  }
  .brief-dissection__number { width: 1.9rem; height: 1.9rem; }
  .brief-dissection__callout h3 { font-size: clamp(1.05rem, 2.2vw, 1.4rem); }
  .brief-dissection__callout p { font-size: .7rem; }
  .sponsor-proof { grid-template-columns: 1fr 1fr; }
  .sponsor-proof__item:nth-child(3) { border-inline-start: 0; }
  .sponsor-proof__item:nth-child(n+3) { border-block-start: 1px solid #BFAF98; }
  .sponsor-fit { grid-template-columns: 1fr; }
}
@media (max-width: 45.99rem) {
  .brief-anatomy__head { margin-block-end: 2.25rem; }
  .brief-dissection { margin-inline: calc(var(--sp-4) * -.55); }
  .brief-dissection__bar { align-items: flex-start; min-height: 5.5rem; padding: .85rem; }
  .brief-dissection__bar a { max-width: 7rem; text-align: right; }
  .brief-dissection__stage { min-height: 2460px; }
  .brief-dissection__issue { width: 192px; height: 2460px; }
  .brief-dissection__issue iframe { transform: scale(.3); }
  .brief-dissection__lines path { stroke-width: 1; }
  .brief-dissection__anchor { width: .65rem; height: .65rem; border-width: 2px; }
  .brief-dissection__callout {
    grid-template-columns: 1.55rem minmax(0, 1fr);
    gap: .45rem;
    width: min(34%, 7.4rem);
    min-height: 0;
    padding: .65rem;
    box-shadow: 4px 5px 0 rgba(169, 50, 46, .12), 0 8px 20px rgba(64, 45, 29, .12);
  }
  .brief-dissection__callout--left { left: 0; }
  .brief-dissection__callout--right { right: 0; }
  .brief-dissection__number { width: 1.45rem; height: 1.45rem; font-size: .5rem; }
  .brief-dissection__callout h3 { font-size: .86rem; line-height: 1.05; }
  .brief-dissection__callout p { margin-block-start: .3rem; font-size: .58rem; line-height: 1.38; }
  .brief-dissection__note { align-items: flex-start; padding: .8rem; font-size: .54rem; line-height: 1.45; }
  .offer-expand > summary { align-items: flex-start; }
  .offer-expand > summary .offer-expand__action { min-height: 2.4rem; padding: .45rem .55rem; font-size: .52rem; }
  .sponsor-proof { grid-template-columns: 1fr; }
  .sponsor-proof__item, .sponsor-proof__item:nth-child(3) { min-height: 15rem; border-inline-start: 0; border-block-start: 1px solid #BFAF98; }
  .sponsor-proof__item:first-child { border-block-start: 0; }
  .sponsor-fit__item { grid-template-columns: 4rem minmax(0, 1fr); }
  .sponsor-fit__item > div { width: 4rem; height: 4rem; }
  .sponsor-case__head { grid-template-columns: 4.75rem minmax(0, 1fr); gap: 1rem; align-items: start; }
  .sponsor-case__head > img { width: 4.75rem; height: 4.75rem; }
  .sponsor-case__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sponsor-case__metrics > div:nth-child(odd) { border-inline-start: 0; }
  .sponsor-case__metrics > div:nth-child(n+3) { border-block-start: 1px solid #C6B49C; }
  .sponsor-case__mechanics ol { grid-template-columns: 1fr; }
  .sponsor-case__mechanics li + li { border-inline-start: 0; border-block-start: 1px solid #C6B49C; }
  .sponsor-case--topdog .sponsor-case__mechanics li + li { border-block-color: #4B4E50; }
}
@media (prefers-reduced-motion: reduce) {
  .city-atlanta .seq > *, .city-savannah .seq > *, .hero-enter, .fit-card {
    opacity: 1 !important; translate: none !important; transform: none !important;
    scale: 1 !important; transition: none !important; animation: none !important;
  }
}

.tumg .why__big {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.1rem + 3.2vw, 3.7rem);
  line-height: 1.06;
  letter-spacing: -.012em;
  color: #FFFFFF;
  max-width: 14ch;
  text-wrap: balance;
}

.tumg .why__head { position: relative; padding-inline-start: 1.25rem; }

.tumg .why__head::before {
  content: "";
  position: absolute;
  inset-block: .15rem .35rem;
  inset-inline-start: 0;
  inline-size: 2px;
  background: linear-gradient(180deg, var(--tp-gold), rgba(229, 192, 126, 0));
}

.tumg .about .why__close { margin-block-start: 1.1rem; color: #D6DEE5; }

/* ------------------------------------------------------ what we believe -- */

/* THE ONE LIGHT BAND ON THE PAGE.
 *
 * Cream ground, navy type, gold linework. The cream is already in the system —
 * it is the badge field and the primary button — so the section still belongs
 * to TUMG while giving a very dark page the contrast it was missing. */
.tumg .believe {
  isolation: isolate;
  color: #0C1A27;
}

.tumg .believe .eyebrow { }
.tumg .believe .disp--2 { color: #0C1A27; }
.tumg .believe .belief__h { color: #0C1A27; }
.tumg .believe .belief__p { }
.tumg .believe .belief + .belief { }

@media (max-width: 57.99rem) {
  .tumg .believe .belief + .belief { border-block-start-color: rgba(12, 26, 39, .14); }
}

/* the band's own edges, so it reads as a deliberate inset panel */
.tumg .believe::before,
.tumg .believe::after {
  content: "";
  position: absolute;
  inset-inline: 0;                                       ;
}
.tumg .believe::before { }
.tumg .believe::after { }

/* ------------------------------------------------------------- emblems -- */

.tumg .belief__mark { color: #A8792B; margin-block-end: 1.1rem; }
.tumg .emblem { inline-size: 74px; block-size: 74px; display: block; overflow: visible; }

/* Each emblem draws itself once, in about a second, as its column arrives. */
.tumg .emblem path, .tumg .emblem circle {
  stroke-dasharray: 340;
  stroke-dashoffset: 0;
}

.tumg .belief.rise:not(.is-in) .emblem path,
.tumg .belief.rise:not(.is-in) .emblem circle { stroke-dashoffset: 340; }

.tumg .belief.rise.is-in .emblem path,
.tumg .belief.rise.is-in .emblem circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .tumg .emblem path, .tumg .emblem circle { stroke-dashoffset: 0 !important; transition: none; }
}

.tumg .believe__head .disp--2 { max-width: 22ch; }

.tumg .believe__cols {
  display: grid;
  gap: 0;
  margin-block-start: clamp(1.8rem, 3.4vw, 2.8rem);
}

/* Three columns divided by hairlines rather than three boxes. */
@media (min-width: 58rem) {
  .tumg .believe__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tumg .belief { padding-inline: clamp(1.5rem, 3vw, 2.6rem); }
  .tumg .belief:first-child { padding-inline-start: 0; }
  .tumg .belief:last-child { padding-inline-end: 0; }
  .tumg .belief + .belief { border-inline-start: 1px solid rgba(255, 255, 255, .1); }
}

/* A FOURTH BELIEF.
 *
 * Four columns hold the row's rhythm on a wide screen and crush it on a
 * laptop, where each would be about twenty characters across -- a column of
 * broken words, not a column of prose. Between 58rem and 76rem the beliefs
 * pair off into a 2x2 block instead, which keeps the measure readable. The
 * dividing hairline follows the pairing: it belongs between the two in a row,
 * never down the left edge of one that starts a row. */
@media (min-width: 58rem) and (max-width: 75.99rem) {
  .tumg .believe__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tumg .belief:nth-child(odd) { padding-inline-start: 0; }
  .tumg .belief:nth-child(even) { padding-inline-end: 0; }
  .tumg .believe .belief:nth-child(odd) { border-inline-start: 0; }
  .tumg .believe .belief:nth-child(odd)::before { display: none; }
  .tumg .believe__cols .belief:nth-child(n+3) {
    margin-block-start: clamp(1.7rem, 3vw, 2.6rem);
  }
  /* The measures are cut for a quarter-width column. Left alone in a half-width
     one they strand a third of each cell empty, which reads as a layout that
     broke rather than one that paired. */
  .tumg .believe__cols .belief__h { max-width: 25ch; }
  .tumg .believe__cols .belief__p { max-width: 44ch; }
}
@media (min-width: 76rem) {
  .tumg .believe__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 57.99rem) {
  .tumg .belief + .belief {
    border-block-start: 1px solid rgba(255, 255, 255, .1);
    margin-block-start: 1.4rem;
    padding-block-start: 1.4rem;
  }
}

/* A small gold tick above each principle: the restrained detail, once. */
.tumg .belief__h {
  position: relative;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.42rem, 1.05rem + 1.15vw, 2.05rem);
  line-height: 1.13;
  letter-spacing: -.005em;
  color: #FFFFFF;
  max-width: 19ch;
  text-wrap: balance;
}

.tumg .belief__p {
  margin-block-start: 1rem;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--tp-body);
  max-width: 32ch;
}

/* ---------------------------------------------------- the business thesis -- */

/* One narrow band. It is the only place on the page that speaks to a partner
   or an investor, and it says it in three sentences rather than a diagram. */
.tumg .thesis__in { display: grid; gap: 1.2rem; }

@media (min-width: 62rem) {
  .tumg .thesis__in {                                  ;
    align-items: start;
  }
}

.tumg .thesis__head {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem);
  line-height: 1.16;
  color: var(--tp-gold);
  max-width: 16ch;
  text-wrap: balance;
}

.tumg .about .thesis__note { margin-block-start: 1rem; color: #97A3AE; }

/* -------------------------------------------------------------- our story -- */

.tumg .story__in { display: grid; gap: 1.6rem; }

@media (min-width: 62rem) {
  /* Spans the same content width as the belief columns and the team row: the
     fixed 63rem pair left a dead third at the right of every wide screen. */
  .tumg .story__in {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 6vw, 7rem);
    align-items: start;
  }
}

.tumg .story__head { position: relative; }
.tumg .story__head .disp--2 { max-width: 14ch; }

/* Editorial punctuation: the founding year at display scale, sitting behind
   the heading rather than beside it as another line of copy. */
.tumg .story__year {                            ;
  font-family: var(--font-serif);
  font-size: clamp(4.5rem, 2rem + 9vw, 9.5rem);
  line-height: .82;
  letter-spacing: -.02em;
  -webkit-text-stroke: 1px rgba(229, 192, 126, .34);
  user-select: none;
}
.tumg .about .story__body .tbody + .tbody { margin-block-start: 1rem; }

/* Visual punctuation, not an infographic. */

/* ------------------------------------------------------------------ team -- */

.tumg .crew__row { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); margin-block-start: clamp(1.6rem, 3vw, 2.6rem); }

@media (min-width: 46rem) {
  .tumg .crew__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* No card: the plate stands in the open field and the name hangs beneath it.
   The homepage's city cards lift and warm their border on hover; these do the
   same, which is the only interactive state this section can have. */
.tumg .person { display: block; }
.tumg .pplate { transition: transform .3s var(--ease); }
.tumg .pplate::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(229, 192, 126, .22);
  transition: border-color .3s var(--ease);
  z-index: 1;
  pointer-events: none;
}
.tumg .person:hover .pplate { transform: translateY(-3px); }
.tumg .person:hover .pplate::before { border-color: rgba(229, 192, 126, .5); }

.tumg .pplate {
  position: relative;
  display: block;
  aspect-ratio: 6 / 5;
  overflow: hidden;
  border-radius: 4px;
}

.tumg .pplate svg { inline-size: 100%; block-size: 100%; display: block; }

.tumg .pplate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(6, 14, 22, .55) 100%);
  pointer-events: none;
}

/* Was 9px, which is below anything else on the site and hard to read even at
   5.3:1. 10.5px matches the role label scale and lifts it to 7:1. */
.tumg .pplate__soon {
  position: absolute;
  z-index: 1;
  inset-block-end: .7rem;
  inset-inline-start: .85rem;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.tumg .person__name {
  margin-block-start: 1rem;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  line-height: 1.1;
  color: #FFFFFF;
}

.tumg .person__role {
  margin-block-start: .4rem;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tp-gold);
}

/* A phone gets a controlled swipe row rather than three full-height blocks:
   stacked, the team alone added a thousand pixels of scrolling. Each card is
   74% of the viewport, so it is a readable card and not a squeezed thumbnail. */
/* The swipe row is a PHONE pattern and it was running up to 928px, so a tablet
   got a carousel whose third card was cut through the middle of "William
   Blount". A name sliced in half reads as a broken layout, not as a peek.
   Tablets get the grid; only real phones get the swipe. */
@media (max-width: 45.99rem) {
  .tumg .crew__row {
    grid-auto-flow: column;
    grid-auto-columns: min(74%, 19rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: clamp(1.15rem, 3.74vw, 3.4rem);
    margin-inline: calc(-1 * clamp(1.15rem, 3.74vw, 3.4rem));
    padding-block-end: .5rem;
    gap: 1.2rem;
    scrollbar-width: thin;
  }
  .tumg .person { scroll-snap-align: center; }
  }



/* --------------------------------------------------------------- closing -- */

/* A drawn line, not a border: it is slightly uneven, it sits under the word
   rather than against it, and it draws itself once when the closing arrives. */
.tumg .ulined { position: relative; white-space: nowrap; color: inherit; }

.tumg .ulined__mark {
  position: absolute;
  inset-inline: -2% -1%;
  inset-block-end: -.06em;
  inline-size: 104%;
  block-size: .34em;
  color: var(--tp-gold);
  overflow: visible;
}

/* Drawn by default. It is only UNdrawn while its block is waiting to be
   revealed — so if the reveal never runs (no script, hidden document, reduced
   motion) the underline is simply there, rather than missing. */
.tumg .ulined__mark path { stroke-dasharray: 200; stroke-dashoffset: 0; }

.tumg .rise:not(.is-in) .ulined__mark path { stroke-dashoffset: 200; }

.tumg .rise.is-in .ulined__mark path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .85s var(--ease) .25s;
}

.tumg .aclose__in { display: grid; justify-items: center; text-align: center; }
.tumg .aclose__in .disp--2 { max-width: 16ch; font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.1rem); }
.tumg .about .aclose__in .tbody { max-width: 44ch; margin-block-start: 1rem; }

.tumg .aclose .apull {
  margin-block: clamp(1.7rem, 3.4vw, 2.6rem);
  padding: 0;
  border: 0;
  max-width: 26ch;
}

.tumg .aclose .apull p {
  font-family: var(--font-serif);
  text-wrap: balance;   /* stops the quote ending on a one-word line */
  font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.45rem);
  line-height: 1.24;
  color: var(--tp-gold);
}

/* The last controls on the page carry a little more weight than the ones in
   the middle of it. */
.tumg .acta { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
.tumg .acta .pill { padding-inline: 1.85em; padding-block: .95em; }

@media (max-width: 34rem) {
  .tumg .acta { inline-size: 100%; }
  .tumg .acta .pill { flex: 1 0 100%; justify-content: center; }
}

.tumg .pill--line {
  border: 1px solid rgba(255, 255, 255, .34);
  color: #F2F3F5;
  transition: border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}

.tumg .pill--line:hover { border-color: var(--tp-gold); color: #FFFFFF; }

/* --------------------------------------------------------- current page -- */

.tumg .thead__nav a[aria-current="page"] {                             ;
  text-decoration-color: var(--tp-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.tumg .menu__item[aria-current="page"] { color: var(--tp-gold); }

.tumg .pill:focus-visible,
.tumg .thead__nav a:focus-visible,
.tumg .tfoot__nav a:focus-visible,
.tumg .menu__item:focus-visible {
  outline: 2px solid var(--tp-gold);
  outline-offset: 3px;
}

/* ------------------------------------------------------------- movement -- */

.tumg .rise { opacity: 0; translate: 0 16px; }
.tumg .rise.is-in {
  opacity: 1;
  translate: 0 0;
  transition: opacity .6s var(--ease), translate .6s var(--ease);
}

/* The homepage's standard is that its accents DRAW rather than fade: the wires
   sweep, the timeline runs, the numbers count. These are this page's three
   equivalents — the statement rule, each belief's tick, and the outlined year —
   and they are the only things on the page that move on arrival. */
.tumg .why__head.rise::before { scale: 1 0; }
.tumg .why__head.rise.is-in::before {
  scale: 1 1;
  transition: scale .7s var(--ease) .1s;
}

.tumg .belief__h::before { transform-origin: 0 50%; }
.tumg .belief.rise .belief__h::before { scale: 0 1; }
.tumg .belief.rise.is-in .belief__h::before {
  scale: 1 1;
  transition: scale .55s var(--ease) .25s;
}

.tumg .story__head.rise .story__year { opacity: 0; translate: 0 10px; }
.tumg .story__head.rise.is-in .story__year {
  opacity: 1;
  translate: 0 0;
  transition: opacity .8s var(--ease) .18s, translate .8s var(--ease) .18s;
}

.tumg .believe__cols .rise.is-in:nth-child(2) { transition-delay: .09s; }
.tumg .believe__cols .rise.is-in:nth-child(3) { transition-delay: .18s; }
.tumg .believe__cols .rise.is-in:nth-child(4) { transition-delay: .27s; }
.tumg .crew__row .rise.is-in:nth-child(2) { transition-delay: .09s; }
.tumg .crew__row .rise.is-in:nth-child(3) { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .tumg .ahero__art .civ { animation: none; }
  .tumg .rise { opacity: 1 !important; translate: none !important; }
  .tumg .why__head.rise::before,
  .tumg .belief.rise .belief__h::before { scale: none !important; }
  .tumg .story__head.rise .story__year { opacity: 1 !important; translate: none !important; }
}

/* ---------------------------------------------------------- contact page -- */

/* The contact page borrows the About page's statement band wholesale: same
   eyebrow, same gold rule, same display statement, same ground plane. It was
   the last page still laid out as a heading over a narrow floating form. */
/* A short page must still push its footer to the bottom of the viewport. The
   contact page was leaving a field of empty navy underneath it. */
.tumg body, body.tumg { min-block-size: 100vh; display: flex; flex-direction: column; }
.tumg main { flex: 1 0 auto; }
.tumg .tfoot { flex: 0 0 auto; }

.tumg .cpage { display: flex; align-items: center; }
.tumg .cpage .why__head .tbody { }
/* The contact statement IS the page title, so it takes the same scale as the
   About page's h1 rather than the in-page statement size. */
.tumg .cpage .why__big {
  max-width: 13ch;
  font-size: clamp(2.15rem, 1.15rem + 3.4vw, 4rem);
}

.tumg .cform { display: grid; gap: 1.05rem; max-width: 36rem; }

/* Name and email sit side by side so the column does not run down the page. */
.tumg .cform__row { display: grid; gap: 1.05rem; }

@media (min-width: 34rem) {
  .tumg .cform__row { grid-template-columns: 1fr 1fr; }
  .tumg .cfield--wide { grid-column: 1 / -1; }
}
.tumg .cfield { margin: 0; }

.tumg .cfield label {
  display: block;
  margin-block-end: .45rem;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tp-body);
}

.tumg .cfield input,
.tumg .cfield select,
.tumg .cfield textarea {
  inline-size: 100%;
  background: #061220;
  border: 1px solid var(--tp-line);
  border-radius: 8px;
  color: #F2F3F5;
  font: inherit;
  font-size: .95rem;
  padding-inline: .85rem;
  padding-block: .7rem;
}

.tumg .cfield textarea { resize: vertical; }

.tumg .cfield input:focus-visible,
.tumg .cfield select:focus-visible,
.tumg .cfield textarea:focus-visible {
  border-color: var(--tp-gold);
  outline: 2px solid var(--tp-gold);
  outline-offset: 1px;
}

.tumg .cform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.tumg .cform__foot .pill { border: 0; cursor: pointer; }
.tumg .cform__note { font-size: .85rem; color: var(--tp-gold); min-block-size: 1.2em; }

/* On a phone. iOS Safari ZOOMS THE WHOLE PAGE IN whenever a field smaller than
   16px takes focus, and it does not zoom back out — so tapping Name left the
   reader stuck on a magnified page. */
@media (max-width: 46rem) {
  .tumg .cfield input,
  .tumg .cfield select,
  .tumg .cfield textarea { font-size: 16px; }
}

/* Thumb-sized targets on a phone, measured rather than assumed: every pill was
   37px tall and every social icon 20px square, against a 44px guideline. The
   pills grow. The icons keep their drawn size and gain the hit area as padding
   with a matching negative margin, so the row looks identical and the boxes sit
   edge to edge on the 36px pitch rather than overlapping. */
@media (max-width: 46rem) {
  .tumg .pill { min-block-size: 44px; padding-block: 0; }
  .tumg .soc {
    padding: 13px 8px;
    margin: -13px -8px;
    width: auto;
    height: auto;
    box-sizing: content-box;
  }
}

/* ------------------------------------------------------- evidence panel -- */

/* The phrase opens information in place rather than navigating, so it is a
   button by role — but a span, not a <button>. It has to LOOK interactive, so it
   carries a drawn underline and a small signal mark rather than relying on
   colour alone. */
.tumg .evid { display: inline; font: inherit; }
/* Only a control once the script has said so. */
.tumg .evid.is-live { color: #EDE3D2; cursor: pointer; }

/* The underline is a repeating background, not an absolutely positioned SVG.
   An absolute child of a wrapped inline gets ONE containing block, so the drawn
   mark stretched across the whole phrase in a single stroke under the last
   line. A background repeats per line box, and `clone` gives every fragment its
   own — so each wrapped line is underlined, which is what a pen would do. */
.tumg .evid.is-live .evid__ph {
  color: #F6EEDD;
  text-decoration: underline;
  text-decoration-color: rgba(229, 192, 126, .85);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3.5px;
  /* One continuous stroke. Left to itself the browser breaks the line around
     every descender, so "people already" chopped it into four pieces. */
  text-decoration-skip-ink: none;
  transition: text-decoration-color .2s var(--ease), color .2s var(--ease);
}
.tumg .evid:hover .evid__ph,
.tumg .evid:focus-visible .evid__ph {
  color: #FFFFFF;
  text-decoration-color: #FFE3A8;
  text-decoration-thickness: 2px;
}

.tumg .evid:hover { color: #FFFFFF; }
.tumg .evid:focus-visible { outline: 2px solid var(--tp-gold); outline-offset: 3px; border-radius: 3px; }

.tumg .evid__scrim {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(4, 11, 19, .62);
  backdrop-filter: blur(2px);
}

.tumg .evid__panel {
  position: fixed;
  z-index: 130;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(30rem, 100%);
  overflow-y: auto;
  background: #0A1826;
  border-inline-start: 1px solid rgba(229, 192, 126, .35);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: -28px 0 60px rgba(0, 0, 0, .5);
}

@keyframes evid-in { from { translate: 100% 0; } }
.tumg .evid__panel:not([hidden]) { animation: evid-in .34s var(--ease); }

/* On a phone it is a sheet from the bottom, which is where a thumb is. */
@media (max-width: 40rem) {
  .tumg .evid__panel {
    inset: auto 0 0 0;
    inline-size: 100%;
    max-block-size: 86dvh;
    border-inline-start: 0;
    border-block-start: 1px solid rgba(229, 192, 126, .35);
    border-start-start-radius: 14px;
    border-start-end-radius: 14px;
    /* Clear of the home indicator on a phone that has one. */
    padding-block-end: calc(clamp(1.6rem, 3vw, 2.4rem) + env(safe-area-inset-bottom));
  }
  @keyframes evid-in { from { translate: 0 100%; } }
}

@media (prefers-reduced-motion: reduce) {
  .tumg .evid__panel:not([hidden]) { animation: none; }
}

/* The page's `.eyebrow + *` rhythm rule was reaching the close button here and
   dropping it 14px below its own title. Centre on the title instead. */
.tumg .evid__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tumg .evid__head .eyebrow + * { margin-block-start: 0; }

.tumg .evid__close {
  flex: 0 0 auto;
  inline-size: 34px;
  block-size: 34px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--tp-line);
  border-radius: 50%;
  color: var(--tp-body);
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}

.tumg .evid__close:hover { color: #FFFFFF; border-color: var(--tp-gold); }
.tumg .evid__close svg { inline-size: 15px; block-size: 15px; }

/* 34px is a fine target for a mouse and too small for a thumb. This has to sit
   AFTER the rule above, not up with the sheet's own media query: same
   specificity, so source order decides it. */
@media (max-width: 40rem) {
  .tumg .evid__close { inline-size: 44px; block-size: 44px; }
  .tumg .evid__close svg { inline-size: 17px; block-size: 17px; }
}

.tumg .evid__stats { margin-block-start: 1.6rem; display: grid; gap: 1.3rem; }
.tumg .evid__stats > div { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }

.tumg .evid__stats dt {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--tp-gold);
  font-variant-numeric: tabular-nums;
}

.tumg .evid__stats dd { margin: 0; font-size: .92rem; line-height: 1.6; color: #BAC3CC; }

.tumg .evid__take {
  margin-block-start: 1.6rem;
  padding-block-start: 1.3rem;
  border-block-start: 1px solid var(--tp-line);
  font-family: var(--font-serif);
  font-size: 1.16rem;
  line-height: 1.4;
  color: #FFFFFF;
}

.tumg .evid__src { margin-block-start: 1.1rem; font-size: .8rem; color: var(--paper-45); }
.tumg .evid__src a { color: var(--tp-gold); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------- contact's lit parcels -- */

/* Four parcels beside the form. One lights per completed required field; the
   last pulses when the message is sent. The same idea as the About page's
   build, at the scale of a single interaction. */
.tumg .cnodes {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -1.9rem;
  display: grid;
  gap: .55rem;
  padding-block-start: .35rem;
}

@media (max-width: 62rem) { .tumg .cnodes { display: none; } }

.tumg .cnode {
  inline-size: 11px;
  block-size: 11px;
  border: 1px solid rgba(229, 192, 126, .34);
  border-radius: 2px;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease);
}

.tumg .cnode.is-focus { border-color: var(--tp-gold); }
.tumg .cnode.is-lit {
  background: rgba(229, 192, 126, .75);
  border-color: var(--tp-gold);
  box-shadow: 0 0 0 3px rgba(229, 192, 126, .12);
}

@keyframes cnode-sent {
  0%   { box-shadow: 0 0 0 0 rgba(255, 224, 168, .55); }
  100% { box-shadow: 0 0 0 16px rgba(255, 224, 168, 0); }
}
.tumg .cnode--end.is-sent { animation: cnode-sent .9s var(--ease); }

.tumg .cform { position: relative; }

/* ----------------------------------------------------- the progress rail -- */

/* Six city nodes down the left edge, filling as the reader reaches Mission,
   Beliefs, Model, Story, Team and Closing. Hidden on small screens, where it
   would compete with the content it is describing. */
.tumg .pmark { display: none; }

/* 105rem, not 82rem. The rail is fixed to the left edge and runs ~70px wide;
   the content wrap only clears it once the viewport is wide enough to give the
   wrap a margin bigger than that. At 82rem the rail sat ON the thesis heading.
   Measured: overlap at 1440 and 1600, clear at 1920. */
@media (min-width: 105rem) {
  .tumg .pmark {
    position: fixed;
    inset-block-start: 50%;
    inset-inline-start: clamp(.9rem, 1.8vw, 1.9rem);
    translate: 0 -50%;
    z-index: 40;
    display: block;
    pointer-events: none;
  }

  .tumg .pmark ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.05rem; }

  .tumg .pmark li { display: flex; align-items: center; gap: .6rem; }

  .tumg .pmark span {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 1px;
    border: 1px solid rgba(229, 192, 126, .38);
    transition: background-color .4s var(--ease), border-color .4s var(--ease);
  }

  .tumg .pmark i {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: transparent;
    transition: color .4s var(--ease);
  }

  .tumg .pmark li.is-on span { background: var(--tp-gold); border-color: var(--tp-gold); }
  .tumg .pmark li.is-on i { color: #6F7C89; }
}

@media (prefers-reduced-motion: reduce) {
  .tumg .cnode, .tumg .pmark span, .tumg .pmark i { transition: none; }
  .tumg .cnode--end.is-sent { animation: none; }
}

/* ========================================================== URBAN FABRIC ==
 * The brand's background language, replacing the diamond weave: irregular
 * blocks, streets at three weights, small parcels, one dashed transit route
 * with stops, civic nodes and two contour lines. Appended at the end of the
 * sheet deliberately — an earlier attempt to weave these rules into the middle
 * silently failed to match and shipped nothing.
 */

.tumg .why,
.tumg .aclose,
.tumg .believe,
.tumg .cpage { position: relative; overflow: clip; }

.tumg .fabric__layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .4;
  -webkit-mask-image: radial-gradient(125% 95% at 28% 62%, #000 10%, transparent 76%);
  mask-image: radial-gradient(125% 95% at 28% 62%, #000 10%, transparent 76%);
}

.tumg .fabric__layer--close {
  opacity: .34;
  -webkit-mask-image: radial-gradient(135% 105% at 50% 100%, #000 6%, transparent 70%);
  mask-image: radial-gradient(135% 105% at 50% 100%, #000 6%, transparent 70%);
}

/* On the cream band it needs a fraction of the presence to read. */
.tumg .fabric__layer--cream { }

/* On contact it starts under the statement and runs toward the form. */
.tumg .fabric__layer--contact {
  opacity: .5;
  -webkit-mask-image: linear-gradient(102deg, #000 0%, rgba(0,0,0,.5) 48%, transparent 88%);
  mask-image: linear-gradient(102deg, #000 0%, rgba(0,0,0,.5) 48%, transparent 88%);
}

/* One plan drawn landscape, one drawn portrait; a phone gets the portrait one.
   The landscape plan lost two thirds of its width to the crop on a narrow
   screen, and the few strokes left read as rules struck through the headline. */
.tumg .fabric__layer--tall { display: none; }
@media (max-width: 46rem) {
  .tumg .fabric__layer--wide { display: none; }
  .tumg .fabric__layer--tall { display: block; opacity: .34; }
}

.tumg .fabric { inline-size: 100%; block-size: 100%; display: block; }

.tumg .why__in,
.tumg .aclose__in,
.tumg .believe .twrap { position: relative; z-index: 1; }

/* STACKED LAYOUTS MUST LEAVE ROOM FOR THE COPY ABOVE THEM. Below 64rem the
   drawing sits under the copy; uncapped it took the full column width and, at
   a 900px-wide window, alone outgrew the screen -- the pinned hero then showed
   a slice of city and nothing else. The cap is in viewport height, because the
   question "does it fit" is a viewport question. */
@media (max-width: 63.99rem) {
  .tumg .about .ahero__art .civ {
    max-block-size: min(44vh, 23rem);
    inline-size: auto;
    margin-inline: auto;
  }
}

/* ============================================================== MOTION ==
 * Locked: one major sequence and a few meaningful details. The major sequence
 * is the city building as the page is read. The details are the three emblems
 * drawing, the founding year drawing, the underline under `local`, the progress
 * rail, and the two interactions (team plates, contact parcels).
 *
 * What was removed: the blanket fade-and-rise that every block used to get. A
 * page where everything moves has nothing that means anything when it does.
 */

.tumg .story__year {
  display: block;
  inline-size: min(100%, 26rem);
  block-size: auto;
  margin-block-start: 1.1rem;
  /* .38 was below the threshold at which an outlined numeral registers as a
     deliberate mark -- it read as a rendering artefact rather than the year the
     company started. */
  color: rgba(229, 192, 126, .62);
  overflow: visible;
}

.tumg .story__year text { stroke-dasharray: 1400; stroke-dashoffset: 0; }
.tumg .story__head.rise:not(.is-in) .story__year text { stroke-dashoffset: 1400; }

.tumg .story__head.rise.is-in .story__year text {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s var(--ease) .15s;
}

/* The active-page underline glides in rather than snapping. */
.tumg .thead__nav a { position: relative; text-decoration: none; }

.tumg .thead__nav a[aria-current="page"] {
  text-decoration: none;
  color: #FFFFFF;
}

.tumg .thead__nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -6px;
  block-size: 1px;
  background: var(--tp-gold);
  transform-origin: 0 50%;
  animation: nav-glide .5s var(--ease) both;
}

@keyframes nav-glide { from { scale: 0 1; } to { scale: 1 1; } }

@media (prefers-reduced-motion: reduce) {
  .tumg .story__year text { stroke-dashoffset: 0 !important; transition: none; }
  .tumg .thead__nav a[aria-current="page"]::after { animation: none; }
}

/* The rail is not part of the opening screen: six empty markers beside the
   hero read as stray artefacts. It fades in once the reader has passed it. */
@media (min-width: 105rem) {
  .tumg .pmark { opacity: 0; transition: opacity .5s var(--ease); }
  .tumg .pmark.is-live { opacity: 1; }
}

/* ================================================ MEASURED CORRECTIONS ==
 * Checked against the owner's numbers rather than eyeballed. Three misses:
 *   header → eyebrow was 87px  (spec 48–56)  — the hero column was centring
 *                                              its copy inside a 30rem box,
 *                                              which pushed the eyebrow down
 *   headline → body was 14px   (spec 24–28)
 *   reading measure was 53 ch  (spec 60–72)  — the hero column was narrower
 *                                              than the body's own max-width
 */
@media (min-width: 64rem) {
  .tumg .ahero { padding-block-start: clamp(1.5rem, 2.4vw, 2.5rem); }
  .tumg .ahero__in {
    align-content: start;
    min-block-size: 27rem;
  }
}

.tumg .about .ahero__copy { max-width: 34rem; }
/* (margin-block-start moved below; 2.2rem here was overridden and dead) */
.tumg .about > section { padding-block: clamp(3.5rem, 5.8vw, 5.75rem); }

/* Second measured pass. Clamps were resolving to the vw term rather than the
   cap, so the desktop values are stated explicitly at the breakpoint where the
   owner's numbers apply. */
@media (min-width: 64rem) {
  .tumg .about > section { padding-block: 5.6rem; }       /* 90px */
  .tumg .ahero { padding-block: 2.1rem 2.2rem; }
  .tumg .about .ahero__copy { max-width: 37rem; }         /* ~65 characters */
  /* Keeps the last line of a paragraph from ending on one stranded word, which
     left "where" alone at the end of a line with a stub of underline under it. */
  .tumg .about .ahero__copy p { text-wrap: pretty; }
  /* (see the single 1.7rem declaration further down) */
  .tumg .ahero__in { grid-template-columns: minmax(0, 37rem); }
}

/* Third measured pass, and the actual causes:
   · hero padding was losing to `.tumg .about > section` (0,2,1 beats 0,2,0),
     so the hero kept the generic 90px top and the eyebrow sat 91px down
   · the body cap was still 33rem (58 characters), not the 36 it looked like  */
@media (min-width: 64rem) {
  .tumg .about > section.ahero { }
}

.tumg .about .tbody { max-width: 36rem; }              /* ~63 characters */
.tumg .about .ahero .tbody--lead { max-width: 37rem; } /* ~65 characters */

/* 35px was now too tight — the spec is 48–56. */
@media (min-width: 64rem) {
  .tumg .about > section.ahero { }
}

/* The team row swipes on a phone; without a cue nobody knows there is more. */
/* (.crew__dots removed with the phone carousel it belonged to.) */

/* ------------------------------------------------ MEASURED: MOBILE 390 ----
 * header → eyebrow was 57px (spec 32–40) — the same specificity problem as
 * desktop: `.tumg .about > section` was beating the hero's own padding, and I
 * had only corrected it inside the desktop breakpoint.
 * headline → body was 35px (spec 24–28).
 * Body was 16.4px, which is on the small side of the owner's note that the
 * mobile type felt small.
 */
.tumg .about > section.ahero { padding-block: 2.2rem 1.4rem; }
.tumg .about .ahero .tbody--lead { margin-block-start: 1.6rem; }
.tumg .about .tbody { font-size: clamp(1.06rem, .99rem + .3vw, 1.14rem); }

@media (min-width: 64rem) {
  .tumg .about .ahero .tbody--lead { margin-block-start: 1.7rem; }
}

/* The lead paragraph carries its own font-size (0,4,0), which outranked the
   body rule — so raising `.about .tbody` alone left it at 16.4px. */
/* (font-size superseded by the measured lede scale at the end of this file) */

/* (The trigger's centred-text and forced-wrap problems were both the <button>
   element itself; it is now a span with role="button". Rules that patched the
   symptoms are gone with it.) */

/* --------------------------------------------- MEASURED: CONTACT PAGE ----
 * Same specificity trap as the hero: `.tumg .about > section` was setting the
 * contact band's padding, so header → eyebrow measured 56px against a 32–40
 * spec on mobile. Headline → body was 22px against 24–28.
 */
.tumg .about > section.cpage { padding-block: 2.2rem 2.6rem; }
.tumg .cpage .why__head .tbody { margin-block-start: 1.6rem; }

@media (min-width: 64rem) {
  .tumg .about > section.cpage { }
  .tumg .cpage .why__head .tbody { margin-block-start: 1.7rem; }
}

/* ---------------------------------------------- the section-padding trap --
 * `.tumg .about > section` (0,2,1) outranked every page's own padding rule and
 * silently won three times this session — the hero, the mobile hero, and the
 * contact band. Re-declared through :where(), which contributes NO specificity,
 * so a page-level rule now wins by default instead of by accident.
 */
.tumg .about > :where(section) { padding-block: clamp(3.5rem, 5.8vw, 5.75rem); }

@media (min-width: 64rem) {
  .tumg .about > :where(section) { padding-block: 5.6rem; }
}

/* ------------------------------------------------- pass 21 corrections ----
 * 1. REGRESSION: the mobile hero/contact padding I added last pass was written
 *    unscoped, so at equal specificity it won on desktop too and the hero's top
 *    gap dropped from 49px to 35px. Both are now inside a max-width query.
 * 2. The eyebrow gold on cream measured 3.5:1 — under AA for small text.
 * 3. The emblems render at 74px with a 1.53px stroke; a touch heavier reads as
 *    drawn rather than hairline.
 */
@media (max-width: 63.99rem) {
  .tumg .about > section.ahero { padding-block: 2.2rem 1.4rem; }
  .tumg .about > section.cpage { padding-block: 2.2rem 2.6rem; }
}

@media (min-width: 64rem) {
  .tumg .about > section.ahero { padding-block: 3rem 2.4rem; }
  .tumg .about > section.cpage { padding-block: 3rem 3.4rem; }
}

/* 4.9:1 against the cream, from 3.5 */
.tumg .believe .eyebrow { }

.tumg .emblem { stroke-width: 2.2; }

/* ==================================== EVIDENCE: TRENDS, NOT SNAPSHOTS ==
 * The panel used to state three present-day percentages, which is the weakest
 * form of the argument: a number on its own invites "compared with what?".
 * Each row now carries both sourced readings, the line between them and the
 * change, so the movement is the point and the reader can check it.
 */

.tumg .evid__trends { margin-block-start: 1.5rem; display: grid; gap: 1.45rem; }

.tumg .trend {
  display: grid;
  grid-template-columns: 7.4rem minmax(0, 1fr) auto;
  gap: 1.1rem;
  align-items: center;
  padding-block-end: 1.3rem;
  border-block-end: 1px solid rgba(255, 255, 255, .07);
}
.tumg .trend:last-child { border-block-end: 0; padding-block-end: 0; }

.tumg .trend__fig { display: grid; gap: .3rem; }

.tumg .trend__now {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  line-height: .92;
  color: var(--tp-gold);
  font-variant-numeric: tabular-nums;
}

/* The chart is kept narrow on purpose. Stretched to the panel width the curve
   flattened to a rule and the end marker drew as an ellipse. */
.tumg .trend__plot { position: relative; inline-size: 7rem; block-size: 30px; }
.tumg .trend__plot .spark { display: block; inline-size: 100%; block-size: 100%; }

.tumg .trend__from,
.tumg .trend__to {
  position: absolute;
  inset-block-end: -.55rem;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--paper-45);
}
.tumg .trend__from { inset-inline-start: 0; }
.tumg .trend__to { inset-inline-end: 0; }

.tumg .trend__body { margin: 0; min-inline-size: 0; }

/* The two readings in words, so the change is checkable without reading a
   curve -- the line shows the direction, this line is the evidence. */
.tumg .trend__math {
  margin-block-start: .4rem;
  font-size: .78rem;
  letter-spacing: .01em;
  color: var(--paper-45);
  font-variant-numeric: tabular-nums;
}

.tumg .trend__note {
  margin: 0;
  font-size: .875rem;
  line-height: 1.62;
  color: #BAC3CC;
}

/* Scope is not decoration: the report's US and global figures count different
   people, and a row that hid which one it was would be a false claim. */
.tumg .trend__scope {
  display: inline-block;
  margin-inline-end: .5em;
  padding: .1em .5em;
  border: 1px solid rgba(229, 192, 126, .34);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tp-gold);
  vertical-align: .12em;
}

.tumg .trend__delta {
  align-self: center;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: #9FD8B4;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tumg .trend__delta span {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-45);
}

/* On a narrow screen the three-column row was impossible: the figure column
   shrank but the chart did not, so the sparkline drew straight across the
   sentence beside it and the year labels landed on the words. The row stacks
   instead -- figure and chart on one line with the change at the right, the
   sentence beneath, full width. */
@media (max-width: 34rem) {
  .tumg .trend {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .55rem .9rem;
    align-items: center;
  }
  .tumg .trend__fig {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .tumg .trend__now { font-size: 2.1rem; }
  .tumg .trend__plot { inline-size: 5.5rem; flex: 0 0 auto; }
  .tumg .trend__delta { grid-column: 2; grid-row: 1; text-align: end; }
  .tumg .trend__body { grid-column: 1 / -1; grid-row: 2; }
}

/* The phrase's annotation is a drawn arrow in the margin, not a label. The
   words are the invitation; a permanent "Why this matters" next to them said
   the same thing twice and read as a button bolted onto a sentence. */
.tumg .evid__cue {
  display: inline-block;
  inline-size: 34px;
  block-size: 19px;
  margin-inline-start: .45em;
  vertical-align: -.28em;
  color: rgba(229, 192, 126, .72);
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.tumg .evid__cue svg { inline-size: 100%; block-size: 100%; }
.tumg .evid:hover .evid__cue { color: var(--tp-gold); transform: translateX(2px); }

/* ======================================= THE HERO AS A SCROLL TRACK ==
 * The city's whole construction happens inside the opening screen. The section
 * is several viewports tall and its contents stick, so scrolling drives the
 * build rather than moving the page. When the city is finished the sticky ends
 * and the reader continues into Why We Exist, having watched a city appear.
 *
 * `pin` is set on <html> by the script, and only when there is room and motion
 * is welcome. Without it every rule here is inert and the hero is a hero.
 */
.tumg .ahero__pin { position: relative; }

.pin .tumg .about > section.ahero {
  block-size: 340vh;
  padding-block: 0;
}

.pin .tumg .ahero__pin {
  position: sticky;
  inset-block-start: 0;
  min-block-size: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: start;
  padding-block: 3rem 1.4rem;
}

@media (max-width: 63.99rem) {
  .pin .tumg .about > section.ahero { block-size: 300vh; }
  .pin .tumg .ahero__pin { padding-block: 2.2rem 1.2rem; }
}

/* The hint retires once the reader has understood the gesture. */
.tumg .ahero__cue {
  display: none;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper-45);
  transition: opacity .4s var(--ease);
}
.pin .tumg .ahero__cue { display: flex; }
.tumg .ahero__cue svg { inline-size: 11px; block-size: 20px; }
.tumg .ahero[data-build="0"] .ahero__cue { opacity: 1; }
.tumg .ahero:not([data-build="0"]) .ahero__cue { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .tumg .ahero__cue svg { animation: cue-drift 2.4s var(--ease) infinite; }
}
@keyframes cue-drift {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* A thin gauge of how much city is left to build, along the foot of the pin. */
.tumg .ahero__pin::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: linear-gradient(90deg, var(--tp-gold), rgba(229, 192, 126, .35));
  transform: scaleX(var(--build, 0));
  transform-origin: 0 50%;
  opacity: 0;
  transition: transform .12s linear, opacity .3s var(--ease);
}
.pin .tumg .ahero__pin::after { opacity: .75; }
.pin .tumg .ahero[data-build="0"] .ahero__pin::after { opacity: 0; }

/* The routes light only when the city is finished. They ran from page load
   before, which said "this is a live network" while the reader was still
   watching foundations go in — and they ran forever, which is a screensaver.
   Three passes, then the city is simply a city. */
.tumg .civ .civ__pulse { animation-play-state: paused; opacity: 0; }
.tumg .civ.is-complete .civ__pulse {
  animation-play-state: running;
  /* Was three passes, then forwards -- so the light stopped for good, and on a
     slow scroll it had already finished before the reader reached the finished
     city. It runs for as long as the city is on screen; the hero's track is the
     only place the city exists, so this is not a screensaver. */
  animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
  .tumg .civ.is-complete .civ__pulse { animation: none; display: none; }
}

/* ============================== THE PARCHMENT BAND, SET INTO THE NAVY ==
 * It was a bright panel dropped on a dark site: a hard edge top and bottom and
 * a tone close to white. Deeper paper, navy dissolving in at both edges, and a
 * city along its foot, so it reads as a lit clearing in the same page rather
 * than a different website.
 */
.tumg .believe { background: #F2E4CB; }

/* The two hairlines are replaced by an actual transition. */
.tumg .believe::before,
.tumg .believe::after {                                                                                    ;
  pointer-events: none;
}
.tumg .believe::after {
}

.tumg .band__layer {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  /* Shorter again. At 196px the rooftops still ran up behind the third belief
     column and the buttons in the closing section sat on top of the buildings.
     A skyline read at this distance is a HORIZON -- a low line at the foot of
     the section -- not a wall of outlines standing behind the words. */
  block-size: clamp(62px, 8vw, 118px);
  z-index: 0;
  pointer-events: none;
  /* fades out upward so the silhouette sits in the paper rather than on it */
  /* Solid at the foot. Fading the silhouette out downward while the section's
     own navy edge faded in upward put two greys over each other and made the
     mud the owner saw. The buildings simply stand on the bottom edge. */
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 30%, transparent 96%);
  mask-image: linear-gradient(0deg, #000 0%, #000 30%, transparent 96%);
}
.tumg .band__layer .band { inline-size: 100%; block-size: 100%; display: block; }

/* On the deeper paper the fabric plan needs a touch more presence to survive. */
.tumg .fabric__layer--cream { opacity: .16; }

/* The copy sits above both layers. */
.tumg .believe .twrap { z-index: 1; }

/* Paper this warm needs its ink checked, not assumed. */
.tumg .believe .belief__p { color: #3D4F60; }

@media (max-width: 46rem) {
  /* On a phone the plan behind the paper is mostly crop; the silhouette alone
     carries the section and stays legible. */
  .tumg .believe .fabric__layer--cream { display: none; }
  .tumg .band__layer { block-size: 74px; }
}

/* (The contact route and its animation are gone. Removed at the owner's call:
   a lone dashed curve with a marker on the end does not explain itself, and an
   ornament that has to be explained is not doing any work.) */

/* ================================ AUDIT: HERO SIZE, BAND, CONTACT ==
 * Three things the owner saw and named.
 */

/* 1. The drawing ran below the copy and left a screen of empty navy under it.
      It is capped to the copy's own height and pinned beside it. */
@media (min-width: 64rem) {
  .tumg .about .ahero__in {
    grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
  }
  .tumg .about .ahero__art {
    align-self: center;
    margin-block: 0;
  }
  .tumg .about .ahero__art .civ {
    /* Was a flat 27.5rem, which capped the drawing at 440px inside a hero that
       is a whole viewport tall -- roughly 170px of empty navy sat under the
       finished city. The cap now follows the window, so the art fills the
       column it was given instead of floating in the top of it. */
    max-block-size: min(74vh, 46rem);
    inline-size: 100%;
    display: block;
  }
}

/* The pinned hero centres its content. `align-content: start` left the copy and
   the drawing stacked against the top of a full-height pin with dead space
   underneath -- the "too many empty spaces" the owner called out. */
.pin .tumg .about .ahero__pin { align-content: stretch; }
.pin .tumg .about .ahero__pin > .ahero__in { align-self: center; }

/* THE DRAWING AND THE HEADLINE MUST NOT TOUCH. The art layer is absolutely
   positioned at 60% width and bleeds off the right edge, while the headline is
   capped in characters rather than in pixels -- so at some widths the last line
   of the headline ran under the drawing's left-hand device. Both sides are now
   bounded: the headline cannot leave its column, and the art starts after it. */
/* THE DRAWING WAS ABSOLUTELY POSITIONED OVER THE COPY. At 60% of the viewport
   inset from the right it cleared the text at 1440 and ran straight through it
   at 1180 and 1024 -- the body paragraph was being read through a city. A
   bleed that only works at some widths is not a bleed, it is a collision. The
   art goes back into its own grid column, where it cannot reach the copy at any
   width, and keeps a small negative margin so it still runs toward the edge. */
@media (min-width: 64rem) {
  .tumg .about .ahero__art {
    position: static;
    inline-size: auto;
    inset: auto;
    margin-inline-end: clamp(-3.5rem, -2.5vw, -1rem);
  }
  .tumg .about .ahero__copy .disp { max-width: min(15ch, 100%); }
}

/* 2. The band's edges. A hard navy-to-cream ramp over 88px read as a smear
      between two colours; a longer ramp through a mid tone reads as light. */
.tumg .believe::before,
.tumg .believe::after {
  /* A CRISP EDGE, not a fade.
     Navy and cream are near-opposites in value; any gradient between them
     passes through grey, so every "soft transition" tried here landed as a
     dirty smear across the top of the paper. The reference mockup meets them
     edge to edge, and that is the only version of this that looks deliberate.
     A single gold hairline marks the join. */
  z-index: 2;
  block-size: 1px;
  background: rgba(229, 192, 126, .38);
}
.tumg .believe::before { inset-block-start: 0; }
.tumg .believe::after { inset-block-end: 0; }

/* The skyline is a light impression on the paper, not an ink stain. */
.tumg .band__layer { color: #4C7196; opacity: .62; }

/* 3. Contact: the plan ran straight under the labels and the inputs, so the
      form was read through a drawing. It now stops before the form column. */
@media (min-width: 46rem) {
  .tumg .fabric__layer--contact {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.55) 34%, transparent 50%);
    mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.55) 34%, transparent 50%);
  }
}
@media (max-width: 45.99rem) {
  /* On a phone the plan stays, but only above the form: masked to the band's
     top third, so it sits behind the heading and never behind an input.
     Hiding it outright left the page with no illustration at all. */
  .tumg .fabric__layer--contact {
    display: block;
    opacity: .42;
    /* Gone before the first label. At 62% the plan still ran behind Name and
       Email, which is the confusion the owner reported on desktop. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 17%, transparent 27%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 17%, transparent 27%);
  }
}

/* =========================== COLUMNS ARRIVING, ONE AFTER ANOTHER ==
 * The three beliefs used to fade in together with a token 90ms between them,
 * which is not something a reader notices. Each column now rises, and the rule
 * beside it draws down from the top as it arrives, so the section assembles
 * left to right as you reach it.
 */
.tumg .believe__cols .rise {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.tumg .believe__cols .rise.is-in { opacity: 1; transform: none; }
.tumg .believe__cols .rise:nth-child(1) { transition-delay: 0s; }
.tumg .believe__cols .rise:nth-child(2) { transition-delay: .16s; }
.tumg .believe__cols .rise:nth-child(3) { transition-delay: .32s; }
.tumg .believe__cols .rise:nth-child(4) { transition-delay: .48s; }

/* The dividing rule is drawn, not switched on. */
.tumg .believe .belief + .belief { position: relative; border-inline-start-color: transparent; }
.tumg .believe .belief + .belief::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -1px;
  inline-size: 1px;
  block-size: 100%;
  background: rgba(12, 26, 39, .16);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .8s var(--ease);
}
.tumg .believe .belief.is-in + .belief::before,
.tumg .believe__cols .rise.is-in + .belief::before { transform: scaleY(1); }
.tumg .believe .belief + .belief.is-in::before { transform: scaleY(1); transition-delay: .12s; }

/* The emblem draws after its column has settled, not at the same moment. */
.tumg .believe__cols .rise:nth-child(2) .emblem { transition-delay: .22s; }
.tumg .believe__cols .rise:nth-child(3) .emblem { transition-delay: .38s; }
.tumg .believe__cols .rise:nth-child(4) .emblem { transition-delay: .54s; }

@media (max-width: 57.99rem) {
  .tumg .believe .belief + .belief::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tumg .believe__cols .rise { opacity: 1; transform: none; transition: none; }
  .tumg .believe .belief + .belief::before { transform: scaleY(1); transition: none; }
}

/* The owner's brand mock (DesignInspiration.png, 2026-08-05) grades the hero
   skyline into a near-monochrome city colour over black. The base .grade above
   is a tint; this takes the city sites the rest of the way to that duotone.
   Scoped to .city-*, so the parent brand's hero — being finished in a parallel
   session — keeps exactly the treatment it was signed off with.

   This block is where the duotone actually happens, and it is worth being
   precise about why the earlier version was not one. `mix-blend-mode: color`
   keeps the photograph's own LUMINANCE and swaps its hue: a sky stays a sky,
   only redder. At 34% opacity over a photograph still carrying 55% of its own
   saturation, that is a wash, which is why the hero read muddy brown against
   the reference instead of graphic.

   A duotone maps one tone ramp onto two colours. So: strip the photograph to
   greyscale, push its contrast so the ramp uses its full range (a flat
   histogram duotones into flat colour), then MULTIPLY a coral over it. Multiply
   maps white to coral and black to black, which is the two-tone look in the
   mock. The gradient stays inside the accent family the whole way down rather
   than falling to near-black, because the darkening at the foot of the hero is
   the scrim's job and doing it twice is what crushed the first attempt. */
.city-atlanta .grade img {
  filter: grayscale(1) contrast(1.3) brightness(1.06);
  /* The supplied hero is a watermarked Adobe Stock comp. Two watermarks, and
     this only fixes one of them: the legible "Adobe Stock | #504615810" running
     down the left edge is cropped out by scaling 12% from the centre, about
     86px a side at desktop width. The tiled diagonal one is across the whole
     frame at every size, so no crop reaches it -- the greyscale-and-multiply
     above is what makes it nearly invisible, and only the owner's own
     photograph actually removes it. Dropping that in at
     site/assets/hero-atlanta.jpg makes this line a no-op rather than a lie. */
  transform: scale(1.12);
  transform-origin: center;
}

.city-atlanta .grade::before {
  background: linear-gradient(172deg,
              var(--grade-top) 0%,
              var(--grade-top) 42%,
              var(--accent-dk) 78%,
              var(--grade-bot) 100%);
  mix-blend-mode: multiply;
  opacity: .92;
}

/* Savannah keeps the tint, and this is a decision rather than an oversight.
   A duotone needs a photograph with a real light-to-dark ramp; it is a map from
   tone to colour, so a picture with no tonal structure has nothing to map. The
   Atlanta hero is architecture against a bright sky and takes it beautifully.
   The Savannah hero is a live-oak canopy: at grayscale and 1.3 contrast the
   whole frame collapses to one mottled midtone, and gold multiplied over that
   is olive mud. Better a tinted photograph than a ruined one.
   Revisit when Savannah has a hero of its own with some sky in it. */
.city-savannah .grade img { filter: saturate(.55) contrast(1.06) brightness(.66); }
.city-savannah .grade::before { opacity: .34; }

/* The colour layer never reached the picture. `.grade::before` is a pseudo-
   element, so it paints as the FIRST child of .grade — underneath the <img>,
   which is a real child painted after it. Only `::after` (last child) was ever
   visible, which is why the hero read as an ungraded photograph behind a dark
   scrim no matter what colour the blend layer was set to. Explicit z-index puts
   the three layers in the order the design assumes: photo, colour, scrim. */
.grade picture { display: contents; }
.grade img { position: relative; z-index: 0; }
.grade::before { z-index: 1; }
.grade::after  { z-index: 2; }

/* ================================== AUDIT: THE REMAINING FOUR GAPS ==
 * Checked against the brief rather than against the last screenshot.
 */

/* --- gap 3: a phone should not scroll four screens of construction. The build
       thresholds compress so the same city arrives in about three felt moves,
       and the track is shorter to match. */
@media (max-width: 46rem) {
  .pin .tumg .about > section.ahero { block-size: 250vh; }
}

/* --- gap 4: every dark section was the same navy, so the page read as one
       long field with headings in it. Alternating tone gives the reader an
       edge to feel: the argument sections sit a shade above the base. */
.tumg .about > section.why,
.tumg .about > section.story { background: #0C1F30; }
.tumg .about > section.thesis { background: #0A1A28; }
.tumg .about > section.crew { background: #0C1F30; }
.tumg .about > section.aclose { background: #081521; }

/* A hairline where two tones meet, so the change reads as intent. */
.tumg .about > section.why,
.tumg .about > section.thesis,
.tumg .about > section.story,
.tumg .about > section.crew,
.tumg .about > section.aclose { border-block-start: 1px solid rgba(229, 192, 126, .09); }

/* --- gap 5: the team plates simply faded in with everything else. They now
       wipe open from the bottom, which is the gesture a photograph will want
       when the portraits arrive. */
.tumg .person__frame,
.tumg .person .ph,
.tumg .person svg {
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 var(--wipe, 100%), transparent calc(var(--wipe, 100%) + 6%));
  mask-image: linear-gradient(0deg, #000 0%, #000 var(--wipe, 100%), transparent calc(var(--wipe, 100%) + 6%));
  transition: --wipe 1.1s var(--ease);
}
@property --wipe {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
.tumg .crew .rise .person__frame,
.tumg .crew .rise .ph,
.tumg .crew .rise svg { --wipe: 0%; }
.tumg .crew .rise.is-in .person__frame,
.tumg .crew .rise.is-in .ph,
.tumg .crew .rise.is-in svg { --wipe: 100%; }
.tumg .crew .rise:nth-child(2).is-in svg { transition-delay: .12s; }
.tumg .crew .rise:nth-child(3).is-in svg { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .tumg .person__frame, .tumg .person .ph, .tumg .person svg {
    /* Wider, so the motif holds more of the right half -- but gone well before
     the copy. The previous fade still had the backbone crossing the paragraph;
     with a centred text column the artwork has to be finished by ~56% of the
     layer, not 94%. */
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.92) 24%, transparent 56%);
  mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.92) 24%, transparent 56%); transition: none;
  }
}

/* (No closing-section padding override. The "empty navy before the footer" was
   a screenshot window taller than the page, not the page. Measured: the footer
   begins 0px after the closing section ends.) */

/* The contact band's two columns are very different heights -- a heading and one
   sentence against a five-field form -- so the left column sat high with a
   quarter of the section empty beneath it. Centred against the form, the two
   read as one composition. */
@media (min-width: 46rem) {
  .tumg .cpage .why__in { align-items: center; }
  .tumg .cpage .why__head { align-self: center; }
}

/* ============================================ MEASURED: THE TYPE SCALE ==
 * Measured rather than eyeballed, at 1440 and 390. Three faults:
 *
 *   lede 19.2 / body 18.2   a ratio of 1.05 -- the "lead" paragraph was not a
 *                           level at all, it was body text with a name
 *   closing h2 49.6 / other h2 45.6
 *                           two heading sizes four pixels apart read as an
 *                           inconsistency, never as hierarchy
 *   phone h1 37.6 / h2 30.4 a step of 1.24x where desktop steps 1.58x, so the
 *                           page flattened out on the screen most people use
 */

/* The hero holds its size on a phone. */
.tumg .about .ahero .disp { font-size: clamp(2.6rem, 1.2rem + 3.8vw, 4.5rem); }

/* A lede that is actually a lede. Four classes, not three: an earlier
   `.tumg .about .ahero .tbody--lead` rule outranked the first attempt and the
   size did not move at all. */
.tumg .about .ahero .tbody--lead {
  font-size: clamp(1.18rem, 1.02rem + .5vw, 1.38rem);
  line-height: 1.62;
}

/* The closing line is the page's last word, so it is deliberately the largest
   thing after the hero -- a clear step, not an accidental four pixels. */
.tumg .about .aclose__in .disp--2 { font-size: clamp(2.1rem, 1.15rem + 3vw, 3.5rem); }

/* The two lines that became headings this pass keep the sizes they had; only
   their element changed, so the page's look is unaltered and a screen reader
   now gets "Why we exist" and the business model as landmarks. */
.tumg .why__big,
.tumg .thesis__head { margin: 0; }

/* V3 §3.1: on mobile the header carries the logo and ONE menu button. The
   Work With Us button was rendering beside the hamburger, which is the "two
   large controls" the spec rules out; it already appears inside the menu. */
@media (max-width: 61.99rem) {
  .site-header__bar > .btn { display: none; }
}

/* =============================================== MOTION: A REAL SYSTEM ==
 * Audited this pass. Every transition and every keyframe on the page used one
 * curve -- `--ease`, a mild ease-out -- for entrances, line draws, hovers and a
 * 38-second ambient loop alike. One curve for every job is precisely what makes
 * motion read as mechanical: nothing has a character of its own, and nothing
 * behaves the way the eye expects that KIND of movement to behave.
 *
 * Four curves, each with a job. Scoped to the About and Contact pages so the
 * locked homepage keeps its own motion exactly as approved.
 */
.tumg .about {
  /* things ARRIVING: fast off the mark, long settle. The premium feel. */
  --e-enter: cubic-bezier(.16, 1, .3, 1);
  /* small moves and hovers: short and confident, no float */
  --e-quick: cubic-bezier(.3, .9, .35, 1);
  /* a line being DRAWN: eased at both ends, the way a hand starts and stops */
  --e-draw: cubic-bezier(.62, .04, .3, 1);
  /* ambient loops: symmetrical, so the turnaround is not a visible flick */
  --e-amb: cubic-bezier(.45, 0, .55, 1);
}

/* Entrances. Longer than before, and the distance scales with the element:
   a display heading travelling the same 16px as a caption is what made every
   section arrive with the same anonymous nudge. */
/* `:not(.is-in)` is load-bearing: unscoped, these tie with `.tumg .rise.is-in`
   on specificity and win by being later, so a revealed element settled 14px
   below where it belongs and never actually landed. */
.tumg .about .rise:not(.is-in) { translate: 0 14px; }
.tumg .about .rise.is-in {
  transition: opacity .78s var(--e-enter), translate .78s var(--e-enter);
}
.tumg .about .rise:not(.is-in):has(.disp),
.tumg .about .rise.story__head:not(.is-in),
.tumg .about .rise.believe__head:not(.is-in) { translate: 0 26px; }

.tumg .about .believe__cols .rise {
  transform: translateY(26px);
  transition: opacity .8s var(--e-enter), transform .8s var(--e-enter);
}

/* Draws: the emblems, the founding year, the underline under `local`. These are
   the page's signature details and they should feel drawn, not switched on. */
.tumg .about .belief.rise.is-in .emblem path,
.tumg .about .belief.rise.is-in .emblem circle {
  transition: stroke-dashoffset 1.15s var(--e-draw);
}
.tumg .about .story__head.rise.is-in .story__year text {
  transition: stroke-dashoffset 1.5s var(--e-draw) .15s;
}
.tumg .about .rise.is-in .ulined__mark path {
  transition: stroke-dashoffset .95s var(--e-draw) .3s;
}
.tumg .about .believe .belief + .belief::before {
  transition: transform .9s var(--e-draw);
}

/* The drawing's ambient breath ran on `linear`, so it changed direction with a
   visible flick every 38 seconds. */
.tumg .about .ahero__art .civ { animation-timing-function: var(--e-amb); }

/* Hovers stay short: anything over ~200ms on a pointer feels like lag. */
.tumg .about .pplate { transition: transform .22s var(--e-quick); }
.tumg .about .evid__ph {
  transition: text-decoration-color .18s var(--e-quick), color .18s var(--e-quick);
}

@media (prefers-reduced-motion: reduce) {
  .tumg .about .rise,
  .tumg .about .believe__cols .rise { transition: none; }
}

/* ======================================================= homepage §3.4-3.9 ==
   The homepage stopped being an approval mock. These are the sections the V3
   spec names, built on the same chassis as everything else: .section, .wrap,
   .mcard, .sfilter and .btn are reused, and only the compositions that are new
   to the homepage live here. */

/* §3.4 "One large lead update using approximately half the width on desktop.
   Three supporting update cards beside or below it." */
.lede-grid { display: grid; gap: var(--sp-4); }

@media (min-width: 64rem) {
  .lede-grid { grid-template-columns: 1.05fr .95fr; gap: var(--sp-5); align-items: start; }
}

.lede-grid__rest { display: grid; gap: var(--sp-4); }

@media (min-width: 40rem) and (max-width: 63.99rem) {
  .lede-grid__rest { grid-template-columns: repeat(2, 1fr); }
}

.leadcard {
  display: flex;
  flex-direction: column;
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 0;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}

.leadcard:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.leadcard__link { display: block; }
.leadcard__link img, .leadcard__link svg { transition: transform .4s var(--ease); }
.leadcard:hover .leadcard__link img { transform: scale(1.02); }

.leadcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-inline: var(--sp-4);
  padding-block: var(--sp-4);
  flex: 1;
  min-width: 0;
}

.leadcard__title { font-size: var(--step-2); line-height: 1.13; letter-spacing: -.018em; }
.leadcard__title a:hover { color: var(--accent); }
.leadcard__sum { color: var(--paper-70); font-size: var(--step-0); line-height: 1.55; }

/* §3.5 "This section must look like a product, not a paragraph." */
.devsplit { display: grid; gap: var(--sp-5); }

@media (min-width: 64rem) {
  .devsplit { grid-template-columns: 1fr .82fr; gap: var(--sp-6); align-items: start; }
}

.devsplit__copy { display: grid; gap: var(--sp-3); justify-items: start; }
.devsplit__h {
  font-size: var(--step-3);
  line-height: 1.06;
  letter-spacing: -.028em;
  max-width: 15ch;
}
.devsplit__copy .psearch { width: 100%; margin-block-start: var(--sp-2); }
.sfilter--tight { margin-block-start: 0; }
.devsplit__note { font-size: var(--step--1); color: var(--paper-45); max-width: 42ch; }
.devsplit__panel { display: grid; gap: var(--sp-3); }

.intel__tl {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tl--mini li { border-inline-start-color: var(--accent-15); }
.tl--mini .tl__what { font-size: var(--step--1); }

/* §3.7 "Warm cream section to break the dark-page rhythm." The one light band
   on the page, so the newsletter reads as a different kind of thing. */
.band--cream {
  background: var(--cream, #FDF4E1);
  color: #172230;
  --paper: #172230;
  --paper-70: #4A5666;
  --paper-45: #6E7A8A;
  --line: rgba(23, 34, 48, .16);
  --navy-800: rgba(255, 255, 255, .55);
}
.band--cream .kicker { color: var(--accent-dk); }

.briefsplit { display: grid; gap: var(--sp-5); align-items: center; }

@media (min-width: 64rem) {
  .briefsplit { grid-template-columns: 1fr .8fr; gap: var(--sp-6); }
}

.briefsplit__h {
  font-size: var(--step-3);
  line-height: 1.05;
  letter-spacing: -.028em;
  margin-block-start: var(--sp-2);
  max-width: 16ch;
}
.briefsplit .lede { color: #3C4858; margin-block-start: var(--sp-3); max-width: 46ch; }
.briefsplit__benefit { margin-block-start: var(--sp-2); font-weight: 600; color: #172230; }

.briefsplit__list {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: grid;
  gap: .5rem;
  max-width: 34rem;
}
.briefsplit__list li {
  position: relative;
  padding-inline-start: 1.4rem;
  font-size: var(--step-0);
  color: #3C4858;
}
.briefsplit__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .55em;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--accent-dk);
}

.signup--big { margin-block-start: var(--sp-4); }
.signup--big input {
  padding: .95rem 1.1rem;
  background: #fff;
  border-color: rgba(23, 34, 48, .22);
  color: #172230;
}
.briefsplit__proof {
  margin-block-start: var(--sp-3);
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6E7A8A;
}
.briefsplit__art { display: grid; }
.briefsplit__art svg, .briefsplit__art img { width: 100%; height: auto; border-radius: var(--radius); }

/* §3.8 the two offers */
.offer-grid { display: grid; gap: var(--sp-4); margin-block-end: var(--sp-5); }

@media (min-width: 52rem) { .offer-grid { grid-template-columns: repeat(2, 1fr); } }

.offer {
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
  align-content: start;
  padding: var(--sp-5);
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease);
}
.offer:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.offer h3 { font-size: var(--step-1); line-height: 1.2; }
.offer p { color: var(--paper-70); line-height: 1.55; }

/* §3.9 about preview */
.aboutsplit { display: grid; gap: var(--sp-5); align-items: center; }

@media (min-width: 64rem) {
  .aboutsplit { grid-template-columns: 1fr .85fr; gap: var(--sp-6); }
}

.aboutsplit__h {
  font-size: var(--step-2);
  line-height: 1.1;
  letter-spacing: -.024em;
  margin-block-start: var(--sp-2);
  max-width: 18ch;
  text-wrap: balance;
}
.aboutsplit__p { color: var(--paper-70); line-height: 1.65; max-width: 52ch; margin-block-start: var(--sp-3); }
.aboutsplit .btn { margin-block-start: var(--sp-4); }
.aboutsplit__art svg { width: 100%; height: auto; border-radius: var(--radius); display: block; }

/* The newsletter mockup: a browser chrome around a screenshot of the real
   rendered issue. §3.7 asks for the existing render as the visual source, so
   nothing here draws a fake newsletter. */
.mock {
  border-radius: 12px;
  overflow: hidden;
  background: #E7E2D6;
  box-shadow: 0 22px 60px rgba(10, 20, 29, .28), 0 2px 6px rgba(10, 20, 29, .18);
  border: 1px solid rgba(23, 34, 48, .12);
}

.mock__bar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 9px 12px;
  background: #DAD4C6;
}

.mock__bar span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(23, 34, 48, .22);
}

/* The screenshot is a tall page; the card shows its top and fades out rather
   than scaling the whole issue down to illegibility. */
.mock__screen { position: relative; max-height: 30rem; overflow: hidden; }
.mock__screen img { width: 100%; height: auto; display: block; }
.mock__screen::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 6rem;
  background: linear-gradient(transparent, #FDF4E1);
}

/* ==================================== SECTION RHYTHM, MEASURED ==
 * Measured across the full scroll at 1440:
 *
 *   hero 596h  85% content        why  417h  57%
 *   believe 609h  77%             thesis 416h  57%
 *   story 494h  64%               crew 717h  77%   closing 707h  73%
 *
 * Two faults. Every section carried the same 90px of padding whether it held
 * 237px of content or 551px, so the two short ones are 43% air. And `why` and
 * `thesis` are the same height, the same fill and the same two-column layout --
 * the page plays the same beat twice, which is the segmentation problem.
 *
 * The business-model line becomes a CENTRED statement band instead: a narrower
 * measure, its own alignment, and less air. It now reads as a pivot between the
 * argument and the story rather than as a second "why we exist".
 */
@media (min-width: 62rem) {
  .tumg .about > section.thesis { padding-block: 5.5rem; }
  /* One line across the top rather than three lines stacked in the left
     quarter with the rest of the row empty above the claims. */
  .tumg .thesis__head { max-width: none; font-size: clamp(1.8rem, 1rem + 2vw, 2.7rem); }
}

/* ------------------------------------------------ the model, as three claims --
 * This was one centred paragraph in the middle of a very wide dark section:
 * about a third of the screen carrying text and two-thirds carrying nothing,
 * with a silhouette motif dropped behind the words to fill the gap. The heading
 * names three things, so the section is three things. The width is used by
 * STRUCTURE now, not by decoration.
 */
.tumg .claims {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 2.4rem 2.6rem;
}

@media (min-width: 56rem) {
  .tumg .claims { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tumg .claim { border-block-start: 1px solid rgba(229, 192, 126, .22); padding-block-start: 1rem; }

.tumg .claim__n {
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .74rem;
  letter-spacing: .14em;
  color: rgba(229, 192, 126, .72);
}

.tumg .claim__h {
  margin: .5rem 0 .5rem;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, .95rem + .6vw, 1.45rem);
  line-height: 1.2;
  color: #F2F5F8;
  font-weight: 400;
}

.tumg .claim__b {
  margin: 0;
  font-size: .975rem;
  line-height: 1.62;
  color: #C3CDD6;
}



/* The statement section that opens the argument tightens too: less air around
   one sentence, so the sections that carry real content read as the bigger
   beats they are. */
@media (min-width: 64rem) {
  .tumg .about > section.why { padding-block: 5rem; }
}

/* The lead update sat in a half-width column beside three stacked cards, so the
   left column ended around 500px short of the right one and the section had a
   hole in it. Stretching the lead and letting its image take the slack keeps
   §3.4's "one large lead beside three supporting cards" and squares the row. */
@media (min-width: 64rem) {
  .leadcard__link > .media { aspect-ratio: 3 / 2; }

  /* The three supporting updates become compact rows -- thumbnail left,
     headline right -- rather than three full cards stacked. Three full cards
     ran far taller than one lead card, which left a column-height hole beside
     them; stretching the lead to close it only moved the hole inside the card.
     Three rows come out level with the lead, and the shape also stops the
     homepage from looking like a second copy of the /updates grid. */
  /* The thumbnail is INSET, not bled to the card's edges. Bled, the card read
     as two rectangles glued together, and stretching a 16:9 photograph to the
     full height of the card cropped it to roughly a square -- the BLVDNEXT logo
     lost its first and last letters, and every building filled the frame edge
     to edge with no air. A 4:3 tile with its own radius sitting inside the
     card's padding is the single change that made these read as designed rather
     than as assembled. */
  .lede-grid__rest .mcard { flex-direction: row; align-items: center;
                            gap: var(--sp-3); padding: var(--sp-3); }
  .lede-grid__rest .mcard__link { flex: 0 0 33%; display: block; align-self: stretch; }
  .lede-grid__rest .media {
    height: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  }
  .lede-grid__rest .mcard__body { padding: 0; gap: .4rem; }
  .lede-grid__rest .mcard__title { font-size: var(--step-0); }
  .lede-grid__rest .mcard__sum,
  .lede-grid__rest .card__rel { display: none; }
  .lede-grid__rest .media__credit { display: none; }
}

/* A section action wrapped under a long headline and landed between the title
   and its own description. It belongs on the headline's baseline, or after the
   description on narrow screens. */
@media (min-width: 52rem) {
  .head__top { flex-wrap: nowrap; align-items: baseline; }
  .head__top > .btn { flex: 0 0 auto; }
}

/* On a phone the section's button was landing BETWEEN the heading and the
   sentence that explains it: "What's changing across metro Atlanta", then
   VIEW ALL UPDATES, then the description of what updates are. The existing
   `order: 3` could never fix that, because it only ordered children of
   `.head__top` and the lede is that element's SIBLING -- a different flex
   container, so the two could not be interleaved.
   `display: contents` dissolves the .head__top box on narrow screens, which
   puts the heading, the lede and the button in one ordering context. */
@media (max-width: 51.99rem) {
  .head { display: flex; flex-direction: column; align-items: flex-start; }
  .head__top { display: contents; }
  .head__top > div { order: 1; }
  .head p.lede { order: 2; margin-block-start: var(--sp-3); }
  .head__top > .btn { order: 3; margin-block-start: var(--sp-4); }
}

/* ================================ MEASURED: CONTRAST ON EVERY TEXT STYLE ==
 * Every text element on both pages measured against its own real background --
 * walking up the tree to the first opaque one, not assuming the page colour.
 * Two failures, both small text, both just under the 4.5:1 the size requires:
 *
 *   the eyebrow on the parchment band   4.36  (#8A6218 on #F2E4CB)
 *   the plate's waiting note            4.15  (#6E7C89 on #0B1927)
 *
 * Neither is visible as a problem, which is exactly why they survived nine
 * passes of looking. Both corrected to clear 4.7 with the hue kept.
 */
.tumg .believe .eyebrow { color: #825D17; }
.tumg .pplate__soon { color: #7D8B98; }

/* ================================================= city interaction layer ==
   The parent brand already had a motion system; the city sites had none, which
   is why Atlanta sat completely still. This is the same mechanism and the same
   class names, not a second system: reveal on scroll, a count-up on the proof
   numbers, a header that gains its edge once you leave the hero, and a slow
   drift on the hero photograph.

   The research behind the original still applies: a page reads as premium at
   three to five purposeful animations and chaotic past that. These are four.
   Every one is inert under prefers-reduced-motion, and none is load-bearing --
   with the script stripped the page is complete and static. */

/* Hidden ONLY when a script has confirmed it can un-hide them. `.js-anim` is
   set by an inline script in the head, before first paint, and only when
   IntersectionObserver exists and motion is not reduced. Without that class the
   reveal never applies, so a page whose script is stripped, blocked, or never
   run in a hidden document renders complete rather than blank. A plain
   `opacity: 0` here is a page that can disappear. */
.js-anim.city-atlanta .reveal,
.js-anim.city-savannah .reveal,
.js-anim .city-atlanta .reveal,
.js-anim .city-savannah .reveal { opacity: 0; translate: 0 30px; }

.city-atlanta .reveal.is-in,
.city-savannah .reveal.is-in,
.js-anim .city-atlanta .reveal.is-in,
.js-anim .city-savannah .reveal.is-in {
  opacity: 1;
  translate: 0 0;
  transition: opacity 1.5s cubic-bezier(.22, .68, .28, 1),
              translate 1.5s cubic-bezier(.22, .68, .28, 1);
}

/* Cards in a row arrive in sequence rather than as one block. Four steps only:
   past that the last card lands late enough to feel like a bug. */
.city-atlanta .card-grid > .reveal:nth-child(2),
.city-atlanta .lede-grid__rest > .reveal:nth-child(2) { transition-delay: .08s; }
.city-atlanta .card-grid > .reveal:nth-child(3),
.city-atlanta .lede-grid__rest > .reveal:nth-child(3) { transition-delay: .16s; }
.city-atlanta .card-grid > .reveal:nth-child(4) { transition-delay: .24s; }

/* The header is flush with the hero at rest and separates from the page once
   you have scrolled past it. */
.city-atlanta .site-header,
.city-savannah .site-header {
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease);
  border-block-end: 1px solid transparent;
}

.city-atlanta .site-header.is-stuck,
.city-savannah .site-header.is-stuck {
  background: color-mix(in srgb, var(--navy-900) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-block-end-color: var(--line);
  box-shadow: 0 10px 30px rgba(5, 10, 16, .35);
}

/* A very slow drift on the hero photograph. It is 4% of the frame over 28s:
   enough that the page is not a still, not enough to notice as motion. */
@keyframes city-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(-1.2%, -1%, 0); }
}

.city-atlanta .hero__media > img,
.city-savannah .hero__media > img {
  animation: city-drift 28s ease-in-out infinite alternate;
  will-change: transform;
}

.city-atlanta .statband__n.is-counting,
.city-savannah .statband__n.is-counting { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .city-atlanta .reveal, .city-savannah .reveal {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }
  .city-atlanta .hero__media > img,
  .city-savannah .hero__media > img { animation: none !important; }
}

/* ================== THE BELIEFS, WHEN THERE IS WIDTH BUT NOT THREE COLUMNS ==
 * Between a phone and the three-column layout, each belief ran as a narrow
 * left-aligned stack with the emblem above it -- and roughly half the row
 * empty to its right. The emblem moves INTO that space: text left, emblem
 * right, centred against the block it belongs to. The gap becomes the
 * composition rather than a hole in it.
 */
@media (min-width: 30rem) and (max-width: 57.99rem) {
  .tumg .belief {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "head mark"
      "body mark";
    column-gap: clamp(1.2rem, 2.4vw, 2rem);
    align-items: center;
  }
  .tumg .belief__mark {
    grid-area: mark;
    align-self: center;
    margin-block-end: 0;
  }
  /* The copy fills its column instead of wrapping at its narrow three-column
     measure, which was leaving a void between the text and the emblem. */
  .tumg .belief__h { grid-area: head; align-self: end; max-width: none; }
  .tumg .belief__p {
    grid-area: body;
    align-self: start;
    margin-block-start: .6rem;
    max-width: none;
  }
  /* room to be looked at, now that it is not a small mark above a heading */
  .tumg .belief .emblem { inline-size: 104px; block-size: 104px; }
  .tumg .belief + .belief { margin-block-start: 1.9rem; padding-block-start: 1.9rem; }
}

/* ============================ THE SHARED-BACKBONE MOTIF (THESIS SECTION) ==
 * Three local places, each its own massing and canopy, standing on one line
 * that runs through all of them -- local trust, modern distribution, shared
 * strength, drawn rather than stated. Filled silhouette, not line art: at this
 * contrast any interior detail reads as noise.
 *
 * It lives on the right and dissolves leftward before it reaches the copy.
 */
.tumg .about > section.thesis { position: relative; overflow: clip; }

.tumg .motif__layer {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(74%, 70rem);
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  -webkit-mask-image: none; mask-image: none;
}
.tumg .motif__layer .motif { inline-size: 100%; block-size: 100%; display: block; }

/* The copy sits above it, always. */
.tumg .thesis__in { position: relative; z-index: 1; }

/* A slow breath through the three nodes: the backbone carrying something.
   Long enough that you notice it only if you are looking at it. */
.tumg .motif__node {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: motif-pulse 9s var(--e-amb, ease-in-out) infinite;
}
@keyframes motif-pulse {
  0%, 62%, 100% { opacity: .34; scale: 1; }
  74%           { opacity: .95; scale: 1.55; }
}

@media (prefers-reduced-motion: reduce) {
  .tumg .motif__node { animation: none; }
}

/* On a phone the motif is a quiet band along the foot of the section rather
   than a right-hand field: at that width a right-weighted drawing sits under
   the copy, and the copy is the point. */
@media (max-width: 61.99rem) {
  .tumg .motif__layer {
    inline-size: 100%;
    inset-block-start: auto;
    /* Shorter and fainter than the desktop field: at 390 the copy runs the full
       width, so anything with presence sits behind a sentence. */
    block-size: 30%;
    opacity: .30;
    -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.45) 52%, transparent 88%);
    mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.45) 52%, transparent 88%);
  }
}

/* ============================================= work with us · the brief ==
   V3 §8 and §9. Both pages reuse the chassis; only what is genuinely new to a
   sales page and a newsletter page lives here. */

/* The proof strip on the sales page carries each metric's own definition
   underneath it, which the homepage strip deliberately does not. That device is
   the one the design reference gets most of its credibility from, and the
   definitions already exist in metrics.json. */
.proof--wide {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.proof__def {
  display: block;
  margin-block-start: .4rem;
  font-size: var(--step--2);
  line-height: 1.45;
  color: var(--paper-45);
  max-width: 26ch;
}

.ways { display: grid; gap: var(--sp-4); }
@media (min-width: 52rem) { .ways { grid-template-columns: 1fr 1fr; } }

.way {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding: var(--sp-5);
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.way:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-2px); }
.way h3 { font-size: var(--step-1); line-height: 1.2; }
.way p { color: var(--paper-70); line-height: 1.55; }

/* The seven promotion segments. Small cards, because the list itself is the
   information: a reader recognises their own category and stops reading. */
.seg-grid { display: grid; gap: var(--sp-3); }
@media (min-width: 46rem) { .seg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .seg-grid { grid-template-columns: repeat(3, 1fr); } }

.seg {
  display: grid;
  gap: .55rem;
  align-content: start;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--navy-800) 70%, transparent);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.seg:hover { border-color: var(--accent-15); background: var(--navy-800); }
.seg h3 { font-size: var(--step-0); letter-spacing: -.01em; }
.seg p { font-size: var(--step--1); line-height: 1.55; color: var(--paper-70); }

.listcard {
  padding: var(--sp-4);
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.ticks { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: .6rem; }
.ticks li {
  position: relative;
  padding-inline-start: 1.5rem;
  color: var(--paper-70);
  line-height: 1.5;
  font-size: var(--step--1);
}
.ticks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .45em;
  width: .55rem;
  height: .55rem;
  border-inline-start: 2px solid var(--accent);
  border-block-end: 2px solid var(--accent);
  rotate: -45deg;
}

.ccard-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 64rem) { .ccard-grid { grid-template-columns: 1fr 1fr; } }

.ccard__ctx {
  margin-block-start: var(--sp-3);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--on-dark-70);
}

/* A case study with no publishable numbers says why, in the space the numbers
   would have occupied. That is a stronger trust signal than the numbers. */
.ccard__why {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--on-dark-70);
  padding: var(--sp-3);
  border-inline-start: 2px solid var(--accent-15);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.aud__caveat {
  margin-block-start: var(--sp-4);
  font-size: var(--step--2);
  color: var(--paper-45);
  max-width: 70ch;
}

/* The audience is the reason a partner buys, not a table to read. These four
   visual panels preserve the ranges and approximation marks in metrics.json
   while making geography, platform scale and audience profile scannable. */
.audience-showcase {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 80% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
    #0A0B0C;
}
.audience-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 74%);
  mask-image: linear-gradient(135deg, #000, transparent 74%);
}
.audience-showcase > .wrap { position: relative; }
.aud-visual {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--line-hi);
  box-shadow: var(--lift-1);
}
.aud-panel {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--sp-4);
  min-width: 0;
  padding: clamp(1.4rem, 3vw, 2.6rem);
  overflow: hidden;
  background: #101213;
}
.aud-panel__label {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--paper-45);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.aud-panel__label span { color: var(--accent-hi); }
.aud-panel h3 {
  max-width: 20ch;
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 2.8vw, 2.8rem);
  font-weight: 400;
  line-height: 1.02;
}
.aud-panel--geo { isolation: isolate; background: #151718; }
.aud-panel--geo > *:not(.aud-geo__stamp) { position: relative; z-index: 1; }
.aud-geo__lead { display: flex; align-items: end; gap: clamp(1rem, 3vw, 2.5rem); }
.aud-geo__lead > strong {
  color: var(--on-dark);
  font-family: var(--font-serif);
  font-size: clamp(4.5rem, 10vw, 8.5rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .78;
  white-space: nowrap;
}
.aud-geo__lead p { color: var(--paper-45); font-size: var(--step--1); }
.aud-geo__lead h3 { margin-block-start: .25rem; }
.aud-ranges { display: grid; gap: 1rem; margin-block-start: var(--sp-2); }
.aud-range { display: grid; gap: .45rem; }
.aud-range__head { display: flex; justify-content: space-between; gap: 1rem; font-size: .78rem; }
.aud-range__head span { color: var(--on-dark-70); }
.aud-range__head strong { color: var(--on-dark); font-variant-numeric: tabular-nums; }
.aud-range__track { position: relative; height: 6px; overflow: hidden; background: #2A2D2F; }
.aud-range__track span {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--range-start);
  inline-size: var(--range-size);
  min-inline-size: 8px;
  background: var(--accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 62%, transparent);
}
.aud-geo__stamp {
  position: absolute;
  z-index: 0;
  inset: auto -1.5rem -3rem auto;
  color: color-mix(in srgb, var(--accent) 9%, transparent);
  font-family: var(--font-display);
  font-size: clamp(8rem, 20vw, 18rem);
  font-weight: 800;
  letter-spacing: -.1em;
  line-height: .8;
}
.aud-platforms { display: grid; gap: 1.05rem; }
.aud-platform { display: grid; gap: .45rem; }
.aud-platform__head { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: .65rem; }
.aud-platform__mark {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--on-dark);
  border: 1px solid var(--line-hi);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 700;
}
.aud-platform__name { color: var(--on-dark-70); font-size: .78rem; }
.aud-platform__head strong { color: var(--on-dark); font-family: var(--font-serif); font-size: 1.2rem; font-weight: 400; }
.aud-platform__track { height: 5px; overflow: hidden; background: #2A2D2F; }
.aud-platform__track span { display: block; width: var(--platform-width); height: 100%; background: var(--accent); }
.aud-panel--profile { background: var(--cream); color: #17191A; }
.aud-panel--profile .aud-panel__label { color: #69645E; }
.aud-profile__grid { display: grid; grid-template-columns: minmax(8rem, .8fr) 1fr; align-items: center; gap: var(--sp-4); }
.aud-donut {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--accent) 0 var(--male-share), #252729 var(--male-share) 100%);
  box-shadow: 0 16px 30px rgba(40, 24, 19, .16);
}
.aud-donut > div {
  display: grid;
  place-items: center;
  width: 67%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cream);
}
.aud-donut strong { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; line-height: 1; }
.aud-donut span { color: #69645E; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.aud-legend { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.aud-legend li { display: grid; grid-template-columns: .75rem 1fr auto; align-items: center; gap: .55rem; color: #494640; font-size: .75rem; }
.aud-legend li > span { inline-size: .65rem; block-size: .65rem; border-radius: 50%; background: var(--accent); }
.aud-legend li:nth-child(2) > span { background: #252729; }
.aud-legend b { font-weight: 600; }
.aud-legend strong { color: #17191A; font-variant-numeric: tabular-nums; }
.aud-panel--age { background: var(--accent-hi); color: #101112; }
.aud-panel--age .aud-panel__label { color: #101112; }
.aud-panel--age .aud-panel__label span { color: #101112; }
.aud-age__lead { display: flex; align-items: end; gap: .7rem; }
.aud-age__lead strong { font-family: var(--font-serif); font-size: clamp(4rem, 8vw, 7rem); font-weight: 400; letter-spacing: -.05em; line-height: .78; }
.aud-age__lead span { padding-block-end: .25rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.aud-panel--age > p { color: #101112; font-size: .75rem; }
.aud-age__bands { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid rgba(16,17,18,.3); }
.aud-age__bands li { display: flex; align-items: center; justify-content: space-between; padding-block: .65rem; border-block-end: 1px solid rgba(16,17,18,.3); }
.aud-age__bands span { font-family: var(--font-mono); font-size: .65rem; }
.aud-age__bands strong { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 400; }

@media (min-width: 68rem) {
  .aud-visual { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .aud-panel--geo { grid-column: 1 / 8; grid-row: 1; }
  .aud-panel--platforms { grid-column: 8 / -1; grid-row: 1; }
  .aud-panel--profile { grid-column: 1 / 6; grid-row: 2; }
  .aud-panel--age { grid-column: 6 / -1; grid-row: 2; }
}

@media (max-width: 45.99rem) {
  .aud-panel { padding: 1.35rem; }
  .aud-geo__lead { display: grid; gap: 1rem; }
  .aud-geo__lead > strong { font-size: clamp(4.2rem, 22vw, 6rem); }
  .aud-profile__grid { grid-template-columns: minmax(7rem, .72fr) 1fr; }
  .aud-age__lead strong { font-size: clamp(4rem, 20vw, 5.6rem); }
}

/* A sharper commercial-page grammar: crisp editorial rules, fewer floating
   rounded boxes, and large section numerals used as composition rather than
   extra copy. The content and order stay unchanged. */
.work-page .section:not(.phero) { padding-block: clamp(4.5rem, 8vw, 7.5rem); }
.work-page .head {
  padding-block-start: 1rem;
  border-block-start: 1px solid color-mix(in srgb, var(--accent) 72%, var(--line-hi));
}
.work-page .ways {
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--line-hi);
}
.work-page .way {
  position: relative;
  min-height: 18rem;
  overflow: hidden;
  border: 0;
  border-radius: 0;
}
.work-page .way::after {
  position: absolute;
  inset: auto 1rem -2.4rem auto;
  color: color-mix(in srgb, var(--accent) 10%, transparent);
  font-family: var(--font-serif);
  font-size: 10rem;
  line-height: 1;
  pointer-events: none;
}
.work-page .way:first-child::after { content: "01"; }
.work-page .way:nth-child(2)::after { content: "02"; }
.work-page .proof--wide .proof__cell,
.work-page .seg,
.work-page .listcard,
.work-page .ccard { border-radius: var(--radius-sm); }

/* One recurring graphic signature across Atlanta's primary inner pages. It is
   deliberately typographic—not another stock skyline—and sits behind the
   actual page title, so it adds identity without adding another content block. */
.city-atlanta .phero:not(.phero--tight) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.city-atlanta .phero:not(.phero--tight)::after {
  content: "ATL";
  position: absolute;
  z-index: 0;
  inset: auto clamp(-1.5rem, -2vw, -.5rem) -1.5rem auto;
  color: color-mix(in srgb, var(--accent) 8%, transparent);
  font-family: var(--font-display);
  font-size: clamp(8rem, 22vw, 19rem);
  font-weight: 800;
  letter-spacing: -.1em;
  line-height: .72;
  pointer-events: none;
}
.city-atlanta .phero:not(.phero--tight) > .wrap { position: relative; z-index: 1; }

/* The inquiry form. On the cream band, so the controls invert. */
.fields { display: grid; gap: var(--sp-3); margin-block: var(--sp-4); }
@media (min-width: 46rem) { .fields { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .4rem; min-width: 0; }
.field--wide { grid-column: 1 / -1; }

.field label {
  font-size: var(--step--1);
  font-weight: 600;
  color: #3C4858;
  letter-spacing: .01em;
}
.field abbr { color: var(--accent-dk); text-decoration: none; }

.field input, .field select, .field textarea {
  width: 100%;
  padding: .8rem 1rem;
  font: inherit;
  font-size: var(--step-0);
  color: #172230;
  background: #fff;
  border: 1px solid rgba(23, 34, 48, .22);
  border-radius: var(--radius);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field :focus-visible { outline: 2px solid var(--accent-dk); outline-offset: 1px; }

.briefsplit__list--dark li { color: var(--paper-70); }
.briefsplit__list--dark li::before { background: var(--accent); }

/* "Engagement across platforms" wraps to two lines where the others take one,
   which pushed that cell's definition down and left the row ragged. Reserving
   two lines for every label lines the definitions up across the row. */
.proof--wide .proof__cell { align-content: start; }

/* Reserving two lines for the label only matters when the cells sit side by
   side. Stacked on a phone it is just a gap between a label and its own
   definition. */
@media (min-width: 46rem) {
  .proof--wide .proof__cap { min-block-size: 2.7em; display: block; }
}

/* ==================================================== updates index §4 ==
   One visual lead, then the image-led grid. The page used to be 27 identical
   cards with no heading and no way to narrow them. */

.filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-4);
}

.hoodpick select {
  padding: .5rem 2rem .5rem .85rem;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--paper-70);
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: 999px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 55%, calc(100% - .8rem) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.hoodpick select:hover { color: var(--paper); border-color: var(--accent-15); }
.hoodpick select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* A button styled as the filter chip. The directory's chips are links; these
   filter in place, so they are buttons and must not inherit a link's reset. */
button.sfilter__chip {
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  background: none;
  cursor: pointer;
}

.ulead {
  display: grid;
  gap: var(--sp-4);
  margin-block-end: var(--sp-5);
  padding-block-end: var(--sp-5);
  border-block-end: 1px solid var(--line);
}

@media (min-width: 62rem) {
  .ulead { grid-template-columns: 1.45fr 1fr; gap: var(--sp-5); align-items: center; }
}

.ulead__art { display: block; border-radius: var(--radius); overflow: hidden; }
.ulead__art .media { border-radius: var(--radius); aspect-ratio: 16 / 10; }
.ulead__art img { transition: transform .5s var(--ease); }
.ulead:hover .ulead__art img { transform: scale(1.02); }

.ulead__body { display: grid; gap: var(--sp-2); align-content: center; min-width: 0; }

/* Sized to the COLUMN, not to the page. At step-3 a long headline ran to six
   lines beside its own photograph and the lead read as a wall of type. */
.ulead__title {
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.ulead__title a:hover { color: var(--accent); }
.ulead__sum { color: var(--paper-70); font-size: var(--step-1); line-height: 1.5; max-width: 46ch; }

/* Same min-width trap as the project directory: the filterable wrapper becomes
   the grid item, and a grid item defaults to min-width auto. */
.ugrid__item { display: flex; min-width: 0; }
.ugrid__item > .mcard { flex: 1; min-width: 0; }

.morewrap { display: flex; justify-content: center; margin-block-start: var(--sp-5); }

/* ================================= BODY TEXT: LIGHTER, MORE MODERN ==
 * Measured before changing anything. Body copy sat at #B9C2CB (9.3:1) and the
 * muted note at #97A3AE (6.5:1) -- both legal, both reading as dull grey-blue
 * rather than as light text on a dark page.
 *
 * The reference for dark interfaces is not pure white, which halates against a
 * dark field and is tiring to read; it is a near-white in the 12-14:1 band.
 * That is where Linear, Vercel and Stripe's dark surfaces sit, and it is what
 * reads as modern rather than washed out.
 *
 *   body   #B9C2CB  9.28  ->  #D7DEE5  12.33
 *   lead   #CBD4DC 11.15  ->  #E6EBF0  13.96
 *   muted  #97A3AE  6.51  ->  #AEB9C4   8.40
 */
.tumg .about .tbody,
.tumg .about .why__body .tbody,
.tumg .about .story__body .tbody,
.tumg .about .aclose .tbody { color: #D7DEE5; }

.tumg .about .ahero .tbody--lead { color: #E6EBF0; }

.tumg .about .thesis__note,
.tumg .about .story__note { color: #AEB9C4; }

.tumg .trend__note { color: #D0D8E0; }
.tumg .evid__stats dd { color: #CFD7DF; }

/* The section that sits on paper keeps its own ink, measured separately. */
.tumg .believe .belief__p { color: #3D4F60; }

/* ============================== THE BAND'S SKYLINE MUST CLEAR THE COPY ==
 * At intermediate widths the third column's last line ran straight through the
 * rooftops. The section takes more room at the foot so the silhouette sits
 * under the text rather than behind it.
 */
@media (max-width: 74rem) {
  .tumg .about > section.believe { padding-block-end: clamp(7rem, 13vw, 11rem); }
}

/* ================================== SECTION ANIMATION: LINES THAT ARRIVE ==
 * Every heading on the page used to fade in as one block, at the same speed,
 * with the same 14px nudge. That is a page appearing. A page that has been SET
 * arrives a line at a time, each line rising from behind its own edge.
 *
 * The script measures the real wraps and wraps each visual line in `.ln`, an
 * overflow box; `.ln__i` is the text inside it, which starts below the box.
 */
/* Each WORD is its own overflow box and rises from behind its own edge, with a
   45ms stagger along the line. Words, not lines: wrapping whole lines meant
   freezing the line breaks at one width, so the heading stopped reflowing when
   the window changed and picked up an extra line at the width it was measured.
   Words reflow like text because they still are text. */
.tumg .about .wd {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-block-end: .08em;
  margin-block-end: -.08em;
}
.tumg .about .wd__i {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .92s var(--e-enter, cubic-bezier(.16,1,.3,1));
  will-change: transform;
}
.tumg .about .rise.is-in .wd__i,
.tumg .about .is-in .wd__i { transform: none; }

/* A heading that is not inside a .rise still has to arrive: the hero's own
   headline is on screen at load, so it plays immediately. */
.tumg .about .ahero h1 .wd__i { transform: translateY(110%); }
.pin .tumg .about .ahero h1 .wd__i,
.tumg .about .ahero.is-lit h1 .wd__i { transform: none; }

/* Body copy follows its heading rather than arriving with it. */
.tumg .about .why__body > *.rise.is-in,
.tumg .about .story__body > *.rise.is-in { transition-delay: .18s; }
.tumg .about .why__body > *:nth-child(2).rise.is-in,
.tumg .about .story__body > *:nth-child(2).rise.is-in { transition-delay: .30s; }
.tumg .about .story__body > *:nth-child(3).rise.is-in { transition-delay: .42s; }

/* ONE gold rule, not two. The heading already carries a rule in its ::before
   (with its own draw-in at its definition); a second line was added here in
   ::after at a different offset, so the owner saw a pair of parallel gold lines
   beside "Why we exist" and asked if it was an error. It was. Removed. */

/* Each claim's rule draws itself in as the section arrives. */
.tumg .claim { position: relative; }
.tumg .claim::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 0;
  block-size: 1px;
  background: rgba(229, 192, 126, .5);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .9s var(--e-draw, cubic-bezier(.62,.04,.3,1));
}
.tumg .about .thesis.is-lit .claim::before { transform: scaleX(1); }
.tumg .claim:nth-child(2)::before { transition-delay: .12s; }
.tumg .claim:nth-child(3)::before { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .tumg .about .wd { overflow: visible; }
  .tumg .about .wd__i { transform: none !important; transition: none; }

  .tumg .claim::before { transform: scaleX(1); transition: none; }
}

/* ================================================= homepage section rhythm ==
   Seven sections on one ground, with identical padding and an identical
   eyebrow-headline stack, read as the same section seven times. Nothing told a
   reader they had moved. The page now runs in three movements:

     A  what is happening now   hero, proof, Latest Updates      base ground
     B  the database            Development                      sunken ground
     C  the business            the Brief, Work With Us, About   cream, base, sunken

   Ground changes carry the cadence, so no section needs a decorative counter to
   announce itself. */

.band--sunken {
  background:
    radial-gradient(120% 80% at 15% 0%,
                    color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 60%),
    #070E15;
}

.band--sunken + .band:not(.band--sunken):not(.band--cream),
.band:not(.band--sunken) + .band--sunken { border-block-start-color: transparent; }

/* The database movement earns more room than the sections around it: it is the
   part of the site nothing else in the market has. */
@media (min-width: 62rem) {
  .band--sunken { padding-block: calc(var(--sp-6) * 1.35); }
}

/* media.skyline_band() emits <svg class="band">, which collides with the
   SECTION class of the same name and drew a rule across the artwork. */
.aboutsplit__art svg.band { border-block-start: 0; }

/* The closing movement sits on the sunken ground and the skyline reads as its
   floor rather than as a picture in a box. */
.aboutband .aboutsplit__art { color: var(--accent); opacity: .85; }

@media (min-width: 64rem) {
  .aboutband .aboutsplit { align-items: end; }
  .aboutband .aboutsplit__art { margin-block-end: calc(var(--sp-6) * -1); }
}

/* ==================================================== development, restored ==
   This block was lost when site.css was rewritten by a parallel session; the
   development landing, the project directory, the updates index and the
   homepage all silently lost their page head, search field and status filters.
   test_site_css_contract.py now asserts every class the renderer emits has a
   rule here, so the same deletion fails a test instead of shipping. */

.phero { padding-block-end: var(--sp-4); }

.phero__h {
  font-size: var(--step-3);
  line-height: 1.05;
  letter-spacing: -.028em;
  margin-block-start: var(--sp-2);
  max-width: 18ch;
  text-wrap: balance;
}

.phero__lede { margin-block-start: var(--sp-3); max-width: 54ch; }

.psearch { display: flex; gap: var(--sp-2); margin-block-start: var(--sp-4); max-width: 42rem; }

.psearch input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .85rem 1rem;
  font: inherit;
  font-size: var(--step-0);
  color: var(--paper);
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.psearch input::placeholder { color: var(--paper-45); }
.psearch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

.sfilter { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-4); }

.sfilter__chip {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem .85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--paper-70);
  text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease),
              background-color .2s var(--ease);
}
.sfilter__chip span { font-variant-numeric: tabular-nums; color: var(--paper-45); font-weight: 500; }
.sfilter__chip:hover { color: var(--paper); border-color: var(--accent-15); }
.sfilter__chip.is-on { color: var(--navy-900); background: var(--accent); border-color: var(--accent); }
.sfilter__chip.is-on span { color: var(--navy-900); opacity: .7; }

.pgrid__count { margin-block-start: var(--sp-3); font-size: var(--step--1); color: var(--paper-45); min-height: 1.2em; }
.pgrid__empty { padding-block: var(--sp-5); text-align: center; color: var(--paper-45); }
.pgrid__item { display: flex; min-width: 0; }
.pgrid__item > .mcard { flex: 1; min-width: 0; }

.mapblock { display: grid; gap: var(--sp-4); align-items: center; }
@media (min-width: 62rem) { .mapblock { grid-template-columns: 1.35fr 1fr; gap: var(--sp-5); } }
.mapblock__note { margin-block-start: var(--sp-3); font-size: var(--step--1); color: var(--paper-45); }

.intel { display: grid; gap: var(--sp-3); }
@media (min-width: 62rem) { .intel { grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; } }
.intel__h { font-size: var(--step-2); line-height: 1.1; letter-spacing: -.024em; margin-block-start: var(--sp-2); max-width: 16ch; }
.intel__body { max-width: 52ch; }

/* -------------------------------------------------- permanent project page -- */

.project { padding-block: var(--sp-6); }
.project__head { display: grid; gap: var(--sp-3); max-width: 66ch; margin-inline: auto; }
.project__head h1 { font-size: var(--step-3); line-height: 1.05; letter-spacing: -.028em; text-wrap: balance; }
.project__where { color: var(--paper-70); font-size: var(--step-1); }

.project__art {
  max-width: 68rem;
  margin-inline: auto;
  margin-block-start: var(--sp-5);
  border-radius: var(--radius);
  overflow: hidden;
}

.project__body { max-width: 66ch; margin-inline: auto; margin-block-start: var(--sp-5); display: grid; gap: var(--sp-5); }

.psec { display: grid; gap: var(--sp-3); }
.psec h2 {
  font-size: var(--step-1);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--paper-45);
  font-weight: 700;
  padding-block-end: var(--sp-2);
  border-block-end: 1px solid var(--line);
}
.psec__lede { font-size: var(--step-1); line-height: 1.6; color: var(--paper); }
.psec__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.psec__verified { font-size: var(--step--1); color: var(--paper-45); }
.psec__note { font-size: var(--step--1); color: var(--paper-45); line-height: 1.6; }
.psec__note a { color: var(--paper-70); }
.psec__note a:hover { color: var(--accent); }
.details__aside { color: var(--paper-45); font-style: normal; font-size: var(--step--1); }

.psec--wide { max-width: none; width: min(68rem, 100%); margin-inline: auto; }
@media (min-width: 68rem) { .psec--wide { width: 68rem; margin-inline: calc((66ch - 68rem) / 2); } }

.gal { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); }
@media (max-width: 40rem) { .gal { grid-template-columns: 1fr; } }
.gal__item { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--navy-800); }
.gal__item img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gal__item figcaption { padding: .55rem .7rem; font-size: var(--step--2); color: var(--paper-45); }

.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.tl li { display: grid; gap: .25rem var(--sp-3); padding-inline-start: var(--sp-3); border-inline-start: 2px solid var(--line); }
@media (min-width: 40rem) { .tl li { grid-template-columns: 8.5rem 1fr; align-items: baseline; } }
.tl__date { font-size: var(--step--1); color: var(--paper-45); font-variant-numeric: tabular-nums; }
.tl__what { color: var(--paper); line-height: 1.5; }
.tl__what a { color: var(--paper); text-decoration: none; border-block-end: 1px solid var(--line); }
.tl__what a:hover { color: var(--accent); border-color: var(--accent); }

/* Three classes the renderer emits that had no rule at all -- found by
   test_site_css_contract, not by eye. .ccard__art was why the sponsorship
   case-study artwork looked like an unframed grey panel. */
.ccard__art { position: relative; overflow: hidden; background: var(--navy-700); }
.ccard__art .ph { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 78rem) {
  .ccard__art { border-inline-end: 1px solid var(--line); }
}

/* The placeholder SVGs size to their box; the campaign ratio is the widest, so
   it needs the explicit aspect or it collapses inside a grid cell. */
.ph { display: block; width: 100%; height: auto; }
.ph--update { aspect-ratio: 16 / 10; object-fit: cover; }
.ph--campaign { aspect-ratio: 16 / 9; }

/* A project card leads with its status rather than a date, so its foot has one
   item and should not be forced apart like an update card's two. */
.mcard--project .mcard__foot { justify-content: flex-start; }

/* The header's links measure 19px tall from 1024 up, which is where touch
   tablets live. Padding grows the target; the matching negative margin means
   the bar looks exactly as it did. (Re-declared at the end of the sheet: an
   earlier copy of this rule was removed by the dead-declaration sweep.) */
.tumg .thead__nav a {
  display: inline-block;
  padding-block: .55rem;
  margin-block: -.55rem;
}

/* A <select> sizes itself to its longest OPTION, so one location string
   ("Beltline TAD subareas 1, 2, 3, 8, 9, 10 (south/west side)") pushed the
   control to 445px inside a 390px phone and the whole page scrolled sideways.
   It was the only horizontal overflow left on the site. */
.hoodpick { min-width: 0; max-width: 100%; }
.hoodpick select { max-width: 100%; width: 100%; text-overflow: ellipsis; }

@media (min-width: 46rem) { .hoodpick select { width: auto; max-width: 22rem; } }

/* Tap targets. Every footer link measured 20px tall on a phone -- under the
   24px WCAG 2.5.8 minimum and well under a comfortable thumb. The rows grow on
   touch-sized screens only, so desktop density is unchanged. This brand was
   built on phones; the footer should not be the one place that forgets it. */
@media (max-width: 61.99rem) {
  .footer-col a,
  .switcher a {
    display: inline-block;
    padding-block: .6rem;
    margin-block: -.15rem;
  }
  .footer-col ul { gap: .1rem; }
  .footer-signup .btn { padding-block: .75rem; }
}

/* The proof numbers arrive rather than counting. Each figure wipes up behind
   its own edge, staggered across the row. Every frame shows the real number --
   see the note in the script. Without the class (no script, reduced motion)
   the numbers are simply present. */
.js-anim .statband__n {
  display: inline-block;
  clip-path: inset(0 0 110% 0);
  translate: 0 .28em;
}

.js-anim .statband.is-counting .statband__n {
  /* inset() rejects a negative value, so `inset(0 0 -10% 0)` made the whole
     declaration invalid and the numbers never un-hid -- Savannah shipped a
     stat band of labels with no figures. A hidden number is worse than no
     animation, so this is the plain, valid value. */
  clip-path: inset(0);
  translate: 0 0;
  transition: clip-path .62s var(--ease), translate .62s var(--ease);
}

.js-anim .statband.is-counting .statband__cell:nth-child(2) .statband__n { transition-delay: .07s; }
.js-anim .statband.is-counting .statband__cell:nth-child(3) .statband__n { transition-delay: .14s; }
.js-anim .statband.is-counting .statband__cell:nth-child(4) .statband__n { transition-delay: .21s; }

.js-anim .statband.is-counting .statband__l { transition: opacity .5s var(--ease) .18s; }
.js-anim .statband:not(.is-counting) .statband__l { opacity: .35; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .statband__n { clip-path: none !important; translate: none !important; }
  .js-anim .statband__l { opacity: 1 !important; }
}

/* Contrast on the cream band. Measured, not eyeballed: the accent at #D8433F
   scores 4.01 against #FDF4E1 and the proof line's grey scores 3.99, both under
   the 4.5 WCAG AA needs at 13px. These are the same hues carried far enough to
   pass (4.61 and 4.96). The dark bands were already clear. */
.band--cream .kicker { color: #C93B37; }
.band--cream .briefsplit__proof { color: #5F6B7A; }
.band--cream .field abbr { color: #C93B37; }
.band--cream .briefsplit__list li::before { background: #C93B37; }

/* The proof line also sits on the DARK newsletters hero, where the cream
   override does not reach and #6E7A8A scores 4.26. The muted paper tone clears
   it comfortably while still reading as secondary. */
.briefsplit__proof { color: var(--paper-70); }

/* Case studies without a stand-in thumbnail. The figures carry the card. */
.ccard {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--navy-800);
  color: var(--on-dark);
  transition: border-color .2s var(--ease);
}
.ccard:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.ccard__body { display: grid; gap: var(--sp-2); padding: var(--sp-5); align-content: start; }
.ccard__client { font-size: var(--step-2); letter-spacing: -.022em; line-height: 1.1; color: var(--on-dark); }
.ccard .mcard__type { color: var(--accent); }
.ccard__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin-block-start: var(--sp-3);
}
@media (min-width: 34rem) { .ccard__stats { grid-template-columns: repeat(3, 1fr); } }
.ccard__stat { display: grid; gap: .2rem; }
.ccard__stat b {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
}
.ccard__stat span {
  font-size: var(--step--2);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--on-dark-70);
  line-height: 1.35;
}

/* One section opens down the middle instead of from the left. Six identical
   left-aligned openings in a row is what made the page read as one long block;
   changing gear once, at the point the page turns commercial, gives the scroll
   a seam. Deliberately used ONCE -- a centred page is its own kind of flat. */
.head--center { text-align: center; }
.head--center .head__top { justify-content: center; }
.head--center .head__top > div { text-align: center; }
.head--center h2 { margin-inline: auto; max-width: 22ch; text-wrap: balance; }
.head--center .lede { margin-inline: auto; max-width: 56ch; }

@media (max-width: 51.99rem) {
  .head--center { text-align: start; }
  .head--center .head__top, .head--center .head__top > div { justify-content: flex-start; text-align: start; }
  .head--center h2, .head--center .lede { margin-inline: 0; }
}

/* ------------------------------------------------------------- touch size --
   Measured at 390px: 18 controls came out 36-38px tall -- the filter chips, the
   small ghost buttons, the brandmark. That is under every touch-target
   guideline, and this brand's audience arrives from a phone. Raised where the
   layout is already the narrow one, which is the breakpoint the mobile header
   uses. `pointer: coarse` was the first attempt and is worse: a resized desktop
   window reports a FINE pointer, so the rule was untestable, and an iPad with a
   trackpad reports fine too while still being a device you touch. Width is the
   honest proxy here. */
@media (max-width: 61.99rem) {
  .btn,
  .btn--sm,
  .signup button,
  .inquiry button,
  .sfilter__chip,
  .mcard__title a,
  .footer-col a,
  .site-nav a {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
  }

  .sfilter__chip { padding-inline: 1rem; }

  .brandmark { min-block-size: 44px; align-items: center; }

  /* Form controls: 48px is the comfortable floor for something you type into
     one-handed, and it stops iOS zooming on focus when combined with the 16px
     minimum below. */
  .psearch input,
  .signup input,
  .field input,
  .field select,
  .fields select {
    min-block-size: 48px;
    font-size: max(16px, var(--step-0));
  }

  .field textarea { font-size: max(16px, var(--step-0)); }

  /* The socials row: 24px glyphs in a 24px box is a 24px target. */
  .socials a { min-inline-size: 44px; min-block-size: 44px; display: inline-flex;
               align-items: center; justify-content: center; }
}

/* ------------------------------------------------------ scroll-linked hero --
   The fifth and last animation, which is the ceiling the earlier research set:
   a page reads as premium at three to five purposeful animations and chaotic
   past that. The hero photograph drifts up at about half the page's speed and
   fades as it leaves, so the fold has depth instead of scrolling away flat.

   Done with a scroll-driven CSS animation rather than a scroll listener: it
   runs on the compositor, so it cannot jank the way a JS parallax does on a
   phone, and it costs nothing when unsupported. @supports means Safari and
   Firefox simply get the static hero they already had. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .city-atlanta .hero__media,
    .city-savannah .hero__media {
      /* The ROOT scroll timeline, over the first viewport of scrolling. A
         view() timeline measures the element's own visibility, and the hero is
         absolutely positioned inside a section that is already on screen at
         load, so its range never advanced and the animation never ran. */
      animation: hero-parallax linear both;
      /* The shorthand above sets duration to 0s, and a scroll-driven animation
         with a zero duration never advances -- it sat pinned at its first
         keyframe however far you scrolled. `auto` is what hands timing to the
         timeline instead of the clock. */
      animation-duration: auto;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }

    @keyframes hero-parallax {
      from { transform: translate3d(0, 0, 0); opacity: 1; }
      to   { transform: translate3d(0, 12%, 0); opacity: .68; }
    }

    /* The copy holds its place while the picture moves under it, which is what
       makes the depth read. Without this the whole hero just slides. */
    .city-atlanta .hero__inner,
    .city-savannah .hero__inner { position: relative; z-index: 3; }
  }
}

/* The status line only earns its space once it has something to say. */
.signup__note:not([data-said]):empty,
.inquiry .signup__note:not([data-said]):empty { min-block-size: 0; }

.signup__note[data-said],
.inquiry .signup__note[data-said] {
  color: var(--paper-70);
  line-height: 1.5;
  padding-block-start: .6rem;
}

.band--cream .signup__note[data-said] { color: #3C4858; }

/* ============================================ the serif, on the city pages ==
   docs/DESIGN_REFERENCE.md measured the benchmark and concluded that the two
   things separating it from us were (1) the big numbers set in a SERIF, not a
   sans, and (2) every statistic showing its own arithmetic underneath. Its own
   words: "Our stats were in Sora, which is why the proof strip felt like a spec
   sheet."

   That conclusion was acted on for the parent brand and never reached the city
   sites, so every Atlanta headline and every Atlanta numeral was still Sora.
   This is the same decision, applied where the reader actually is.

   The split, deliberately:
     serif  section headlines and statistical numerals -- the editorial voice
     Sora   the hero, uppercase labels, buttons, card titles -- the brand voice
     Inter  body

   The hero stays Sora on purpose: the owner's own brand mock sets the wordmark
   in a heavy sans, and the benchmark also keeps its hero sans and reserves the
   serif for section heads. One line reverts all of this. */

.city-atlanta .head h2,
.city-savannah .head h2,
.city-atlanta .devsplit__h,
.city-atlanta .briefsplit__h,
.city-atlanta .intel__h,
.city-atlanta .aboutsplit__h,
.city-atlanta .ccard__client,
.city-savannah .devsplit__h,
.city-savannah .briefsplit__h,
.city-savannah .aboutsplit__h {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1.06;
}

/* The numerals. This is the change the reference doc rates highest. */
.city-atlanta .statband__n,
.city-savannah .statband__n,
.city-atlanta .proof__num,
.city-savannah .proof__num,
.city-atlanta .ccard__stat b {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -.015em;
}

/* A serif at 400 next to a sans at 700 reads smaller at the same size, so the
   display sizes step up rather than staying where the sans left them. */
.city-atlanta .head h2,
.city-savannah .head h2 { font-size: calc(var(--step-2) * 1.16); }
.city-atlanta .devsplit__h,
.city-atlanta .briefsplit__h,
.city-savannah .devsplit__h,
.city-savannah .briefsplit__h { font-size: calc(var(--step-3) * 1.1); }
.city-atlanta .statband__n,
.city-savannah .statband__n { font-size: calc(var(--step-3) * 1.12); }

/* ==================================== RESEARCH PASS: DEPTH ON DARK FIELDS ==
 * The page reads flat because large unbroken dark fields have nothing in them
 * for the eye to hold. The current guidance for 2026 editorial work is explicit
 * about this: subtle texture to introduce depth and tactility without slowing
 * the page or cluttering it, and quiet neutrals layered with warm accent tones
 * rather than flat blocks of colour. Two things, executed properly, rather than
 * a dozen trends at once.
 *
 * Sources: Figma resource library on 2026 web design trends; Wix design trends
 * 2026; TheeDigital 2026 trends round-up.
 *
 * 1. A fine grain over every dark section. 180x180 fractal noise at 3.5%, tiled
 *    -- invisible as texture, but it stops a 700px band of #0A1A28 reading as a
 *    dead rectangle. No image request: it is an inline SVG filter.
 */
.tumg .about > section:not(.believe)::before,
.tumg .cpage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Measured at 3.5% with `overlay`: the largest channel difference anywhere on
     the page was 5 of 255 -- about 2%, which is invisible, which makes it dead
     weight rather than texture. `overlay` preserves darks, so on a near-black
     field it does almost nothing; plain compositing at a higher opacity is what
     actually puts grain on the surface. */
  opacity: .085;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.7'/%3E%3C/svg%3E");
}
.tumg .about > section { position: relative; }
/* ONLY the content wrapper is lifted above the grain. Lifting every direct
   child put the absolutely positioned artwork layers back into the flow, and
   each one then took its full height as layout: every section grew by roughly
   800px and its copy was pushed off the screen. */
.tumg .about > section > .twrap,
.tumg .about > section > .thesis__in { position: relative; z-index: 1; }
/* The pin gets its z-index but NOT a position: it is `position: sticky` when
   the hero is pinned, and setting `relative` here at higher specificity turned
   the sticky off. The whole scroll-built city stopped working -- the hero
   scrolled away and left two thousand pixels of empty navy behind it. A sticky
   box is already positioned, so z-index alone is all it needs. */
.tumg .about > section > .ahero__pin { z-index: 1; }

/* The believe band already carries paper; grain on top of it reads as dirt. */

/* 2. A warm highlight where each dark section begins, so the tonal steps read
 *    as light falling across the page rather than as flat blocks butted
 *    together. Warm, because the brand's accent is warm and a cool highlight on
 *    navy just looks like a seam.
 */
.tumg .about > section.why::after,
.tumg .about > section.story::after,
.tumg .about > section.crew::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: clamp(180px, 26vw, 380px);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 22% 0%,
              rgba(229, 192, 126, .105) 0%, rgba(229, 192, 126, 0) 72%);
}
.tumg .about > section.thesis::after,
.tumg .about > section.aclose::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: clamp(180px, 26vw, 380px);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 74% 0%,
              rgba(229, 192, 126, .095) 0%, rgba(229, 192, 126, 0) 72%);
}

@media (prefers-reduced-motion: reduce) { /* texture is static; nothing to do */ }


/* ============================ RESEARCH PASS 2: TYPE AS THE ARCHITECTURE ==
 * The finding that actually changes how the page reads, rather than refining
 * it: in current editorial work type IS the interface -- the headline is the
 * design, not a label above the design. This page was set at magazine-caption
 * scale (72px display on a 1440 screen) with generous air around it, which is
 * why it reads as tasteful but quiet.
 *
 * Display type goes up hard, leading and tracking come in to match, and the
 * measure narrows so the bigger type still sets in proper lines.
 *
 *   h1        72   -> 104
 *   h2        45.6 -> 64
 *   why__big  59.2 -> 76
 *
 * Sources: Figma 2026 web design trends (typography-driven design); Wix 2026
 * trends (editorial boldness, animated headline reveals).
 */
@media (min-width: 64rem) {
  .tumg .about .ahero .disp {
    font-size: clamp(3.4rem, 1.1rem + 5.4vw, 6.5rem);
    line-height: .96;
    letter-spacing: -.022em;
  }
  .tumg .about .disp--2 {
    font-size: clamp(2.4rem, 1rem + 3.2vw, 4rem);
    line-height: 1.02;
    letter-spacing: -.018em;
  }
  .tumg .about .why__big {
    font-size: clamp(2.6rem, 1rem + 3.9vw, 4.75rem);
    line-height: 1.0;
    letter-spacing: -.02em;
  }
  .tumg .about .aclose__in .disp--2 {
    font-size: clamp(2.6rem, 1rem + 4.4vw, 5.25rem);
  }
  .tumg .about .ahero__copy { max-width: 40rem; }

}

/* The same idea one step down, so tablets are not left with the old scale. */
@media (min-width: 46rem) and (max-width: 63.99rem) {
  .tumg .about .ahero .disp { font-size: clamp(2.9rem, .8rem + 5vw, 4.2rem); line-height: .98; letter-spacing: -.02em; }
  .tumg .about .disp--2 { font-size: clamp(2.1rem, .9rem + 2.6vw, 3rem); line-height: 1.04; letter-spacing: -.016em; }
  .tumg .about .why__big { font-size: clamp(2.2rem, .9rem + 3vw, 3.4rem); line-height: 1.02; }
}

/* Inner-page titles take the serif too. The homepage hero stays Sora: it is the
   brand's own statement, and the owner's mock sets the wordmark in a heavy
   sans. Everything below the front door is editorial, and reads that way. */
.city-atlanta .phero__h,
.city-savannah .phero__h,
.city-atlanta .project__head h1,
.city-atlanta .article__head h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.04;
  font-size: calc(var(--step-3) * 1.14);
}

/* A serif h2 inside the reading column of a story or a project page. */
.city-atlanta .psec h2 { font-family: var(--font-body); }

/* Lead stories take the serif; the compact cards beside them stay in the sans.
   That is the newspaper hierarchy -- one display headline, then briefs -- and
   it stops the lead competing with the serif page title above it while keeping
   the small cards scannable. */
.city-atlanta .ulead__title,
.city-atlanta .leadcard__title {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1.08;
  font-size: calc(var(--step-2) * 1.2);
}


/* The hero's copy COLUMN, not just the paragraph, has to widen for the bigger
   headline. `max-width: 40rem` on .ahero__copy could never take effect while
   the grid column it sits in was `minmax(0, 34rem)` -- the column was the
   constraint, and a 95px headline was being forced into four lines in 544px. */
/* The column governs the measure, not a character count: 13ch at 95px was a
   559px cap inside a 736px column, which put the headline back on four lines
   after the column had been widened to prevent exactly that. */
@media (min-width: 64rem) {
  .tumg .about .ahero .disp { max-width: none; }
  .tumg .about .ahero__in { gap: clamp(1.6rem, 3vw, 3.2rem); }
}

/* THE COPY COLUMN HAS TO LEAVE THE DRAWING SOMETHING. A flat 41rem was fine at
   1440 and ruinous at 1024: 656px of copy against 260px of art, so the city
   beside a full-height headline was the size of a postage stamp. The column
   grows with the window instead of being fixed, and never takes more than about
   half of it. */
@media (min-width: 64rem) {
  .tumg .about .ahero__in { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); }
  .tumg .about .ahero__copy { max-width: 27rem; }
}
@media (min-width: 75rem) {
  .tumg .about .ahero__in { grid-template-columns: minmax(0, 33rem) minmax(0, 1fr); }
  .tumg .about .ahero__copy { max-width: 33rem; }
}
@media (min-width: 90rem) {
  .tumg .about .ahero__in { grid-template-columns: minmax(0, 44rem) minmax(0, 1fr); }
  .tumg .about .ahero__copy { max-width: 44rem; }
}

/* ------------------------------------------------------------ about page --
   The page was rebuilt to V3 §10 and needed two things the chassis did not
   have: a three-across variant of the offer grid, and the mission line, which
   §10 gives as a single sentence and which earns being set as a pull quote
   rather than another paragraph. */
@media (min-width: 62rem) {
  .offer-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.mission {
  margin: 0;
  padding: var(--sp-5);
  border-inline-start: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-radius: 0 var(--radius) var(--radius) 0;
  align-self: start;
}

.mission p {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.24;
  letter-spacing: -.01em;
  color: var(--paper);
  text-wrap: balance;
}

/* The about split is copy-heavy on the left, so the quote sits beside it rather
   than under, and the two columns are not the 1fr/.85fr of the homepage. */
.about-page .aboutsplit { align-items: start; }

@media (min-width: 64rem) {
  .aboutsplit:has(.mission) { grid-template-columns: 1.25fr .75fr; }
}

/* The About headline is the longest title on the site and broke to four lines
   at the 18ch measure the shorter page titles use. A display line wants two or
   three, not four. */
.city-atlanta .about-hero .phero__h,
.city-atlanta .phero__h { max-width: 24ch; }

/* A project page's hero is not a card. 4/3 is the ratio the CARDS use, and at
   full width it made an 816px-tall image that pushed the overview below the
   fold on a laptop. 16/9 is the hero ratio; the cards keep theirs. */
/* Photographs only. The branded placeholder is DRAWN at 4/3 and sets its text
   along the bottom edge, and the SVG crops rather than scales -- so forcing a
   16/9 box sliced the neighbourhood and the status label clean off and left an
   empty grid. 21 of 38 project pages use that placeholder. */
.project__art .media--project:not([data-placeholder]) { aspect-ratio: 16 / 9; }

@media (max-width: 46rem) {
  /* On a phone a 16/9 crop of a building is a letterbox. 4/3 gives it back
     enough height to read as a photograph. */
  .project__art .media--project { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------- the story lead image --
   V3 §5 puts the primary image between the summary and the byline. It runs
   wider than the 66ch reading column, because a photograph constrained to the
   text measure reads as an illustration rather than as the picture of the
   thing the story is about. */
.article__lead {
  position: relative;
  width: min(68rem, 100%);
  margin-inline: auto;
  margin-block: var(--sp-5) 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-800);
}

.article__lead img,
.article__lead svg {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.article__credit {
  padding: .6rem var(--sp-3);
  font-size: var(--step--2);
  line-height: 1.5;
  color: var(--paper-45);
  background: var(--navy-800);
}
.article__credit span { color: var(--paper-70); }
/* The separator belongs BETWEEN a caption and a credit. Where the image has no
   caption the credit was rendering as "· Delaney Tarr", a bullet with nothing
   in front of it. */
.article__credit:not(:empty) span:not(:first-child)::before {
  /* Non-breaking spaces, not ordinary ones. A leading and trailing space in
     generated content is subject to white-space collapsing, and the trailing
     one collapsed against the credit that follows: every caption on the site
     read "Westside Trail Neh Exhibition ·Atlanta Beltline, Inc." */
  content: "\00a0\00b7\00a0";
  color: var(--paper-45);
}

.article__byline-wrap { max-width: 66ch; margin-inline: auto; }

/* The byline was wrapping with "2026" alone on the second line, which reads as
   a break in the sentence rather than a wrap. `pretty` asks the browser to
   avoid leaving a single short word on the last line. */
.article__byline { text-wrap: pretty; }

/* ------------------------------------------- the closing section's floor --
 * The two buttons were landing ON the skyline: pills overlapping building
 * outlines, which is the "too busy at the bottom" the owner called out. The
 * section now reserves the band's own height as floor space, so the last thing
 * the reader touches has clear ground under it.
 */
.tumg .about > section.aclose { padding-block-end: clamp(9rem, 15vw, 15rem); }
.tumg .aclose .acta { margin-block-start: 2.2rem; }

/* The closing pull quote was a second display voice immediately under the
   first. It steps back to a quieter size so the heading stays the heading. */
.tumg .aclose .apull p { font-size: clamp(1.25rem, .95rem + 1.1vw, 1.7rem); }

/* ------------------------------------------------ the belief band's floor --
 * Same fault on the paper: the third column's body copy was being read with
 * rooftops behind it.
 */
.tumg .about > section.believe { padding-block-end: clamp(7rem, 11vw, 11rem); }

/* ================================================== statistical numerals ==
   DESIGN_REFERENCE's first finding, applied at last:

     "The big numbers are set in the serif. Not the sans. This is most of why
      their reach figures read as editorial and expensive rather than as a SaaS
      dashboard. Our stats were in Sora, which is why the proof strip felt like
      a spec sheet."

   A serif was added to the system for exactly this and only ever reached the
   headlines; every figure on the site was still Sora 800. Instrument Serif has
   one weight, so the size carries the emphasis instead of the weight, and the
   tracking opens slightly because a serif at display size does not want the
   tight negative letter-spacing a grotesque does. */
.statband__n,
.proof__num,
.ccard__stat b {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -.015em;
}

.statband__n { font-size: calc(var(--step-3) * 1.06); line-height: 1; }
.proof__num  { font-size: calc(var(--step-3) * 1.06); line-height: 1; }
.ccard__stat b { font-size: calc(var(--step-1) * 1.22); line-height: 1.05; }

/* The label under a serif numeral wants a touch more air: the serif sits on a
   higher optical baseline than the grotesque it replaced. */
.statband__l, .proof__cap { margin-block-start: .15rem; }

/* ============================================== contact and the trust pages ==
   Blueprint §12 listed a "Legal and trust" group and a Contact route in the
   footer of every page, and neither had a page behind it: both cities carried
   six labels of grey non-link text. These are those pages.

   A policy page is read by somebody looking for one answer, not by somebody
   reading top to bottom, so the sections are indexed down the side and the
   measure is held near 66ch. Everything else is the chassis. */

.phero--tight { padding-block: var(--sp-6) var(--sp-3); }

.legal__date {
  margin-block-start: var(--sp-3);
  font-size: var(--step--1);
  color: var(--paper-45);
  font-family: var(--font-mono);
  letter-spacing: .02em;
}

.legal { display: grid; gap: var(--sp-5); align-items: start; }

@media (min-width: 62rem) {
  .legal { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--sp-7); }
  .legal__toc { position: sticky; top: 6rem; }
}

.legal__toch {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paper-45);
  margin-block-end: var(--sp-3);
}

.legal__toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

.legal__toc a {
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--paper-70);
  text-decoration: none;
  border-inline-start: 2px solid var(--line);
  padding-inline-start: .8rem;
  display: block;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}

.legal__toc a:hover,
.legal__toc a:focus-visible { color: var(--paper); border-inline-start-color: var(--accent); }

/* The contact page reuses the same two-column shell, with a standing note in
   place of the index. */
.legal__toc--note p {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--paper-70);
  border-inline-start: 2px solid var(--line);
  padding-inline-start: .8rem;
}
.legal__toc--note p + p { margin-block-start: var(--sp-3); }

.legal__body { display: grid; gap: var(--sp-6); max-width: 66ch; }

.legal__sec h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.15;
  color: var(--paper);
  margin-block-end: var(--sp-3);
}

.legal__sec p {
  font-size: var(--step-0);
  line-height: 1.68;
  color: var(--paper-70);
}
.legal__sec p + p { margin-block-start: var(--sp-3); }
.legal__sec a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Contact routes: four cards that answer "am I in the right place" before the
   reader has scrolled to the form. */
.croutes {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
  margin-block-start: var(--sp-5);
}
@media (min-width: 46rem) { .croutes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 74rem) { .croutes { grid-template-columns: repeat(4, 1fr); } }

.croute {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--navy-700);
  padding: var(--sp-4);
}
.croute h3 {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--paper);
  margin-block-end: var(--sp-2);
}
.croute p { font-size: var(--step--1); line-height: 1.6; color: var(--paper-70); }
.croute a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Form fields on a navy surface. `.field` already exists but is drawn for the
   cream band, so its dark-on-white treatment would be unreadable here. */
.inquiry__row { display: grid; gap: var(--sp-3); }
@media (min-width: 46rem) { .inquiry__row { grid-template-columns: 1fr 1fr; } }

.ifield { display: grid; gap: .4rem; min-width: 0; margin-block-end: var(--sp-3); }

.ifield label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--paper-70);
  letter-spacing: .01em;
}

.ifield input, .ifield select, .ifield textarea {
  width: 100%;
  padding: .8rem 1rem;
  font: inherit;
  font-size: max(16px, var(--step-0));
  min-block-size: 48px;
  color: var(--paper);
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.ifield textarea { resize: vertical; min-block-size: 7rem; }
.ifield input::placeholder { color: var(--paper-45); }
.ifield :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.inquiry__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-2);
}

.inquiry--slim { margin-block-start: var(--sp-4); }

/* A correction note on an update page. Sits above the story, because a reader
   who arrives at a page that has been fixed needs to know that before they read
   the thing that was fixed. */
.correx {
  border: 1px solid var(--accent-15);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-08);
  padding: var(--sp-3) var(--sp-4);
}

.correx__h {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: .4rem;
}

.article__body .correx p { font-size: var(--step-0); line-height: 1.6; color: var(--paper-70); }

/* V3 §5's correction line, at the foot of every update. */
.article__tip {
  border-block-start: 1px solid var(--line);
  padding-block-start: var(--sp-4);
  font-size: var(--step--1);
  color: var(--paper-45);
}
.article__body p.article__tip { font-size: var(--step--1); color: var(--paper-45); }
.article__tip a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* One first-party, moderated conversation beneath every Update. */
.comments {
  max-width: 58rem;
  margin: clamp(3rem, 7vw, 6rem) auto 0;
  padding: clamp(1.4rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-block-start: 3px solid var(--accent);
  border-radius: var(--radius);
  background: linear-gradient(145deg, var(--navy-700), var(--navy-800));
}
.comments__head { max-width: 42rem; }
.comments__head h2 {
  margin-block: .45rem .7rem;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: .98;
}
.comments__head > p:last-child {
  color: var(--paper-70);
  font-size: var(--step-0);
  line-height: 1.55;
}
.comments__status {
  margin-block: var(--sp-4);
  padding-block-end: var(--sp-3);
  border-block-end: 1px solid var(--line);
  color: var(--paper-45);
  font-size: var(--step--1);
}
.comments__status[data-state="submitted"] { color: var(--accent); }
.comments__list {
  display: grid;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
}
.comments__item {
  padding: var(--sp-3) var(--sp-4);
  border-inline-start: 2px solid var(--accent);
  background: rgba(255, 255, 255, .035);
}
.comments__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem 1rem;
  margin-block-end: .55rem;
  color: var(--paper);
  font-size: var(--step--1);
}
.comments__meta time { color: var(--paper-45); }
.comments__text { color: var(--paper-70); line-height: 1.6; white-space: pre-wrap; }
.comments__form {
  display: grid;
  grid-template-columns: minmax(10rem, .38fr) minmax(18rem, 1fr);
  gap: var(--sp-3);
  padding-block-start: var(--sp-2);
}
.comments__field { display: grid; gap: .45rem; margin: 0; }
.comments__field label {
  color: var(--paper-70);
  font-size: var(--step--1);
  font-weight: 700;
}
.comments__field input,
.comments__field textarea {
  width: 100%;
  min-block-size: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  background: var(--navy-900);
  color: var(--paper);
  font: inherit;
  font-size: max(16px, var(--step-0));
}
.comments__field textarea { min-block-size: 8rem; resize: vertical; }
.comments__field :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.comments__trap {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.comments__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.comments__foot > p {
  max-width: 52ch;
  color: var(--paper-45);
  font-size: var(--step--2);
  line-height: 1.45;
}
.comments__foot button:disabled { opacity: .48; cursor: not-allowed; }

@media (max-width: 42rem) {
  .comments__form { grid-template-columns: 1fr; }
  .comments__foot { align-items: flex-start; flex-direction: column; }
}

/* The lede sat directly against the descenders of the serif headline. */
.phero__h + .lede { margin-block-start: var(--sp-3); }

/* Jumping from the index put the heading underneath the fixed header, so the
   reader landed on the second paragraph of the section they asked for. */
.legal__sec { scroll-margin-block-start: 6rem; }


/* ==================== THE PINNED HERO MUST FIT THE WINDOW. ALL OF IT. ==
 * The owner sent a screenshot of the city cut off by the header at the top and
 * the viewport at the bottom: at stacked widths (and short windows) the copy
 * plus the drawing came to ~717px inside a 563px viewport, and because the pin
 * centres its content the overflow split across BOTH edges. A pinned hero that
 * does not fit its window defeats the entire point of pinning it.
 *
 * The copy takes what it needs; the drawing gets whatever is left and scales
 * down into it (the svg keeps its ratio, so a short window simply gets a
 * smaller city, never a clipped one).
 */
.pin .tumg .about .ahero__pin { max-block-size: 100svh; overflow: clip; }

@media (max-width: 63.99rem) {
  .pin .tumg .about .ahero__in {
    max-block-size: calc(100svh - 7.5rem);   /* header + pin padding */
    grid-template-rows: auto minmax(0, 1fr);
  }
  .pin .tumg .about .ahero__art {
    min-block-size: 0;
    align-self: stretch;
    display: grid;
    justify-items: center;
  }
  .pin .tumg .about .ahero__art .civ {
    block-size: 100%;
    max-block-size: 100%;
    inline-size: auto;
    max-inline-size: 100%;
  }
}

/* Two-column short windows have the same failure in miniature: cap the art to
   the height beside the copy rather than to a fixed rem figure. */
@media (min-width: 64rem) and (max-height: 46rem) {
  .tumg .about .ahero__art .civ { max-block-size: 64vh; }
}

/* On a phone the index was a full screen of stacked links before the reader
   reached a word of the page. Same links, laid out as a wrapping row, so it
   costs two lines instead of six. */
@media (max-width: 61.99rem) {
  .legal__toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .legal__toc a {
    border-inline-start: 0;
    padding: .5rem .8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--navy-700);
  }
  .legal__toc a:hover,
  .legal__toc a:focus-visible { border-color: var(--accent); }
}


/* ------------------------- the closing headline, at closing-statement size --
 * "Maybe future of media is local should be bigger" -- it is the last thing
 * the page says, and it was set smaller than the section's own pull quote
 * area. The floor reserve also comes down a step: the skyline is a low
 * horizon now, so the section no longer needs fifteen rems of cleared ground,
 * and the smaller reserve closes up the open space he flagged at the bottom.
 */
.tumg .about .aclose__in .disp--2 {
  font-size: clamp(2.7rem, 1.1rem + 5.2vw, 5.9rem);
}
.tumg .about > section.aclose { padding-block-end: clamp(7rem, 11vw, 11rem); }

/* V3 §5 "Related content". The block sits OUTSIDE the article's reading column
   and spans the page, so it reads as leaving the story rather than as more of
   it. Every update page was previously a dead end. */
.morefrom {
  margin-block-start: var(--sp-6);
  border-block-start: 1px solid var(--line);
  background: color-mix(in srgb, var(--navy-800) 45%, transparent);
}

.morefrom .head { margin-block-end: var(--sp-4); }

/* A wrapper around a card becomes the grid item, and a grid item does not pass
   its stretch on to its child. Every time a card got wrapped -- for filtering
   in the directory, for filtering in the updates index, for the reveal in the
   related block -- the cards in that row went ragged and their columns went
   uneven. Fixed once, for any wrapper, instead of a fourth time by hand. */
.card-grid > div:not(.mcard),
.lede-grid__rest > div:not(.mcard) {
  display: flex;
  min-width: 0;
}

.card-grid > div:not(.mcard) > .mcard,
.lede-grid__rest > div:not(.mcard) > .mcard {
  flex: 1;
  min-width: 0;
}

/* Blueprint §3: "Small footer line: 'Part of The Urban Media Group.'" It is the
   specified device for keeping the parent relationship visible but light, and
   the footer had only a copyright notice, which is a legal string rather than a
   statement of the relationship. */
.footer-parent {
  margin-block-start: var(--sp-2);
  font-size: var(--step--1);
  color: var(--paper-45);
}
.footer-parent a { color: var(--paper-70); border-block-end: 1px solid var(--line); }
.footer-parent a:hover { color: var(--accent); border-color: var(--accent); }

/* Blueprint §6, point 5: a newsletter conversion block on the updates index.
   The feed is where a reader arriving from social lands, and the only signup
   was in the footer, below everything. */
.convert { display: grid; gap: var(--sp-4); align-items: center; }
@media (min-width: 62rem) { .convert { grid-template-columns: 1.1fr .9fr; gap: var(--sp-5); } }
.convert__h {
  font-size: var(--step-2);
  line-height: 1.1;
  letter-spacing: -.022em;
  margin-block-start: var(--sp-2);
  max-width: 22ch;
  text-wrap: balance;
}
.convert__note { margin-block-start: var(--sp-3); color: #3C4858; line-height: 1.55; max-width: 48ch; }

/* `display: flex` on an element that also uses the `hidden` attribute BEATS the
   user-agent rule that hides it, because a class selector outranks a UA style.
   So every filter and the "load more" button reported the right counts and hid
   nothing: the updates index was 29,682px tall with all 26 stories rendered
   while the status line said 9. The directory and the related block had the
   same fault, introduced by the same wrapper rules.
   `!important` is correct here: nothing should ever out-rank `hidden`. */
[hidden] { display: none !important; }

/* Smooth scrolling is declared unconditionally at the top of this file, and it
   is exactly the kind of motion that makes some readers ill. WCAG 2.3.3 asks
   for motion from interaction to be disableable, and the OS preference is how
   people express that. A long jump also *feels* broken when smoothed: the
   sponsor page's "Start a Conversation" travels 7,330px, which is several
   seconds of scenery before the form arrives. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}

/* Even with motion allowed, land the target clear of the sticky header instead
   of underneath it. */
:target { scroll-margin-block-start: 5.5rem; }
[id] { scroll-margin-block-start: 5.5rem; }

/* Long unbroken tokens. Nothing in today's 27 stories has one, so nothing broke;
   a project called "PeachtreeIndustrialBoulevardRedevelopment", a long address
   with no spaces, or a pasted URL will. Measured: a 69-character token pushed a
   card title to 654px inside a 286px card, and the only reason the page did not
   scroll sideways is that .mcard clips -- so the headline was silently cut off
   mid-word with no ellipsis.
   `anywhere` rather than `break-word` on the headings, because it also lowers
   the element's min-content width, which is what stops one long word setting
   the width of a whole grid column. */
h1, h2, h3, h4,
.mcard__title, .leadcard__title, .ulead__title,
.phero__h, .devsplit__h, .briefsplit__h, .intel__h, .convert__h, .aboutsplit__h {
  overflow-wrap: anywhere;
}

p, li, dd, dt, figcaption, .mcard__sum, .mcard__where, .details__val, .card__rel {
  overflow-wrap: break-word;
}

/* Card text is clamped. A 240-character headline is not hypothetical -- the
   desk writes long ones, and one of them stretched a card to ten lines and
   dragged every other card in the row to the same height, leaving two of three
   cards mostly empty. The full headline is always one click away on the page
   the card links to, which is what makes clamping honest here rather than
   lossy. */
.mcard__title, .leadcard__title {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mcard__sum, .leadcard__sum {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The lead story has the room for more of both. */
.ulead__title { -webkit-line-clamp: 5; }
.ulead__sum {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==================================== the card imagery, brought into the house ==
   The owner's note was that the pictures "dont look great", and asked whether an
   AI pass could make them look expensive. The problem is not resolution. These
   are other publications' photographs, shot on different days by different
   people with different white balance, and dropped side by side they read as a
   scrapbook: a lime-and-purple developer logo beside a pastel site plan beside a
   blue-sky drone shot, on a page whose hero is coral over near-black. The
   benchmark's pictures look better mostly because they all look like they came
   from the same place.

   So: one restrained grade across every card thumbnail. Slightly desaturated,
   slightly contrastier, with a whisper of the city's accent over the top. Not a
   duotone -- these are news photographs and a reader has to be able to see the
   actual thing -- and the grade lifts on hover and on focus, so the true image
   is always one gesture away.

   Deliberately NOT applied to `.article__lead`, the big image at the top of a
   story. That one IS the evidence, and it is shown as the publisher took it. */
.media { isolation: isolate; }

.media img {
  /* Dialled back after review: at saturate(.6) with a 30% colour blend over the
     top, the owner's read was "too much red tint" -- a lime-green logo came out
     olive and brick came out pink. The job is cohesion, not a house colour. The
     photographs keep most of their own colour now and the cast is a whisper. */
  /* No cast at all now. The benchmark applies `filter: none` to every image on
     its page, and gets its cohesion from a single crop ratio on a warm
     near-black ground instead of from colour. With the ground warmed, ours can
     do the same -- and a news photograph shown as the photographer took it is
     the better answer anyway. A trace of contrast only, to seat it. */
  filter: contrast(1.03);
  transition: filter .45s var(--ease), transform .6s var(--ease);
}

/* Two jobs, one pseudo-element. `color` swaps hue while keeping the
   photograph's own light and shade, which is what pulls a lime-green logo and a
   blue-sky drone shot into the same family; at 30% it reads as a cast rather
   than a recolour, so the picture is still the picture. The darker foot is a
   plain overlay under it, so a caption always has something to sit on.
   soft-light was tried first and was invisible on a dark page. */
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(178deg,
              var(--accent) 0%,
              color-mix(in srgb, var(--accent) 60%, var(--grade-bot, #101E2B)) 100%);
  mix-blend-mode: color;
  opacity: 0;
  transition: opacity .45s var(--ease);
}

/* Enough to seat a credit line, and no more. This was .55 and was doing the
   work of a scrim on a thumbnail that has no text over it. */
.media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(8, 16, 24, .38) 100%);
  transition: opacity .45s var(--ease);
}

a:hover .media::before,
a:focus-visible .media::before { opacity: .35; }

/* Hover, focus, or a card the keyboard has landed on: the grade steps back. */
a:hover .media img,
a:focus-visible .media img,
.leadcard:hover .media img,
.mcard:hover .media img {
  filter: none;
  transform: scale(1.03);
}

a:hover .media::after,
a:focus-visible .media::after,
.leadcard:hover .media::after,
.mcard:hover .media::after { opacity: 0; }

/* A designed placeholder is already drawn in the brand's colours; grading it
   again just muddies a graphic that was correct to begin with. */
.media svg { filter: none; }
[data-placeholder] .media::after,
.media:has(svg)::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .media img { transition: none; }
  a:hover .media img { transform: none; }
}


/* ===================================== THE V2 CITY'S MEDIA LAYER MOTION ==
 * Information flows OUT of the city: short bright dashes travel each signal
 * line from rooftop to feed card, the boulevard's trail carries a light, and
 * the origin nodes breathe. All of it arms only once the build is complete
 * (the same `is-complete` the old route lights used), and all of it stops
 * under reduced motion.
 */
:is(.tumg, .city-about-intro) .sig__flow {
  stroke-dasharray: 7 93;
  stroke-dashoffset: 100;
  opacity: 0;
}
:is(.tumg, .city-about-intro) .civ.is-complete .sig__flow {
  animation: sig-run 5.2s linear infinite;
}
:is(.tumg, .city-about-intro) .civ.is-complete .sig__flow:nth-of-type(odd) { animation-delay: 1.7s; }
.tumg .civ.is-complete .civ__media path.sig__flow:nth-last-of-type(1) { animation-delay: 3.4s; }
@keyframes sig-run {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  12%  { opacity: .95; }
  86%  { opacity: .95; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.tumg .blt__dot { stroke-dasharray: 3 97; stroke-dashoffset: 100; opacity: 0; }
.tumg .civ.is-complete .blt__dot {
  animation: sig-run 8.5s linear infinite .6s;
}

:is(.tumg, .city-about-intro) .sig__node { transform-box: fill-box; transform-origin: 50% 50%; }
:is(.tumg, .city-about-intro) .civ.is-complete .sig__node { animation: node-breathe 3.4s ease-in-out infinite; }
@keyframes node-breathe {
  0%, 100% { transform: scale(1); opacity: .85; }
  50%      { transform: scale(1.45); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.tumg, .city-about-intro) .sig__flow, .tumg .blt__dot { animation: none !important; display: none; }
  :is(.tumg, .city-about-intro) .sig__node { animation: none !important; }
}


/* The drawing carries its media cards at its own corners, so the art column
   must show ALL of itself AT EVERY WIDTH. The edge-fade mask was built for the
   V1 drawing that ran under the copy; scoped to desktop only, it kept eating
   the four cards on any window under 64rem — the owner's "emblems blurred out
   in black", twice. No width gets the mask. */
.tumg .about .ahero__art {
  -webkit-mask-image: none;
  mask-image: none;
}
@media (min-width: 64rem) {
  .tumg .about .ahero__art { margin-inline-end: 0; }
}


/* ============================================ THE DIGITAL TWIN'S MOTION ==
 * The scan line sweeps the glass forever; each site's beam carries a light up
 * to the plane; the outward pathways run their dashes to the readers. All of
 * it arms with `is-complete`, all of it stops under reduced motion.
 */
.tumg .civ__sweep { opacity: 0; }
.tumg .civ.is-complete .civ__sweep {
  opacity: 1;
  animation: twin-sweep 9s ease-in-out infinite alternate;
}
@keyframes twin-sweep {
  from { transform: translate(0, 0); }
  to   { transform: translate(297px, 171px); }
}

.tumg .sig__rise { stroke-dasharray: 12 88; stroke-dashoffset: 100; opacity: 0; }
.tumg .civ.is-complete .sig__rise { animation: sig-run 3.8s linear infinite; }
.tumg .civ.is-complete .sig__rise:nth-of-type(odd) { animation-delay: 1.9s; }

@media (prefers-reduced-motion: reduce) {
  .tumg .civ__sweep, .tumg .sig__rise { animation: none !important; opacity: 0 !important; }
}


/* The site beams breathe — slowly, out of phase, like places transmitting. */
.tumg .civ__beam { opacity: .55; }
.tumg .civ.is-complete .civ__beam { animation: beam-breathe 7s ease-in-out infinite; }
.tumg .civ.is-complete .civ__beam:nth-of-type(odd) { animation-delay: 3.5s; }
@keyframes beam-breathe {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tumg .civ__beam { animation: none !important; opacity: .55 !important; }
}


/* ============== THE FOUR CONNECTIONS DRAW, THEN THE LIGHT TRAVELS ==
 * The owner's animation spec, step five: "bright connection lines draw from
 * the city to each card." Each line is a pathLength-normalised stroke that
 * draws over 1.1s, staggered clockwise, the moment the sequence reaches its
 * final phase; the traveling pulses ride the same paths afterwards.
 */
:is(.tumg, .city-about-intro) .civ__draw {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
:is(.tumg, .city-about-intro) .civ[data-stage="6"] .civ__draw,
:is(.tumg, .city-about-intro) .civ.is-complete .civ__draw {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s var(--e-draw, cubic-bezier(.62,.04,.3,1));
}
:is(.tumg, .city-about-intro) .civ[data-stage="6"] .civ__draw:nth-of-type(2),
:is(.tumg, .city-about-intro) .civ.is-complete .civ__draw:nth-of-type(2) { transition-delay: .15s; }
:is(.tumg, .city-about-intro) .civ[data-stage="6"] .civ__draw:nth-of-type(3),
:is(.tumg, .city-about-intro) .civ.is-complete .civ__draw:nth-of-type(3) { transition-delay: .3s; }
:is(.tumg, .city-about-intro) .civ[data-stage="6"] .civ__draw:nth-of-type(4),
:is(.tumg, .city-about-intro) .civ.is-complete .civ__draw:nth-of-type(4) { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  :is(.tumg, .city-about-intro) .civ__draw { stroke-dashoffset: 0 !important; transition: none !important; }
}


/* Tablet-width windows stack the hero; the drawing then gets the full content
   width and should use it — it was rendering at two-thirds scale under a cap
   meant for phones. */
@media (min-width: 46rem) and (max-width: 63.99rem) {
  .tumg .about .ahero__art .civ { max-block-size: min(62vh, 34rem); }
}


/* ------------------------------------------- the roadmap at narrow widths --
 * Thin windows overlapped "Live since 2026" and "Coming soon" into one smear:
 * three absolutely-positioned labels cannot share a 400px line. They stack
 * under the rule instead, each with its own dot color as a key.
 */
@media (max-width: 40rem) {
  /* block-size is FIXED at 2.6rem for the overlaid desktop layout; stacking the
     three labels inside that box clipped everything after the second one. */
  .tumg .tline__labels {
    position: static; display: grid; gap: .5rem;
    margin-block-start: 1rem; block-size: auto;
  }
  .tumg .tline__i { position: static !important; inset: auto !important; text-align: start !important; }
}

/* The dashed future segment STOPS AT the next-cities ring instead of running
   through it. */
.tumg .tline__seg--soon { inset-inline-end: 14px; }

/* -------------------------------------------------- the evidence source --
 * Small, quiet, clickable — the citation, nothing more. */
.tumg .evid__src { font-size: .72rem; letter-spacing: .02em; color: #8FA3B6; }
.tumg .evid__src a { color: #B9C6D2; text-decoration: underline; text-underline-offset: 2px; }
.tumg .evid__src a:hover { color: #E5C07E; }


/* The roadmap's labels are absolutely positioned BELOW the rule; the section
   must reserve that room or the last labels sink under the footer — "the
   writing appears to just go missing". */
.tumg .tline { padding-block-end: 4.75rem; }
@media (max-width: 40rem) {
  .tumg .tline { padding-block-end: 1rem; }
}

/* ================================================= the Brief invitation ==
   The email list is the business case for the whole site, and the only two
   ways to join were the footer and a mid-page block, both below the point most
   readers stop. This is the ask, made once, after the reader has shown some
   intent.

   A card in the corner on a laptop and a sheet at the foot on a phone: on a
   phone a centred modal covers the thing the reader came for, and the thumb is
   at the bottom of the screen anyway. */
.brief-pop {
  position: fixed;
  z-index: 60;
  inset-inline: var(--sp-3);
  inset-block-end: var(--sp-3);
  max-width: 26rem;
  margin-inline: auto;
  padding: var(--sp-4);
  background: var(--navy-700);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  gap: var(--sp-2);
  /* Starts out of the way and arrives; `hidden` still wins over this until the
     script decides otherwise, so a reader with no JavaScript never meets it. */
  transform: translateY(1.5rem);
  opacity: 0;
  transition: transform .32s var(--ease), opacity .32s var(--ease);
  /* On a short laptop window the panel ran past the bottom of the screen and
     took its own small print with it. It can never be taller than the viewport
     it sits in. */
  max-block-size: calc(100dvh - 2 * var(--sp-4));
  overflow: auto;
}

.brief-pop[data-open] { transform: none; opacity: 1; }
.brief-pop[hidden] { display: none; }

@media (min-width: 46rem) {
  .brief-pop {
    inset-inline: auto var(--sp-5);
    inset-block-end: var(--sp-5);
    margin-inline: 0;
  }
}

.brief-pop__h {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.12;
  color: var(--paper);
}

.brief-pop__p { font-size: var(--step--1); line-height: 1.55; color: var(--paper-70); }

.brief-pop__meta {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--paper-45);
}

.brief-pop .signup { margin-block-start: var(--sp-2); }

.brief-pop__x {
  position: absolute;
  inset-block-start: .4rem;
  inset-inline-end: .4rem;
  /* 44px, because this is the control a reader who does not want the panel is
     reaching for, and missing it is how a polite ask becomes an obnoxious one. */
  inline-size: 44px;
  block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--paper-45);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.brief-pop__x:hover { color: var(--paper); }
.brief-pop__x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .brief-pop { transition: none; transform: none; }
}


/* ================================== the card, measured against the benchmark ==
   oftmw.com, read on 2026-08-13: a feed card there is a transparent box with a
   1px rgba(255,255,255,.10) hairline and a 15px radius, and the picture bleeds
   to that edge with no padding and no filter. Ours were filled navy panels with
   a blue border, which is why they read as UI panels rather than as plates in a
   journal. On the warm ground the hairline is enough. */
.mcard,
.leadcard {
  background: transparent;
  border-color: rgba(255, 255, 255, .10);
  border-radius: 15px;
}

.mcard:hover,
.leadcard:hover {
  background: rgba(255, 255, 255, .022);
  border-color: rgba(255, 255, 255, .2);
}

/* One ratio, everywhere. The benchmark runs a single crop across its whole
   feed; we were mixing 16:9 for updates, 4:3 for projects and 9:16 for social,
   which is most of why a grid of ours looked assembled from separate places. */
.media--update,
.media--campaign,
.media--map,
.media--project { aspect-ratio: 16 / 10; }

/* ============================================ surfaces that catch the light ==
   The owner's read was that the site "feels like old HTML", and measuring the
   benchmark said why. Not colour: our panels were flat fills inside a 1px
   border, which is the visual grammar of an admin screen. Theirs are lit
   objects -- a faint gradient, a large soft shadow, and a one-pixel inset
   highlight along the top edge, all three at once. The inset highlight is what
   does it: a surface catching light from above reads as something you could put
   a thumb on. That is the tactile quality he was describing.

   Applied to the four things that are actually surfaces. Not to everything --
   a page where every element is raised is a page where nothing is. */
.mcard,
.leadcard,
.croute,
.seg,
.offer,
.statband,
.details {
  background-image: var(--surface);
  box-shadow: var(--lift-1);
}

.mcard:hover,
.leadcard:hover,
.croute:hover {
  background-image: var(--surface-2);
  box-shadow: var(--lift-2);
  transform: translateY(-2px);
}

.mcard,
.leadcard,
.croute {
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              background-image .28s var(--ease), border-color .28s var(--ease);
}

/* Frosted glass on the header. It sits over photography at the top of every
   page, and a flat bar over a photograph is the single most dated thing a site
   can do. Fifteen elements on the benchmark use a backdrop filter; we had none.
   @supports because Firefox needs the solid fallback it already had. */
@supports (backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px)) {
  .site-header {
    background: color-mix(in srgb, var(--navy-900) 72%, transparent);
    -webkit-backdrop-filter: var(--frost);
    backdrop-filter: var(--frost);
  }
}

/* The one action on a page gets a glow. Used sparingly on purpose: the
   benchmark puts a coloured glow only on its primary button and its live
   indicators, which is what keeps it meaning "this one". */
.btn--primary { box-shadow: var(--glow); }
.btn--primary:hover {
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 52%, transparent);
  transform: translateY(-1px);
}
.btn { transition: transform .2s var(--ease), box-shadow .2s var(--ease),
                   background-color .2s var(--ease), color .2s var(--ease); }

/* The chips and the search field are inset rather than raised: pressed into the
   surface instead of sitting on it. Both states in one system is what makes the
   raised ones read as raised. */
.chip,
.sfilter__chip,
.psearch input,
.ifield input,
.ifield select,
.ifield textarea {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(255, 255, 255, .04);
}

@media (prefers-reduced-motion: reduce) {
  .mcard, .leadcard, .croute, .btn { transition: none; }
  .mcard:hover, .leadcard:hover, .croute:hover, .btn--primary:hover { transform: none; }
}

/* ============================== 2026 city-site design-quality pass ==========
   This layer is intentionally small. The content model and page order were
   already right; the audit found that hierarchy, tactile depth and the three
   conversion actions needed to read as one system across both city brands. */

/* Header: a quiet glass edge at rest, then a little more separation once the
   reader has left the hero. The mobile menu overlays the page instead of
   pushing the entire hero down when it opens. */
.site-header {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .025);
  transition: background-color .24s var(--ease), box-shadow .24s var(--ease),
              border-color .24s var(--ease);
}
.site-header.is-stuck {
  border-block-end-color: var(--line-hi);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .34), inset 0 -1px 0 rgba(255, 255, 255, .025);
}
.site-nav a {
  border-radius: 999px;
  padding-inline: .55rem;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.site-nav a:hover { background: rgba(255, 255, 255, .045); }

@media (max-width: 61.99rem) {
  .mobile-nav {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    background: color-mix(in srgb, var(--navy-700) 92%, transparent);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .045);
    -webkit-backdrop-filter: var(--frost);
    backdrop-filter: var(--frost);
  }
}

/* The three actions are a sequence: read, subscribe, partner. Solid, outlined,
   then softly raised gives each one a distinct job without making three
   competing primary buttons. */
.btn--soft {
  color: var(--paper);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  border-color: var(--line-hi);
  box-shadow: var(--lift-soft);
}
.btn--soft:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line-hi));
  box-shadow: 0 14px 38px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .075);
}

.hero {
  border-block-end: 1px solid var(--line-hi);
  overflow: clip;
}
.hero__actions { row-gap: .75rem; }
.hero__actions .btn {
  min-block-size: 48px;
  padding-inline: 1.25rem;
}

@media (max-width: 45.99rem) {
  .hero__inner {
    min-height: calc(100svh - 68px);
    padding-block: var(--sp-6) var(--sp-5);
  }
  .hero__actions {
    display: grid;
    width: min(100%, 18rem);
  }
  .hero__actions .btn {
    justify-content: space-between;
    width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * {
    animation: city-hero-enter .78s cubic-bezier(.16, 1, .3, 1) both;
  }
  .hero__copy > :nth-child(2) { animation-delay: .06s; }
  .hero__copy > :nth-child(3) { animation-delay: .13s; }
  .hero__copy > :nth-child(4) { animation-delay: .2s; }
  @keyframes city-hero-enter {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to { opacity: 1; transform: none; }
  }
}

/* News cards: the lead is the editorial object; the three supporting items are
   deliberately quieter. On phones those three become a swipe shelf, removing
   several screens of repetitive stacking while keeping every story present. */
.leadcard { background-image: var(--surface-editorial); }
.lede-grid__rest .mcard {
  border-color: var(--line-hi);
  box-shadow: var(--lift-soft);
}

@media (max-width: 39.99rem) {
  .lede-grid__rest {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 21rem);
    gap: var(--sp-3);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
    padding: .15rem var(--sp-4) var(--sp-3);
    margin-inline: calc(var(--sp-4) * -1);
  }
  .lede-grid__rest > * { scroll-snap-align: start; }
  .lede-grid__rest .mcard { height: 100%; }
}

/* Development is the product proof. A containing surface, faint coordinate
   grid and moving signal make the project card and timeline read as connected
   parts of one intelligence system rather than two unrelated dark boxes. */
.devsplit__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(.7rem, 1.6vw, 1.15rem);
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-lg);
  background: var(--surface-editorial);
  box-shadow: var(--lift-1);
}
.devsplit__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 68%);
  mask-image: linear-gradient(135deg, #000, transparent 68%);
}
.devsplit__panel::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset-block: 1.1rem auto;
  inset-inline: 1.1rem;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .65;
  transform: translateX(-110%);
}
.devsplit__panel > * { position: relative; z-index: 1; }
.devsplit__panel .mcard,
.devsplit__panel .intel__tl { box-shadow: var(--lift-soft); }

@media (prefers-reduced-motion: no-preference) {
  .devsplit__panel.is-in::after,
  .reveal.is-in .devsplit__panel::after {
    animation: intel-scan 3.8s var(--ease) .5s both;
  }
  @keyframes intel-scan {
    0% { transform: translateX(-110%); opacity: 0; }
    18%, 76% { opacity: .75; }
    100% { transform: translateX(110%); opacity: 0; }
  }
}

/* The cream newsletter movement is the visual reset in a long dark page. A
   very soft city-colour bloom and inset edge make it feel intentional while
   preserving the existing high-contrast reading palette. */
.band--cream {
  background-image:
    radial-gradient(70% 85% at 88% 5%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 64%),
    linear-gradient(180deg, #FFF8EA, var(--cream));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), inset 0 -1px 0 rgba(23, 34, 48, .08);
}
.mock { transition: transform .34s var(--ease), box-shadow .34s var(--ease); }
.briefsplit__art:hover .mock {
  transform: translateY(-4px) rotate(.2deg);
  box-shadow: 0 30px 72px rgba(10, 20, 29, .31), 0 3px 8px rgba(10, 20, 29, .16);
}

/* Partnership proof is an editorial metric collection, not a spreadsheet.
   Individual lifted tiles avoid the heavy bars created by the old wide gaps. */
.proof--wide {
  gap: var(--sp-3);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.proof--wide .proof__cell {
  border: 1px solid var(--line-hi);
  border-radius: var(--radius);
  background-image: var(--surface-editorial);
  box-shadow: var(--lift-soft);
}
.proof--wide .proof__num { color: var(--paper); }

.offer,
.way,
.seg,
.listcard {
  border-color: var(--line-hi);
  border-radius: var(--radius-lg);
}
.offer,
.way,
.seg { background-image: var(--surface-editorial); }

/* The invitation remains an optional edge prompt. Frost and a narrow accent
   edge keep it visually related to the header; on a phone its duplicate body
   copy is removed so it behaves like a compact action sheet. */
.brief-pop {
  background: color-mix(in srgb, var(--navy-700) 90%, transparent);
  border-color: var(--line-hi);
  box-shadow: 0 28px 72px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: var(--frost);
  backdrop-filter: var(--frost);
}
.brief-pop::before {
  content: "";
  position: absolute;
  inset-block: 1rem;
  inset-inline-start: 0;
  inline-size: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent);
}
@media (max-width: 45.99rem) {
  .brief-pop { padding: var(--sp-3) var(--sp-4); }
  .brief-pop__p { display: none; }
}

/* Each city invitation is a miniature issue, not a generic utility card. The
   newsletter is the evidence: readers see the real hierarchy, sourcing, and
   visual density before the form asks for anything. Atlanta uses the approved
   Brief red; Savannah overrides the same variables with its deeper gold. */
.brief-pop--issue {
  --brief-pop-red: #B53935;
  --brief-pop-ink: #2E2423;
  --brief-pop-muted: #6F5B58;
  grid-template-columns: minmax(14rem, .82fr) minmax(21rem, 1.18fr);
  gap: 0;
  inline-size: min(45rem, calc(100vw - 2 * var(--sp-5)));
  max-width: 45rem;
  block-size: min(27.5rem, calc(100dvh - 2 * var(--sp-5)));
  padding: 0;
  overflow: hidden auto;
  color: var(--brief-pop-ink);
  background: #F5F1E7;
  border: 1px solid #D8CAC4;
  border-block-start: 4px solid var(--brief-pop-red);
  border-radius: 2px;
  box-shadow: 0 30px 80px rgba(4, 5, 6, .52), 0 2px 8px rgba(4, 5, 6, .2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.brief-pop--issue.brief-pop--savannah {
  --brief-pop-red: #946715;
  --brief-pop-ink: #261F18;
  --brief-pop-muted: #6C604F;
  background: #F7F0E1;
  border-color: #D8C8A8;
}
.brief-pop--issue::before { display: none; }

.brief-pop__visual {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  background: #E9DFCA;
  border-inline-end: 1px solid #D8CAC4;
}
.brief-pop__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.brief-pop__copy {
  display: grid;
  align-content: center;
  gap: .52rem;
  min-width: 0;
  padding: clamp(1.15rem, 2vw, 1.45rem);
}
.brief-pop--issue .kicker {
  color: var(--brief-pop-red);
  font-size: .66rem;
  letter-spacing: .16em;
}
.brief-pop--issue .brief-pop__h {
  max-width: 15ch;
  color: var(--brief-pop-ink);
  font-size: clamp(1.72rem, 2.25vw, 2.05rem);
  line-height: 1.01;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.brief-pop--issue .brief-pop__p {
  max-width: 47ch;
  color: var(--brief-pop-muted);
  font-size: .76rem;
  line-height: 1.42;
}
.brief-pop--issue .signup {
  display: grid;
  grid-template-columns: 1fr;
  gap: .35rem;
  margin-block-start: 0;
}
.brief-pop--issue .signup input {
  min-block-size: 40px;
  padding-inline: .85rem;
  color: var(--brief-pop-ink);
  background: #FCFAF3;
  border-color: #CBBDB7;
  border-radius: 0;
}
.brief-pop--issue .signup input::placeholder { color: #81706C; }
.brief-pop--issue .signup input:focus-visible {
  outline: 2px solid var(--brief-pop-red);
  outline-offset: 1px;
  border-color: transparent;
}
.brief-pop--issue .signup .btn {
  min-block-size: 40px;
  padding-inline: .9rem;
  color: #F8F5EC;
  background: var(--brief-pop-red);
  border-radius: 0;
  box-shadow: none;
}
.brief-pop--issue .signup .btn:hover { background: color-mix(in srgb, var(--brief-pop-red) 78%, #160E0E); }
.brief-pop--issue .signup__note { color: var(--brief-pop-muted); }
.brief-pop__preview {
  width: fit-content;
  color: var(--brief-pop-red);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  border-block-end: 1px solid currentColor;
}
.brief-pop__preview:hover { color: color-mix(in srgb, var(--brief-pop-red) 78%, #160E0E); }
.brief-pop__tail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.brief-pop--issue .brief-pop__meta {
  color: #81706C;
  font-size: .62rem;
  letter-spacing: .08em;
}
.brief-pop--issue .brief-pop__x {
  z-index: 3;
  inset-block-start: .55rem;
  inset-inline-end: .55rem;
  color: var(--brief-pop-ink);
  background: rgba(252, 250, 243, .9);
  border: 1px solid rgba(46, 36, 35, .18);
}
.brief-pop--issue .brief-pop__x:hover {
  color: #F8F5EC;
  background: var(--brief-pop-red);
}
.brief-pop--issue .brief-pop__x:focus-visible { outline-color: var(--brief-pop-red); }

@media (max-width: 45.99rem) {
  .brief-pop--issue {
    grid-template-columns: 1fr;
    inline-size: auto;
    block-size: auto;
    max-block-size: calc(100dvh - 1.5rem);
    inset-inline: .75rem;
    inset-block-end: .75rem;
    padding: 0;
  }
  .brief-pop--issue .brief-pop__visual {
    min-height: 8rem;
    max-height: 8rem;
    border-inline-end: 0;
    border-block-end: 1px solid #D8CAC4;
  }
  .brief-pop--issue .brief-pop__visual img { height: 8rem; }
  .brief-pop--issue .brief-pop__copy {
    gap: .58rem;
    padding: 1rem 1.1rem 1.05rem;
  }
  .brief-pop--issue .brief-pop__h {
    max-width: 18ch;
    padding-inline-end: 2.25rem;
    font-size: clamp(1.55rem, 7vw, 1.9rem);
  }
  .brief-pop--issue .brief-pop__p {
    display: block;
    font-size: .76rem;
    line-height: 1.45;
  }
  .brief-pop--issue .signup { grid-template-columns: 1fr; }
  .brief-pop--issue .signup .btn { justify-content: center; width: 100%; }
  .brief-pop--issue .brief-pop__meta { font-size: .58rem; }
}

@media (prefers-reduced-motion: reduce) {
  .briefsplit__art:hover .mock { transform: none; }
  .devsplit__panel::after { display: none; }
}


/* In the split layout the timeline gets a half column; three labels across a
   ~560px rule collided ("URBAN SAVANNAH" ran into "NEXT CITIES"). The middle
   label steps left and the set tightens until the rule has a full row again. */
@media (min-width: 40.01rem) and (max-width: 86rem) {
  .tumg .tline__i--sav { inset-inline-start: 40%; }
  .tumg .tline__i b { letter-spacing: .04em; font-size: .78rem; }
}

/* ================================ city homepage · editorial reset ==========
   This is deliberately a new composition, not a polish layer. The city home
   pages move from one full-bleed dark photograph followed by same-colour bands
   to an asymmetric cover, a paper newsroom, an ink intelligence field and a
   city-colour newsletter takeover. Other routes keep the quieter shared shell. */

.city-homepage {
  --home-ink: #0A0B0C;
  --home-ink-2: #101820;
  --home-paper: #F2EBDD;
  --home-paper-hi: #FFF9EC;
  --home-copy: #17191A;
  --home-rule: rgba(23, 25, 26, .22);
}

.city-homepage body { background: var(--home-ink); }
.city-homepage .city-home { display: block; }

/* The homepage header is a masthead, not glass floating over photography. */
.city-homepage .site-header {
  background: var(--home-ink);
  border-block-end: 3px solid var(--accent);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.city-homepage .site-header.is-stuck {
  background: color-mix(in srgb, var(--home-ink) 94%, transparent);
  border-block-end-color: var(--accent);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
}
.city-homepage .site-header__bar { min-height: 76px; }
.city-homepage .brandmark img { width: 48px; height: 48px; }
.city-homepage .brandmark__name { font-size: .98rem; letter-spacing: .075em; }
.city-homepage .site-nav { gap: clamp(.8rem, 2vw, 2.1rem); }
.city-homepage .site-nav a {
  padding: .45rem 0;
  border-radius: 0;
  border-block-end: 1px solid transparent;
}
.city-homepage .site-nav a:hover {
  color: var(--accent);
  background: transparent;
  border-block-end-color: var(--accent);
}
.city-homepage .btn { border-radius: 0; }
.city-homepage .site-header .btn--sm {
  min-height: 42px;
  padding-inline: 1.15rem;
}

/* Cover: copy and image are separate editorial planes. */
.city-homepage .hero--cover {
  min-height: 0;
  background: var(--home-ink);
  border: 0;
  overflow: hidden;
}
.city-homepage .hero__shell {
  display: grid;
  grid-template-columns: minmax(30rem, .88fr) minmax(34rem, 1.12fr);
  min-height: min(790px, calc(100svh - 76px));
}
.city-homepage .hero__copy {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: center;
  justify-items: stretch;
  gap: clamp(1.25rem, 2.1vw, 2rem);
  padding: clamp(3rem, 6vw, 6.5rem) clamp(2rem, 4vw, 4.5rem);
  padding-inline-start: max(var(--sp-4), calc((100vw - var(--wrap)) / 2));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 38%),
    var(--home-ink);
}
.city-homepage .hero__copy::after {
  content: "";
  position: absolute;
  inset-block: 7% 7%;
  inset-inline-end: 0;
  width: 1px;
  background: linear-gradient(transparent, var(--accent) 20% 80%, transparent);
}
.city-homepage .hero__folio {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding-block: .7rem;
  border-block: 1px solid rgba(255, 255, 255, .16);
  color: var(--paper-70);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.city-homepage .hero h1 {
  display: grid;
  gap: 0;
  margin: 0;
  max-width: 10ch;
  line-height: .82;
  letter-spacing: -.055em;
}
.city-homepage .hero__headline-top {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 5.4vw, 6.45rem);
  font-weight: 730;
  color: var(--paper);
}
.city-homepage .hero__headline-city {
  font-family: var(--font-serif);
  font-size: clamp(4.8rem, 7.8vw, 9.2rem);
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -.035em;
}
.city-homepage .hero .lede {
  max-width: 41ch;
  color: var(--paper-70);
  font-size: clamp(1.02rem, 1.3vw, 1.24rem);
  line-height: 1.6;
}
.city-homepage .hero__actions {
  display: grid;
  grid-template-columns: minmax(10rem, 1.18fr) minmax(9rem, 1fr) minmax(9rem, 1fr);
  gap: 0;
  width: 100%;
  margin-block-start: .25rem;
  border: 1px solid rgba(255, 255, 255, .18);
}
.city-homepage .hero__actions .btn {
  justify-content: space-between;
  min-height: 56px;
  width: 100%;
  padding: .8rem 1rem;
  border: 0;
  border-inline-end: 1px solid rgba(255, 255, 255, .18);
  box-shadow: none;
}
.city-homepage .hero__actions .btn:last-child { border-inline-end: 0; }
.city-homepage .hero__actions .btn--primary {
  background: var(--accent);
  color: var(--home-ink);
}
.city-homepage .hero__actions .btn--ghost,
.city-homepage .hero__actions .btn--soft {
  background: transparent;
  color: var(--paper);
}
.city-homepage .hero__actions .btn--ghost:hover,
.city-homepage .hero__actions .btn--soft:hover {
  color: var(--home-ink);
  background: var(--paper);
}
.city-homepage .hero__proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  border-block-start: 1px solid var(--accent);
  padding-block-start: 1rem;
}
.city-homepage .hero__proof-item {
  display: grid;
  align-content: start;
  gap: .25rem;
  min-width: 0;
  padding-inline: .8rem;
  border-inline-start: 1px solid rgba(255, 255, 255, .14);
}
.city-homepage .hero__proof-item:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}
.city-homepage .hero__proof-item strong {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 2.6vw, 3rem);
  font-weight: 400;
  line-height: .95;
  color: var(--paper);
}
.city-homepage .hero__proof-item span {
  color: var(--paper-45);
  font-size: .67rem;
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.city-homepage .hero__visual {
  position: relative;
  min-width: 0;
  margin: 1.5rem 1.5rem 1.5rem 0;
  overflow: hidden;
  clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%, 0 11%);
  background: var(--navy-800);
}
.city-homepage .hero__media { position: absolute; inset: 0; }
.city-homepage .hero__media picture,
.city-homepage .hero__media img { display: block; width: 100%; height: 100%; }
.city-homepage .hero__media img { object-fit: cover; }
.city-homepage .hero .grade::after {
  background:
    linear-gradient(180deg, rgba(7, 8, 9, .12), transparent 44%, rgba(7, 8, 9, .84)),
    linear-gradient(90deg, rgba(7, 8, 9, .18), transparent 45%);
}
.city-homepage .hero__watermark {
  inset-inline-end: 2rem;
  inset-block-end: 4.25rem;
  width: clamp(72px, 7vw, 110px);
  height: auto;
  opacity: .8;
}
.city-homepage .hero__caption {
  position: absolute;
  z-index: 3;
  inset-inline: 2rem;
  inset-block-end: 1.6rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding-block-start: .75rem;
  border-block-start: 1px solid rgba(255, 255, 255, .5);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Newsroom: a paper section makes the content feel published, not paneled. */
.city-homepage .home-stories {
  position: relative;
  padding-block: clamp(5rem, 9vw, 8.5rem);
  border: 0;
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(23, 25, 26, .055) 50%, transparent 50.1%),
    var(--home-paper);
  color: var(--home-copy);
  --paper: var(--home-copy);
  --paper-70: #4E504F;
  --paper-45: #6F716F;
}
.city-homepage .home-stories .kicker { color: #A32D2A; }
.city-savannah.city-homepage .home-stories .kicker { color: #79500F; }
.city-homepage .home-stories .head { margin-block-end: clamp(2.5rem, 5vw, 4.5rem); }
.city-homepage .home-stories .head h2 {
  max-width: 14ch;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 5.5vw, 6.25rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.035em;
}
.city-homepage .home-stories .head p.lede { color: #505351; }
.city-homepage .home-stories .head .btn {
  color: var(--home-copy);
  border-color: var(--home-copy);
  box-shadow: none;
}
.city-homepage .home-stories .lede-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: stretch;
}
.city-homepage .home-stories .leadcard {
  border: 0;
  border-radius: 0;
  background: var(--home-ink-2);
  background-image: none;
  box-shadow: 0 28px 70px rgba(29, 24, 17, .26);
}
.city-homepage .home-stories .leadcard__body { padding: clamp(1.5rem, 3.2vw, 3rem); }
.city-homepage .home-stories .leadcard__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.2vw, 3.6rem);
  font-weight: 400;
  line-height: 1;
}
.city-homepage .home-stories .leadcard__sum,
.city-homepage .home-stories .leadcard .mcard__foot,
.city-homepage .home-stories .leadcard .card__rel { color: #B9BCB8; }
.city-homepage .home-stories .lede-grid__rest {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-content: stretch;
  border-block-start: 2px solid var(--home-copy);
}
.city-homepage .home-stories .lede-grid__rest .mcard {
  display: grid;
  grid-template-columns: minmax(7rem, 34%) 1fr;
  align-items: center;
  gap: 1.25rem;
  padding: 1.3rem 0;
  border: 0;
  border-block-end: 1px solid var(--home-rule);
  border-radius: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--home-copy);
}
.city-homepage .home-stories .lede-grid__rest .mcard__link { align-self: stretch; }
.city-homepage .home-stories .lede-grid__rest .media {
  width: 100%;
  height: 100%;
  min-height: 8.4rem;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}
.city-homepage .home-stories .lede-grid__rest .mcard__body { padding: 0 1rem 0 0; }
.city-homepage .home-stories .lede-grid__rest .mcard__title {
  color: var(--home-copy);
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  font-weight: 400;
  line-height: 1.08;
}
.city-homepage .home-stories .lede-grid__rest .mcard__type { color: #A32D2A; }
.city-savannah.city-homepage .home-stories .lede-grid__rest .mcard__type { color: #79500F; }
.city-homepage .home-stories .lede-grid__rest .mcard__foot { color: #626562; }

/* Intelligence: one large field with a faint city-grid signal. */
.city-homepage .home-intel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(6rem, 10vw, 10rem);
  border: 0;
  background: var(--home-ink-2);
}
.city-homepage .home-intel::before {
  content: "DEVELOPMENT";
  position: absolute;
  z-index: -1;
  inset-inline-start: -1vw;
  inset-block-start: 2rem;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .055);
  font-family: var(--font-display);
  font-size: clamp(5rem, 13vw, 13rem);
  font-weight: 700;
  letter-spacing: -.06em;
  white-space: nowrap;
}
.city-homepage .home-intel::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, transparent, #000 25% 75%, transparent);
}
.city-homepage .home-intel .devsplit {
  grid-template-columns: minmax(20rem, .82fr) minmax(28rem, 1.18fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}
.city-homepage .home-intel .devsplit__copy {
  padding-block-start: clamp(4rem, 8vw, 7rem);
}
.city-homepage .home-intel .devsplit__h {
  max-width: 11ch;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 5vw, 5.8rem);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.035em;
}
.city-homepage .home-intel .psearch input {
  min-height: 58px;
  border: 0;
  border-block-end: 2px solid var(--accent);
  border-radius: 0;
  background: rgba(0, 0, 0, .28);
  box-shadow: none;
}
.city-homepage .home-intel .sfilter__chip { border-radius: 0; }
.city-homepage .home-intel .devsplit__panel {
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 0;
  background: rgba(7, 10, 13, .78);
  box-shadow: 32px 32px 0 color-mix(in srgb, var(--accent) 13%, transparent);
}
.city-homepage .home-intel .devsplit__panel::before { opacity: .3; }

/* The Brief is a city-colour takeover, not the site's one timid cream band. */
.city-homepage .home-brief {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 9vw, 9rem);
  border: 0;
  background: var(--accent);
  background-image: none;
  color: var(--home-ink);
  box-shadow: none;
  --paper: var(--home-ink);
  --paper-70: rgba(10, 11, 12, .74);
  --paper-45: rgba(10, 11, 12, .58);
}
.city-homepage .home-brief::before {
  content: "THE BRIEF";
  position: absolute;
  inset-inline-end: clamp(.5rem, 2vw, 2rem);
  inset-block-start: -2rem;
  color: rgba(255, 255, 255, .15);
  font-family: var(--font-display);
  font-size: clamp(6rem, 16vw, 15rem);
  font-weight: 700;
  letter-spacing: -.07em;
  white-space: nowrap;
}
.city-savannah.city-homepage .home-brief::before {
  color: rgba(38, 31, 24, .15);
}
.city-homepage .home-brief .briefsplit {
  position: relative;
  grid-template-columns: minmax(0, 1.08fr) minmax(23rem, .92fr);
  gap: clamp(3rem, 7vw, 7rem);
}
.city-homepage .home-brief .kicker,
.city-homepage .home-brief .briefsplit__proof { color: var(--home-ink); }
.city-homepage .home-brief .briefsplit__h {
  max-width: 10ch;
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 6vw, 6.8rem);
  font-weight: 400;
  line-height: .88;
  letter-spacing: -.04em;
}
.city-homepage .home-brief .lede { color: rgba(10, 11, 12, .78); }
.city-homepage .home-brief .briefsplit__benefit { color: var(--home-ink); }
.city-homepage .home-brief .briefsplit__list li { color: rgba(10, 11, 12, .76); }
.city-homepage .home-brief .briefsplit__list li::before { background: var(--home-ink); }
.city-homepage .home-brief .signup--big {
  padding: .45rem;
  border: 1px solid rgba(10, 11, 12, .32);
  background: rgba(255, 255, 255, .18);
}
.city-homepage .home-brief .signup--big input {
  min-height: 54px;
  border: 0;
  border-radius: 0;
  background: var(--home-paper-hi);
  color: var(--home-copy);
}
.city-homepage .home-brief .signup--big .btn {
  min-height: 54px;
  background: var(--home-ink);
  color: var(--home-paper-hi);
  box-shadow: none;
}
.city-homepage .home-brief .briefsplit__art {
  transform: rotate(2.2deg);
  filter: drop-shadow(0 35px 44px rgba(68, 30, 20, .25));
}

/* Partnership changes key again: paper, then two poster-like offers. */
.city-homepage .home-partner {
  padding-block: clamp(5rem, 9vw, 9rem);
  border: 0;
  background: var(--home-paper-hi);
  color: var(--home-copy);
  --paper: var(--home-copy);
  --paper-70: #505351;
  --paper-45: #6F716F;
}
.city-homepage .home-partner .kicker { color: #A32D2A; }
.city-homepage .home-partner .head h2 {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 5vw, 5.5rem);
  font-weight: 400;
  line-height: .92;
}
.city-homepage .home-partner .offer-grid { gap: 0; }
.city-homepage .home-partner .offer {
  min-height: 22rem;
  padding: clamp(2rem, 4vw, 4rem);
  border: 0;
  border-radius: 0;
  background: var(--home-ink-2);
  background-image: none;
  color: var(--paper);
  box-shadow: none;
}
.city-homepage .home-partner .offer:nth-child(2) {
  background: var(--accent);
  color: var(--home-ink);
}
.city-homepage .home-partner .offer h3 {
  max-width: 14ch;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3vw, 3.3rem);
  font-weight: 400;
}
.city-homepage .home-partner .offer p { color: inherit; opacity: .76; }
.city-homepage .home-partner .offer .btn { margin-block-start: auto; }
.city-homepage .home-partner .offer:nth-child(2) .btn {
  color: var(--home-ink);
  border-color: var(--home-ink);
}

.city-homepage .home-about {
  padding-block: clamp(5rem, 9vw, 9rem);
  color: #FFF7EA;
  --paper: #FFF7EA;
  --paper-70: rgba(255, 247, 234, .76);
  --paper-45: rgba(255, 247, 234, .58);
  border-block-start: 1px solid rgba(255, 255, 255, .12);
  background: var(--home-ink);
}
.city-homepage .home-about h2 { color: #FFF7EA; }
.city-homepage .home-about p { color: rgba(255, 247, 234, .76); }
.city-homepage .home-about .aboutsplit {
  grid-template-columns: minmax(0, .9fr) minmax(26rem, 1.1fr);
  gap: clamp(3rem, 7vw, 7rem);
}
.city-homepage .home-about .aboutsplit__h {
  max-width: 12ch;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 5vw, 5.7rem);
  font-weight: 400;
  line-height: .92;
}
.city-homepage .home-about .aboutsplit__art {
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, transparent);
  box-shadow: 22px 22px 0 color-mix(in srgb, var(--accent) 15%, transparent);
}

@media (max-width: 74rem) and (min-width: 62rem) {
  .city-homepage .hero__shell { grid-template-columns: minmax(27rem, .98fr) minmax(30rem, 1.02fr); }
  .city-homepage .hero__copy { padding-inline: 2rem; }
  .city-homepage .hero__headline-top { font-size: clamp(3rem, 5vw, 4.4rem); }
  .city-homepage .hero__headline-city { font-size: clamp(4.4rem, 7vw, 6.4rem); }
  .city-homepage .hero__proof-item:nth-child(n+4) { display: none; }
}

@media (max-width: 61.99rem) {
  .city-homepage .site-header__bar { min-height: 68px; }
  .city-homepage .mobile-nav {
    position: absolute;
    background: var(--home-ink);
    border-block-start-color: var(--accent);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .5);
  }
  .city-homepage .hero__shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .city-homepage .hero__visual {
    order: 1;
    min-height: 48svh;
    margin: 0;
    clip-path: none;
  }
  .city-homepage .hero__copy {
    order: 2;
    width: calc(100% - 2rem);
    margin: -4rem 1rem 0;
    padding: clamp(2rem, 6vw, 3.5rem);
    background: var(--home-ink);
    box-shadow: 0 -22px 50px rgba(0, 0, 0, .34);
  }
  .city-homepage .hero__copy::after { inset-block: 0; }
  .city-homepage .hero h1 { max-width: 11ch; }
  .city-homepage .hero__headline-top { font-size: clamp(2.75rem, 8vw, 4.4rem); }
  .city-homepage .hero__headline-city { font-size: clamp(4.25rem, 13vw, 7rem); }
  .city-homepage .hero__caption { inset-inline: 1rem; inset-block-end: 4.8rem; }
  .city-homepage .hero__watermark { inset-inline-end: 1.25rem; inset-block-end: 7rem; }
  .city-homepage .home-stories .lede-grid,
  .city-homepage .home-intel .devsplit,
  .city-homepage .home-brief .briefsplit,
  .city-homepage .home-about .aboutsplit { grid-template-columns: 1fr; }
  .city-homepage .home-stories .lede-grid { gap: 2rem; }
  .city-homepage .home-intel .devsplit__copy { padding-block-start: 4rem; }
  .city-homepage .home-intel .devsplit__panel { box-shadow: 16px 16px 0 color-mix(in srgb, var(--accent) 13%, transparent); }
  .city-homepage .home-brief .briefsplit__art { max-width: 32rem; margin-inline: auto; }
  .city-homepage .home-about .aboutsplit__art { max-width: 36rem; }
}

@media (max-width: 45.99rem) {
  .city-homepage .hero__visual { min-height: 36svh; }
  .city-homepage .hero__copy { margin-block-start: 0; }
  .city-homepage .hero__copy { gap: 1.25rem; }
  .city-homepage .hero__folio { font-size: .62rem; }
  .city-homepage .hero__actions {
    grid-template-columns: 1fr;
    width: 100%;
  }
  .city-homepage .hero__actions .btn {
    min-height: 52px;
    border-inline-end: 0;
    border-block-end: 1px solid rgba(255, 255, 255, .18);
  }
  .city-homepage .hero__actions .btn:last-child { border-block-end: 0; }
  .city-homepage .hero__proof { grid-template-columns: repeat(2, 1fr); row-gap: 1rem; }
  .city-homepage .hero__proof-item:nth-child(odd) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
  .city-homepage .hero__proof-item strong { font-size: 2.25rem; }
  .city-homepage .hero__caption {
    display: grid;
    gap: .25rem;
    inset-block-end: 1rem;
  }
  .city-homepage .hero__watermark { inset-block-end: 4.4rem; }
  .city-homepage .home-stories { background: var(--home-paper); }
  .city-homepage .home-stories .head h2,
  .city-homepage .home-intel .devsplit__h,
  .city-homepage .home-brief .briefsplit__h,
  .city-homepage .home-about .aboutsplit__h { font-size: clamp(2.8rem, 13vw, 4.6rem); }
  .city-homepage .home-stories .lede-grid__rest {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: min(84vw, 21rem);
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    padding-block-end: 1rem;
    border-block-start: 0;
  }
  .city-homepage .home-stories .lede-grid__rest .mcard {
    display: flex;
    min-height: 31rem;
    padding: 0;
    border: 1px solid var(--home-rule);
    background: var(--home-paper-hi);
    scroll-snap-align: start;
  }
  .city-homepage .home-stories .lede-grid__rest .mcard__link { width: 100%; }
  .city-homepage .home-stories .lede-grid__rest .media { min-height: 13rem; }
  .city-homepage .home-stories .lede-grid__rest .mcard__body { padding: 1.25rem; }
  .city-homepage .home-brief .signup--big { display: grid; }
  .city-homepage .home-brief .signup--big .btn { width: 100%; }
  .city-homepage .home-partner .offer { min-height: 19rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .city-homepage .hero__visual {
    animation: cover-reveal .9s cubic-bezier(.16, 1, .3, 1) both;
  }
  @keyframes cover-reveal {
    from { opacity: 0; transform: translateX(4%); }
    to { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .city-homepage .hero__visual,
  .city-homepage .home-brief .briefsplit__art { animation: none; transform: none; }
}


/* On a phone the map is roughly half its desktop size, so the -6.6rem lift
   that clears the rule on a wide screen threw Georgia's markers up out of the
   section entirely. The lift scales down with the map. */
/* ------------------------------- the roadmap when the section STACKS --------
 * Side by side, the map is lifted so it fills the column beside the copy. Once
 * the section stacks, that same lift dragged the map up over the paragraph and
 * cut the top of Georgia off. Stacked, the map simply takes its own space: no
 * lift, full width, nothing behind the words. The section then pads its foot so
 * the rule -- which hangs a fixed distance above the bottom edge -- lands over
 * lower Florida rather than across Georgia.
 */
@media (max-width: 63.99rem) {
  .tumg .semap {
    min-block-size: 0;
    /* The rule hangs a fixed distance above the section's foot, so with a fixed
       pad it drifted from 60% of the map at phone size to 93% at tablet size.
       This tracks the map's own height (map height = 0.767 x its width) and
       flattens once the map hits its cap, holding the rule near 78% -- lower
       Florida -- at every stacked width. */
    padding-block-end: 0;
  }
  .tumg .semap__svg {
    position: static;
    inset: auto;
    width: 100%;
    max-inline-size: 34rem;
    max-height: none;
    aspect-ratio: 600 / 460;
    margin-inline: auto;
  }
  /* The timeline FLOWS after the map and pulls up by a fraction of the map's
     own height, so the rule sits at ~78% of it -- lower Florida -- whatever the
     label block below happens to measure. Anchoring it to the section's foot
     instead meant solving for the label height, which changes with wrapping,
     and the rule drifted between 41% and 93% across widths. */
  .tumg .tline {
    position: static;
    inset: auto;
    margin-block-start: max(-92px, calc(8px - 16.9vw));
  }
}


/* =========================================== ENTRANCES, SLOWED AND SEQUENCED ==
 * At an ordinary scrolling pace the old reveals finished before the block was
 * properly on screen -- the owner's note was that you "can't really tell".
 * Everything carrying WORDS travels further and takes longer, and blocks
 * release their children one at a time so the eye can follow the order. The
 * hero city drawing is deliberately untouched.
 *
 * EVERY hidden state below is scoped `:not(.is-in)`. Without that, these rules
 * tie on specificity with the existing `.is-in` rules and, being later in the
 * file, WIN -- which pinned every reveal on the site permanently 30px down and
 * left sequenced copy invisible. States are mutually exclusive by construction.
 */
:root { --e-seq: cubic-bezier(.22, .68, .28, 1); }

/* the shared block reveal */
.js-anim .tumg .reveal:not(.is-in),
.js-anim.tumg .reveal:not(.is-in) { translate: 0 30px; }
/* Slower than it looks on paper. The owner read 1.05s as "too fast to be
   clear when you scroll"; at this size a block travelling 30px wants closer
   to a second and a half to register as arriving rather than appearing. */
.tumg .reveal {
  transition: opacity 1.5s var(--e-seq), translate 1.5s var(--e-seq);
}

/* the About page's per-element rise */
.tumg .about .rise:not(.is-in) { translate: 0 26px; }
.tumg .about .rise {
  transition: opacity 1.6s var(--e-seq), translate 1.6s var(--e-seq);
}
.tumg .about .rise:not(.is-in):has(.disp),
.tumg .about .rise.story__head:not(.is-in),
.tumg .about .rise.believe__head:not(.is-in) { translate: 0 40px; }
.tumg .about .believe__cols .rise:not(.is-in) { transform: translateY(38px); }
.tumg .about .believe__cols .rise {
  transition: opacity 1.65s var(--e-seq), transform 1.65s var(--e-seq);
}
/* Its body copy cascades, but ONLY JUST. `Why we exist` is a two-column
   section -- headline left, these paragraphs right -- so a long delay leaves a
   visibly EMPTY column beside a finished headline. At .24s/.42s on top of a
   1.15s fade the right-hand side read as blank for the better part of a second
   and the owner reasonably asked whether it was broken. The order is still
   legible; the column is never empty. */
.tumg .about .why__body > *.rise.is-in,
.tumg .about .story__body > *.rise.is-in { transition-delay: .06s; }
.tumg .about .why__body > *:nth-child(2).rise.is-in,
.tumg .about .story__body > *:nth-child(2).rise.is-in { transition-delay: .16s; }
.tumg .about .story__body > *:nth-child(3).rise.is-in { transition-delay: .26s; }

/* SEQUENCED BLOCKS -- the container holds still, its children arrive in order.
   Used on the homepage's copy and heading blocks and the contact page's
   opening, so all three TUMG pages move the same way. */
.js-anim .tumg .seq:not(.is-in) > *,
.js-anim.tumg .seq:not(.is-in) > * { opacity: 0; translate: 0 26px; }
.tumg .seq > * {
  transition: opacity 1.5s var(--e-seq), translate 1.5s var(--e-seq);
}
.tumg .seq > *:nth-child(2) { transition-delay: .20s; }
.tumg .seq > *:nth-child(3) { transition-delay: .40s; }
.tumg .seq > *:nth-child(4) { transition-delay: .60s; }
.tumg .seq > *:nth-child(n+5) { transition-delay: .78s; }

/* THE TWO CITY CARDS MEET IN THE MIDDLE: Atlanta enters from the left,
   Savannah from the right, a beat later. The band clips, so a card travelling
   from off-stage can never widen the page. */
.tumg .tband--deep { overflow: clip; }
.js-anim .tumg .tcity.city-atlanta:not(.is-in),
.js-anim.tumg .tcity.city-atlanta:not(.is-in) { translate: -60px 0; }
.js-anim .tumg .tcity.city-savannah:not(.is-in),
.js-anim.tumg .tcity.city-savannah:not(.is-in) { translate: 60px 0; }
.tumg .tcity.reveal {
  transition: opacity 1.15s var(--e-seq), translate 1.15s var(--e-seq);
}
.tumg .tcity.city-savannah.reveal { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .tumg .seq > *,
  .tumg .tcity.city-atlanta,
  .tumg .tcity.city-savannah {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }
}

/* ============================ THE EMBLEM ANNOUNCES ITSELF, THE PEN SIGNS OFF ==
 *
 * Two asks from the owner, both about the last beat of an entrance rather than
 * the entrance itself.
 *
 * 1. The emblems already trace themselves on, which is quiet and easy to miss.
 *    When the trace lands they now swell a few percent and light their own
 *    outline for a little over half a second, then settle. The glow is
 *    `currentColor`, so it is gold on the cream band and needs no second value
 *    if the section's ink ever changes. Deliberately short: a mark that pulses
 *    for a second and a half stops being punctuation and becomes a distraction.
 *
 *    The delay is keyed to the trace, not guessed -- 1.15s of draw, so the pop
 *    starts at 1.02s and overlaps its own tail. Each column steps a beat later
 *    so the four read left to right rather than firing together. This is an
 *    ANIMATION, not a transition, because `transition-delay` set on the <svg>
 *    never reached the paths inside it.
 *
 * 2. The underline under `local.` drew almost immediately, so it landed while
 *    the heading above it was still arriving. It now waits for the section to
 *    finish and signs it off, faster and later -- a pen stroke, not a fade.
 */
@keyframes tumg-emblem-pop {
  0%   { transform: scale(1);    filter: none; }
  45%  { transform: scale(1.09); filter: drop-shadow(0 0 5px currentColor); }
  100% { transform: scale(1);    filter: none; }
}

.tumg .about .belief.rise.is-in .emblem {
  transform-origin: 50% 58%;
  animation: tumg-emblem-pop .58s var(--e-seq) 1.02s both;
}
.tumg .about .believe__cols .rise:nth-child(2) .belief.rise.is-in .emblem,
.tumg .about .believe__cols .belief.rise.is-in:nth-child(2) .emblem { animation-delay: 1.18s; }
.tumg .about .believe__cols .belief.rise.is-in:nth-child(3) .emblem { animation-delay: 1.34s; }
.tumg .about .believe__cols .belief.rise.is-in:nth-child(4) .emblem { animation-delay: 1.50s; }

/* The pen. Later, so it is the last thing that happens in the closing section,
   and quicker, so it reads as one stroke rather than a line fading up. */
.tumg .about .rise.is-in .ulined__mark path {
  transition: stroke-dashoffset .62s cubic-bezier(.32, .72, .3, 1) 1.15s;
}

@media (prefers-reduced-motion: reduce) {
  .tumg .about .belief.rise.is-in .emblem { animation: none; filter: none; }
}

/* THE SASH IS A FILLED SHAPE, NOT A STROKE.
 *
 * It was given `stroke-dasharray` / `stroke-dashoffset` like the other drawn
 * marks on this page. Those do nothing to a filled path, so the underline was
 * simply THERE the moment the section arrived, every single time -- which is
 * what the owner kept reporting and what the earlier "fix" to its transition
 * timing could not have changed. Only the faint second pass is stroked, so only
 * that hairline was ever animating.
 *
 * It is drawn now by uncovering it from the left, which is what a pen does. The
 * timing is unchanged: it still waits for the rest of the section to land. */
.js-anim .tumg .rise:not(.is-in) .ulined__mark,
.js-anim.tumg .rise:not(.is-in) .ulined__mark { clip-path: inset(0 100% 0 0); }
.tumg .rise .ulined__mark {
  clip-path: inset(0 0 0 0);
  transition: clip-path .62s cubic-bezier(.32, .72, .3, 1) 1.15s;
}
@media (prefers-reduced-motion: reduce) {
  .tumg .rise .ulined__mark { clip-path: none; transition: none; }
}

/* ============================================ THE TEAM ROW, ONE RULE, ALL WIDTHS ==
 *
 * Two faults the owner named, at opposite ends of the range, and they had the
 * same cause: the portrait size and the column size were being decided
 * separately, so wherever they disagreed the difference showed up as empty
 * space or as a portrait too big for its screen.
 *
 *   Wide  - three portraits sat in three equal thirds of the page, each one
 *           stranded in the middle of a column far wider than itself. The row
 *           read as three distant objects rather than a group.
 *   Phone - the row became a swipe carousel with cards at 74% of the viewport,
 *           which made each portrait LARGER on a phone than on a laptop.
 *
 * The column now IS the portrait, at one fluid size that runs from 6.5rem on a
 * phone to 13rem on a large screen with nothing to strand in between, and the
 * three sit together at the left edge like every other block in the section.
 * The carousel is retired: three columns fit without scrolling at any phone
 * width. It existed because a three-up grid used to slice "William Blount" in
 * half; at this size the name wraps to two lines, which is a wrap, not a cut. */
.tumg .crew__row {
  grid-template-columns: repeat(3, minmax(0, clamp(6.5rem, 14vw, 13rem)));
  justify-content: start;
  gap: clamp(.75rem, 2vw, 1.9rem);
}
.tumg .pplate { max-inline-size: none; }

@media (max-width: 45.99rem) {
  .tumg .crew__row {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-inline: 0;
    margin-inline: 0;
  }
  .tumg .person { scroll-snap-align: none; }
}

/* ============================== LAUNCH EMAIL CHOICES + COMPACT CITY CHROME ==
 * One email address can join the Monday Brief, occasional city updates, or
 * both. The two checkboxes are deliberately visible; consent is never inferred
 * from which button the reader happened to click. */
.signup--preferences {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) auto;
  align-items: end;
  gap: .75rem;
  width: min(100%, 42rem);
  margin-block-start: var(--sp-4);
}
.preference-email {
  display: grid;
  gap: .35rem;
  min-width: 0;
  color: inherit;
  font-size: var(--step--1);
  font-weight: 700;
}
.signup--preferences .preference-email input[type="email"] {
  width: 100%;
  min-height: 50px;
  margin: 0;
  border-radius: 0;
}
.preference-choices {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.preference-choices legend {
  grid-column: 1 / -1;
  margin-block-end: .1rem;
  padding: 0;
  color: inherit;
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .68;
}
.preference-choice {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: .65rem;
  align-items: start;
  min-width: 0;
  padding: .72rem .8rem;
  border: 1px solid currentColor;
  color: inherit;
  cursor: pointer;
  opacity: .82;
}
.signup--preferences .preference-choice input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  min-block-size: 1.2rem;
  max-block-size: 1.2rem;
  min-inline-size: 1.2rem;
  max-inline-size: 1.2rem;
  min-width: 0;
  margin: .1rem 0 0;
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
}
.signup--preferences .preference-choice input[type="checkbox"]:checked {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 4px #F7F1E7;
}
.signup--preferences .preference-choice input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.preference-choice span { display: grid; gap: .16rem; min-width: 0; }
.preference-choice strong { font-size: .78rem; line-height: 1.25; }
.preference-choice small { font-size: .68rem; font-weight: 400; line-height: 1.35; opacity: .72; }
.signup--preferences > .btn { min-height: 50px; white-space: nowrap; }
.signup--preferences .signup__note { grid-column: 1 / -1; margin: 0; }
.signup--preferences-compact { margin-block-start: .25rem; }

/* The footer is navigation, not another page. Required policy links stay
   present in one quiet row; the duplicated five-column sitemap is gone. */
.site-footer--compact {
  margin-block-start: 0;
  padding-block: 1.5rem .75rem;
}
.footer-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--line);
}
.footer-cta__h {
  margin-block-start: .2rem;
  color: var(--paper);
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.05;
}
.footer-cta__line { margin-block-start: .35rem; color: var(--paper-45); font-size: var(--step--1); }
.footer-grid--compact {
  grid-template-columns: minmax(15rem, 1.5fr) repeat(2, minmax(9rem, .75fr));
  gap: clamp(2rem, 6vw, 6rem);
  padding-block: 1rem;
}
.footer-grid--compact .footer-brand { gap: .75rem; }
.footer-grid--compact .footer-brand .brandmark img { width: 38px; height: 38px; }
.footer-grid--compact .footer-col h2 { margin-block-end: .75rem; }
.footer-grid--compact .footer-col ul { gap: .35rem; }
.footer-grid--compact .footer-col a { font-size: .9rem; }
.footer-grid--compact .socials a { width: 34px; height: 34px; }
.site-footer--compact .footer-base { margin-block-start: 0; padding-block-start: .75rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: .45rem 1rem; }
.footer-legal a { font-size: .75rem; }

/* Native horizontal rails: visible next/previous controls on desktop and
   ordinary touch scrolling on phones. */
.social-rail-head {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: end;
  margin-block: 1.5rem 1rem;
}
.rail-controls { display: flex; gap: .5rem; }
.rail-controls button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 50%;
  cursor: pointer;
}
.rail-controls button:hover { color: var(--accent); border-color: var(--accent); }
.social-rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--accent) transparent;
  scrollbar-width: thin;
  padding: .25rem max(1rem, calc((100vw - var(--wrap)) / 2)) 1.25rem 0;
}
.social-example {
  flex: 0 0 clamp(18rem, 31vw, 24rem);
  scroll-snap-align: start;
  display: grid;
  align-content: start;
  overflow: hidden;
  color: #211B18;
  background: #F7F0E2;
  border: 1px solid #D7C8B0;
  text-decoration: none;
  transition: translate .2s var(--ease), border-color .2s var(--ease);
}
.social-example:hover { translate: 0 -.25rem; border-color: var(--accent); }
.social-example__image {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: #0C0D0E;
}
.social-example__image img { width: 100%; height: 100%; object-fit: contain; }
.social-example__body { display: grid; gap: .48rem; padding: 1.1rem; }
.social-example__format,
.social-example__client {
  color: #7A302D;
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.social-example__distribution {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .3rem .8rem;
  padding-block: .55rem;
  color: #7A302D;
  border-block: 1px solid #D7C8B0;
  font: 700 .58rem/1.3 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.social-example__distribution span { color: #665B50; }
.social-example__body h3 {
  color: #211B18;
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 400;
  line-height: 1.02;
}
.social-example__views { color: var(--accent-dk); font-family: var(--font-mono); font-size: .82rem; }
.social-example__views:has(span) { display: grid; gap: .18rem; }
.social-example__views span {
  color: #766A5E;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.social-example__views b { color: var(--accent-dk); font-weight: 700; }
.social-example__body > p:not([class]) { color: #665B50; font-size: .82rem; line-height: 1.5; }
.social-example__public-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .8rem;
  padding-block: .55rem;
  border-block: 1px solid #D7C8B0;
  color: #665B50;
  font: 700 .56rem/1.25 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.social-example__public-metrics span { display: inline-flex; gap: .25rem; }
.social-example__public-metrics b { color: #A8322E; font-weight: 700; }
.social-example__link {
  margin-block-start: .25rem;
  color: var(--accent-dk);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Work With Us: every audience segment carries a typographic emblem, then real
   sponsored examples show both placement surfaces side by side. */
.seg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1.25rem;
  align-items: start;
  min-height: 13rem;
}
.seg__emblem {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  color: var(--accent);
  border: 1px solid var(--accent-15);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-15), transparent 68%);
}
.seg__emblem::before,
.seg__emblem::after { content: ""; position: absolute; background: currentColor; opacity: .32; }
.seg__emblem::before { width: 100%; height: 1px; }
.seg__emblem::after { width: 1px; height: 100%; }
.seg__emblem span { z-index: 1; font-family: var(--font-mono); font-size: .66rem; font-weight: 700; letter-spacing: .08em; }
.seg__emblem b { position: absolute; inset: auto .65rem .45rem auto; font-family: var(--font-serif); font-size: 1.1rem; font-weight: 400; opacity: .55; }
.commercial-examples { overflow: hidden; }
.social-rail--commercial { align-items: stretch; }
.social-rail--commercial .social-example {
  flex-basis: clamp(19.5rem, 31vw, 23rem);
  grid-template-rows: auto 1fr;
}
.social-example__instagram {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #0C0D0E;
}
.social-example__instagram iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
.social-example__pair {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: .55rem;
  padding: .8rem;
  background: #EDE1CC;
}
.social-example__pair figure { display: grid; align-content: start; gap: .35rem; min-width: 0; }
.social-example__pair img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 21rem;
  object-fit: contain;
  object-position: top center;
  background: #EDE1CC;
}
.social-example__pair figcaption { color: #766A5E; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.social-example__sponsor-image {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  isolation: isolate;
  background: #0C0D0E;
}
.social-example__sponsor-image img { display: block; }
.social-example__sponsor-backdrop {
  position: absolute;
  inset: -1.25rem;
  z-index: -1;
  width: calc(100% + 2.5rem);
  height: calc(100% + 2.5rem);
  object-fit: cover;
  filter: blur(18px) brightness(.42) saturate(.8);
  opacity: .78;
}
.social-example__sponsor-poster {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 18px 48px rgba(0,0,0,.42);
}
.social-example__sponsor-image > span {
  position: absolute;
  inset: .7rem .7rem auto auto;
  padding: .4rem .55rem;
  color: #FFF8EB;
  background: rgba(8,9,10,.84);
  border: 1px solid rgba(255,255,255,.18);
  font: 700 .56rem/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* The issue-preview popup uses the same two explicit choices without becoming
   another tall footer. Email and CTA share the first row on desktop. */
.brief-pop--issue .signup--preferences {
  grid-template-columns: 1fr;
  gap: .45rem;
  width: 100%;
}
.brief-pop--issue .preference-email > span { display: none; }
.brief-pop--issue .signup--preferences .preference-email input[type="email"],
.brief-pop--issue .signup--preferences > .btn { min-height: 40px; }
.brief-pop--issue .preference-choices { gap: .35rem; }
.brief-pop--issue .preference-choices legend { display: none; }
.brief-pop--issue .preference-choice { padding: .38rem .5rem; color: var(--brief-pop-ink); }
.brief-pop--issue .preference-choice input[type="checkbox"] {
  min-block-size: 1.05rem;
  max-block-size: 1.05rem;
  min-inline-size: 1.05rem;
  max-inline-size: 1.05rem;
  inline-size: 1.05rem;
  block-size: 1.05rem;
}
.brief-pop--issue .preference-choice strong { font-size: .65rem; }
.brief-pop--issue .preference-choice small { display: none; }
.brief-pop--issue .signup--preferences .signup__note { color: var(--brief-pop-muted); font-size: .68rem; }
.brief-pop--issue .signup--preferences .signup__note:empty { display: none; }

@media (max-width: 61.99rem) {
  .footer-grid--compact { grid-template-columns: 1.3fr 1fr 1fr; gap: 1.5rem; }
  .seg { grid-template-columns: 4.5rem 1fr; min-height: 0; }
}

@media (max-width: 45.99rem) {
  .signup--preferences { grid-template-columns: 1fr; }
  .signup--preferences > .btn { width: 100%; justify-content: center; }
  .preference-choices { grid-template-columns: 1fr; }
  .footer-cta { grid-template-columns: 1fr; }
  .footer-cta .btn { width: 100%; justify-content: space-between; }
  .footer-grid--compact { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .footer-grid--compact .footer-brand { grid-column: 1 / -1; }
  .site-footer--compact .footer-base { align-items: flex-start; }
  .footer-legal { width: 100%; }
  .rail-controls { display: none; }
  .social-example { flex-basis: min(84vw, 21rem); }
  .seg-grid { grid-template-columns: 1fr; }
  .social-rail--commercial .social-example { flex-basis: 88vw; }
  .social-example__instagram,
  .social-example__sponsor-image { aspect-ratio: 4 / 5; }
  .sponsor-case--topdog .ccard__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sponsor-case--topdog .ccard__stat:nth-child(3) { border-inline-start: 0; }
  .sponsor-case--topdog .ccard__stat:nth-child(n+3) { border-block-start: 1px solid #46494B; }
  .brief-pop--issue .signup--preferences { grid-template-columns: 1fr; }
  .brief-pop--issue .preference-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brief-pop--issue .signup--preferences > .btn { min-height: 42px; }
  .brief-pop__tail { align-items: flex-start; }
}

/* ========================= ATLANTA PUBLIC-SITE EDITORIAL PASS, 2026-08-24 == */

/* The primary newsletter is fixed; the second list is an optional add-on. */
.preference-choices--optional { grid-template-columns: 1fr; }
.preference-choices--optional legend {
  margin-block-end: .45rem;
  color: var(--paper-70);
  font-size: var(--step--1);
  font-weight: 700;
}
.preference-choices--optional .preference-choice { min-height: 0; }

/* Preserve authored display words. Generated story/card titles keep the
   defensive break-word rule below, but a short heading must never become
   "comple / xity" on a phone. */
.phero__h,
.head h2,
.devsplit__h,
.briefsplit__h,
.intel__h,
.convert__h,
.aboutsplit__h,
.value__h,
.way h3,
.seg h3 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* A story with both current photography and a rendering leads with both. */
.article__lead-split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: .8rem;
  max-width: var(--wrap);
  margin: var(--sp-5) auto 0;
}
.article__lead-split .article__lead {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  margin: 0;
}
.article__lead-split .article__lead img {
  width: 100%;
  height: clamp(24rem, 45vw, 39rem);
  object-fit: cover;
}
.article__lead-split .article__lead:nth-child(2) img { object-position: 50% 50%; }

/* Work With Us starts with the audience and treats its two offers as distinct
   editorial chapters instead of two generic cards. */
.work-page .phero {
  overflow: hidden;
  background:
    radial-gradient(60% 110% at 100% 0%, rgba(185, 51, 47, .22), transparent 62%),
    #0B0C0D;
}
.work-hero {
  display: grid;
  grid-template-columns: minmax(22rem, .82fr) minmax(30rem, 1.18fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: center;
}
.work-hero__copy { position: relative; z-index: 2; }
.work-hero__copy > .btn { margin-block-start: clamp(1.6rem, 3vw, 2.4rem); }
.phero__metric-note {
  max-width: 46rem;
  margin-block-start: 1rem;
  color: rgba(255, 247, 234, .54);
  font: 600 .58rem/1.55 var(--font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.work-hero__copy .phero__h {
  max-width: 9ch;
  font-size: clamp(4.2rem, 7.4vw, 8.2rem);
}
.work-hero__art {
  position: relative;
  min-height: clamp(36rem, 48vw, 47rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    radial-gradient(circle at 72% 20%, rgba(223, 72, 65, .32), transparent 34%),
    #111314;
  background-size: 34px 34px, 34px 34px, auto, auto;
}
.work-hero__art::after {
  content: "URBAN ATLANTA / WORK IN THE WILD";
  position: absolute;
  inset: auto 1.2rem 1.2rem auto;
  color: rgba(255, 255, 255, .52);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  writing-mode: vertical-rl;
}
.work-hero__post {
  position: absolute;
  display: block;
  width: clamp(12.5rem, 35%, 16.5rem);
  overflow: hidden;
  color: #FFF7EA;
  border: 5px solid #EEE5D8;
  border-radius: 22px;
  background: #080909;
  box-shadow: 0 28px 56px rgba(0, 0, 0, .5);
  text-decoration: none;
  transition: translate .25s var(--ease), rotate .25s var(--ease);
}
.work-hero__post:hover { z-index: 5; translate: 0 -.55rem; rotate: 0deg; }
.work-hero__post img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: top;
}
.work-hero__post span {
  position: absolute;
  inset: auto .55rem .55rem;
  padding: .5rem .65rem;
  color: #FFF7EA;
  background: rgba(8, 9, 9, .88);
  backdrop-filter: blur(9px);
  display: grid;
  gap: .14rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.work-hero__post span b { font-size: .61rem; letter-spacing: .08em; }
.work-hero__post span small { color: rgba(255, 247, 234, .68); font-size: .56rem; letter-spacing: .06em; }
.work-hero__post--1 { z-index: 2; inset: 5% auto auto 5%; rotate: -5deg; }
.work-hero__post--2 { z-index: 2; inset: auto 5% 4% auto; rotate: 5deg; }
.work-hero__post--3 {
  z-index: 1;
  inset: auto auto -6% 33%;
  width: clamp(10rem, 25%, 12.25rem);
  rotate: 2deg;
}
.work-hero__post--4 {
  z-index: 1;
  inset: -7% 29% auto auto;
  width: clamp(9.5rem, 23%, 11.5rem);
  rotate: -3deg;
}
.work-hero__seal {
  position: absolute;
  z-index: 4;
  inset: 42% auto auto 39%;
  display: grid;
  justify-items: center;
  gap: .5rem;
  padding: 1rem;
  color: #FFF7EA;
  background: #B9332F;
  box-shadow: 9px 9px 0 rgba(0, 0, 0, .32);
  rotate: -3deg;
}
.work-hero__seal img { width: 4.4rem; height: 4.4rem; object-fit: contain; }
.work-hero__seal span {
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ad-offer-board {
  position: relative;
  min-height: clamp(34rem, 45vw, 43rem);
  isolation: isolate;
}
.ad-offer-board::before {
  content: "";
  position: absolute;
  inset: 3% 0 4% 2%;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.16);
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px, transparent 1px),
    radial-gradient(circle at 44% 48%, rgba(239,74,69,.22), transparent 55%);
  background-size: 3.5rem 3.5rem, 3.5rem 3.5rem, auto;
}
.ad-offer-board__card {
  position: absolute;
  inset: 8% auto 8% 7%;
  display: grid;
  width: min(29rem, 68%);
  padding: clamp(1.5rem, 3vw, 2.6rem);
  align-content: start;
  color: #FFF7EA;
  border: 7px solid #111314;
  border-radius: 2.5rem;
  background: linear-gradient(155deg,#301310,#141617 74%);
  box-shadow: 2.1rem 2.1rem 0 rgba(239,74,69,.2), 0 2.5rem 4rem rgba(0,0,0,.4);
  transform: rotate(-4deg);
}
.ad-offer-board__card img { justify-self: end; width: 5rem; height: 5rem; object-fit: contain; }
.ad-offer-board__card b { padding-block: 1rem; font: 750 .76rem/1.3 var(--font-mono); letter-spacing: .15em; }
.ad-offer-board__rule { height: 1px; margin-block-start: .9rem; background: rgba(255,247,234,.2); }
.ad-offer-board__metric {
  position: absolute;
  inset: 12% 1% auto auto;
  display: grid;
  min-width: min(15rem, 40%);
  padding: 1.2rem 1.35rem;
  color: #171817;
  border: 1px solid #171817;
  background: #EF4A45;
  box-shadow: .8rem .8rem 0 #111314;
  transform: rotate(3deg);
}
.ad-offer-board__metric--2 { inset: auto 3% 8% auto; background: #FFF7EA; transform: rotate(-2deg); }
.ad-offer-board__metric strong { font: 400 clamp(2.8rem, 5vw, 4.8rem)/.82 var(--font-serif); }
.ad-offer-board__metric span { max-width: 16ch; font: 750 .58rem/1.25 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.commercial-proof {
  overflow: hidden;
  background:
    radial-gradient(70% 85% at 95% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 64%),
    #0B0C0D;
}
.commercial-proof__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, .65fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-block-end: 2rem;
}
.commercial-proof__head h2 {
  max-width: 12ch;
  margin-block-start: .65rem;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 5.4vw, 6rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.035em;
}
.commercial-proof__head > p { max-width: 46ch; color: var(--paper-70); line-height: 1.65; }
.commercial-proof .proof { margin-block-end: 1.2rem; }
.commercial-proof .aud-visual { margin-block-start: 1.2rem; }

.work-page .ways { gap: 0; border: 1px solid var(--line-hi); }
.work-page .way {
  position: relative;
  min-height: 28rem;
  padding: clamp(2rem, 4vw, 4rem);
  border: 0;
  border-radius: 0;
  background: #121415;
}
.work-page .way + .way { border-inline-start: 1px solid var(--line-hi); }
.work-page .way:nth-child(2) {
  background: var(--accent-dk);
  color: #FFF7EA;
}
.work-page .way:nth-child(2) p,
.work-page .way:nth-child(2) .kicker { color: #FFF7EA; }
.work-page .way::after { content: none; }
.way__number {
  position: absolute;
  inset: 1.2rem 1.4rem auto auto;
  color: rgba(255, 255, 255, .2);
  font-family: var(--font-serif);
  font-size: clamp(4rem, 8vw, 8rem);
  line-height: 1;
}
.way__fit {
  margin-block-start: auto;
  padding-block-start: 1.4rem;
  border-block-start: 1px solid currentColor;
  opacity: .82;
}
.way__fit b {
  display: block;
  margin-block-end: .35rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* TUMG's illustrated line emblems replace the CAL/OPEN/BUILD abbreviations. */
.work-page .seg-grid { gap: 0; border-block-start: 1px solid var(--line-hi); }
.work-page .seg {
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1.4rem;
  min-height: 15rem;
  padding: 1.6rem;
  border: 0;
  border-inline-end: 1px solid var(--line-hi);
  border-block-end: 1px solid var(--line-hi);
  border-radius: 0;
  background: transparent;
}
.work-page .seg__emblem {
  display: grid;
  place-items: center;
  width: 7rem;
  aspect-ratio: 1;
  color: var(--accent-hi);
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.work-page .seg__emblem::before,
.work-page .seg__emblem::after { content: none; }
.work-page .seg__emblem .emblem { width: 82%; height: 82%; }
.work-page .seg h3 {
  max-width: 23ch;
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 2.2vw, 2.2rem);
  font-weight: 400;
  line-height: 1.03;
}
.work-page .seg p { margin-block-start: .7rem; }

.work-page .commercial-examples { color: #211B18; }
.work-page .commercial-examples .head h2 { color: #211B18; }
.work-page .commercial-examples .head .lede,
.work-page .commercial-examples .social-rail-head { color: #665B50; }

@media (max-width: 61.99rem) {
  .work-hero { grid-template-columns: 1fr; }
  .work-hero__copy { max-width: 46rem; }
  .work-hero__art { min-height: 42rem; }
  .work-hero__post--1 { inset-inline-start: 7%; }
  .work-hero__post--2 { inset-inline-end: 7%; }
  .work-hero__post--3 { inset-inline-start: 36%; }
  .work-hero__post--4 { inset-inline-end: 33%; }
  .commercial-proof__head { grid-template-columns: 1fr; }
  .work-page .way { min-height: 23rem; }
  .article__lead-split .article__lead img { height: clamp(20rem, 52vw, 31rem); }
}

@media (max-width: 45.99rem) {
  .work-hero__copy .phero__h {
    max-width: 10ch;
    font-size: clamp(3.2rem, 15vw, 4.7rem);
  }
  .work-hero__art { min-height: 32rem; }
  .work-hero__post { width: 43%; border-width: 4px; border-radius: 17px; }
  .work-hero__post--1 { inset: 4% auto auto 3%; }
  .work-hero__post--2 { inset: auto 3% 2% auto; }
  .work-hero__post--3 { inset: auto auto -3% 32%; width: 31%; }
  .work-hero__post--4 { inset: -4% 30% auto auto; width: 29%; }
  .work-hero__seal { inset: 41% auto auto 29%; }
  .work-hero__seal img { width: 3.4rem; height: 3.4rem; }
  .article__lead-split { grid-template-columns: 1fr; gap: .55rem; }
  .article__lead-split .article__lead img { height: auto; aspect-ratio: 4 / 3; }
  .work-page .ways { border: 0; }
  .work-page .way + .way { border-inline-start: 0; border-block-start: 1px solid var(--line-hi); }
  .work-page .seg {
    grid-template-columns: 5.4rem minmax(0, 1fr);
    min-height: 0;
    padding: 1.25rem 0;
    border-inline-end: 0;
  }
  .work-page .seg__emblem { width: 5rem; }
}

/* ============================ ATLANTA OFFER ARCHITECTURE, 2026-08-24 == */

/* Update imagery is an editorial pair whenever the record has one. The first
   slot is slightly wider because it is the documented event; the second is
   usually the plan or rendering that explains what comes next. */
.update-media-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 2px;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--navy-900);
}
.update-media-pair .media {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: auto;
  aspect-ratio: auto;
  border-radius: 0;
}
.update-media-pair .media img,
.update-media-pair .media svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.update-media-pair .media__credit { display: none; }
.update-media-pair .media:nth-child(2) img { object-position: 50% 50%; }
.mcard__link > .update-media-pair,
.ulead__art > .update-media-pair { border-radius: inherit; }

.offer-chooser { padding-block-end: var(--sp-5); }
.offer-jump {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: var(--sp-5);
  border: 1px solid var(--line-hi);
}
.offer-jump a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
  min-height: 5.5rem;
  padding: 1.25rem 1.5rem;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.offer-jump a + a { border-inline-start: 1px solid var(--line-hi); }
.offer-jump a:hover,
.offer-jump a:focus-visible { color: #FFF7EA; background: var(--accent-dk); }
.offer-jump span {
  grid-row: 1 / 3;
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 400;
  color: var(--accent-hi);
}
.offer-jump b { align-self: end; }
.offer-jump small {
  align-self: start;
  color: var(--paper-45);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 400;
  line-height: 1.35;
}
.offer-jump a:hover small,
.offer-jump a:focus-visible small { color: rgba(255, 247, 234, .72); }

.offer-chapter { scroll-margin-top: 4.5rem; }
.offer-chapter--promotion { background: #0B0D0E; }
.offer-chapter--sponsorship {
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(185, 51, 47, .24), transparent 64%),
    #160E0E;
}
.offer-chapter__intro {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) minmax(15rem, .48fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.offer-chapter__identity {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: .85rem;
  color: var(--accent-hi);
}
.offer-chapter__identity > span {
  font-family: var(--font-serif);
  font-size: clamp(5rem, 9vw, 9rem);
  line-height: .78;
  color: rgba(255, 255, 255, .14);
}
.offer-chapter__identity > div {
  display: grid;
  place-items: center;
  width: 5.6rem;
  aspect-ratio: 1;
  color: var(--accent-hi);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(185, 51, 47, .1);
}
.offer-chapter__identity .emblem { width: 82%; height: 82%; }
.emblem--sponsorship .emblem-sponsorship__arc {
  stroke-dasharray: 120;
  stroke-dashoffset: 0;
}
.emblem--sponsorship .emblem-sponsorship__arrowheads { opacity: 1; }
.emblem--sponsorship .emblem-sponsorship__platforms {
  opacity: 1;
  scale: 1;
  transform-box: fill-box;
  transform-origin: center;
}
.js-anim .reveal:not(.is-in) .emblem--sponsorship .emblem-sponsorship__arc {
  opacity: .2;
  stroke-dashoffset: 120;
}
.js-anim .reveal:not(.is-in) .emblem--sponsorship .emblem-sponsorship__arrowheads {
  opacity: 0;
}
.js-anim .reveal:not(.is-in) .emblem--sponsorship .emblem-sponsorship__platforms {
  opacity: 0;
  scale: .8;
}
.reveal.is-in .emblem--sponsorship .emblem-sponsorship__arc {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.55s cubic-bezier(.22, .68, .28, 1), opacity .5s ease;
}
.reveal.is-in .emblem--sponsorship .emblem-sponsorship__arc:nth-child(2) {
  transition-delay: .22s;
}
.reveal.is-in .emblem--sponsorship .emblem-sponsorship__arrowheads {
  opacity: 1;
  transition: opacity .45s ease .32s;
}
.reveal.is-in .emblem--sponsorship .emblem-sponsorship__platforms {
  opacity: 1;
  scale: 1;
  transition: opacity .8s ease .48s, scale 1.1s cubic-bezier(.16, 1, .3, 1) .48s;
}
@media (prefers-reduced-motion: reduce) {
  .emblem--sponsorship .emblem-sponsorship__arc,
  .emblem--sponsorship .emblem-sponsorship__arrowheads,
  .emblem--sponsorship .emblem-sponsorship__platforms {
    opacity: 1 !important;
    scale: 1 !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}
.offer-chapter__name {
  display: inline-block;
  padding-block-end: .35rem;
  color: var(--accent-hi);
  border-block-end: 2px solid currentColor;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  font-weight: 750;
  letter-spacing: .025em;
}
.offer-chapter__intro h2 {
  max-width: 12ch;
  margin-block: .65rem 1.1rem;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 5vw, 5.8rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.035em;
}
.offer-chapter__intro .lede { max-width: 42rem; }
.offer-chapter__fit {
  display: grid;
  gap: 1rem;
  padding-block-start: .5rem;
  color: var(--paper-70);
}
.offer-chapter__fit > p:not(.kicker) { line-height: 1.55; }
.offer-chapter__fit .btn { justify-content: space-between; width: 100%; }
.offer-network-note {
  display: grid;
  gap: .3rem;
  margin-block: .15rem .25rem;
  padding: .75rem .85rem;
  color: rgba(255, 247, 234, .66);
  border-inline-start: 2px solid var(--accent-hi);
  background: rgba(255, 255, 255, .035);
}
.offer-network-note > span {
  color: var(--accent-hi);
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.offer-network-note p { font-size: .72rem; line-height: 1.5; }
.offer-network-note a { color: #FFF7EA; text-decoration: underline; text-decoration-color: rgba(255, 113, 106, .58); text-underline-offset: 3px; }

.offer-expand {
  margin-block-start: clamp(2rem, 5vw, 5rem);
  border: 1px solid var(--line-hi);
  background: rgba(255, 255, 255, .018);
}
.offer-expand > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 5.2rem;
  padding: 1.2rem 1.5rem;
  color: var(--paper);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
}
.offer-expand > summary::-webkit-details-marker { display: none; }
.offer-expand > summary:hover { background: rgba(255, 255, 255, .035); }
.offer-expand > summary i {
  position: relative;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.offer-expand > summary i::before,
.offer-expand > summary i::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: .9rem;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: rotate .2s var(--ease);
}
.offer-expand > summary i::after { rotate: 90deg; }
.offer-expand[open] > summary i::after { rotate: 0deg; }
.offer-expand[open] > summary { border-block-end: 1px solid var(--line-hi); }
.offer-expand__body { display: grid; min-width: 0; gap: clamp(2.5rem, 6vw, 6rem); padding: clamp(1.5rem, 4vw, 4rem); }

.offer-subhead { max-width: 55rem; }
.offer-subhead h3 {
  max-width: 18ch;
  margin-block: .55rem .8rem;
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 4.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.025em;
}
.offer-subhead > p:not(.kicker) { color: var(--paper-70); line-height: 1.6; }
.offer-subhead--segments,
.offer-subhead--results { margin-block-end: -2rem; }

.offer-scenarios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-hi); }
.offer-scenario {
  display: grid;
  grid-template-rows: 12rem 1fr;
  min-width: 0;
  background: #111314;
}
.offer-scenario + .offer-scenario { border-inline-start: 1px solid var(--line-hi); }
.offer-scenario__art {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--accent-hi);
  background:
    radial-gradient(circle at 50% 50%, rgba(185, 51, 47, .18), transparent 62%),
    #0B0D0E;
}
.offer-scenario__art .emblem { width: 9rem; height: 9rem; }
.offer-scenario > div:last-child { padding: 1.5rem; }
.offer-scenario h3 { margin-block: .55rem .8rem; font-family: var(--font-serif); font-size: var(--step-2); font-weight: 400; line-height: 1.05; }
.offer-scenario p:not(.kicker) { color: var(--paper-70); line-height: 1.55; }

/* A Beacons-style live-work rail, placed once where all promotion types can be
   compared. Five lazy embeds are more persuasive than another grid of logos,
   while a single horizontal run keeps the expanded chapter from becoming a
   seven-carousel maze. */
.promo-proof {
  min-width: 0;
  overflow: hidden;
  padding: clamp(1.4rem, 3.5vw, 3.25rem);
  color: #211B18;
  background:
    linear-gradient(135deg, rgba(185, 51, 47, .1), transparent 44%),
    #F2E7D6;
}
.promo-proof__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-block-end: 1.5rem;
}
.promo-proof__head > div:first-child { max-width: 51rem; }
.promo-proof__head .kicker { color: #A82F2B; }
.promo-proof__head h3 {
  max-width: 14ch;
  margin-block: .55rem .7rem;
  font-family: var(--font-serif);
  font-size: clamp(2.3rem, 4vw, 4.5rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.03em;
}
.promo-proof__head p:not(.kicker) { max-width: 58ch; color: #665B50; line-height: 1.6; }
.promo-proof__head .rail-controls button { color: #211B18; border-color: #BDAE97; }
.promo-proof__rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-block: .25rem 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-color: #B9332F transparent;
  scrollbar-width: thin;
}
.promo-proof-card {
  flex: 0 0 clamp(19rem, 28vw, 24rem);
  min-width: 0;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid #CBBCA5;
  background: #FFF9EE;
}
.promo-proof-card__media {
  height: clamp(31rem, 46vw, 37rem);
  overflow: hidden;
  background: #0B0D0E;
}
.promo-proof-card__media iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0B0D0E;
}
.promo-proof-card__body { display: grid; gap: .7rem; padding: 1.15rem; }
.promo-proof-card__meta { display: flex; justify-content: space-between; gap: 1rem; }
.promo-proof-card__meta span {
  color: #97302C;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.promo-proof-card__body h4 {
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 2.1vw, 2.15rem);
  font-weight: 400;
  line-height: 1;
}
.promo-proof-card__body > p { color: #665B50; font-size: var(--step--1); line-height: 1.55; }
.promo-proof-card__mechanics { display: grid; gap: .3rem; }
.promo-proof-card__mechanics b { color: #8C302C; font: 700 .56rem var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.promo-proof-card__body .promo-proof-card__distribution {
  color: #8C302C;
  font: 700 .62rem/1.4 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.promo-proof-card__open {
  width: fit-content;
  color: #8C302C;
  font: 700 .62rem/1.3 var(--font-mono);
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
.promo-proof-card__open:hover { text-decoration: underline; text-underline-offset: .2rem; }
.promo-proof-card__performance {
  display: grid;
  gap: .6rem;
  margin: .45rem -1.15rem -1.15rem;
  padding: 1rem 1.15rem 1.1rem;
  color: #A8322E;
  border-block-start: 1px solid #D9C4B1;
  background: #F5E9D8;
}
.promo-proof-card__performance > p {
  margin: 0;
  color: #A8322E;
  font: 750 .62rem/1.2 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.promo-proof-card__performance > div { display: flex; flex-wrap: wrap; gap: .7rem 1.25rem; }
.promo-proof-card__performance span { color: #A8322E; font: 700 .75rem/1.3 var(--font-sans); }
.promo-proof-card__performance b {
  margin-inline-end: .35rem;
  color: #7C2A27;
  font: 700 .55rem/1.3 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.promo-proof-card__metric-slot { opacity: .5; }

.commercial-proof__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 24rem);
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-block-end: clamp(2rem, 5vw, 4rem);
}
.commercial-proof__intro .commercial-proof__head {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: 1fr;
  align-items: start;
  margin: 0;
}
.commercial-proof__statement {
  grid-column: 1;
  grid-row: 2;
  max-width: 42ch;
  margin: 0;
  color: var(--paper-70);
  line-height: 1.65;
}
.atl-audience-map {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  width: min(100%, 24rem);
  margin: 0;
  overflow: visible;
}
.atl-audience-map__svg { display: block; width: 100%; height: auto; overflow: hidden; }
.atl-audience-map__states {
  fill: rgba(255,255,255,.018);
  stroke: #FFF7EA;
  stroke-width: 1.15;
  stroke-opacity: .07;
  animation: atl-audience-state-breathe 6.4s ease-out infinite;
}
.atl-audience-map__georgia { fill: rgba(239,74,69,.05); stroke: rgba(255,247,234,.68); }
.atl-audience-map__halo {
  opacity: .5;
  filter: drop-shadow(0 0 11px rgba(239, 74, 69, .4));
}
.atl-audience-map__wash {
  opacity: 0;
  transform-origin: 249px 123px;
  animation: atl-audience-glow 6.4s ease-out infinite;
}
@keyframes atl-audience-glow {
  0% { opacity: .15; scale: .35; }
  18% { opacity: .49; }
  82%, 100% { opacity: 0; scale: 1.16; }
}
@keyframes atl-audience-state-breathe {
  0%, 100% { stroke-opacity: .07; }
  18%, 52% { stroke-opacity: .105; }
  82% { stroke-opacity: .085; }
}
.atl-audience-map__labels text { fill: rgba(255,247,234,.62); font: 700 8px var(--font-mono); letter-spacing: 1px; }
.atl-audience-map__labels .atl-audience-map__city { fill: #FFF7EA; font-size: 12px; }
.market-switch {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .8rem;
  align-items: baseline;
  margin: 1.25rem 0 0;
  font: 700 .64rem/1.4 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.market-switch span { color: var(--ink-60); }
.market-switch a { display: inline-block; font-weight: 800; text-underline-offset: .22em; transition: translate .22s ease; }
.market-switch a:hover, .market-switch a:focus-visible { translate: .18rem 0; }
.market-switch__savannah { color: #946715; }
.market-switch__atlanta { color: #B9322E; }
.sav-ad-models .market-switch { color: #211B18; }
.network-parent-link {
  display: inline-block;
  color: #FFF7EA !important;
  font-weight: 680;
  text-decoration: none !important;
  transition: translate .22s ease, color .22s ease;
}
.network-parent-link:hover, .network-parent-link:focus-visible { color: #FFFFFF !important; translate: .16rem 0; }
}

.offer-expand--sponsorship .offer-expand__body {
  color: #211B18;
  background: #F2E7D6;
}
.offer-expand--sponsorship .kicker { color: #A82F2B; }
.offer-expand--sponsorship .offer-subhead > p:not(.kicker) { color: #665B50; }
.channel-map {
  color: #211B18;
  background: #F2E7D6;
}
.channel-map__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, .7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-block-end: clamp(2rem, 4vw, 3.5rem);
}
.channel-map__head h2 {
  max-width: 13ch;
  margin-block-start: .7rem;
  color: #211B18;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 5.2vw, 5.8rem);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.035em;
}
.channel-map__head > p { max-width: 48ch; color: #665B50; line-height: 1.65; }
.channel-map__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #BFAF98; }
.channel-card {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.5rem);
  align-items: center;
  min-height: 19rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: #E9DCC6;
}
.channel-card + .channel-card { border-inline-start: 1px solid #BFAF98; }
.channel-card--proven { color: #FFF7EA; background: #171819; }
.channel-card__art {
  display: grid;
  place-items: center;
  width: 9rem;
  aspect-ratio: 1;
  color: #B9332F;
  background: rgba(185, 51, 47, .09);
}
.channel-card--proven .channel-card__art { color: #FF716A; background: rgba(185, 51, 47, .15); }
.channel-card__art .emblem { width: 86%; height: 86%; }
.channel-card__status {
  width: fit-content;
  margin-block-end: .6rem;
  padding-block-end: .2rem;
  color: #97302C;
  border-block-end: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.channel-card--proven .channel-card__status { color: #FF716A; }
.channel-card h3 { font-family: var(--font-serif); font-size: clamp(2.3rem, 3.8vw, 4rem); font-weight: 400; line-height: .95; }
.channel-card p:last-child { max-width: 38ch; margin-block-start: .8rem; color: #665B50; line-height: 1.6; }
.channel-card--proven p:last-child { color: rgba(255, 247, 234, .74); }
.sponsor-model { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.offer-expand--sponsorship .listcard { background: #171819; }
.offer-expand--sponsorship .listcard .kicker { color: #FF716A; }
.offer-expand--sponsorship .listcard li { color: rgba(255, 247, 234, .78); }
.offer-expand--sponsorship .ccard-grid { color: var(--paper); }

.tailored-case {
  display: grid;
  grid-template-columns: minmax(18rem, .72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(1.5rem, 4vw, 4rem);
  color: var(--paper);
  background:
    radial-gradient(70% 100% at 0% 0%, rgba(185, 51, 47, .3), transparent 60%),
    #111314;
}
.tailored-case__copy h3 { margin-block: .7rem 1.1rem; font-family: var(--font-serif); font-size: clamp(2.5rem, 4vw, 4.4rem); font-weight: 400; line-height: .98; }
.tailored-case__copy p:not(.kicker) { max-width: 38ch; color: var(--paper-70); line-height: 1.65; }
.inquiry--case-study { margin: 0; }
.fields--case-study { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tailored-case .field label { color: rgba(255, 247, 234, .76); }
.tailored-case .field abbr { color: #FF716A; }
.tailored-case .field :focus-visible { outline-color: #FF716A; }
.form-privacy { margin-block-start: 1rem; color: var(--paper-45); font-size: var(--step--1); line-height: 1.5; }
.form-privacy a { color: currentColor; text-underline-offset: 3px; }
.band--cream .form-privacy { color: #665B50; }

/* The footer-only product preview: a quiet systems diagram, not a fake app. */
.brain-hold { min-height: 72vh; display: grid; align-items: center; overflow: hidden; }
.brain-hold__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(28rem, 1.1fr); gap: clamp(3rem, 7vw, 8rem); align-items: center; }
.brain-hold__copy h1 { max-width: 11ch; margin-block: 1rem 1.5rem; font-family: var(--font-serif); font-size: clamp(3.5rem, 6.5vw, 7.2rem); font-weight: 400; line-height: .92; letter-spacing: -.04em; }
.brain-hold__copy .lede { max-width: 42rem; }
.brain-hold__status { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .7rem; color: var(--paper-70); border: 1px solid var(--line-hi); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; }
.brain-hold__status span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .28rem rgba(223, 72, 65, .12); }
.brain-hold__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-block-start: 2rem; }
.brain-hold__art { position: relative; min-height: 36rem; border: 1px solid var(--line-hi); background: radial-gradient(circle at 50% 50%, rgba(185, 51, 47, .22), transparent 26%), linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px), #0D0F10; background-size: auto, 32px 32px, 32px 32px, auto; }
.brain-node { position: absolute; z-index: 2; display: grid; place-items: center; width: 7rem; aspect-ratio: 1; color: var(--paper-70); border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: #121415; font-family: var(--font-mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.brain-node--core { inset: 50% auto auto 50%; width: 9rem; color: #FFF7EA; border-color: var(--accent); background: var(--accent-dk); font-family: var(--font-serif); font-size: 2.2rem; transform: translate(-50%, -50%); }
.brain-node--a { inset: 7% auto auto 9%; }
.brain-node--b { inset: 10% 8% auto auto; }
.brain-node--c { inset: auto auto 8% 12%; }
.brain-node--d { inset: auto 10% 10% auto; }
.brain-line { position: absolute; z-index: 1; left: 50%; top: 50%; width: 35%; height: 1px; background: linear-gradient(90deg, var(--accent), rgba(255,255,255,.14)); transform-origin: 0 50%; }
.brain-line--a { rotate: -145deg; }
.brain-line--b { rotate: -35deg; }
.brain-line--c { rotate: 140deg; }
.brain-line--d { rotate: 35deg; }
.form-success { max-width: 54rem; text-align: center; }
.form-success .phero__h { margin-inline: auto; }
.form-success .lede { max-width: 42rem; margin-inline: auto; }
.form-success .btn { margin-block-start: 2rem; }

@media (max-width: 61.99rem) {
  .offer-chapter__intro { grid-template-columns: 5rem minmax(0, 1fr); }
  .offer-chapter__fit { grid-column: 2; }
  .offer-scenarios { grid-template-columns: 1fr; }
  .offer-scenario { grid-template-columns: 10rem minmax(0, 1fr); grid-template-rows: none; }
  .offer-scenario + .offer-scenario { border-inline-start: 0; border-block-start: 1px solid var(--line-hi); }
  .offer-scenario__art { min-height: 12rem; }
  .channel-map__head { grid-template-columns: 1fr; }
  .channel-card { grid-template-columns: 7rem minmax(0, 1fr); }
  .channel-card__art { width: 7rem; }
  .tailored-case { grid-template-columns: 1fr; }
  .brain-hold__grid { grid-template-columns: 1fr; }
  .brain-hold__art { min-height: 32rem; }
}

@media (max-width: 45.99rem) {
  .offer-jump { grid-template-columns: 1fr; }
  .offer-jump a + a { border-inline-start: 0; border-block-start: 1px solid var(--line-hi); }
  .offer-chapter__intro { grid-template-columns: 1fr; }
  .offer-chapter__identity { grid-template-columns: auto auto; justify-content: start; align-items: center; }
  .offer-chapter__identity > span { font-size: 4.5rem; }
  .offer-chapter__identity > div { width: 4.5rem; }
  .offer-chapter__fit { grid-column: auto; }
  .offer-expand { min-width: 0; max-width: 100%; overflow: hidden; }
  .offer-expand > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    min-height: 4.6rem;
    padding: 1rem;
  }
  .offer-expand > summary > span:first-child { min-width: 0; }
  .offer-expand > summary .offer-expand__action { justify-self: start; }
  .offer-expand__body { min-width: 0; max-width: 100%; padding: 1rem; }
  .offer-expand__body > *,
  .sponsor-model,
  .sponsor-proof,
  .sponsor-fit,
  .sponsor-case__metrics { width: 100%; min-width: 0; max-width: 100%; }
  .offer-scenario { grid-template-columns: 6rem minmax(0, 1fr); }
  .offer-scenario__art { min-height: 9rem; }
  .offer-scenario__art .emblem { width: 5.5rem; height: 5.5rem; }
  .offer-scenario > div:last-child { padding: 1.15rem; }
  .promo-proof { padding: 1rem; }
  .promo-proof__head { align-items: start; }
  .promo-proof-card { flex-basis: min(84vw, 21rem); }
  .promo-proof-card__media { height: 32rem; }
  .channel-map__grid,
  .sponsor-model,
  .fields--case-study { grid-template-columns: 1fr; }
  .channel-card + .channel-card { border-inline-start: 0; border-block-start: 1px solid #BFAF98; }
  .channel-card { grid-template-columns: 5.5rem minmax(0, 1fr); min-height: 0; }
  .channel-card__art { width: 5.5rem; }
  .tailored-case { padding: 1.25rem; }
  .sponsor-model__chapter,
  .sponsor-case,
  .commercial-examples,
  .social-rail--commercial { min-width: 0; max-width: 100%; }
  .sponsor-case { overflow: hidden; padding: 1rem; }
  .sponsor-case__head { grid-template-columns: 1fr; }
  .sponsor-case__head h3 { font-size: clamp(2rem, 10vw, 2.8rem); }
  .brain-hold__art { min-height: 24rem; }
  .brain-node { width: 4.8rem; font-size: .5rem; }
  .brain-node--core { width: 6.5rem; font-size: 1.65rem; }
  .brain-hold__actions .btn { width: 100%; justify-content: space-between; }
}

/* ======================= CITY EDITORIAL MOTION + COMMERCIAL PROOF, V4 ==
   TUMG's polish comes from coordinated motion, not a single effect. The city
   chassis now shares its useful parts: section rules draw when reached,
   verified numerals count inside their own region, proof cells arrive in
   sequence, diagrams finish after the copy, and every effect becomes inert
   under reduced motion. */

[data-metric-group] [data-v] {
  display: block;
  font-variant-numeric: tabular-nums;
}
.js-anim [data-metric-group]:not(.metrics-live) [data-v] {
  opacity: .18;
  translate: 0 .25em;
  clip-path: inset(0 0 100% 0);
}
.js-anim [data-metric-group].metrics-live [data-v] {
  opacity: 1;
  translate: 0 0;
  clip-path: inset(0 0 0 0);
  transition: opacity .72s var(--ease), translate .72s var(--ease),
              clip-path .86s cubic-bezier(.16, 1, .3, 1);
}
.js-anim [data-metric-group] > :nth-child(2) [data-v] { transition-delay: .07s; }
.js-anim [data-metric-group] > :nth-child(3) [data-v] { transition-delay: .14s; }
.js-anim [data-metric-group] > :nth-child(4) [data-v] { transition-delay: .21s; }
.js-anim [data-metric-group] > :nth-child(5) [data-v] { transition-delay: .28s; }

.head,
.article__head,
.psec > h2 { position: relative; }
.js-anim .head::after,
.js-anim .article__head::after {
  content: "";
  position: absolute;
  inset: auto 0 -.9rem;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--line-hi) 54%, transparent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.js-anim .head.is-in::after,
.js-anim .article__head.is-in::after {
  transform: scaleX(1);
  transition: transform 1.05s cubic-bezier(.16, 1, .3, 1);
}
.js-anim .psec > h2::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  margin-block-start: .55rem;
  background: var(--accent);
}
.js-anim .psec > h2.is-in::after {
  width: 3.5rem;
  transition: width .78s cubic-bezier(.16, 1, .3, 1);
}

/* The opening collage arrives as a composed scene, not four cards blinking at
   once. `scale` leaves every authored rotation untouched. */
.work-hero__visual { min-width: 0; }
.work-hero__visual .work-hero__art { width: 100%; }
.js-anim .work-hero__visual.reveal:not(.is-in) .work-hero__post,
.js-anim .work-hero__visual.reveal:not(.is-in) .work-hero__seal,
.js-anim .work-hero__visual.reveal:not(.is-in) .ad-offer-board__card,
.js-anim .work-hero__visual.reveal:not(.is-in) .ad-offer-board__metric {
  opacity: 0;
  scale: .88;
}
.work-hero__visual.is-in .work-hero__post,
.work-hero__visual.is-in .work-hero__seal,
.work-hero__visual.is-in .ad-offer-board__card,
.work-hero__visual.is-in .ad-offer-board__metric {
  opacity: 1;
  scale: 1;
  transition: opacity .7s var(--ease), scale .9s cubic-bezier(.16, 1, .3, 1);
}
.work-hero__visual.is-in .work-hero__post--2 { transition-delay: .09s; }
.work-hero__visual.is-in .work-hero__post--3 { transition-delay: .18s; }
.work-hero__visual.is-in .work-hero__post--4 { transition-delay: .27s; }
.work-hero__visual.is-in .work-hero__seal { transition-delay: .36s; }
.work-hero__visual.is-in .ad-offer-board__metric--1 { transition-delay: .12s; }
.work-hero__visual.is-in .ad-offer-board__metric--2 { transition-delay: .24s; }

/* Five claims still read as editorial proof because each one carries its own
   definition. This is the trust device measured on the live OFTMW page and
   already documented in DESIGN_REFERENCE.md. */
.commercial-proof .proof--wide {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .025);
}
.commercial-proof .proof--wide .proof__cell {
  min-height: 12.5rem;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  border: 0;
  border-inline-start: 1px solid rgba(255, 255, 255, .12);
}
.commercial-proof .proof--wide .proof__cell:first-child { border-inline-start: 0; }
.commercial-proof .proof__num { color: #FFF7EA; }
.commercial-proof .proof__cap {
  min-height: 2.7em;
  margin-block-start: .45rem;
  color: rgba(255, 247, 234, .78);
}
.commercial-proof .proof__def {
  display: block;
  margin-block-start: .8rem;
  padding-block-start: .75rem;
  color: rgba(255, 247, 234, .48);
  border-block-start: 1px solid rgba(255, 255, 255, .11);
  font-size: .68rem;
  line-height: 1.45;
}

/* Audience visuals complete after each panel itself arrives. */
.js-anim .aud-panel.reveal:not(.is-in) .aud-range__track span,
.js-anim .aud-panel.reveal:not(.is-in) .aud-platform__track span {
  transform: scaleX(0);
}
.aud-range__track span,
.aud-platform__track span {
  transform: scaleX(1);
  transform-origin: 0 50%;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1) .18s;
}
.js-anim .aud-panel--profile.reveal:not(.is-in) .aud-donut {
  opacity: .25;
  rotate: -28deg;
  scale: .82;
}
.aud-donut {
  opacity: 1;
  rotate: 0deg;
  scale: 1;
  transition: opacity .7s var(--ease), rotate 1s cubic-bezier(.16, 1, .3, 1),
              scale 1s cubic-bezier(.16, 1, .3, 1);
}
.js-anim .aud-panel--age.reveal:not(.is-in) .aud-age__bands li { opacity: .18; translate: 1rem 0; }
.aud-age__bands li { opacity: 1; translate: 0 0; transition: opacity .55s var(--ease), translate .7s var(--ease); }
.aud-age__bands li:nth-child(2) { transition-delay: .08s; }
.aud-age__bands li:nth-child(3) { transition-delay: .16s; }

/* The middle chapter now sells the mechanism: why local work earns attention,
   then where the campaign can run. */
.channel-map__head h2 { max-width: 13ch; }
.value-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block: clamp(2.5rem, 5vw, 4.5rem);
  border-block: 1px solid #C7B8A2;
}
.value-ledger article {
  position: relative;
  min-height: 13rem;
  padding: clamp(1.25rem, 2.6vw, 2.25rem);
}
.value-ledger article + article { border-inline-start: 1px solid #C7B8A2; }
.value-ledger span {
  display: block;
  margin-block-end: 1.5rem;
  color: #A73531;
  font-family: var(--font-serif);
  font-size: 2.25rem;
  line-height: 1;
}
.value-ledger h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 2.5vw, 2.5rem);
  font-weight: 400;
  line-height: 1;
}
.value-ledger p { max-width: 31ch; margin-block-start: .75rem; color: #665B50; line-height: 1.55; }
.channel-map__subhead { margin-block-end: 1.4rem; }
.channel-map__subhead h3 {
  max-width: 24ch;
  margin-block-start: .55rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.6vw, 3.7rem);
  font-weight: 400;
  line-height: .98;
}

.offer-expand > summary span { display: grid; gap: .28rem; }
.offer-expand > summary small {
  color: var(--paper-45);
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.offer-expand[open] .offer-expand__body {
  animation: offer-open .55s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes offer-open {
  from { opacity: 0; translate: 0 1.2rem; }
  to { opacity: 1; translate: 0 0; }
}

@media (max-width: 74.99rem) {
  .commercial-proof .proof--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .commercial-proof .proof--wide .proof__cell:nth-child(4) { border-inline-start: 0; border-block-start: 1px solid rgba(255,255,255,.12); }
  .commercial-proof .proof--wide .proof__cell:nth-child(n+5) { border-block-start: 1px solid rgba(255,255,255,.12); }
}

@media (max-width: 45.99rem) {
  .commercial-proof .proof--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .commercial-proof .proof--wide .proof__cell { min-height: 11.5rem; }
  .commercial-proof .proof--wide .proof__cell:nth-child(odd) { border-inline-start: 0; }
  .commercial-proof .proof--wide .proof__cell:nth-child(n+3) { border-block-start: 1px solid rgba(255,255,255,.12); }
  .value-ledger { grid-template-columns: 1fr; }
  .value-ledger article { min-height: 0; }
  .value-ledger article + article { border-inline-start: 0; border-block-start: 1px solid #C7B8A2; }
  .offer-expand > summary small { max-width: 31ch; }
}

@media (prefers-reduced-motion: reduce) {
  [data-metric-group] [data-v],
  .aud-range__track span, .aud-platform__track span,
  .aud-donut, .aud-age__bands li,
  .work-hero__post, .work-hero__seal,
  .head::after, .article__head::after, .psec > h2::after {
    opacity: 1 !important;
    translate: none !important;
    transform: none !important;
    rotate: 0deg !important;
    scale: 1 !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Final-cascade safeguards for the launch additions above. */
.sponsor-model.sponsor-model--visual { grid-template-columns: 1fr; }
.city-atlanta .reveal.is-in, .city-savannah .reveal.is-in,
.js-anim .city-atlanta .reveal.is-in, .js-anim .city-savannah .reveal.is-in {
  transition-duration: 1.5s;
  transition-timing-function: cubic-bezier(.22, .68, .28, 1);
}
@media (prefers-reduced-motion: no-preference) {
  .city-atlanta .hero__media img, .city-savannah .hero__media img {
    animation: city-photo-drift 18s ease-in-out infinite alternate;
  }
}

/* ================================================= CITY ABOUT / BUILD ==
 * The city pages inherit the parent brand's strongest interaction: the place
 * assembles while the mission is explained. Atlanta gets the denser connected
 * city; Savannah gets the lower, greener drawing and a warmer civic palette.
 */
.city-about-intro {
  --city-build-accent: #EF4A45;
  --city-build-warm: rgba(239, 74, 69, .16);
  position: relative;
  overflow: clip;
  padding-block: clamp(4rem, 8vw, 7rem);
  color: #FFF7EA;
  border-block: 1px solid rgba(255, 255, 255, .1);
  background:
    radial-gradient(95% 90% at 72% 50%, var(--city-build-warm), transparent 66%),
    linear-gradient(135deg, #101314, #080A0B 68%);
}
.city-savannah .city-about-intro {
  --city-build-accent: #D2A64B;
  --city-build-warm: rgba(210, 166, 75, .14);
}
.city-about-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  -webkit-mask-image: radial-gradient(circle at 72% 52%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 72% 52%, #000, transparent 72%);
}
.city-about-intro__pin { position: relative; z-index: 1; }
.city-about-intro__in {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(30rem, 1.18fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
  min-height: min(43rem, 76svh);
}
.city-about-intro__copy { position: relative; z-index: 2; max-width: 38rem; }
.city-about-intro__copy .kicker { color: var(--city-build-accent); }
.city-about-intro__copy h2 {
  max-width: 10.5ch;
  margin-block-start: .9rem;
  font-family: var(--font-serif);
  font-size: clamp(3.25rem, 6.2vw, 6.8rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .88;
  text-wrap: balance;
}
.city-about-intro__copy p:not(.kicker) {
  max-width: 39rem;
  margin-block-start: 1.25rem;
  color: rgba(255, 247, 234, .74);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.7;
}
.city-evidence-trigger {
  color: #FFF7EA;
  border-block-end: 1px solid color-mix(in srgb, var(--city-build-accent) 75%, transparent);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.city-evidence-trigger::after {
  content: "↗";
  display: inline-block;
  margin-inline-start: .32em;
  color: var(--city-build-accent);
  font-family: var(--font-mono);
  font-size: .8em;
  transition: translate .2s ease;
}
.city-evidence-trigger:hover,
.city-evidence-trigger:focus-visible { color: var(--city-build-accent); outline: none; }
.city-evidence-trigger:hover::after,
.city-evidence-trigger:focus-visible::after { translate: 2px -2px; }

.city-about-intro__art {
  position: relative;
  min-width: 0;
  filter: drop-shadow(0 28px 46px rgba(0,0,0,.38));
}
.city-about-intro__art::before {
  content: "";
  position: absolute;
  inset: 14% 10%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--city-build-warm), transparent 68%);
  filter: blur(18px);
}
.city-about-intro__art .civ {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-height: 38rem;
  transform-origin: 52% 58%;
}
.city-about-intro__art .civ--atlanta { max-height: 38rem; }
.city-about-intro__art .civ__dome { transform-origin: 50% 100%; }
.city-about-intro__art .civ--savannah { max-height: 34rem; }
.city-about-intro.is-ready .civ__piece {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: opacity .2s linear, transform .2s linear;
}
.city-about-intro__cue {
  display: none;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin: 0;
  color: rgba(255,247,234,.48);
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: opacity .35s ease;
}
.city-about-intro__cue svg { width: 11px; height: 20px; }
.city-about-intro:not([data-build="0"]) .city-about-intro__cue { opacity: 0; }

.city-about-pin .city-about-intro { height: 240vh; padding-block: 0; }
.city-about-pin .city-about-intro__pin {
  position: sticky;
  inset-block-start: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100svh;
  padding-block: 2rem 1.15rem;
}
.city-about-pin .city-about-intro__cue { display: flex; }
.city-about-pin .city-about-intro__pin::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--city-build-accent);
  opacity: .72;
  transform: scaleX(var(--build, 0));
  transform-origin: 0 50%;
}
.city-about-intro .civ__pulse {
  stroke-dasharray: 7 993;
  stroke-dashoffset: 1000;
  stroke-linecap: round;
  animation: civ-run 5.5s linear infinite;
  animation-play-state: paused;
  opacity: 0;
}
.city-about-intro .civ.is-complete .civ__pulse { animation-play-state: running; opacity: .85; }
/* The four outward connections deliberately use the exact shared TUMG
   `sig-run`, line-draw and node-breathe system above. Do not add a city-only
   speed or negative delay here: doing so makes the normalized 100-unit paths
   race instead of traveling once, smoothly, to each media panel. */

/* Evidence panel: the same sourced argument as the parent About page, kept in
   a drawer so the mission remains the page's main line. */
.city-evidence__scrim {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(0, 0, 0, .68);
  backdrop-filter: blur(5px);
}
.city-evidence__panel {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 9998;
  width: min(35rem, 100%);
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 3.2rem);
  color: #F7F0E5;
  border-inline-start: 1px solid rgba(255,255,255,.14);
  background: #0B1A27;
  box-shadow: -28px 0 70px rgba(0,0,0,.42);
}
.city-evidence__panel:not([hidden]) { animation: city-evidence-in .34s cubic-bezier(.16,1,.3,1); }
@keyframes city-evidence-in { from { translate: 100% 0; } to { translate: 0 0; } }
.city-evidence__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.city-evidence__head .kicker { margin: 0; color: #E4BE73; }
.city-evidence__head button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  color: #F7F0E5;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  cursor: pointer;
}
.city-evidence__head button:hover,
.city-evidence__head button:focus-visible { color: #E4BE73; outline: 1px solid #E4BE73; }
.city-evidence__head svg { width: 1rem; height: 1rem; }
.city-evidence__trends { display: grid; gap: 1.4rem; margin-block-start: 2rem; }
.city-trend {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding-block-end: 1.35rem;
  border-block-end: 1px solid rgba(255,255,255,.08);
}
.city-trend:last-child { padding-block-end: 0; border-block-end: 0; }
.city-trend__figure { display: grid; gap: .4rem; }
.city-trend__figure dt { color: #E4BE73; font-family: var(--font-serif); font-size: 2.5rem; line-height: .9; }
.city-trend__figure > div { position: relative; width: 7rem; height: 30px; }
.city-trend__figure .spark { width: 100%; height: 100%; }
.city-trend__figure span { position: absolute; bottom: -.55rem; color: #8494A3; font-size: .5rem; font-weight: 700; letter-spacing: .1em; }
.city-trend__figure span:first-of-type { left: 0; }
.city-trend__figure span:last-of-type { right: 0; }
.city-trend dd { margin: 0; min-width: 0; }
.city-trend dd p { margin: 0; color: #C4CDD5; font-size: .86rem; line-height: 1.58; }
.city-trend dd p b { display: inline-block; margin-inline-end: .45rem; padding: .1rem .38rem; color: #E4BE73; border: 1px solid rgba(228,190,115,.38); font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; }
.city-trend dd small { display: block; margin-block-start: .35rem; color: #8494A3; font-size: .72rem; }
.city-trend > strong { color: #9FD8B4; font-size: 1rem; }
.city-trend > strong i { display: block; color: #8494A3; font-size: .5rem; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.city-evidence__take { margin-block-start: 2rem; color: #F7F0E5; font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.45; }
.city-evidence__source { margin-block-start: 1rem; color: #8494A3; font-size: .7rem; }
.city-evidence__source a { color: #B9C6D2; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 63.99rem) {
  .city-about-intro__in { grid-template-columns: 1fr; min-height: 0; }
  .city-about-intro__copy { max-width: 44rem; }
  .city-about-intro__copy h2 { max-width: 11ch; }
  .city-about-intro__art { max-width: 48rem; margin-inline: auto; }
  .city-about-pin .city-about-intro { height: 240vh; }
}
@media (max-width: 34rem) {
  .city-about-intro { padding-block: 3.5rem; }
  .city-about-intro__in { gap: 1.1rem; }
  .city-about-intro__art {
    width: calc(100% + 2.5rem);
    max-width: none;
    margin-inline: -1.25rem;
  }
  .city-about-intro__art .civ,
  .city-about-intro__art .civ--atlanta,
  .city-about-intro__art .civ--savannah { max-height: none; }
  .city-about-intro__copy h2 { font-size: clamp(3rem, 15vw, 4.4rem); }
  .city-trend { grid-template-columns: minmax(0, 1fr) auto; gap: .65rem .85rem; }
  .city-trend__figure { grid-column: 1; display: flex; align-items: center; gap: .8rem; }
  .city-trend__figure dt { font-size: 2.1rem; }
  .city-trend__figure > div { width: 5.5rem; }
  .city-trend > strong { grid-column: 2; grid-row: 1; text-align: right; }
  .city-trend dd { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .city-about-intro .civ__piece,
  .city-about-intro .civ__st { opacity: 1 !important; transform: none !important; transition: none !important; }
  .city-about-intro .civ__pulse,
  .city-about-intro .sig__flow { display: none; }
  .city-about-intro .civ__draw { stroke-dashoffset: 0 !important; transition: none !important; }
  .city-evidence__panel:not([hidden]) { animation: none; }
}

/* ================================================= SAVANNAH COMMERCIAL ==
 * A smaller, honest offer for a new city brand. It uses the same editorial
 * rigor as Atlanta without borrowing its case studies or audience detail.
 */
.sav-ad-hero {
  overflow: hidden;
  background:
    radial-gradient(70% 110% at 78% 48%, rgba(210,166,75,.22), transparent 68%),
    linear-gradient(140deg, #F8F2E8 0 55%, #E8D7B5 100%);
}
.sav-ad-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(28rem, 1.08fr);
  gap: clamp(2rem, 6vw, 6.5rem);
  align-items: center;
}
.sav-ad-hero__copy { position: relative; z-index: 2; }
.sav-ad-hero__copy .phero__h { max-width: 9.8ch; }
.sav-ad-hero__copy .lede { max-width: 42rem; }
.sav-ad-hero__copy .btn { margin-block-start: 1.75rem; }
.sav-ad-hero__art {
  position: relative;
  min-height: clamp(29rem, 48vw, 43rem);
  isolation: isolate;
}
.sav-ad-hero__art::before {
  content: "";
  position: absolute;
  inset: 7% -8% 4% 5%;
  z-index: -1;
  border: 1px solid rgba(35,31,26,.16);
  background-image:
    linear-gradient(rgba(35,31,26,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,31,26,.08) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  transform: rotate(-2deg);
}
.sav-ad-hero__phone {
  position: absolute;
  inset: 0 auto auto 10%;
  width: min(22rem, 62%);
  overflow: hidden;
  border: 7px solid #101414;
  border-radius: 2.2rem;
  background: #101414;
  box-shadow: 2.5rem 2.5rem 0 rgba(210,166,75,.25), 0 2.5rem 4rem rgba(27,21,14,.25);
  transform: rotate(-5deg);
}
.sav-ad-hero__phonebar { display: flex; align-items: center; justify-content: center; height: 1.6rem; }
.sav-ad-hero__phonebar span { width: 4rem; height: .35rem; border-radius: 1rem; background: #313838; }
.sav-ad-hero__phonebar i { position: absolute; right: 1rem; width: .4rem; height: .4rem; border-radius: 50%; background: #D2A64B; }
.sav-ad-hero__post {
  display: grid;
  min-height: 34rem;
  padding: 2rem 1.6rem 1.5rem;
  align-content: start;
  color: #F8F2E8;
  background:
    radial-gradient(circle at 78% 28%, rgba(210,166,75,.24), transparent 28%),
    linear-gradient(155deg, #20372F, #0E1715 72%);
}
.sav-ad-hero__post img { justify-self: end; }
.sav-ad-hero__post p,
.sav-ad-hero__post > span { font: 700 .61rem/1.3 var(--font-mono); letter-spacing: .17em; }
.sav-ad-hero__post p { margin-block: 3.5rem .8rem; color: #D2A64B; }
.sav-ad-hero__post strong { font: 800 clamp(2.5rem, 5vw, 4.6rem)/.83 var(--font-sans); letter-spacing: -.055em; }
.sav-ad-hero__post > span { margin-block-start: auto; padding-block-start: 3rem; color: rgba(248,242,232,.62); }
.sav-ad-hero__ticket {
  position: absolute;
  inset: auto 0 9% auto;
  display: grid;
  width: min(21rem, 60%);
  gap: .8rem;
  padding: 1.5rem;
  color: #F8F2E8;
  border: 1px solid rgba(255,255,255,.25);
  background: #AE8434;
  box-shadow: 1rem 1rem 0 #171B19;
  transform: rotate(5deg);
}
.sav-ad-hero__ticket small,
.sav-ad-hero__ticket span { font: 700 .6rem/1.3 var(--font-mono); letter-spacing: .15em; }
.sav-ad-hero__ticket b { font: 800 clamp(2rem, 4vw, 3.6rem)/.86 var(--font-sans); letter-spacing: -.04em; }
.sav-ad-hero__ticket span { justify-self: end; }

.sav-ad-reach { background: #101716; }
.sav-ad-reach__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .72fr);
  gap: 2rem;
  align-items: end;
}
.sav-ad-reach__head h2 { max-width: 9ch; color: #FFF8ED; font-size: clamp(3.5rem, 7vw, 7rem); }
.sav-ad-reach__head > p { max-width: 42ch; color: rgba(255,248,237,.68); line-height: 1.65; }
.sav-ad-proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  margin-block-start: clamp(2rem, 5vw, 4rem);
  border-block: 1px solid rgba(255,255,255,.16);
}
.sav-ad-proof__cell { display: grid; gap: .55rem; min-height: 15rem; padding: clamp(1.4rem,4vw,3rem); align-content: center; }
.sav-ad-proof__cell + .sav-ad-proof__cell { border-inline-start: 1px solid rgba(255,255,255,.16); }
.sav-ad-proof__cell strong { color: #E7BD67; font: 400 clamp(4.5rem,10vw,9rem)/.78 var(--font-serif); letter-spacing: -.05em; }
.sav-ad-proof__cell span { color: rgba(255,248,237,.7); font: 700 .72rem/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }

.sav-ad-models { background: #F1E6D2; }
.sav-ad-models__head { display: grid; max-width: 66rem; }
.sav-ad-models__head .kicker { color: #946715; }
.sav-ad-models__head h2 { max-width: 12ch; color: #211B18; font-size: clamp(3rem,6vw,6rem); }
.sav-ad-model-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.2rem; margin-block-start: clamp(2.5rem,5vw,4.5rem); }
.sav-ad-model {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  min-height: 23rem;
  gap: clamp(1.2rem,3vw,2.4rem);
  padding: clamp(1.5rem,3vw,2.8rem);
  align-items: start;
  color: #211B18;
  border: 1px solid rgba(33,27,24,.28);
  background: rgba(255,250,241,.72);
  text-decoration: none;
  transition: translate .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.sav-ad-model:hover, .sav-ad-model:focus-visible { translate: 0 -.45rem; border-color: #A67520; box-shadow: 0 1.2rem 2.6rem rgba(57,42,18,.14); }
.sav-ad-model > span { display: grid; width: 3.2rem; aspect-ratio: 1; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 700 .7rem var(--font-mono); letter-spacing: .08em; }
.sav-ad-model p { margin: .4rem 0 1.6rem; font: 750 .68rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.sav-ad-model h3 { max-width: 12ch; margin: 0; font: 400 clamp(2.4rem,4vw,4.4rem)/.95 var(--font-serif); letter-spacing: -.025em; }
.sav-ad-model small { display: block; max-width: 32ch; margin-block-start: 2rem; color: #655D54; font-size: .9rem; line-height: 1.55; }
.sav-ad-model > b { align-self: end; font: 400 2rem var(--font-serif); }
.sav-ad-model--sponsor { color: #FFF8ED; border-color: #213B32; background: linear-gradient(145deg,#213B32,#101716); }
.sav-ad-model--sponsor small { color: rgba(255,248,237,.67); }
.sav-ad-model--sponsor:hover, .sav-ad-model--sponsor:focus-visible { border-color: #D2A64B; }

.sav-ad-offer__head { display: grid; max-width: 66rem; }
.sav-ad-offer__head h2 { max-width: 12ch; font-size: clamp(3rem,6vw,6rem); }
.sav-ad-offer__head > p:last-child { max-width: 52ch; color: var(--ink-60); font-size: 1.08rem; line-height: 1.65; }
.sav-ad-use-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-block-start: clamp(2.5rem,5vw,5rem); border-block: 1px solid var(--line); }
.sav-ad-use { min-width: 0; padding: clamp(1.35rem,2.5vw,2.4rem); border-inline-start: 1px solid var(--line); }
.sav-ad-use:first-child { border-inline-start: 0; }
.sav-ad-use > div { width: 5.5rem; height: 5.5rem; color: #B18A3C; }
.sav-ad-use > div svg { width: 100%; height: 100%; }
.sav-ad-use h3 { margin-block-start: 1.5rem; font-family: var(--font-serif); font-size: 2rem; }
.sav-ad-use p { color: var(--ink-60); font-size: .95rem; line-height: 1.6; }

.sav-ad-sponsorship { color: #FFF8ED; background: #101716; }
.sav-ad-sponsorship__grid { display: block; }
.sav-ad-sponsorship__copy { max-width: 72rem; min-width: 0; margin-inline: auto; }
.sav-ad-sponsorship__visual {
  position: relative;
  display: grid;
  min-height: 34rem;
  margin-block: clamp(2.25rem,4vw,4rem) clamp(1.5rem,3vw,2.5rem);
  padding: clamp(1rem, 2vw, 1.6rem);
  overflow: hidden;
  border: 1px solid rgba(231,189,103,.3);
  background:
    linear-gradient(rgba(231,189,103,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(231,189,103,.09) 1px,transparent 1px),
    radial-gradient(circle at 50% 50%,rgba(210,166,75,.19),transparent 48%);
  background-size: 3.5rem 3.5rem,3.5rem 3.5rem,auto;
}
.sav-sponsor-calendar { display: grid; grid-template-rows: auto 1fr auto; gap: 1.25rem; width: 100%; min-height: 100%; }
.sav-sponsor-calendar__head { display: flex; justify-content: space-between; gap: 1rem; padding-block-end: 1rem; border-block-end: 1px solid rgba(255,255,255,.18); }
.sav-sponsor-calendar__head span,
.sav-sponsor-calendar__head strong { font: 700 .58rem/1.3 var(--font-mono); letter-spacing: .13em; }
.sav-sponsor-calendar__head span { color: #F2CF7B; }
.sav-sponsor-calendar__head strong { color: rgba(255,248,237,.55); }
.sav-sponsor-calendar__stories { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.sav-sponsor-story {
  position: relative;
  display: grid;
  min-height: 12.8rem;
  padding: 1rem;
  align-content: end;
  overflow: hidden;
  color: #FFF8ED;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
}
.sav-sponsor-story > span { position: absolute; inset: .8rem auto auto .8rem; color: rgba(255,248,237,.4); font: 700 .55rem var(--font-mono); }
.sav-sponsor-story > div { position: absolute; inset: .7rem .7rem auto auto; width: 4.6rem; height: 4.6rem; color: #E7BD67; opacity: .9; }
.sav-sponsor-story > div svg { width: 100%; height: 100%; }
.sav-sponsor-story p { position: relative; z-index: 1; max-width: 11ch; margin: 0 0 .75rem; font: 400 clamp(1.35rem,2vw,2rem)/.95 var(--font-serif); }
.sav-sponsor-story b {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 -1rem -1rem;
  padding: .65rem 1rem;
  color: #14201C;
  background: #E7BD67;
  font: 750 .5rem/1.25 var(--font-mono);
  letter-spacing: .1em;
}
.sav-sponsor-story--2 b, .sav-sponsor-story--4 b { background: #F5E9D3; }
.sav-sponsor-calendar__line { position: relative; display: flex; justify-content: space-between; padding-block-start: 1rem; color: rgba(255,248,237,.48); font: 700 .5rem var(--font-mono); letter-spacing: .09em; }
.sav-sponsor-calendar__line i { position: absolute; inset: 0 0 auto; height: 1px; background: rgba(255,255,255,.2); }
.sav-sponsor-calendar__line i::after { content: ""; position: absolute; inset: -1px auto auto 0; width: 22%; height: 3px; background: #E7BD67; box-shadow: 0 0 12px rgba(231,189,103,.7); animation: sav-sponsor-year 4.8s ease-in-out infinite alternate; }
@keyframes sav-sponsor-year { to { translate: 355% 0; } }
.sav-ad-sponsorship__copy h2 { max-width: 10ch; color: #FFF8ED; font-size: clamp(3.4rem,6vw,6.4rem); }
.sav-ad-sponsorship__nowrap { white-space: nowrap; }
.sav-ad-sponsorship__copy > p:not(.kicker) { max-width: 48ch; color: rgba(255,248,237,.7); font-size: 1.04rem; line-height: 1.7; }
.sav-ad-sponsorship__copy ul { display: grid; gap: 0; margin: 2.3rem 0; padding: 0; list-style: none; border-block: 1px solid rgba(255,255,255,.15); }
.sav-ad-sponsorship__copy li { display: grid; grid-template-columns: minmax(10rem,.62fr) 1fr; gap: 1.5rem; padding-block: 1.2rem; border-block-start: 1px solid rgba(255,255,255,.15); }
.sav-ad-sponsorship__copy li:first-child { border-block-start: 0; }
.sav-ad-sponsorship__copy li strong { color: #F2CF7B; }
.sav-ad-sponsorship__copy li span { color: rgba(255,248,237,.65); line-height: 1.55; }
.sav-ad-sponsorship__copy .btn { max-width: 100%; color: #171817; border-color: #F2CF7B; background: #F2CF7B; white-space: normal; }
.sav-ad-multicity-note { max-width: 43rem; margin-block-start: 1rem; color: rgba(255,248,237,.55); font-size: .73rem; line-height: 1.55; }
.sav-ad-multicity-note strong { color: #F2CF7B; }
.sav-ad-multicity-note a { color: #FFF8ED; text-decoration: underline; text-underline-offset: .2em; }
.sav-ad-inquire { display: grid; grid-template-columns: minmax(16rem,.65fr) minmax(0,1fr); gap: clamp(2rem,7vw,7rem); align-items: start; color: #211B18; --paper: #211B18; --paper-70: #5E554C; --paper-45: #766B60; }
.sav-ad-inquire .kicker { color: #9A6E18; }
.sav-ad-inquire > div > h2 {
  max-width: 11ch;
  color: #211B18;
  font-size: clamp(3.2rem,5vw,4.8rem);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.sav-ad-inquire > div > p:last-child { max-width: 36ch; color: #5E554C; line-height: 1.65; }
.sav-ad-form { margin: 0; }
.sav-ad-form .field label { color: #211B18; }
.sav-ad-form .field input,
.sav-ad-form .field textarea,
.sav-ad-form .field select { color: #211B18; border-color: rgba(33,27,24,.35); background: rgba(255,255,255,.48); }
.sav-ad-form .field input::placeholder,
.sav-ad-form .field textarea::placeholder { color: #766B60; opacity: 1; }
.sav-ad-form .form-privacy { color: #5E554C; }

.sav-home-ad__visual { position: relative; min-height: 28rem; }
.home-partner--savannah .wrap { display: grid; grid-template-columns: minmax(0,.78fr) minmax(34rem,1.22fr); gap: clamp(2rem,6vw,7rem); align-items: center; }
.home-partner--savannah .home-partner__copy { max-width: 40rem; }
.city-savannah .home-partner--savannah .kicker { color: #946715; }
.home-partner--savannah .home-partner__copy h2 { max-width: 14ch; font-family: var(--font-serif); font-size: clamp(3.1rem,5.5vw,6rem); font-weight: 400; line-height: .9; letter-spacing: -.04em; }
.home-partner--savannah .home-partner__copy > p:not(.kicker) { max-width: 40ch; color: #57544F; line-height: 1.65; }
.home-partner--savannah .btn { color: #171817; border-color: #171817; }
.sav-home-ad__phone { position: absolute; inset: 1rem auto auto 8%; display: grid; width: min(18rem,58%); min-height: 25rem; padding: 1.5rem; align-content: start; gap: 1.1rem; color: #FFF8ED; border: 6px solid #131817; border-radius: 2rem; background: linear-gradient(155deg,#234036,#101716); box-shadow: 1.6rem 1.6rem 0 rgba(210,166,75,.25); transform: rotate(-4deg); }
.sav-home-ad__phone img { justify-self: end; }
.sav-home-ad__phone > span,
.sav-home-ad__phone > a {
  padding-block: .7rem; border-block-start: 1px solid rgba(255,255,255,.18);
  color: inherit; font: 700 .68rem var(--font-mono); letter-spacing: .12em; text-decoration: none;
}
.sav-home-ad__phone > a { transition: color .2s ease, padding-inline-start .2s ease; }
.sav-home-ad__phone > a:hover,
.sav-home-ad__phone > a:focus-visible { padding-inline-start: .4rem; color: #F2CF7B; outline: none; }
.atl-home-ad__phone > a:hover,
.atl-home-ad__phone > a:focus-visible { color: #FF9A93; }
.sav-home-ad__metric { position: absolute; inset: 9% 2% auto auto; display: grid; min-width: 10.5rem; padding: 1.1rem; color: #171817; border: 1px solid #171817; background: #F2CF7B; box-shadow: .65rem .65rem 0 #171817; transform: rotate(3deg); }
.sav-home-ad__metric--reach { inset: auto 4% 7% auto; background: #FFF8ED; transform: rotate(-2deg); }
.sav-home-ad__metric strong { font: 400 3rem/.85 var(--font-serif); }
.sav-home-ad__metric span { font: 700 .58rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.atl-home-ad__visual { isolation: isolate; }
.atl-home-ad__phone {
  background: linear-gradient(155deg,#3A1714,#111516 74%);
  box-shadow: 1.6rem 1.6rem 0 rgba(190,51,47,.26), 0 2rem 3.5rem rgba(0,0,0,.28);
}
.atl-home-ad__metric { background: #D93F3A; }
.atl-home-ad__metric--reach { background: #FFF8ED; }

.channel-market-note { display: flex; gap: 1rem; align-items: baseline; margin-block-start: 1.4rem; padding-block-start: 1.2rem; border-block-start: 1px solid var(--line); }
.channel-market-note > span { color: var(--red); font: 700 .62rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.channel-market-note p { margin: 0; color: var(--ink-60); font-size: .86rem; }
.channel-market-note a { color: inherit; font-weight: 750; text-decoration: underline; text-underline-offset: .2em; }

@media (max-width: 64rem) {
  .sav-ad-hero__grid,
  .sav-ad-inquire { grid-template-columns: 1fr; }
  .sav-ad-hero__art { max-width: 44rem; width: 100%; margin-inline: auto; }
  .sav-ad-use-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sav-ad-use:nth-child(3) { border-inline-start: 0; border-block-start: 1px solid var(--line); }
  .sav-ad-use:nth-child(4) { border-block-start: 1px solid var(--line); }
  .sav-ad-sponsorship__visual { min-height: 27rem; }
  .home-partner--savannah .wrap { grid-template-columns: 1fr; }
  .home-partner--savannah .home-partner__copy { max-width: 46rem; }
}
@media (max-width: 40rem) {
  .sav-ad-hero__art { min-height: 32rem; }
  .sav-ad-hero__phone { inset-inline-start: 0; width: 69%; }
  .sav-ad-hero__post { min-height: 27rem; }
  .sav-ad-hero__ticket { width: 64%; }
  .sav-ad-reach__head { grid-template-columns: 1fr; }
  .sav-ad-proof { grid-template-columns: 1fr; }
  .sav-ad-proof__cell { min-height: 10.5rem; }
  .sav-ad-proof__cell + .sav-ad-proof__cell { border-inline-start: 0; border-block-start: 1px solid rgba(255,255,255,.16); }
  .sav-ad-use-grid { grid-template-columns: 1fr; }
  .sav-ad-use { border-inline-start: 0; border-block-start: 1px solid var(--line); }
  .sav-ad-use:first-child { border-block-start: 0; }
  .sav-ad-model-grid { grid-template-columns: 1fr; }
  .sav-ad-model { min-height: 20rem; }
  .sav-ad-sponsorship__visual { min-height: 21rem; }
  .sav-ad-sponsorship__copy h2 {
    max-width: none;
    font-size: clamp(2.35rem,10.7vw,2.75rem);
    line-height: .94;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .sav-ad-sponsorship__copy li { grid-template-columns: 1fr; gap: .45rem; }
  .sav-sponsor-calendar__stories { grid-template-columns: 1fr; }
  .sav-sponsor-story { min-height: 9.5rem; }
  .sav-home-ad__visual { min-height: 24rem; }
  .sav-home-ad__phone { inset-inline-start: 0; width: 67%; min-height: 21rem; }
  .sav-home-ad__metric { inset-inline-end: 0; min-width: 8.6rem; }
  .sav-home-ad__metric--reach { inset-inline-end: 0; }
  .sav-home-ad__metric strong { font-size: 2.3rem; }
  .channel-market-note { display: grid; }
  .ad-offer-board { min-height: 31rem; }
  .ad-offer-board__card { inset-inline-start: 0; width: 70%; padding: 1.2rem; border-radius: 2rem; }
  .ad-offer-board__card img { width: 4rem; height: 4rem; }
  .ad-offer-board__card b { font-size: .58rem; letter-spacing: .1em; }
  .ad-offer-board__metric { inset-inline-end: 0; min-width: 39%; padding: .9rem; }
  .ad-offer-board__metric strong { font-size: 2.6rem; }
  .ad-offer-board__metric span { font-size: .48rem; }
}

@media (max-width: 63.99rem) {
  .commercial-proof__intro {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 34vw);
    gap: 1.25rem clamp(1rem, 4vw, 2.5rem);
  }
}
@media (max-width: 40rem) {
  .commercial-proof__intro {
    grid-template-columns: minmax(0, 1.1fr) minmax(7.5rem, 39vw);
    gap: 1rem .65rem;
    align-items: start;
  }
  .commercial-proof__statement { grid-column: 1 / -1; grid-row: 2; }
  .atl-audience-map { grid-row: 1; align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .atl-audience-map__wash,
  .sav-sponsor-calendar__line i::after { animation: none !important; }
}

/* Six real promotion proofs, set inside the same layered phone-card language
   used by the Savannah homepage. */
.work-hero__art--six {
  --proof-card-width: clamp(12.5rem, 35%, 16.5rem);
  min-width: 0;
  isolation: isolate;
}
.work-hero__art--six .work-hero__post--shell {
  inset: auto;
  left: var(--slot-x);
  top: var(--slot-y);
  width: var(--proof-card-width);
  padding: 0;
  appearance: none;
  color: #FFF7EA;
  font: inherit;
  text-align: start;
  cursor: pointer;
  pointer-events: auto;
  translate: -50% -50%;
  rotate: var(--slot-rotate);
  transition: translate .3s var(--ease), rotate .3s var(--ease), scale .3s var(--ease),
              box-shadow .3s var(--ease);
}
.work-hero__art--six .work-hero__post--shell:hover,
.work-hero__art--six .work-hero__post--shell:focus-visible {
  z-index: 32;
  translate: -50% calc(-50% - .8rem);
  rotate: 0deg;
  scale: 1.035;
  outline: 2px solid #FFF7EA;
  outline-offset: .3rem;
}
.work-hero__art--six .work-hero__post--shell[data-active] {
  z-index: 32;
  translate: -50% calc(-50% - 1rem);
  rotate: 0deg;
  scale: 1.035;
  box-shadow: 0 34px 70px rgba(0, 0, 0, .66);
}
.work-hero__art--six .work-hero__post--shell img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: top;
}
.work-hero__media-shell {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 5;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(circle at 48% 38%, rgba(207, 54, 50, .25), transparent 40%),
    #101314;
  background-size: 22px 22px, 22px 22px, auto, auto;
}
.work-hero__media-shell::before {
  content: "";
  width: 2.55rem;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 247, 234, .46);
  border-radius: 50%;
  background: rgba(6, 8, 9, .38);
  box-shadow: 0 0 0 .45rem rgba(255, 247, 234, .035);
}
.work-hero__media-shell::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 51%;
  border-block: .42rem solid transparent;
  border-inline-start: .68rem solid rgba(255, 247, 234, .82);
  translate: -42% -50%;
}
.work-hero__media-shell > span {
  position: absolute;
  inset: .7rem auto auto .72rem;
  color: rgba(255, 247, 234, .48);
  font: 700 .56rem var(--font-mono);
  letter-spacing: .1em;
}
.work-hero__art--six .work-hero__proof {
  inset: auto .45rem .45rem;
  box-sizing: border-box;
  max-width: calc(100% - .9rem);
  gap: .42rem;
}
.work-hero__art--six .work-hero__proof b,
.work-hero__art--six .work-hero__proof i { overflow-wrap: anywhere; }
.work-hero__art--six .work-hero__proof > em { color: rgba(255,247,234,.78); font-family: var(--font-sans); font-size: .56rem; font-style: normal; line-height: 1.35; text-transform: none; }
.work-hero__proof small { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .35rem; padding-block-start: .35rem; border-block-start: 1px solid rgba(255,255,255,.2); }
.work-hero__proof small i { display: grid; gap: .12rem; color: rgba(255, 247, 234, .68); font-style: normal; }
.work-hero__proof small i b { color: rgba(255,247,234,.48); font-size: .42rem; line-height: 1.2; }
.work-hero__proof small i strong { color: #FFF7EA; font-size: .58rem; line-height: 1.2; }
.work-hero__art--six .work-hero__post--1 {
  --slot-x: 17.5%; --slot-y: 31%; --slot-rotate: -9deg; z-index: 6;
}
.work-hero__art--six .work-hero__post--4 {
  --slot-x: 50%; --slot-y: 25%; --slot-rotate: -2deg; z-index: 3;
}
.work-hero__art--six .work-hero__post--5 {
  --slot-x: 82.5%; --slot-y: 31%; --slot-rotate: 9deg; z-index: 1;
}
.work-hero__art--six .work-hero__post--2 {
  --slot-x: 82.5%; --slot-y: 66%; --slot-rotate: -9deg; z-index: 5;
}
.work-hero__art--six .work-hero__post--3 {
  --slot-x: 50%; --slot-y: 68%; --slot-rotate: 2deg; z-index: 2;
}
.work-hero__art--six .work-hero__post--6 {
  --slot-x: 17.5%; --slot-y: 66%; --slot-rotate: 9deg; z-index: 4;
}
.work-hero__art--six .work-hero__seal {
  z-index: 20;
  inset: 50% auto auto 50%;
  box-sizing: border-box;
  width: clamp(11rem, 33%, 15.5rem);
  translate: -50% -50%;
  appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  transition: translate .25s var(--ease), rotate .25s var(--ease),
              scale .25s var(--ease), box-shadow .25s var(--ease);
}
.work-hero__art--six .work-hero__seal:hover,
.work-hero__art--six .work-hero__seal:focus-visible,
.work-hero__art--six .work-hero__seal[data-hover],
.work-hero__art--six .work-hero__seal[data-active] {
  z-index: 40;
  translate: -50% calc(-50% - .35rem);
  rotate: 0deg;
  scale: 1.025;
  box-shadow: 0 28px 58px rgba(0, 0, 0, .52);
}
.work-hero__art--six .work-hero__seal:focus-visible {
  outline: 2px solid #FFF7EA;
  outline-offset: .35rem;
}

/* A chapter marker appears only while one advertising offer owns the entire
   viewport. The scroll script removes it at every hand-off between chapters. */
.offer-context-marker {
  position: fixed;
  z-index: 30;
  inset: 50% clamp(.45rem, 1.35vw, 1.3rem) auto auto;
  opacity: 0;
  translate: calc(100% + 2rem) -50%;
  pointer-events: none;
  transition: opacity .24s var(--ease), translate .34s var(--ease);
}
.offer-context-marker[data-visible] { opacity: 1; translate: 0 -50%; }
.offer-context-marker span {
  display: block;
  padding: .9rem .56rem;
  color: #FFF7EA;
  border: 1px solid rgba(255, 247, 234, .28);
  border-radius: 999px;
  background: rgba(11, 13, 14, .86);
  box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .22);
  backdrop-filter: blur(10px);
  font: 700 .55rem var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  rotate: 180deg;
}

/* Partner history is its own dark chapter, rather than evidence nested inside
   the platform-sponsorship offer. */
.partner-band { color: #FFF7EA; background: #0B0D0E; }
.partner-band .partner-roster { padding-block: 0; border-block: 0; }
.partner-band .partner-roster__dek,
.partner-band .partner-marquee__toolbar p { color: rgba(255, 247, 234, .6); }

@media (max-width: 61.99rem) {
  .work-hero__art--six {
    --proof-card-width: clamp(11rem, 34%, 14.5rem);
    min-height: 42rem;
  }
}
@media (max-width: 45.99rem) {
  .work-hero__art--six {
    --proof-card-width: clamp(8.5rem, 42%, 10.75rem);
    min-height: 34rem;
  }
  .work-hero__art--six .work-hero__post--1 { --slot-x: 20%; --slot-y: 30%; }
  .work-hero__art--six .work-hero__post--4 { --slot-y: 27%; }
  .work-hero__art--six .work-hero__post--5 { --slot-x: 80%; --slot-y: 30%; }
  .work-hero__art--six .work-hero__post--2 { --slot-x: 80%; --slot-y: 67%; }
  .work-hero__art--six .work-hero__post--3 { --slot-y: 68%; }
  .work-hero__art--six .work-hero__post--6 { --slot-x: 20%; --slot-y: 67%; }
  .work-hero__art--six .work-hero__proof { gap: .3rem; padding: .42rem .5rem; }
  .work-hero__art--six .work-hero__proof > em { display: none; }
  .work-hero__proof small { gap: .2rem; }
  .work-hero__proof small i b { font-size: .36rem; }
  .work-hero__proof small i strong { font-size: .49rem; }
  .offer-context-marker span { padding: .72rem .46rem; font-size: .48rem; }
}

@media (prefers-reduced-motion: reduce) {
  .offer-context-marker { transition: none; }
}