/* ==========================================================================
   ARANA PORTFOLIO  |  Designed for Texas
   --------------------------------------------------------------------------
   Play with the tokens right below. Change --red and the whole site follows.
   Sections, in order:
     1. Tokens (color, type, spacing)     6. Home: work grid + filters
     2. Base + utilities                  7. Home: regions, range, about, quotes, contact
     3. Buttons, chips, blobs, bars       8. Case study pages + blocks
     4. Header + footer                   9. Resume, plain pages, lightbox, tumbleweed
     5. Hero                             10. Dark theme, reduced motion, print
   ========================================================================== */

/* 0. FONTS (self-hosted, SIL Open Font License) ------------------------- */
@font-face { font-family: "Sancreek"; src: url("/assets/fonts/sancreek-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

/* 1. TOKENS ------------------------------------------------------------- */
:root {
  /* Brand color, sampled from the portfolio PDF */
  --red: #E41B2C;
  --maroon: #9B1B21;
  --ink: #13100E;          /* the black from the portfolio bars */
  --paper: #FFFFFF;
  --dust: #EDECEA;         /* the light gray from the TDEM slide system */
  --stone: #6B625C;        /* secondary text on light */
  /* Conference accents, only used in the region strip */
  --sky: #29A8E0;
  --navy: #1F3F6E;

  /* Semantic roles (the dark theme swaps these) */
  --bg: var(--paper);
  --surface: var(--paper);
  --surface-alt: var(--dust);
  --text: var(--ink);
  --text-soft: var(--stone);
  --link: var(--red);
  --line: var(--ink);
  --shadow: var(--ink);
  --focus: var(--ink);

  /* Type */
  --font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; /* Sancreek is reserved for the HOWDY hero only */
  --font-head: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-label: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;  /* small caps labels, both modes */

  /* Type scale (major third) */
  --step--1: 0.85rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
  --step-5: clamp(2.441rem, 5vw, 3.815rem);
  --step-6: clamp(2.75rem, 8vw, 5.96rem);

  /* Space */
  --gap: clamp(1rem, 2.5vw, 1.75rem);
  --section: clamp(3.5rem, 8vw, 7rem);
  --wrap: 78rem;
  --header-h: 4rem;

  /* Shapes. Different radii on purpose: big soft blobs, square images, round pills. */
  --r-blob: clamp(1.25rem, 3vw, 2.25rem);
  --r-arch: clamp(6rem, 22vw, 16rem);
  --hard: 6px 6px 0 var(--shadow);
}

/* 2. BASE ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
a:hover { text-decoration-thickness: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2 * var(--gap), var(--wrap)); margin-inline: auto; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--paper); color: var(--ink); padding: 0.6rem 1rem; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.lead {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step-1);
  line-height: 1.35;
  max-width: 38em;
}
.prose { max-width: 40em; }
.prose p { font-size: 1.0625rem; }
.meta { font-family: var(--font-head); font-weight: 600; color: var(--text-soft); margin-bottom: 0.25rem; }
.small-head { font-size: var(--step-1); margin-top: 2rem; }
.credit { font-size: var(--step--1); color: var(--text-soft); margin-top: 1rem; }

/* 3. BUTTONS, CHIPS, BLOBS, BARS ----------------------------------------- */
.btn {
  --btn-bg: var(--red); --btn-fg: var(--paper); --btn-edge: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.7rem 1.4rem;
  font-family: var(--font-head); font-weight: 700; font-size: var(--step-1); line-height: 1;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-edge); border-radius: 999px;
  box-shadow: 4px 4px 0 var(--btn-edge);
  text-decoration: none; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--btn-edge); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--btn-edge); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-edge: var(--line); }
.btn--light { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-edge: var(--paper); box-shadow: 4px 4px 0 var(--red); }
.btn--light:hover { box-shadow: 6px 6px 0 var(--red); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.linklike { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; cursor: pointer; }

.chip, .chips li, .tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; line-height: 1;
  padding: 0.55rem 1rem; border-radius: 999px;
  border: 2px solid var(--line);
}
.chip { background: var(--surface); color: var(--text); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip:hover { background: var(--surface-alt); }
.chip[aria-pressed="true"]:hover { background: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.chips li { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chips--quiet li { background: transparent; color: var(--text); border-color: var(--line); border-width: 1.5px; font-weight: 600; }
.tag { background: var(--ink); color: var(--paper); border-color: var(--ink); border-radius: 0; padding: 0.45rem 0.8rem; font-size: 1.1rem; margin-bottom: 0.75rem; }
.tag--red { background: var(--red); border-color: var(--red); }

.blob { background: var(--surface); color: var(--text); border-radius: var(--r-blob); padding: clamp(1.25rem, 3vw, 2.25rem); }
.blob--ink { background: var(--ink); color: var(--paper); }

/* The black section bars from the portfolio */
.bar { background: var(--ink); color: var(--paper); }
.bar > * {
  margin-block: 0; padding-block: 0.9rem;
  font-family: var(--font-head); font-weight: 800; font-size: var(--step-3);
  text-transform: uppercase; letter-spacing: 0.01em; line-height: 1;
}

.section { padding-bottom: var(--section); }
.section > .bar { margin-bottom: clamp(2rem, 5vw, 3.5rem); }

/* Striped slide texture, borrowed from the TDEM presentation system */
.stripes {
  background-color: var(--surface-alt);
  background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgb(0 0 0 / 0.035) 22px 24px);
}

/* 4. HEADER + FOOTER ----------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--paper); }
.site-header__inner {
  width: min(100% - 2 * var(--gap), var(--wrap)); margin-inline: auto;
  height: var(--header-h); display: flex; align-items: center; gap: 1.5rem;
}
.brandmark img { height: 2.9rem; width: auto; }
@media (max-width: 34rem) { .brandmark img { height: 2.5rem; } }
.brandmark:focus-visible { outline-color: var(--paper); }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block; padding: 0.5rem 0.8rem; color: var(--paper); text-decoration: none;
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; border-radius: 999px;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--red); }
.site-nav a:focus-visible { outline-color: var(--paper); }
.site-header__tools { display: flex; gap: 0.25rem; position: relative; }

.icon-btn {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
  background: transparent; border: 0; border-radius: 999px; cursor: pointer; color: inherit;
}
.icon-btn svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { background: rgb(255 255 255 / 0.12); }
.site-header .icon-btn:focus-visible { outline-color: var(--paper); }
.theme-toggle .i-moon { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-moon { display: block; }

.menu-toggle { display: none; }
.menu-toggle span { display: block; width: 1.4rem; height: 2px; background: currentColor; margin: 2px 0; transition: transform 0.2s ease, opacity 0.2s ease; }
.menu-toggle { grid-auto-flow: row; align-content: center; }

@media (max-width: 64rem) {
  .menu-toggle { display: inline-grid; }
  .site-header__tools { margin-left: auto; }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 0 0; background: var(--field-red, var(--red));
    display: grid; align-content: start; padding: 2rem var(--gap);
    transform: translateY(-110%); visibility: hidden; transition: transform 0.28s ease, visibility 0s linear 0.28s;
  }
  .site-nav ul { flex-direction: column; gap: 0.25rem; }
  .site-nav a { font-size: var(--step-4); padding: 0.4rem 0; border-radius: 0; }
  .site-nav a:hover, .site-nav a[aria-current="page"] { background: none; text-decoration: underline; }
  .nav-open .site-nav { transform: none; visibility: visible; transition: transform 0.28s ease; }
  .nav-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-open { overflow: hidden; }
}

.site-footer { background: var(--field-red, var(--red)); color: var(--paper); padding-top: clamp(2.5rem, 6vw, 4rem); }
.site-footer a { color: var(--paper); }
.site-footer :focus-visible { outline-color: var(--paper); }
.site-footer__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; }
.site-footer__brand img { width: clamp(9rem, 20vw, 13rem); }
.site-footer__nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; margin: 0; padding: 0; justify-content: center; }
.site-footer__nav a { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; text-decoration: none; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__legal { border-top: 2px solid rgb(255 255 255 / 0.35); margin-top: 2.5rem; padding-block: 1.25rem 2rem; font-size: var(--step--1); }
.site-footer__legal p { margin: 0 0 0.4rem; max-width: 60em; }

.badge { width: 7.5rem; height: 7.5rem; padding: 0; background: none; border: 0; cursor: pointer; border-radius: 50%; }
.badge svg { width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(.3, 1.4, .5, 1); }
.badge:hover svg, .badge:focus-visible svg { transform: rotate(40deg); }
.badge__rim { fill: var(--ink); }
.badge__text { fill: var(--paper); font-family: var(--font-head); font-weight: 700; font-size: 10.5px; letter-spacing: 1.6px; }
.badge__star { fill: var(--red); }

@media (max-width: 44rem) {
  .site-footer__inner { grid-template-columns: 1fr auto; }
  .site-footer__nav { grid-column: 1 / -1; order: 3; }
  .site-footer__nav ul { justify-content: flex-start; }
}

/* 5. HERO ----------------------------------------------------------------- */
.hero { position: relative; background: var(--field-red, var(--red)); color: var(--paper); overflow: hidden; }
.hero__pattern {
  position: absolute; inset: 0; pointer-events: none;
  background-color: rgb(255 255 255 / 0.13);
  -webkit-mask: url("/assets/img/brand/pattern-mask.png") center / 1100px auto repeat;
          mask: url("/assets/img/brand/pattern-mask.png") center / 1100px auto repeat;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--gap);
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  min-height: min(calc(100svh - var(--header-h)), 58rem);
}
.hero__howdy { grid-column: 1 / -1; grid-row: 1; margin: 0; line-height: 0.8; position: relative; z-index: 2; }
.howdy {
  display: flex; justify-content: center;
  font-family: "Sancreek", "Rockwell Extra Bold", Georgia, serif; font-weight: 400;
  /* Sancreek "HOWDY" is 3.37x its font size wide, so this fills the column exactly */
  font-size: calc(min(100vw - 2 * var(--gap), var(--wrap)) * 0.296);
  letter-spacing: 0; color: var(--paper);
}
.howdy span { display: inline-block; animation: stamp 0.55s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(0.08s * var(--i) + 0.1s); }
@keyframes stamp {
  0% { opacity: 0; transform: translateY(-0.25em) scale(1.25) rotate(-6deg); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

.hero__card {
  grid-column: 1 / span 7; grid-row: 2; align-self: center;
  margin-block: clamp(1.5rem, 4vw, 3rem);
  position: relative; z-index: 2;
  box-shadow: var(--hard);
  animation: rise 0.6s ease both 0.55s;
}
.hero__line { font-family: var(--font-head); font-weight: 800; font-size: var(--step-4); line-height: 1.05; margin-bottom: 0.6em; }
.hero__sub { font-size: 1.1rem; max-width: 34em; color: var(--text-soft); margin-bottom: 1.5rem; }

.hero__portrait { grid-column: 8 / -1; grid-row: 2; align-self: end; position: relative; margin-top: clamp(0.75rem, 2vw, 1.5rem); animation: rise 0.7s ease both 0.4s; }
.arch {
  position: relative; background: var(--paper);
  border-radius: var(--r-arch) var(--r-arch) 0 0;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(0.5rem, 2vw, 1.5rem) 0;
}
.arch img { width: 100%; filter: grayscale(1) contrast(1.05); }
.pet-tag { position: absolute; right: -0.5rem; top: 48%; display: flex; align-items: center; transform: rotate(-12deg); }
.pet-tag svg { width: 10rem; margin-top: 3rem; fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; }
.pet-tag b {
  background: var(--ink); color: var(--paper); border-radius: 999px; padding: 0.35rem 0.9rem 0.45rem;
  font-family: var(--font-head); font-style: italic; font-weight: 700; font-size: 1.35rem;
}
.nameplate {
  position: absolute; left: -2rem; bottom: 1.5rem; margin: 0; z-index: 3;
  background: var(--ink); color: var(--paper); border-radius: 999px;
  padding: 0.6rem 1.75rem 0.7rem; line-height: 1;
}
.nameplate strong { display: block; font-family: var(--font-head); font-weight: 800; font-size: var(--step-3); text-transform: uppercase; }
.nameplate span { display: block; font-family: var(--font-head); font-weight: 500; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.04em; }
@keyframes rise { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }

@media (max-width: 60rem) {
  .hero__inner { grid-template-rows: auto auto auto; min-height: 0; }
  .hero__portrait { grid-column: 3 / -1; grid-row: 2; margin-top: 0; }
  .hero__card { grid-column: 1 / -1; grid-row: 3; margin-top: -1rem; margin-bottom: 2.5rem; }
  .nameplate { left: auto; right: 1rem; bottom: 1.25rem; }
}
@media (max-width: 34rem) {
  .hero__portrait { grid-column: 1 / -1; }
  .pet-tag { right: 0; top: 40%; }
  .pet-tag svg { width: 6rem; margin-top: 1.8rem; }
  .nameplate { right: 0.5rem; }
  .nameplate strong { font-size: var(--step-2); }
  .nameplate span { font-size: 0.85rem; }
  .hero__line { font-size: var(--step-3); }
}

/* 6. WORK GRID + FILTERS ------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.work-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem);
}
.work-card a { display: block; color: inherit; text-decoration: none; height: 100%; }
.work-card__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-alt); box-shadow: var(--hard); border: 2px solid var(--line); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.work-card__img img { width: 100%; height: 100%; object-fit: cover; }
.work-card__img.is-contain { background: var(--paper); }
.work-card__img.is-contain img { object-fit: contain; padding: 8%; }
.work-card a:hover .work-card__img, .work-card a:focus-visible .work-card__img { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--red); }
.work-card__text { padding-top: 1.1rem; }
.work-card h3 { font-size: var(--step-3); margin-bottom: 0.35rem; }
.work-card a:hover h3 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.12em; }
.work-card__text > p:last-child { color: var(--text-soft); margin: 0; max-width: 32em; }
.work-card--lead { grid-column: span 2; }
.work-card--lead h3 { font-size: var(--step-4); }
.work-card[hidden] { display: none; }
.work-grid.is-filtered .work-card--lead { grid-column: auto; }
.work-grid.is-filtered .work-card--lead h3 { font-size: var(--step-3); }
.filter-empty { font-size: var(--step-1); }

@media (max-width: 60rem) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 38rem) {
  .work-grid { grid-template-columns: 1fr; }
  .work-card--lead { grid-column: auto; }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gap)); padding: 0.25rem var(--gap) 0.75rem; scrollbar-width: none; }
  .filters .chip { flex: none; }
}

/* 7a. REGIONS ------------------------------------------------------------ */
.feature { background: #1F3240; color: var(--paper); padding-top: var(--section); }
.feature__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 2.5rem; }
.feature__head h2 { font-size: var(--step-6); margin-bottom: 0.2em; }
.feature__head .lead { color: rgb(255 255 255 / 0.85); margin: 0; }
.feature :focus-visible { outline-color: var(--paper); }

.regions {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 0.6rem; height: clamp(22rem, 42vw, 32rem);
  background: var(--ink); border: 0.6rem solid var(--ink); box-shadow: 10px 10px 0 var(--red);
}
.region { flex: 1 1 0; min-width: 0; transition: flex-grow 0.45s cubic-bezier(.3, .9, .3, 1); }
.region .region__link { position: relative; display: block; height: 100%; overflow: hidden; color: var(--paper); text-decoration: none; }
.region img { width: 100%; height: 100%; object-fit: cover; }
.region__label {
  position: absolute; left: 0.75rem; bottom: 0.75rem; right: 0.75rem;
  background: var(--ink); padding: 0.5rem 0.85rem 0.6rem; border-radius: 0.6rem;
  font-family: var(--font-head); font-weight: 800; font-size: var(--step-1); line-height: 1.05;
  opacity: 0; transform: translateY(0.5rem); transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.region__label small { display: block; font-weight: 600; font-size: 0.9rem; color: var(--sky); }
.regions:hover .region, .regions:focus-within .region { flex-grow: 0.7; }
.region:hover, .region:focus-within { flex-grow: 4 !important; }
.region:hover .region__label, .region:focus-within .region__label { opacity: 1; transform: none; }
.region .region__link:focus-visible { outline-offset: -4px; border-radius: 0; }

@media (max-width: 44rem), (hover: none) {
  .regions { display: grid; grid-template-columns: repeat(2, 1fr); height: auto; }
  .region .region__link { aspect-ratio: 1; }
  .region__label { opacity: 1; transform: none; font-size: 1rem; left: 0.4rem; right: auto; bottom: 0.4rem; max-width: calc(100% - 0.8rem); }
  .regions:hover .region, .regions:focus-within .region, .region:hover, .region:focus-within { flex-grow: 1 !important; }
}
@media (min-width: 44.01rem) and (hover: none) { .regions { grid-template-columns: repeat(4, 1fr); } }

/* 7b. RANGE -------------------------------------------------------------- */
.range__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.range__intro { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.range__intro .lead { font-size: var(--step-2); }
.disc { border-top: 2px solid var(--line); }
.disc:last-child { border-bottom: 2px solid var(--line); }
.disc summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem 0.25rem; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 800; font-size: var(--step-3); line-height: 1.05;
}
.disc summary::-webkit-details-marker { display: none; }
.disc summary::after {
  content: ""; flex: none; width: 1.1rem; height: 1.1rem; margin-left: 0.25rem;
  background: currentColor;
  -webkit-mask: linear-gradient(currentColor 0 0) center / 100% 3px no-repeat, linear-gradient(currentColor 0 0) center / 3px 100% no-repeat;
          mask: linear-gradient(#000 0 0) center / 100% 3px no-repeat, linear-gradient(#000 0 0) center / 3px 100% no-repeat;
  transition: transform 0.2s ease;
}
.disc[open] summary::after { transform: rotate(45deg); }
.disc summary:hover span:first-child { color: var(--link); }
.disc summary span:first-child { margin-right: auto; }
.disc__count {
  flex: none; font-size: 1rem; font-weight: 700; min-width: 2.2rem; text-align: center;
  background: var(--ink); color: var(--paper); border-radius: 999px; padding: 0.3rem 0.6rem;
}
.disc ul { columns: 2 16rem; column-gap: 2rem; margin: 0 0 1.5rem; padding: 0 0.25rem; list-style: none; }
.disc li { break-inside: avoid; padding: 0.35rem 0 0.35rem 1.4rem; position: relative; line-height: 1.35; }
.disc li::before {
  content: ""; position: absolute; left: 0; top: 0.6rem; width: 0.7rem; height: 0.7rem; background: var(--red);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
@media (max-width: 52rem) {
  .range__grid { grid-template-columns: 1fr; }
  .range__intro { position: static; }
}

/* 7c. ABOUT -------------------------------------------------------------- */
.about { padding-top: 0; }
.about__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.about h2 { font-size: var(--step-5); }
.tally { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; margin: 0 0 2rem; }
.tally div { border-top: 3px solid var(--red); padding-top: 0.6rem; }
.tally dd { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: var(--step-5); line-height: 1; }
.tally dt { font-family: var(--font-head); font-weight: 600; color: var(--text-soft); line-height: 1.2; margin-top: 0.3rem; }
.offclock h3 { font-size: var(--step-2); }
.offclock p { color: rgb(255 255 255 / 0.85); }
.hat-tip {
  display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer;
  background: var(--red); color: var(--paper); border: 2px solid var(--paper); border-radius: 999px;
  padding: 0.5rem 1.1rem 0.5rem 0.8rem; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem;
}
.hat-tip svg { width: 2.4rem; fill: var(--paper); transform-origin: 50% 90%; }
.hat-tip:hover svg { transform: rotate(-12deg) translateY(-2px); }
.hat-tip.is-tipped svg { animation: tip 0.7s ease; }
.hat-tip output { font-variant-numeric: tabular-nums; background: var(--paper); color: var(--ink); border-radius: 999px; padding: 0.1rem 0.55rem; }
.hat-tip output:empty { display: none; }
.hat-tip:focus-visible { outline-color: var(--paper); }
@keyframes tip { 0%,100% { transform: none; } 30% { transform: translateY(-10px) rotate(-18deg); } 60% { transform: translateY(-4px) rotate(6deg); } }
@media (max-width: 52rem) { .about__grid { grid-template-columns: 1fr; } }

/* 7d. QUOTES ------------------------------------------------------------- */
.words { position: relative; background: var(--field-red, var(--red)); color: var(--paper); padding-top: var(--section); overflow: hidden; }
.words > * { position: relative; }
.words__head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 2rem; }
.words__head h2 { font-size: var(--step-6); margin: 0; }
.words__controls { display: flex; gap: 0.5rem; }
.words__controls .icon-btn { background: var(--ink); color: var(--paper); }
.words__controls .icon-btn:hover { background: var(--paper); color: var(--ink); }
.words :focus-visible { outline-color: var(--paper); }
.quotes {
  list-style: none; margin: 0; padding: 0.5rem max(var(--gap), (100% - var(--wrap)) / 2) 1.5rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(26rem, 82vw); gap: 1.5rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gap), (100% - var(--wrap)) / 2);
  scrollbar-width: thin; scrollbar-color: var(--ink) transparent;
}
.quote { scroll-snap-align: start; display: flex; flex-direction: column; box-shadow: var(--hard); }
.quote__star { width: 2rem; fill: var(--red); margin-bottom: 1rem; }
.quote blockquote { margin: 0 0 1.5rem; flex: 1; }
.quote blockquote p { font-family: var(--font-head); font-weight: 600; font-size: var(--step-2); line-height: 1.2; margin: 0; }
.quote__who { margin: 0; line-height: 1.3; }
.quote__who strong { display: block; font-family: var(--font-head); font-size: 1.2rem; }
.quote__who span { color: var(--text-soft); font-size: 0.95rem; }
.words__note { margin-top: 1rem; font-weight: 500; }

/* 7e. CONTACT ------------------------------------------------------------ */
.contact { background: var(--ink); color: var(--paper); padding-top: var(--section); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contact h2 { font-size: var(--step-6); }
.contact .lead { color: rgb(255 255 255 / 0.85); }
.contact__links { list-style: none; padding: 0; margin: 2rem 0 0; font-family: var(--font-head); font-weight: 700; font-size: var(--step-2); }
.contact__links li { padding: 0.4rem 0; border-bottom: 2px solid rgb(255 255 255 / 0.2); }
.contact__links a { color: var(--paper); text-decoration-color: var(--red); }
.contact :focus-visible { outline-color: var(--paper); }
.contact-form { color: var(--ink); background: var(--paper); box-shadow: 8px 8px 0 var(--red); }
.contact-form :focus-visible { outline-color: var(--ink); }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; margin-bottom: 0.3rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: 0.6rem; padding: 0.7rem 0.85rem;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--red); outline-offset: 1px; }
.contact-form .btn { width: 100%; margin-top: 0.5rem; }
.form-status { margin: 1rem 0 0; font-weight: 600; min-height: 1.6em; }
.form-status.is-error { color: var(--maroon); }
@media (max-width: 52rem) { .contact__grid { grid-template-columns: 1fr; } }

/* 8. CASE STUDY PAGES ---------------------------------------------------- */
.case-head .bar p { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; font-size: var(--step-1); }
.case-head__inner { padding-block: clamp(2rem, 5vw, 3.5rem) 2rem; }
.back { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; margin-bottom: 1.25rem; }
.back::before { content: "\2190\00a0"; }
.case-head h1 { font-size: var(--step-6); max-width: 14em; }
.case-meta { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 1rem 3rem; margin: 1.5rem 0 2rem; }
.case-meta dt { font-family: var(--font-head); font-weight: 600; color: var(--text-soft); }
.case-meta dd { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: var(--step-1); line-height: 1.2; max-width: 22em; }
.lead-stack .lead { font-size: var(--step-2); }
.case-cover { margin-block: 1rem var(--section); }
.case-cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 2px solid var(--line); box-shadow: 10px 10px 0 var(--shadow); }
.case-cover.is-contain img { object-fit: contain; background: var(--paper); padding: 4%; max-height: 32rem; }
@media (max-width: 44rem) { .case-meta { grid-template-columns: 1fr; } }

.block { padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.block__heading { font-size: var(--step-5); }
.block--quote { padding-bottom: clamp(3rem, 7vw, 5rem); }

/* Masonry: every image in a column shares the column's width and keeps its own height, stacking top to bottom */
.gallery { --gap-g: clamp(1rem, 2.5vw, 1.75rem); columns: var(--cols, 3); column-gap: var(--gap-g); margin-top: 2rem; }
.gallery > .shot { display: inline-block; width: 100%; vertical-align: top; break-inside: avoid; margin: 0 0 var(--gap-g); }
.shot { margin: 0; }
.shot__btn { display: block; width: 100%; padding: 0; border: 2px solid var(--line); background: var(--surface-alt); cursor: zoom-in; box-shadow: var(--hard); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.shot__btn:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--red); }
.shot__btn img { width: 100%; }
.shot figcaption { font-size: var(--step--1); color: var(--text-soft); margin-top: 0.75rem; }
/* When JS is on, main.js packs each image into the shortest column */
.gallery.is-masonry { columns: auto; display: flex; align-items: flex-start; gap: var(--gap-g); }
.gallery__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-g); }
.gallery__col > .shot { margin: 0; }
@media (max-width: 52rem) { .gallery { columns: min(var(--cols, 3), 2); } }
@media (max-width: 34rem) { .gallery { columns: 1; } }

.pairs { display: grid; gap: clamp(2rem, 5vw, 3rem); margin-top: 2rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: start; }
@media (max-width: 40rem) { .pair { grid-template-columns: 1fr; } }

.stats { display: flex; flex-wrap: wrap; gap: 1rem clamp(2rem, 6vw, 5rem); margin: 0; padding: 1.75rem 0; border-block: 3px solid var(--line); }
.stats div { display: flex; flex-direction: column-reverse; }
.stats dd { margin: 0; font-family: var(--font-display); font-size: clamp(2.75rem, 7vw, 4.5rem); line-height: 1; color: var(--link); }
.stats dt { font-family: var(--font-head); font-weight: 700; font-size: var(--step-1); }

.logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.logo-card__art { background: var(--paper); border: 2px solid var(--line); box-shadow: var(--hard); aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 10%; margin-bottom: 1.25rem; }
.logo-card__art img { max-height: 100%; width: auto; object-fit: contain; }
.logo-card h3 { font-size: var(--step-2); }
.logo-card p { color: var(--text-soft); }
@media (max-width: 60rem) { .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) { .logos { grid-template-columns: 1fr; } }

.pull-quote { margin: 0; background: var(--field-red, var(--red)); color: var(--paper); border-radius: var(--r-blob); padding: clamp(1.75rem, 5vw, 3.5rem); box-shadow: var(--hard); }
.pull-quote blockquote { margin: 0 0 1.25rem; }
.pull-quote p { font-family: var(--font-head); font-weight: 700; font-size: var(--step-4); line-height: 1.1; margin: 0; max-width: 24em; }
.pull-quote strong { display: block; font-family: var(--font-head); font-size: var(--step-1); }

.block--regions .regions { margin-top: 2rem; }

.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 2rem; }
.video-card__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid var(--line); box-shadow: var(--hard); margin-bottom: 1rem; background: var(--ink); }
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.video-card__thumb:hover img { transform: scale(1.04); }
.play { position: absolute; left: 1rem; bottom: 1rem; width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--red); border: 2px solid var(--paper); }
.play svg { width: 1.4rem; fill: var(--paper); margin-left: 3px; }
.video-card h3 { font-size: var(--step-2); margin-bottom: 0.2rem; }

.next-up { padding-bottom: var(--section); }
.next-up a {
  display: grid; grid-template-columns: 1fr minmax(0, 18rem); grid-template-rows: auto 1fr; column-gap: 2rem; align-items: center;
  background: var(--ink); color: var(--paper); text-decoration: none; border-radius: var(--r-blob); padding: clamp(1.5rem, 4vw, 2.5rem); overflow: hidden;
}
.next-up a:focus-visible { outline-offset: 4px; }
.next-up__label { font-family: var(--font-head); font-weight: 600; color: rgb(255 255 255 / 0.75); font-size: var(--step-1); }
.next-up__title { font-family: var(--font-head); font-weight: 800; font-size: var(--step-5); line-height: 1; align-self: start; }
.next-up a:hover .next-up__title { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 4px; }
.next-up img { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; border: 2px solid var(--paper); }
@media (max-width: 38rem) { .next-up a { grid-template-columns: 1fr; } .next-up img { grid-column: 1; grid-row: auto; margin-top: 1.25rem; } }

/* 9. RESUME, PLAIN PAGES, LIGHTBOX, TUMBLEWEED -------------------------- */
.resume-page { background: var(--surface-alt); }
.resume-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 2rem 1.5rem; }
.resume-tools .back { margin: 0; }
.resume {
  max-width: 54rem; background: var(--surface); color: var(--text);
  padding: clamp(1.5rem, 5vw, 3.5rem); margin-bottom: var(--section);
  border: 2px solid var(--line); box-shadow: 10px 10px 0 var(--red);
}
.resume__head { border-bottom: 4px solid var(--red); padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
.resume__head h1 { font-size: var(--step-6); text-transform: uppercase; margin-bottom: 0.1em; }
.resume__role { font-family: var(--font-head); font-weight: 700; font-size: var(--step-2); margin-bottom: 0.5rem; }
.resume__contact { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; font-size: 0.95rem; }
.resume h2 { font-size: var(--step-2); text-transform: uppercase; color: var(--link); margin: 1.75rem 0 0.75rem; }
.resume h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.resume ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.resume li { margin-bottom: 0.35rem; }
.resume__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.job { margin-bottom: 1.5rem; }
.job__top, .job__title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; }
.job__top h3 { margin: 0; }
.job__top span, .job__title span { font-family: var(--font-head); font-weight: 600; color: var(--text-soft); }
.job__title { margin-bottom: 0.6rem; }
@media (max-width: 40rem) { .resume__cols { grid-template-columns: 1fr; } }

.plain-page { padding-block: var(--section); min-height: 60vh; }
.plain-page h1 { font-size: var(--step-5); max-width: 16em; }
.plain-page .btn { margin: 0.5rem 0.75rem 0 0; }
.big-word { font-family: var(--font-display); font-size: clamp(4.5rem, 16vw, 12rem); line-height: 0.9; color: var(--red); margin: 0 0 1rem; }

.lightbox {
  width: min(96vw, 80rem); max-height: 94vh; padding: 0; border: 0; background: transparent; color: var(--paper); overflow: visible;
}
.lightbox::backdrop { background: rgb(19 16 14 / 0.92); }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 0.75rem; }
.lightbox img { max-width: 100%; max-height: 82vh; object-fit: contain; border: 2px solid var(--paper); }
.lightbox figcaption { font-family: var(--font-head); font-weight: 600; font-size: var(--step-1); text-align: center; max-width: 40em; }
.lightbox .icon-btn { position: fixed; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); }
.lightbox .icon-btn:focus-visible { outline-color: var(--paper); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: 1rem; top: 50%; }
.lightbox__next { right: 1rem; top: 50%; }
@media (max-width: 40rem) { .lightbox__prev, .lightbox__next { top: auto; bottom: 1rem; } }

.tumbleweed {
  position: fixed; left: 0; bottom: 0.5rem; width: 6rem; height: 6rem; z-index: 90; pointer-events: none;
  animation: roll 3.6s linear forwards;
}
.tumbleweed svg { width: 100%; height: 100%; animation: bounce 0.9s ease-in-out infinite, spin 0.9s linear infinite; }
.tumbleweed path { fill: none; stroke: #9C7A48; stroke-width: 3; stroke-linecap: round; }
@keyframes roll { from { transform: translateX(-8rem); } to { transform: translateX(calc(100vw + 2rem)); } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes bounce { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.5rem; } }

/* Shared: eyebrow labels + story blocks (both modes) */
.eyebrow { font-family: var(--font-label); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--link); margin: 0 0 0.6rem; }
.story { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.block--story:nth-child(even of .block--story) .story__media { order: 2; }
.story .btn-row { margin-top: 1.5rem; }
@media (max-width: 52rem) { .story { grid-template-columns: 1fr; } .block--story .story__media { order: 0 !important; } }

/* 10. DARK THEME --------------------------------------------------------- */
/* Dark mode is a deep Texas navy, not black. Edit the navy steps here. */
[data-theme="dark"] {
  --navy-950: #08111F;  /* deepest: header, bars, footer bands */
  --navy-900: #0D1A2D;  /* page background */
  --navy-850: #13233A;  /* cards and panels */
  --navy-800: #112036;  /* tinted bands */
  --navy-700: #263F5E;  /* soft lines */
  --bg: var(--navy-900);
  --surface: var(--navy-850);
  --surface-alt: var(--navy-800);
  --text: #EEF2F7;
  --text-soft: #A8B5C6;
  --link: #FF6B76;
  --line: #EEF2F7;
  --shadow: #040A14;
  --focus: #EEF2F7;
  --field-red: #7F1A24;  /* big red areas in Turbo, toned down for contrast */
  color-scheme: dark;
}
[data-theme="dark"] .stripes { background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgb(255 255 255 / 0.04) 22px 24px); }
[data-theme="dark"] .chips li, [data-theme="dark"] .tag:not(.tag--red), [data-theme="dark"] .chip[aria-pressed="true"], [data-theme="dark"] .disc__count { background: var(--text); color: var(--navy-900); border-color: var(--text); }
[data-theme="dark"] .contact, [data-theme="dark"] .bar, [data-theme="dark"] .site-header { background: var(--navy-950); }
[data-theme="dark"] .feature { background: var(--navy-950); }
[data-theme="dark"] .regions { background: var(--navy-950); border-color: var(--navy-950); }
[data-theme="dark"] .hero__card { box-shadow: 6px 6px 0 var(--shadow); }
[data-theme="dark"] .hero__pattern { background-color: rgb(255 255 255 / 0.07); }
[data-theme="dark"] .arch { background: var(--navy-850); }
[data-theme="dark"] .arch img { filter: grayscale(1) contrast(1.1) brightness(0.95); }
[data-theme="dark"] .blob--ink { background: var(--navy-950); }
[data-theme="dark"] .quote { box-shadow: 6px 6px 0 var(--shadow); }
[data-theme="dark"] .logo-card__art, [data-theme="dark"] .case-cover.is-contain img { border-color: var(--navy-700); }
[data-theme="dark"] .work-card__img.is-contain { background: var(--paper); }
[data-theme="dark"] .next-up a { background: var(--navy-950); }
[data-theme="dark"] .resume { box-shadow: 10px 10px 0 var(--red); }
[data-theme="dark"] .role-banner { background: var(--navy-950); }

/* Reduced motion: keep everything, just stop it moving */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .tumbleweed { display: none; }
}

/* Print: the resume page prints as a clean one-color document */
@media print {
  .site-header, .site-footer, .resume-tools, .skip-link { display: none !important; }
  body, .resume-page { background: #fff; color: #000; font-size: 10.5pt; }
  .resume { box-shadow: none; border: 0; padding: 0; margin: 0; max-width: none; width: 100%; background: #fff; color: #000; }
  .resume a { color: #000; text-decoration: none; }
  .resume h2 { color: #000; break-after: avoid; }
  .job { break-inside: avoid; }
  @page { margin: 0.6in; }
}

/* ==========================================================================
   11. MODES: TURBO (everything above) and PROFESSIONAL (everything below)
   --------------------------------------------------------------------------
   <html data-mode="turbo"> or <html data-mode="pro">. Default is set in
   site.json ("defaultMode"). Anything with .turbo-only, .t-turbo, or
   .t-pro shows up in one mode only.
   ========================================================================== */
[data-mode="pro"] .t-turbo,
[data-mode="turbo"] .t-pro,
[data-mode="pro"] .turbo-only,
[data-mode="pro"] .hero-turbo,
[data-mode="pro"] .hero__pattern,
[data-mode="turbo"] .hero-pro,
[data-mode="pro"] .mode-btn .is-pro,
[data-mode="turbo"] .mode-btn .is-turbo,
[data-mode="turbo"] .logo-ink,
[data-mode="pro"] .logo-white { display: none !important; }
[data-theme="dark"][data-mode="pro"] .logo-white { display: block !important; }
[data-theme="dark"][data-mode="pro"] .logo-ink { display: none !important; }

/* ---- The mode button ---------------------------------------------------- */
.mode-btn {
  position: relative; isolation: isolate; flex: none;
  display: inline-flex; align-items: center; height: 2.5rem; padding: 0 1rem;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
  font-family: var(--font-label); font-weight: 700; font-size: 1rem; line-height: 1;
}
.mode-btn__label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.45rem; }
.mode-btn svg { width: 1rem; height: 1rem; flex: none; }
.mode-btn__fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; }
.mode-btn__fx i { position: absolute; display: block; opacity: 0; }
@media (max-width: 40rem) { .mode-btn .long { display: none; } .mode-btn { padding: 0 0.8rem; } }

/* TURBO MODE button (what you see while in Professional). Calm until you
   hover it. Then it boils, rumbles, and throws off bubbles. */
[data-mode="pro"] .mode-btn {
  color: var(--text); background: transparent;
  border: 1.5px solid currentColor; letter-spacing: 0.08em;
  transition: color 0.2s ease, border-color 0.2s ease;
}
[data-mode="pro"] .mode-btn svg { fill: currentColor; }
[data-mode="pro"] .mode-btn:hover,
[data-mode="pro"] .mode-btn:focus-visible {
  color: #fff; border-color: #7A0D16;
  background: linear-gradient(90deg, #E41B2C, #FF5A1F, #FFB000, #FF5A1F, #E41B2C);
  background-size: 300% 100%;
  animation: boil 0.7s linear infinite, rumble 0.14s steps(2, end) infinite, pressure 1.1s ease-in-out infinite;
  text-shadow: 0 0 6px rgb(255 214 0 / 0.9);
}
[data-mode="pro"] .mode-btn:hover svg,
[data-mode="pro"] .mode-btn:focus-visible svg { animation: flicker 0.18s steps(2, end) infinite; }
[data-mode="pro"] .mode-btn .mode-btn__fx i {
  bottom: 0.2rem; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0 20%, #FFD24A 45%, #FF5A1F 100%);
}
[data-mode="pro"] .mode-btn .mode-btn__fx i:nth-child(1) { left: 10%; --d: 0.9s; --w: -4px; animation-delay: 0s; }
[data-mode="pro"] .mode-btn .mode-btn__fx i:nth-child(2) { left: 24%; --d: 1.1s; --w: 5px; animation-delay: 0.25s; width: 0.4rem; height: 0.4rem; }
[data-mode="pro"] .mode-btn .mode-btn__fx i:nth-child(3) { left: 40%; --d: 0.8s; --w: -3px; animation-delay: 0.5s; }
[data-mode="pro"] .mode-btn .mode-btn__fx i:nth-child(4) { left: 55%; --d: 1s; --w: 6px; animation-delay: 0.1s; width: 0.7rem; height: 0.7rem; }
[data-mode="pro"] .mode-btn .mode-btn__fx i:nth-child(5) { left: 68%; --d: 0.85s; --w: -5px; animation-delay: 0.4s; width: 0.35rem; height: 0.35rem; }
[data-mode="pro"] .mode-btn .mode-btn__fx i:nth-child(6) { left: 80%; --d: 1.2s; --w: 3px; animation-delay: 0.65s; }
[data-mode="pro"] .mode-btn .mode-btn__fx i:nth-child(7) { left: 90%; --d: 0.95s; --w: -2px; animation-delay: 0.3s; width: 0.45rem; height: 0.45rem; }
[data-mode="pro"] .mode-btn:hover .mode-btn__fx i,
[data-mode="pro"] .mode-btn:focus-visible .mode-btn__fx i { animation-name: bubble; animation-duration: var(--d); animation-timing-function: ease-in; animation-iteration-count: infinite; }
@keyframes boil { to { background-position: 300% 0; } }
@keyframes rumble { 0% { translate: 0 0; rotate: 0deg; } 50% { translate: 1.5px -1px; rotate: -1.2deg; } 100% { translate: -1.5px 1px; rotate: 1.2deg; } }
@keyframes pressure {
  0%, 100% { scale: 1; box-shadow: 0 0 0 0 rgb(255 90 31 / 0.6), 0 0 14px 2px rgb(255 90 31 / 0.45); }
  50% { scale: 1.07; box-shadow: 0 0 0 6px rgb(255 90 31 / 0), 0 0 26px 8px rgb(255 176 0 / 0.6); }
}
@keyframes bubble {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  20% { opacity: 1; }
  80% { opacity: 1; transform: translate(var(--w), -2.1rem) scale(1.15); }
  100% { opacity: 0; transform: translate(var(--w), -2.6rem) scale(1.8); }
}
@keyframes flicker { 0% { transform: scale(1) rotate(-8deg); } 100% { transform: scale(1.25) rotate(8deg); } }

/* Professional Mode button (what you see while in Turbo). Hover it and
   everything slows down: soft color, wider breath, ripples like still water. */
[data-mode="turbo"] .mode-btn {
  color: var(--ink); background: var(--paper); border: 0;
  font-family: var(--font-body); font-weight: 500; font-size: 0.98rem; letter-spacing: 0.01em;
  transition: background 1.2s cubic-bezier(.25, .1, .25, 1), color 1.2s cubic-bezier(.25, .1, .25, 1),
              letter-spacing 1.2s cubic-bezier(.25, .1, .25, 1), padding 1.2s cubic-bezier(.25, .1, .25, 1), box-shadow 1.2s ease;
}
[data-mode="turbo"] .mode-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 53.4; stroke-dashoffset: 8; transform: rotate(-90deg); }
[data-mode="turbo"] .mode-btn:hover,
[data-mode="turbo"] .mode-btn:focus-visible {
  background: #F4F1EC; color: #1F3240; letter-spacing: 0.07em; padding: 0 1.3rem;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.4), 0 0 28px rgb(244 241 236 / 0.25);
}
[data-mode="turbo"] .mode-btn:hover svg,
[data-mode="turbo"] .mode-btn:focus-visible svg { animation: enso 4.5s ease-in-out infinite; }
[data-mode="turbo"] .mode-btn .mode-btn__fx i { inset: 0; border-radius: inherit; border: 1px solid rgb(255 255 255 / 0.7); }
[data-mode="turbo"] .mode-btn .mode-btn__fx i:nth-child(n + 4) { display: none; }
[data-mode="turbo"] .mode-btn:hover .mode-btn__fx i,
[data-mode="turbo"] .mode-btn:focus-visible .mode-btn__fx i { animation: ripple 4.5s cubic-bezier(.25, .1, .25, 1) infinite; }
[data-mode="turbo"] .mode-btn .mode-btn__fx i:nth-child(2) { animation-delay: 1.5s !important; }
[data-mode="turbo"] .mode-btn .mode-btn__fx i:nth-child(3) { animation-delay: 3s !important; }
@keyframes ripple { 0% { opacity: 0.7; transform: scale(1, 1); } 100% { opacity: 0; transform: scale(1.18, 1.9); } }
@keyframes enso { 0%, 100% { stroke-dashoffset: 53.4; transform: rotate(-90deg); } 50% { stroke-dashoffset: 6; transform: rotate(90deg); } }

/* ---- Switching between modes (View Transitions, where supported) -------- */
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
html[data-switching="turbo"]::view-transition-old(root) { animation: vt-quake 0.8s linear both; }
html[data-switching="turbo"]::view-transition-new(root) { animation: vt-burst 0.8s cubic-bezier(.7, 0, .3, 1) both; }
html[data-switching="pro"]::view-transition-old(root) { animation: vt-exhale 1s cubic-bezier(.25, .1, .25, 1) both; }
html[data-switching="pro"]::view-transition-new(root) { animation: vt-inhale 1s cubic-bezier(.25, .1, .25, 1) both; }
@keyframes vt-burst { from { clip-path: circle(0 at var(--vt-x, 90%) var(--vt-y, 2rem)); } to { clip-path: circle(160vmax at var(--vt-x, 90%) var(--vt-y, 2rem)); } }
@keyframes vt-quake { 0%, 100% { transform: none; } 15% { transform: translate(-6px, 3px); } 30% { transform: translate(6px, -3px); } 45% { transform: translate(-4px, -2px); } 60% { transform: translate(4px, 3px); } 75% { transform: translate(-2px, 1px); } }
@keyframes vt-exhale { to { opacity: 0; filter: blur(6px); } }
@keyframes vt-inhale { from { opacity: 0; filter: blur(6px); } }

/* ==========================================================================
   12. PROFESSIONAL MODE LAYER
   Same palette, turned down: brand red as an accent only, warm neutrals,
   no hard shadows, one type family, generous space, slow easing.
   ========================================================================== */
[data-mode="pro"] {
  --red: #C41E2E;
  --ink: #1A1716;
  --dust: #F5F3F0;
  --stone: #5F5953;
  --line-soft: #E4E0DB;
  --surface-alt: var(--dust);
  --link: #B01C2A;
  --font-head: var(--font-body);
  --font-display: var(--font-body);
  --hard: none;
  --r-blob: 14px;
  --ease-calm: cubic-bezier(.2, .7, .2, 1);
}
[data-mode="pro"] body { font-size: 1.0625rem; line-height: 1.7; }
[data-mode="pro"] h1, [data-mode="pro"] h2, [data-mode="pro"] h3, [data-mode="pro"] h4 { font-weight: 600; letter-spacing: -0.015em; line-height: 1.12; font-synthesis: none; }
[data-mode="pro"] .lead { font-family: var(--font-body); font-weight: 400; font-size: 1.2rem; line-height: 1.6; color: var(--text-soft); }
[data-mode="pro"] .meta { font-family: var(--font-label); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; }
[data-mode="pro"] .eyebrow { font-weight: 600; font-size: 0.9rem; letter-spacing: 0.14em; }
[data-mode="pro"] .small-head { font-size: 1rem; }

/* Header */
[data-mode="pro"] .site-header { background: rgb(255 255 255 / 0.92); color: var(--text); border-bottom: 1px solid var(--line-soft); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
[data-mode="pro"] .site-nav a { color: var(--text); font-family: var(--font-body); font-weight: 500; font-size: 1rem; border-radius: 0; transition: color 0.3s var(--ease-calm); }
[data-mode="pro"] .site-nav a:hover { background: none; color: var(--link); }
[data-mode="pro"] .site-nav a[aria-current="page"] { background: none; color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
[data-mode="pro"] .site-nav a:focus-visible, [data-mode="pro"] .site-header .icon-btn:focus-visible, [data-mode="pro"] .brandmark:focus-visible { outline-color: var(--focus); }
[data-mode="pro"] .icon-btn:hover { background: rgb(0 0 0 / 0.05); }
@media (max-width: 64rem) {
  [data-mode="pro"] .site-nav { background: var(--bg); }
  [data-mode="pro"] .site-nav a { font-size: var(--step-3); font-weight: 600; padding: 0.6rem 0; }
}

/* Buttons, chips, tags */
[data-mode="pro"] .btn {
  --btn-bg: var(--ink); --btn-fg: #fff; --btn-edge: var(--ink);
  border-width: 1.5px; border-radius: 8px; box-shadow: none;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; min-height: 2.9rem; padding: 0.7rem 1.35rem;
  transition: background 0.35s var(--ease-calm), color 0.35s var(--ease-calm), border-color 0.35s var(--ease-calm), transform 0.35s var(--ease-calm);
}
[data-mode="pro"] .btn:hover { transform: translateY(-1px); box-shadow: none; background: #3A3431; border-color: #3A3431; }
[data-mode="pro"] .btn:active { transform: none; box-shadow: none; }
[data-mode="pro"] .btn--ghost, [data-mode="pro"] .btn--light { --btn-bg: transparent; --btn-fg: var(--text); --btn-edge: var(--line-soft); }
[data-mode="pro"] .btn--ghost:hover, [data-mode="pro"] .btn--light:hover { background: var(--surface-alt); border-color: var(--stone); box-shadow: none; }
[data-mode="pro"] .chip { border: 1px solid var(--line-soft); background: transparent; color: var(--text-soft); font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; padding: 0.5rem 0.95rem; transition: all 0.3s var(--ease-calm); }
[data-mode="pro"] .chip:hover { background: transparent; border-color: var(--stone); color: var(--text); }
[data-mode="pro"] .chip[aria-pressed="true"], [data-mode="pro"] .chip[aria-pressed="true"]:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
[data-mode="pro"] .chips li { background: var(--surface-alt); color: var(--text); border: 1px solid var(--line-soft); font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; }
[data-mode="pro"] .chips--quiet li { background: transparent; color: var(--text-soft); }
[data-mode="pro"] .tag { background: none; border: 0; padding: 0; color: var(--text-soft); font-family: var(--font-label); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; }
[data-mode="pro"] .tag--red { color: var(--link); }

/* Section headings: the black bars become a quiet red rule + heading */
[data-mode="pro"] .bar { background: none; color: var(--text); }
[data-mode="pro"] .bar > * { font-family: var(--font-body); font-weight: 600; font-size: var(--step-4); text-transform: none; letter-spacing: -0.015em; padding-block: clamp(3.5rem, 8vw, 6rem) 0; }
[data-mode="pro"] .bar > *::before { content: ""; display: block; width: 2.5rem; height: 3px; background: var(--link); margin-bottom: 1.1rem; }
[data-mode="pro"] .section > .bar { margin-bottom: 2rem; }

/* Hero */
[data-mode="pro"] .hero { background: var(--bg); color: var(--text); overflow: visible; }
.hero-pro {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: end;
  padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line-soft);
}
.hero-pro__text { padding-bottom: clamp(0rem, 3vw, 2.5rem); }
.hero-pro__name { font-size: clamp(2.8rem, 7vw, 5.4rem); letter-spacing: -0.03em !important; margin-bottom: 0.3em; }
.hero-pro__line { font-size: var(--step-2); font-weight: 500; line-height: 1.3; max-width: 22em; margin-bottom: 0.9em; }
.hero-pro__sub { color: var(--text-soft); max-width: 36em; margin-bottom: 2rem; }
.hero-pro__photo { margin: 0; background: var(--surface-alt); border-radius: 50% 50% 14px 14px / 30% 30% 14px 14px; overflow: hidden; padding-top: clamp(1.5rem, 4vw, 2.75rem); }
.hero-pro__photo img { width: 100%; filter: grayscale(1) contrast(1.02); }
[data-mode="pro"] .hero-pro { animation: settle 1.1s var(--ease-calm) both; }
@keyframes settle { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 52rem) {
  .hero-pro { grid-template-columns: 1fr; }
  .hero-pro__photo { max-width: 20rem; }
}

/* Work grid */
[data-mode="pro"] .filters { gap: 0.4rem; }
[data-mode="pro"] .work-grid { gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.25rem); }
[data-mode="pro"] .work-card__img { border: 0; box-shadow: none; border-radius: 12px; transition: none; }
[data-mode="pro"] .work-card__img img { transition: transform 0.9s var(--ease-calm); }
[data-mode="pro"] .work-card a:hover .work-card__img, [data-mode="pro"] .work-card a:focus-visible .work-card__img { transform: none; box-shadow: none; }
[data-mode="pro"] .work-card a:hover .work-card__img img { transform: scale(1.03); }
[data-mode="pro"] .work-card__img.is-contain { background: var(--surface-alt); }
[data-mode="pro"] .work-card h3 { font-size: var(--step-2); transition: color 0.3s var(--ease-calm); }
[data-mode="pro"] .work-card--lead h3 { font-size: var(--step-3); }
[data-mode="pro"] .work-grid.is-filtered .work-card--lead h3 { font-size: var(--step-2); }
[data-mode="pro"] .work-card a:hover h3 { text-decoration: none; color: var(--link); }

/* Around Texas: a calm grid instead of the expanding strip */
[data-mode="pro"] .feature { background: var(--surface-alt); color: var(--text); padding-top: clamp(3.5rem, 8vw, 6rem); }
[data-mode="pro"] .feature__head h2 { font-size: var(--step-4); }
[data-mode="pro"] .feature__head .lead { color: var(--text-soft); }
[data-mode="pro"] .feature :focus-visible { outline-color: var(--focus); }
[data-mode="pro"] .regions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); height: auto; background: none; border: 0; box-shadow: none; }
[data-mode="pro"] .region .region__link { display: flex; flex-direction: column; gap: 0.7rem; height: auto; overflow: visible; color: var(--text); aspect-ratio: auto; }
[data-mode="pro"] .region img { aspect-ratio: 1; height: auto; border-radius: 10px; transition: transform 0.8s var(--ease-calm); }
[data-mode="pro"] .region .region__link:hover img { transform: translateY(-4px); }
[data-mode="pro"] .region__label { position: static; opacity: 1; transform: none; background: none; padding: 0; border-radius: 0; color: var(--text); font-family: var(--font-body); font-weight: 600; font-size: 1rem; white-space: normal; }
[data-mode="pro"] .region__label small { color: var(--text-soft); font-family: var(--font-label); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.1rem; }
[data-mode="pro"] .region .region__link:focus-visible { outline-offset: 4px; border-radius: 10px; }
@media (max-width: 44rem) { [data-mode="pro"] .regions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Capabilities */
[data-mode="pro"] .range__intro .lead { font-size: 1.2rem; }
[data-mode="pro"] .disc { border-top: 1px solid var(--line-soft); }
[data-mode="pro"] .disc:last-child { border-bottom: 1px solid var(--line-soft); }
[data-mode="pro"] .disc summary { font-weight: 600; font-size: var(--step-1); padding: 1.15rem 0.25rem; transition: color 0.3s var(--ease-calm); }
[data-mode="pro"] .disc summary::after { width: 0.8rem; height: 0.8rem; color: var(--text-soft); }
[data-mode="pro"] .disc__count { background: var(--surface-alt); color: var(--text-soft); font-weight: 500; font-size: 0.85rem; }
[data-mode="pro"] .disc li { color: var(--text-soft); }
[data-mode="pro"] .disc li::before { width: 0.4rem; height: 0.4rem; top: 0.85rem; border-radius: 50%; clip-path: none; background: var(--link); }

/* About */
[data-mode="pro"] .about { padding-top: clamp(1rem, 3vw, 2rem); }
[data-mode="pro"] .about h2 { font-size: var(--step-4); }
[data-mode="pro"] .tally div { border-top: 1px solid var(--line-soft); padding-top: 0.9rem; }
[data-mode="pro"] .tally dd { font-weight: 600; font-size: var(--step-4); letter-spacing: -0.02em; }
[data-mode="pro"] .tally dt { font-family: var(--font-body); font-weight: 400; font-size: 0.95rem; }
[data-mode="pro"] .offclock { background: var(--surface-alt); color: var(--text); }
[data-mode="pro"] .offclock h3 { font-size: var(--step-1); }
[data-mode="pro"] .offclock p { color: var(--text-soft); margin: 0; }

/* Colleague quotes */
[data-mode="pro"] .words { background: var(--surface-alt); color: var(--text); padding-top: clamp(3.5rem, 8vw, 6rem); }
[data-mode="pro"] .words__head h2 { font-size: var(--step-4); }
[data-mode="pro"] .words :focus-visible { outline-color: var(--focus); }
[data-mode="pro"] .words__controls .icon-btn { background: transparent; color: var(--text); border: 1px solid var(--line-soft); transition: background 0.3s var(--ease-calm); }
[data-mode="pro"] .words__controls .icon-btn:hover { background: var(--bg); color: var(--text); }
[data-mode="pro"] .quote { border: 1px solid var(--line-soft); box-shadow: none; }
[data-mode="pro"] .quote__star { display: none; }
[data-mode="pro"] .quote blockquote::before { content: "\201C"; display: block; font-weight: 600; font-size: 3.2rem; line-height: 0.6; margin: 0.5rem 0 0.6rem; color: var(--link); }
[data-mode="pro"] .quote blockquote p { font-family: var(--font-body); font-weight: 400; font-size: 1.15rem; line-height: 1.55; }
[data-mode="pro"] .quote__who strong { font-family: var(--font-body); font-weight: 600; font-size: 1rem; }
[data-mode="pro"] .words__note { color: var(--text-soft); font-weight: 400; }
[data-mode="pro"] .quotes { scrollbar-color: var(--line-soft) transparent; }

/* Contact */
[data-mode="pro"] .contact { padding-top: clamp(3.5rem, 8vw, 6rem); }
[data-mode="pro"] .contact h2 { font-size: var(--step-5); }
[data-mode="pro"] .contact .lead { color: rgb(255 255 255 / 0.72); }
[data-mode="pro"] .contact__links { font-family: var(--font-body); font-weight: 500; font-size: var(--step-1); }
[data-mode="pro"] .contact__links li { border-bottom: 1px solid rgb(255 255 255 / 0.12); padding: 0.7rem 0; }
[data-mode="pro"] .contact__links a { text-decoration-color: rgb(255 255 255 / 0.35); }
[data-mode="pro"] .contact-form { box-shadow: none; border-radius: 14px; }
[data-mode="pro"] .field label { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; }
[data-mode="pro"] .field input, [data-mode="pro"] .field select, [data-mode="pro"] .field textarea { border: 1px solid #D3CEC8; border-radius: 8px; transition: border-color 0.3s var(--ease-calm); }
[data-mode="pro"] .field input:focus, [data-mode="pro"] .field select:focus, [data-mode="pro"] .field textarea:focus { outline: 2px solid var(--link); outline-offset: 1px; border-color: transparent; }

/* Footer */
[data-mode="pro"] .site-footer { background: var(--ink); }
[data-mode="pro"] .site-footer__brand img { width: clamp(7rem, 14vw, 9rem); }
[data-mode="pro"] .site-footer__inner { grid-template-columns: auto 1fr; }
[data-mode="pro"] .site-footer__nav ul { justify-content: flex-end; }
[data-mode="pro"] .site-footer__nav a { font-family: var(--font-body); font-weight: 500; font-size: 1rem; color: rgb(255 255 255 / 0.85); }
[data-mode="pro"] .site-footer__legal { border-top: 1px solid rgb(255 255 255 / 0.14); color: rgb(255 255 255 / 0.6); }
@media (max-width: 44rem) { [data-mode="pro"] .site-footer__nav ul { justify-content: flex-start; } }

/* Case study pages */
[data-mode="pro"] .case-head .bar p { font-family: var(--font-label); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--link); padding-top: clamp(2rem, 5vw, 3rem); }
[data-mode="pro"] .case-head .bar p::before { display: none; }
[data-mode="pro"] .case-head__inner { padding-top: 1.25rem; }
[data-mode="pro"] .back { font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; color: var(--text-soft); text-decoration: none; }
[data-mode="pro"] .back:hover { color: var(--link); }
[data-mode="pro"] .case-head h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: -0.025em; }
[data-mode="pro"] .case-meta { border-block: 1px solid var(--line-soft); padding-block: 1.25rem; gap: 1rem 3.5rem; }
[data-mode="pro"] .case-meta dt { font-family: var(--font-label); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
[data-mode="pro"] .case-meta dd { font-family: var(--font-body); font-weight: 500; font-size: 1.05rem; }
[data-mode="pro"] .lead-stack .lead { font-size: 1.25rem; }
[data-mode="pro"] .case-cover img { border: 0; box-shadow: none; border-radius: 14px; }
[data-mode="pro"] .case-cover.is-contain img { background: var(--surface-alt); }
[data-mode="pro"] .block__heading { font-size: var(--step-3); }
[data-mode="pro"] .shot__btn { border: 0; box-shadow: none; border-radius: 10px; overflow: hidden; background: var(--surface-alt); transition: none; }
[data-mode="pro"] .shot__btn img { transition: transform 0.9s var(--ease-calm); }
[data-mode="pro"] .shot__btn:hover { transform: none; box-shadow: none; }
[data-mode="pro"] .shot__btn:hover img { transform: scale(1.02); }
[data-mode="pro"] .stats { border-block: 1px solid var(--line-soft); }
[data-mode="pro"] .stats dd { font-family: var(--font-body); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.2rem); letter-spacing: -0.03em; color: var(--text); }
[data-mode="pro"] .stats dt { font-family: var(--font-body); font-weight: 400; font-size: 1rem; color: var(--text-soft); }
[data-mode="pro"] .logo-card__art { border: 1px solid var(--line-soft); box-shadow: none; border-radius: 12px; }
[data-mode="pro"] .logo-card h3 { font-size: var(--step-1); }
[data-mode="pro"] .pull-quote { background: var(--surface-alt); color: var(--text); box-shadow: none; border-left: 3px solid var(--link); border-radius: 0 12px 12px 0; }
[data-mode="pro"] .pull-quote p { font-family: var(--font-body); font-weight: 500; font-size: var(--step-2); line-height: 1.4; }
[data-mode="pro"] .pull-quote strong { font-family: var(--font-body); font-size: 1rem; }
[data-mode="pro"] .pull-quote span { color: var(--text-soft); }
[data-mode="pro"] .video-card__thumb { border: 0; box-shadow: none; border-radius: 10px; }
[data-mode="pro"] .play { background: rgb(26 23 22 / 0.8); border: 0; }
[data-mode="pro"] .video-card h3 { font-size: var(--step-1); }
[data-mode="pro"] .next-up a { background: var(--surface-alt); color: var(--text); }
[data-mode="pro"] .next-up__label { color: var(--text-soft); font-family: var(--font-body); font-size: 1rem; }
[data-mode="pro"] .next-up__title { font-weight: 600; font-size: var(--step-4); letter-spacing: -0.02em; }
[data-mode="pro"] .next-up a:hover .next-up__title { text-decoration: none; color: var(--link); }
[data-mode="pro"] .next-up img { border: 0; border-radius: 10px; }

/* Resume + plain pages */
[data-mode="pro"] .resume { box-shadow: none; border: 1px solid var(--line-soft); border-radius: 4px; }
[data-mode="pro"] .resume__head { border-bottom: 2px solid var(--link); }
[data-mode="pro"] .resume__head h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); text-transform: none; letter-spacing: -0.02em; }
[data-mode="pro"] .resume__role { font-family: var(--font-body); font-weight: 500; font-size: var(--step-1); color: var(--text-soft); }
[data-mode="pro"] .resume h2 { font-family: var(--font-label); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.14em; }
[data-mode="pro"] .resume h3 { font-size: 1.1rem; }
[data-mode="pro"] .big-word { font-weight: 600; letter-spacing: -0.04em; font-size: clamp(3.5rem, 12vw, 8rem); }

/* Professional + dark */
[data-theme="dark"][data-mode="pro"] {
  --bg: var(--navy-900); --surface: var(--navy-850); --surface-alt: var(--navy-800); --line-soft: var(--navy-700);
  --text: #EEF2F7; --text-soft: #A8B5C6; --link: #FF7A83; --focus: #EEF2F7;
}
[data-theme="dark"][data-mode="pro"] .site-header { background: rgb(13 26 45 / 0.88); }
[data-theme="dark"][data-mode="pro"] .btn { --btn-bg: #EEF2F7; --btn-fg: var(--navy-900); --btn-edge: #EEF2F7; }
[data-theme="dark"][data-mode="pro"] .btn:hover { background: #fff; border-color: #fff; }
[data-theme="dark"][data-mode="pro"] .btn--ghost, [data-theme="dark"][data-mode="pro"] .btn--light { --btn-bg: transparent; --btn-fg: var(--text); --btn-edge: var(--line-soft); }
[data-theme="dark"][data-mode="pro"] .btn--ghost:hover, [data-theme="dark"][data-mode="pro"] .btn--light:hover { background: var(--surface-alt); border-color: var(--text-soft); }
[data-theme="dark"][data-mode="pro"] .chip[aria-pressed="true"] { background: #EEF2F7; color: var(--navy-900); border-color: #EEF2F7; }
[data-theme="dark"][data-mode="pro"] .contact, [data-theme="dark"][data-mode="pro"] .site-footer { background: var(--navy-950); }
[data-theme="dark"][data-mode="pro"] .contact-form .btn { --btn-bg: var(--navy-900); --btn-fg: #fff; --btn-edge: var(--navy-900); }
[data-theme="dark"][data-mode="pro"] .logo-card__art { background: #fff; }
[data-theme="dark"][data-mode="pro"] .feature { background: var(--surface-alt); }
[data-theme="dark"][data-mode="pro"] .role-banner { background: var(--surface); }

/* Motion off means off, in both modes */
@media (prefers-reduced-motion: reduce) {
  .mode-btn, .mode-btn * { animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
[data-mode="turbo"] .pro-only { display: none !important; }

/* ==========================================================================
   13. WORK IN PROGRESS POPUP (settings in site.json > wipNotice)
   ========================================================================== */
.wip {
  width: min(92vw, 34rem); padding: 0; border: 0; overflow: visible;
  background: transparent; color: var(--text);
}
.wip::backdrop { background: rgb(19 16 14 / 0.55); }
.wip__inner { position: relative; background: var(--surface); padding: clamp(1.75rem, 5vw, 2.5rem); }
.wip__eyebrow { margin: 0 0 0.5rem; font-family: var(--font-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.9rem; color: var(--link); }
.wip__title { margin: 0 0 0.75rem; }
.wip__body { margin: 0 0 1.75rem; color: var(--text-soft); }
.wip form { margin: 0; }
.wip :focus-visible { outline-color: var(--focus); }

/* Turbo: caution tape, a traffic cone, and a stamp-in entrance */
[data-mode="turbo"] .wip { animation: wip-stamp 0.5s cubic-bezier(.2, 1.5, .4, 1) both; rotate: -1.5deg; }
[data-mode="turbo"] .wip::backdrop { background: rgb(19 16 14 / 0.75); }
[data-mode="turbo"] .wip__tape { height: 1.4rem; background: repeating-linear-gradient(-45deg, #FFC400 0 18px, #13100E 18px 36px); border: 3px solid var(--ink); border-bottom: 0; }
[data-mode="turbo"] .wip__inner { background: var(--field-red, var(--red)); color: var(--paper); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
[data-mode="turbo"] .wip__eyebrow { color: #FFC400; }
[data-mode="turbo"] .wip__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 7vw, 2.9rem); line-height: 1.05; letter-spacing: 0; }
[data-mode="turbo"] .wip__body { color: rgb(255 255 255 / 0.92); font-size: 1.1rem; }
[data-mode="turbo"] .wip__btn { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-edge: var(--ink); }
[data-mode="turbo"] .wip :focus-visible { outline-color: var(--paper); }
[data-mode="turbo"] .wip__cone { position: absolute; right: -1.25rem; bottom: -1.5rem; width: 4.5rem; rotate: 12deg; filter: drop-shadow(4px 4px 0 var(--ink)); }
@keyframes wip-stamp { from { opacity: 0; transform: scale(1.3) rotate(-6deg); } to { opacity: 1; transform: none; } }

/* Professional: a quiet card that settles in */
[data-mode="pro"] .wip__tape, [data-mode="pro"] .wip__cone { display: none; }
[data-mode="pro"] .wip { animation: wip-settle 0.6s var(--ease-calm) both; }
[data-mode="pro"] .wip::backdrop { background: rgb(26 23 22 / 0.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
[data-mode="pro"] .wip__inner { border-radius: 14px; border: 1px solid var(--line-soft); box-shadow: 0 24px 60px rgb(26 23 22 / 0.18); }
[data-mode="pro"] .wip__eyebrow { font-weight: 600; letter-spacing: 0.14em; }
[data-mode="pro"] .wip__eyebrow::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #E0A100; margin-right: 0.55rem; vertical-align: 0.05em; }
[data-mode="pro"] .wip__title { font-size: var(--step-3); }
@keyframes wip-settle { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) { .wip { animation: none !important; } }
@media print { .wip { display: none !important; } }
@media (max-width: 40rem) { [data-mode="turbo"] .wip__cone { right: -0.4rem; width: 3.5rem; } }

/* ==========================================================================
   14. CASE STUDY v2: cozier spacing, carousel, role banner, split, socials
   ========================================================================== */
/* Tighter rhythm on every case page */
.case .block { padding-block: clamp(2rem, 4.5vw, 3.25rem); }
.case .block--alt { background: var(--surface-alt); }
.case .block__heading { font-size: var(--step-4); margin-bottom: 0.6rem; }
.case .gallery { margin-top: 1.25rem; }
.case .prose p:last-child { margin-bottom: 0; }

/* Header: title and meta on the left, intro on the right */
.case-head__inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 1rem clamp(2rem, 5vw, 4rem); align-items: end; padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem); }
.case-head__main h1 { margin-bottom: 0.25em; }
.case-head .case-meta { margin: 0.75rem 0 0; }
.case-head .lead-stack .lead { margin-bottom: 0; }
.case-cover { margin-block: 0 clamp(1.5rem, 4vw, 2.5rem); }
@media (max-width: 52rem) { .case-head__inner { grid-template-columns: 1fr; } }

/* Labeled captions under gallery images */
.gallery--labeled figcaption, .gallery figcaption { font-family: var(--font-label); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--text-soft); margin-top: 0.55rem; }

/* Split: text beside images instead of stacked */
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.split__text { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.split--flip .split__text { order: 2; }
.split .gallery { margin-top: 0; }
@media (max-width: 52rem) { .split { grid-template-columns: 1fr; } .split__text { position: static; } .split--flip .split__text { order: 0; } }

/* Stats: sit on one tinted band, with a small note */
.stats dd { font-variant-numeric: tabular-nums; }
.stats__note { margin: 1rem 0 0; color: var(--text-soft); font-size: 0.98rem; }
.block--stats .stats { margin-top: 1rem; }

/* ---- Carousel ---------------------------------------------------------- */
.carousel { position: relative; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 62rem); gap: clamp(0.75rem, 2vw, 1.25rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  scrollbar-width: none; padding-bottom: 0.5rem;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; }
.carousel__img { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; background: var(--surface-alt); aspect-ratio: 16 / 10; overflow: hidden; }
.carousel__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(.2, .7, .2, 1); }
.carousel__img:hover img { transform: scale(1.02); }
.carousel figcaption { display: flex; gap: 0.9rem; align-items: baseline; padding-top: 0.75rem; line-height: 1.45; }
.carousel__num { flex: none; font-family: var(--font-label); font-weight: 700; color: var(--link); font-variant-numeric: tabular-nums; }
.carousel__text { color: var(--text-soft); font-size: 0.98rem; }
.carousel__text strong { color: var(--text); font-weight: 600; margin-right: 0.25rem; }
.carousel__text em { font-style: normal; font-size: 0.85rem; opacity: 0.8; margin-left: 0.25rem; white-space: nowrap; }
.carousel__controls { display: flex; align-items: center; gap: 0.5rem; justify-content: flex-end; margin-top: 0.5rem; }
.carousel__count { margin: 0 0.4rem; font-family: var(--font-label); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 3.5em; text-align: center; }
.carousel__btn { border: 1.5px solid var(--line); }
.carousel__btn:disabled { opacity: 0.35; cursor: default; }
@media (max-width: 40rem) { .carousel__track { grid-auto-columns: 92%; } }

[data-mode="turbo"] .carousel__img { border: 3px solid var(--ink); box-shadow: var(--hard); }
[data-mode="turbo"] .carousel__track { padding: 0 8px 12px 0; }
[data-mode="turbo"] .carousel__btn { background: var(--ink); color: var(--paper); border-color: var(--ink); }
[data-mode="turbo"] .carousel__btn:hover { background: var(--red); }
[data-mode="turbo"] .carousel__num { font-size: 1.2rem; }
[data-mode="pro"] .carousel__img { border-radius: 12px; }
[data-mode="pro"] .carousel__btn { border-color: var(--line-soft); }
[data-mode="pro"] .carousel__btn:hover { background: var(--surface-alt); }

/* ---- Role banner ------------------------------------------------------- */
.role-banner { margin-bottom: 0; }
.role-banner__set { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 1rem clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.role-banner__label { margin: 0 0 0.4rem; font-family: var(--font-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.9rem; }
.role-banner__title { margin: 0; font-size: var(--step-3); }
.role-banner__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 2rem; }
.role-banner__list li { position: relative; padding-left: 1.6rem; line-height: 1.45; }
.role-banner__list li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 0.95rem; height: 0.95rem; }
@media (max-width: 52rem) { .role-banner__set, .role-banner__list { grid-template-columns: 1fr; } }

[data-mode="pro"] .role-banner { border-block: 1px solid var(--line-soft); background: var(--surface); }
[data-mode="pro"] .role-banner__inner { padding-block: clamp(1.75rem, 4vw, 2.5rem); }
[data-mode="pro"] .role-banner__label { color: var(--link); }
[data-mode="pro"] .role-banner__title { font-weight: 600; }
[data-mode="pro"] .role-banner__list li { color: var(--text-soft); }
[data-mode="pro"] .role-banner__list li::before { top: 0.55em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--link); }

[data-mode="turbo"] .role-banner { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; }
[data-mode="turbo"] .role-banner::before { content: ""; position: absolute; inset: 0; background: var(--field-red, var(--red)); clip-path: polygon(0 0, 34% 0, 28% 100%, 0 100%); }
[data-mode="turbo"] .role-banner__inner { position: relative; padding-block: clamp(2rem, 5vw, 3rem); }
[data-mode="turbo"] .role-banner__label { color: #FFC400; }
[data-mode="turbo"] .role-banner__title { font-size: var(--step-4); text-transform: uppercase; }
[data-mode="turbo"] .role-banner__list li { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; }
[data-mode="turbo"] .role-banner__list li::before { background: #FFC400; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
@media (max-width: 52rem) { [data-mode="turbo"] .role-banner::before { clip-path: polygon(0 0, 100% 0, 100% 9rem, 0 11rem); } }

/* ---- Socials ----------------------------------------------------------- */
.socials { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 1rem clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.socials__text p { margin: 0; color: var(--text-soft); }
.socials__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.social { display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem 1rem; text-decoration: none; color: var(--text); min-width: 0; }
.social__icon { flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; }
.social__icon svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.social__icon svg .fill, .social__icon svg.fill { fill: currentColor; stroke: none; }
.social__text { min-width: 0; overflow-wrap: anywhere; font-weight: 600; line-height: 1.25; }
.social__text small { display: block; font-family: var(--font-label); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
@media (max-width: 52rem) { .socials { grid-template-columns: 1fr; } }
@media (max-width: 34rem) { .socials__list { grid-template-columns: 1fr; } }

[data-mode="pro"] .social { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; transition: border-color 0.3s var(--ease-calm), transform 0.3s var(--ease-calm); }
[data-mode="pro"] .social:hover { border-color: var(--stone); transform: translateY(-2px); }
[data-mode="pro"] .social__icon { background: var(--surface-alt); color: var(--link); }
[data-mode="turbo"] .social { background: var(--surface); border: 2px solid var(--line); box-shadow: 4px 4px 0 var(--shadow); transition: transform 0.12s ease, box-shadow 0.12s ease; }
[data-mode="turbo"] .social:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--red); }
[data-mode="turbo"] .social__icon { background: var(--red); color: var(--paper); }
.case .block--tight { padding-top: 0; }
.case .block--gallery .prose { margin-bottom: 0.25rem; }

/* ==========================================================================
   15. ROUNDED IMAGE FRAMES (both modes). Change --r-img to adjust.
   ========================================================================== */
:root { --r-img: 12px; }
[data-mode="turbo"] { --r-img: 10px; }
.work-card__img, .shot__btn, .carousel__img, .case-cover img, .logo-card__art,
.video-card__thumb, .next-up img, .lightbox img, .ql__shot img {
  border-radius: var(--r-img); overflow: hidden;
}
.region .region__link { border-radius: calc(var(--r-img) - 4px); }
[data-mode="turbo"] .regions { border-radius: var(--r-img); }
[data-mode="pro"] .region .region__link { border-radius: 0; overflow: visible; }
[data-mode="pro"] .region img { border-radius: var(--r-img); }

/* ==========================================================================
   16. SELECTED WORK CAROUSEL + QUICK LOOK (glass dialog)
   ========================================================================== */
.work-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.work-head .filters { margin: 0; }
.work-controls { display: flex; gap: 0.5rem; }
.work-rail {
  --pad: max(var(--gap), (100% - var(--wrap)) / 2);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  padding: 0.5rem var(--pad) 1.5rem; scrollbar-width: none; overscroll-behavior-x: contain;
}
.work-rail::-webkit-scrollbar { display: none; }
.work-track { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: min(25rem, 84vw); gap: clamp(1rem, 2.5vw, 1.75rem); }
.work-track .work-card { scroll-snap-align: start; }
.work-track .work-card[hidden] { display: none; }
.work-card__img { position: relative; }
.work-card__peek {
  position: absolute; left: 0.75rem; bottom: 0.75rem; padding: 0.45rem 0.85rem; border-radius: 999px;
  font-family: var(--font-label); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease;
}
.work-card a:hover .work-card__peek, .work-card a:focus-visible .work-card__peek { opacity: 1; transform: none; }
@media (hover: none) { .work-card__peek { opacity: 1; transform: none; } }
[data-mode="pro"] .work-card__peek { background: rgb(255 255 255 / 0.78); color: var(--ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
[data-mode="turbo"] .work-card__peek { background: var(--ink); color: var(--paper); border: 2px solid var(--paper); }
.work-hint { margin: 0.25rem auto 0; color: var(--text-soft); font-size: 0.95rem; }
[data-mode="pro"] .work-hint { font-style: normal; }

/* ---- The glass dialog ---------------------------------------------------- */
.quicklook { width: min(94vw, 74rem); max-width: none; max-height: 92vh; padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible; }
.quicklook::backdrop { background: rgb(13 26 45 / 0.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
.ql__panel {
  --glass: rgb(255 255 255 / 0.66);
  display: flex; flex-direction: column; max-height: 92vh; overflow: hidden;
  border-radius: 22px; background: var(--glass); color: var(--text);
  -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgb(255 255 255 / 0.6);
  box-shadow: 0 30px 80px rgb(13 26 45 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.7);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ql__panel { --glass: var(--surface); } }
.ql__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 0.9rem 0.5rem 1.6rem; }
.ql__count { margin: 0; font-family: var(--font-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.85rem; color: var(--text-soft); }
.ql__count [data-ql-count] { margin-left: 0.5rem; font-variant-numeric: tabular-nums; }
.ql__nav { display: flex; gap: 0.35rem; }
.ql__nav .icon-btn { background: rgb(255 255 255 / 0.5); border: 1px solid rgb(0 0 0 / 0.08); }
.ql__nav .icon-btn:hover { background: rgb(255 255 255 / 0.9); }
.ql__content { overflow-y: auto; padding: 0.25rem 1.6rem 1.75rem; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.ql__strip { display: grid; grid-auto-flow: column; grid-auto-columns: 88%; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 0.5rem; }
.ql__strip:has(.ql__shot:only-child) { grid-auto-columns: 100%; }
.ql__shot { margin: 0; scroll-snap-align: start; }
.ql__shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: rgb(255 255 255 / 0.55); }
.ql__shot figcaption { display: flex; gap: 0.6rem; margin-top: 0.5rem; font-size: 0.92rem; color: var(--text-soft); line-height: 1.35; }
.ql__shot figcaption span { font-family: var(--font-label); font-weight: 700; color: var(--link); }
.ql__hint { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--text-soft); }
.ql__title { font-size: var(--step-4); margin: 0.2rem 0 0.3rem; }
.ql__summary { font-size: 1.08rem; margin: 0.75rem 0 1.25rem; }
.ql__role h3 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.ql__role ul { margin: 0 0 1.25rem; padding-left: 1.1rem; color: var(--text-soft); font-size: 0.97rem; }
.ql__role li { margin-bottom: 0.3rem; }
.ql__role-line { margin: 0 0 1.25rem; color: var(--text-soft); }
.ql__role-line strong { display: block; color: var(--text); font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; margin-bottom: 0.2rem; }
.ql__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.25rem; margin: 0 0 1.5rem; padding: 1rem 0; border-block: 1px solid rgb(0 0 0 / 0.1); }
.ql__stats div { display: flex; flex-direction: column-reverse; }
.ql__stats dd { margin: 0; font-weight: 600; font-size: var(--step-3); line-height: 1; font-variant-numeric: tabular-nums; }
.ql__stats dt { font-size: 0.85rem; color: var(--text-soft); line-height: 1.3; margin-top: 0.25rem; }
.ql__cta { width: 100%; }
.quicklook[open] .ql__panel { animation: ql-in 0.45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ql-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
@media (max-width: 52rem) {
  .ql__content { grid-template-columns: 1fr; }
  .ql__top { padding-left: 1.1rem; }
  .ql__content { padding-inline: 1.1rem; }
}

/* Turbo: smoked glass, red edge, hard shadow, stamp-in */
[data-mode="turbo"] .quicklook::backdrop { background: rgb(127 26 36 / 0.35); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); }
[data-mode="turbo"] .ql__panel {
  --glass: rgb(19 16 14 / 0.74); --text: #fff; --text-soft: rgb(255 255 255 / 0.74); --link: #FF8A93;
  border: 2px solid rgb(255 255 255 / 0.22); border-radius: 18px;
  box-shadow: 12px 12px 0 var(--red), 0 30px 80px rgb(0 0 0 / 0.45);
}
[data-mode="turbo"] .quicklook[open] .ql__panel { animation: ql-stamp 0.45s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes ql-stamp { from { opacity: 0; transform: scale(1.06) rotate(-1deg); } }
[data-mode="turbo"] .ql__nav .icon-btn { background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.2); color: #fff; }
[data-mode="turbo"] .ql__nav .icon-btn:hover { background: var(--red); }
[data-mode="turbo"] .ql__title { font-size: var(--step-5); text-transform: uppercase; }
[data-mode="turbo"] .ql__stats { border-color: rgb(255 255 255 / 0.2); }
[data-mode="turbo"] .ql__stats dd { font-family: var(--font-display); font-weight: 400; color: #FFC400; }
[data-mode="turbo"] .ql__shot img { background: rgb(255 255 255 / 0.92); }
[data-mode="turbo"] .ql__panel :focus-visible { outline-color: #fff; }

/* Professional dark: navy glass */
[data-theme="dark"][data-mode="pro"] .ql__panel { --glass: rgb(19 35 58 / 0.66); border-color: rgb(255 255 255 / 0.12); box-shadow: 0 30px 80px rgb(0 0 0 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.08); }
[data-theme="dark"][data-mode="pro"] .ql__nav .icon-btn { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.12); }
[data-theme="dark"][data-mode="pro"] .ql__stats { border-color: rgb(255 255 255 / 0.12); }
[data-theme="dark"] .quicklook::backdrop { background: rgb(4 10 20 / 0.45); }
@media (prefers-reduced-motion: reduce) { .quicklook[open] .ql__panel { animation: none; } }
.ql__cats, .case-head .bar p { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }

/* Under-construction popup: action buttons */
.wip { width: min(92vw, 36rem); }
.wip__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.wip__actions .btn { flex: 1 1 13rem; }
.wip__stay { margin: 0; }
.wip__stay .linklike { font-size: 0.95rem; color: var(--text-soft); }
[data-mode="turbo"] .wip__btn--alt { --btn-bg: transparent; --btn-fg: var(--paper); --btn-edge: var(--paper); box-shadow: 4px 4px 0 var(--ink); }
[data-mode="turbo"] .wip__stay .linklike { color: rgb(255 255 255 / 0.85); }
[data-mode="pro"] .wip__title { font-size: var(--step-3); }

/* PDF Portfolio link in the header: outlined so it reads as a download */
.site-nav a.nav-pdf { display: inline-flex; align-items: center; gap: 0.35rem; }
.site-nav a.nav-pdf::before { content: ""; width: 0.85em; height: 0.85em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (min-width: 64.01rem) {
  [data-mode="turbo"] .site-nav a.nav-pdf { box-shadow: inset 0 0 0 2px currentColor; }
  [data-mode="pro"] .site-nav a.nav-pdf { color: var(--link); }
}

.site-nav a { white-space: nowrap; }
/* The frosted Professional header would trap the fixed mobile menu inside it,
   so below the menu breakpoint it goes solid instead. */
@media (max-width: 64rem) {
  [data-mode="pro"] .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
  [data-theme="dark"][data-mode="pro"] .site-header { background: var(--bg); }
}

/* ==========================================================================
   17. MAJOR PROJECTS DROPDOWN
   ========================================================================== */
.nav-drop { position: relative; }
.nav-drop__btn {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.8rem; white-space: nowrap;
  background: none; border: 0; cursor: pointer; color: inherit; border-radius: 999px;
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem;
}
.nav-drop__btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s ease; }
.nav-drop__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-header .nav-drop__btn:focus-visible { outline-color: currentColor; }
.nav-drop__panel { display: none; }
.nav-drop.is-open .nav-drop__panel { display: block; }
.nav-drop__panel ul { list-style: none; margin: 0; padding: 0; display: block; }
.nav-drop__panel a { display: block; text-decoration: none; padding: 0.7rem 0.9rem; border-radius: 10px; white-space: normal; }
.nav-drop__panel a strong { display: block; font-weight: 700; line-height: 1.2; }
.nav-drop__panel a span { display: block; font-size: 0.88rem; line-height: 1.3; margin-top: 0.15rem; opacity: 0.75; font-family: var(--font-body); font-weight: 500; }

@media (min-width: 64.01rem) {
  .nav-drop__panel {
    position: absolute; top: calc(100% + 0.6rem); left: 50%; translate: -50% 0; width: 22rem; padding: 0.5rem; z-index: 60;
    animation: drop-in 0.22s ease both;
  }
  @keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } }
  .nav-drop__panel::before { content: ""; position: absolute; inset: -0.7rem 0 auto; height: 0.7rem; } /* hover bridge */
}
/* Phone and tablet: the list sits inside the full-screen menu */
@media (max-width: 64rem) {
  .nav-drop__btn { font-size: inherit; padding: 0.4rem 0; }
  .nav-drop__panel { padding: 0.25rem 0 0.75rem; }
  .nav-drop__panel a { padding: 0.55rem 0 0.55rem 1rem; border-left: 3px solid currentColor; border-radius: 0; margin-bottom: 0.4rem; }
  .nav-drop__panel a strong { font-size: 1.15rem; }
}

/* Turbo: black card, hard red shadow */
[data-mode="turbo"] .nav-drop__btn:hover, [data-mode="turbo"] .nav-drop__btn[data-current], [data-mode="turbo"] .nav-drop.is-open .nav-drop__btn { background: var(--red); }
@media (min-width: 64.01rem) {
  [data-mode="turbo"] .nav-drop__panel { background: var(--ink); color: var(--paper); border: 2px solid var(--paper); border-radius: 14px; box-shadow: 8px 8px 0 var(--red); }
  [data-mode="turbo"] .nav-drop__panel a { color: var(--paper); }
  [data-mode="turbo"] .nav-drop__panel a:hover, [data-mode="turbo"] .nav-drop__panel a[aria-current] { background: var(--red); }
  [data-mode="turbo"] .nav-drop__panel a span { color: rgb(255 255 255 / 0.72); opacity: 1; font-family: var(--font-head); font-weight: 600; font-size: 0.95rem; }
}
@media (max-width: 64rem) {
  [data-mode="turbo"] .nav-drop__btn, [data-mode="turbo"] .nav-drop__btn:hover, [data-mode="turbo"] .nav-drop.is-open .nav-drop__btn { background: none; }
  [data-mode="turbo"] .nav-drop__panel a { color: var(--paper); }
}

/* Professional: quiet frosted card */
[data-mode="pro"] .nav-drop__btn { font-family: var(--font-body); font-weight: 500; font-size: 1rem; border-radius: 0; color: var(--text); transition: color 0.3s var(--ease-calm); }
[data-mode="pro"] .nav-drop__btn:hover, [data-mode="pro"] .nav-drop__btn[data-current], [data-mode="pro"] .nav-drop.is-open .nav-drop__btn { color: var(--link); }
[data-mode="pro"] .nav-drop__panel a { color: var(--text); }
[data-mode="pro"] .nav-drop__panel a strong { font-weight: 600; }
[data-mode="pro"] .nav-drop__panel a span { color: var(--text-soft); opacity: 1; }
@media (min-width: 64.01rem) {
  [data-mode="pro"] .nav-drop__panel {
    background: rgb(255 255 255 / 0.9); border: 1px solid var(--line-soft); border-radius: 14px;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: 0 18px 50px rgb(13 26 45 / 0.14);
  }
  [data-mode="pro"] .nav-drop__panel a { transition: background 0.3s var(--ease-calm); }
  [data-mode="pro"] .nav-drop__panel a:hover, [data-mode="pro"] .nav-drop__panel a[aria-current] { background: var(--surface-alt); }
  [data-mode="pro"] .nav-drop__panel a:hover strong { color: var(--link); }
  [data-theme="dark"][data-mode="pro"] .nav-drop__panel { background: rgb(19 35 58 / 0.94); box-shadow: 0 18px 50px rgb(0 0 0 / 0.4); }
}
@media (max-width: 64rem) {
  [data-mode="pro"] .nav-drop__btn { font-size: var(--step-3); font-weight: 600; padding: 0.6rem 0; }
  [data-mode="pro"] .nav-drop__panel a { border-left-color: var(--link); }
}
@media (prefers-reduced-motion: reduce) { .nav-drop__panel { animation: none !important; } }
@media (max-width: 64rem) {
  [data-mode="turbo"] .nav-drop__btn { font-size: var(--step-4); }
  .site-nav .nav-drop__panel a, [data-mode="pro"] .site-nav .nav-drop__panel a { font-size: 1rem; padding: 0.55rem 0 0.55rem 1rem; }
}
.case-head .lead-stack .lead + .lead { margin-top: 0.8rem; }

/* ==========================================================================
   18. STRIP VARIANTS (reusable hover strip) + FEATURED VIDEOS
   ========================================================================== */
button.region__link { width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: zoom-in; }
.region__link img { display: block; }
.regions--portrait { height: clamp(24rem, 46vw, 34rem); }
.regions--portrait .region img { object-position: 50% 22%; }
.regions--portrait .region__label small { color: #FFC400; }
@media (max-width: 44rem), (hover: none) {
  .regions--portrait { grid-template-columns: repeat(2, 1fr); }
  .regions--portrait .region .region__link { aspect-ratio: 4 / 5; }
}
@media (min-width: 44.01rem) and (hover: none) { .regions--portrait { grid-template-columns: repeat(3, 1fr); } }
[data-mode="pro"] .regions--portrait { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-mode="pro"] .regions--portrait .region img { aspect-ratio: 4 / 5; }
[data-mode="pro"] .regions--portrait .region__label small { color: var(--text-soft); }
@media (max-width: 44rem) { [data-mode="pro"] .regions--portrait { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.videos--featured { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.videos--featured .video-card h3 { font-size: var(--step-2); }
.videos--featured .play { width: 4rem; height: 4rem; left: 1.1rem; bottom: 1.1rem; }
.videos--featured .play svg { width: 1.7rem; }
.block__links { margin-top: 1.25rem; }

/* Poster strip: collapsed slices crop, the open one shows the whole poster */
.regions--poster { height: clamp(26rem, 52vw, 40rem); }
.regions--poster .region img { object-position: 50% 30%; transition: object-fit 0s; }
.regions--poster .region:hover img, .regions--poster .region:focus-within img { object-fit: contain; background: var(--ink); }
.regions--poster .region:hover .region__label, .regions--poster .region:focus-within .region__label { right: auto; max-width: calc(100% - 1.5rem); }
@media (max-width: 44rem), (hover: none) {
  .regions--poster { grid-template-columns: repeat(2, 1fr); }
  .regions--poster .region .region__link { aspect-ratio: 2 / 3; }
  .regions--poster .region img { object-fit: cover; }
}
@media (min-width: 44.01rem) and (hover: none) { .regions--poster { grid-template-columns: repeat(4, 1fr); } }
[data-mode="pro"] .regions--poster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-mode="pro"] .regions--poster .region img { aspect-ratio: 2 / 3; object-fit: cover; background: none; }
[data-mode="pro"] .regions--poster .region__label small { color: var(--text-soft); }
@media (max-width: 44rem) { [data-mode="pro"] .regions--poster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   19. BY THE NUMBERS PAGE (/numbers/)
   Data lives in src/_data/impact.json. Chart colors were checked for
   color blindness and contrast in light and dark.
   ========================================================================== */
.nx-scope {
  --nx-a: #3E6AA8;           /* earlier year, navy */
  --nx-b: #C41E2E;           /* current year, brand red */
  --nx-edge: 3px solid var(--line);
  --nx-r: 18px;
}
[data-theme="dark"] .nx-scope { --nx-a: #5B8BD0; --nx-b: #E5484D; }
[data-mode="pro"] .nx-scope { --nx-edge: 1px solid var(--line-soft); --nx-r: 14px; }

.nx-section { padding-block: var(--section); }
.nx-section--alt { background: var(--surface-alt); }
.nx-section h2 { font-family: var(--font-head); font-size: var(--step-4); margin: 0 0 0.75rem; }
.nx-intro { max-width: 46rem; margin-bottom: 2.5rem; }
.nx-intro p, .nx-split__text p { color: var(--text-soft); font-size: 1.1rem; }
.nx-kicker { font-family: var(--font-label) !important; font-size: 1rem !important; text-transform: uppercase; letter-spacing: 0.12em; color: var(--link); }
.nx-fine { font-size: 0.9rem; color: var(--text-soft); margin-top: 1.25rem; }

/* Hero */
.nx-hero { padding-block: calc(var(--header-h) + 3rem) 3.5rem; background: var(--ink); color: #fff; }
.nx-hero .back, .nx-hero .lead { color: rgb(255 255 255 / 0.82); }
.nx-hero .eyebrow { color: #FF8A92; }
.nx-hero__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.nx-hero__title { font-family: var(--font-display); font-size: var(--step-6); line-height: 0.95; margin: 0 0 1.25rem; }
.nx-records { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.nx-record { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 1.25rem; background: var(--red); color: #fff; border: 3px solid #fff; box-shadow: 6px 6px 0 #000; transform: rotate(calc(-1.5deg + var(--i) * 1.5deg)); animation: nx-stamp 0.5s calc(0.15s + var(--i) * 0.18s) both cubic-bezier(.3, 1.6, .5, 1); }
.nx-record__year { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; }
.nx-record__line { font-family: var(--font-head); font-weight: 800; font-size: var(--step-2); text-transform: uppercase; letter-spacing: 0.04em; }
@keyframes nx-stamp { from { opacity: 0; transform: scale(1.6) rotate(-8deg); } }
[data-theme="dark"] .nx-record { background: var(--field-red); }

/* Bento of big numbers */
.nx-bento { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11.5rem, 40%), 1fr)); gap: var(--gap); }
@media (max-width: 36rem) { .nx-tile { padding: 1.1rem 1.1rem 1rem; } .nx-tile__value { font-size: 2.3rem; } }
.nx-tile { display: flex; flex-direction: column; gap: 0.2rem; padding: 1.5rem 1.6rem 1.4rem; background: var(--surface); border: var(--nx-edge); border-radius: var(--nx-r); box-shadow: var(--hard); }
.nx-tile__value { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; color: var(--link); font-variant-numeric: tabular-nums; margin-bottom: 0.4rem; }
.nx-tile__label { font-family: var(--font-head); font-weight: 700; font-size: var(--step-1); }
.nx-tile__sub { color: var(--text-soft); font-size: 0.95rem; }
.nx-tile--feature { background: var(--red); color: #fff; border-color: var(--line); }
.nx-tile--feature .nx-tile__value, .nx-tile--feature .nx-tile__sub { color: #fff; }
[data-theme="dark"] .nx-tile--feature { background: var(--field-red); }

/* Split layout: text left, chart right */
.nx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.nx-legend { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; gap: 1.25rem; font-family: var(--font-label); font-weight: 700; letter-spacing: 0.04em; }
.nx-legend li { display: flex; align-items: center; gap: 0.5rem; }
.nx-swatch { width: 14px; height: 14px; border-radius: 4px; }
.nx-swatch--a { background: var(--nx-a); }
.nx-swatch--b { background: var(--nx-b); }

/* Bar chart */
.nx-chart { background: var(--surface); border: var(--nx-edge); border-radius: var(--nx-r); box-shadow: var(--hard); padding: clamp(1.25rem, 3vw, 2rem); }
.nx-chart__title { font-family: var(--font-head); font-size: var(--step-1); margin: 0 0 1rem; }
.nx-row { padding-block: 0.85rem; border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.nx-row:last-of-type { border-bottom: 0; }
.nx-row__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.45rem; }
.nx-row__label { font-weight: 600; }
.nx-delta { font-family: var(--font-label); font-weight: 700; font-size: 0.9rem; padding: 0.1rem 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-soft); }
.nx-row--feature .nx-delta { background: var(--nx-b); color: #fff; font-size: 1rem; }
.nx-row--feature .nx-row__label { font-size: 1.1rem; }
.nx-bar { position: relative; display: flex; align-items: center; gap: 0.6rem; height: 1.35rem; margin-top: 2px; outline-offset: 3px; }
.nx-bar__fill { display: block; height: 100%; width: var(--w); min-width: 3px; border-radius: 0 4px 4px 0; transform-origin: left; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.nx-bar--a .nx-bar__fill { background: var(--nx-a); }
.nx-bar--b .nx-bar__fill { background: var(--nx-b); }
.nx-bar__val { font-size: 0.9rem; font-variant-numeric: tabular-nums; color: var(--text-soft); white-space: nowrap; }
.nx-chart.is-armed:not(.is-in) .nx-bar__fill { transform: scaleX(0); }
.nx-chart.is-in .nx-row:nth-of-type(2) .nx-bar__fill { transition-delay: 0.1s; }
.nx-chart.is-in .nx-row:nth-of-type(3) .nx-bar__fill { transition-delay: 0.2s; }
.nx-chart.is-in .nx-row:nth-of-type(4) .nx-bar__fill { transition-delay: 0.3s; }
.nx-chart.is-in .nx-row:nth-of-type(5) .nx-bar__fill { transition-delay: 0.4s; }
.nx-bar[data-tip]:hover::after, .nx-bar[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: min(var(--tip-x, 50%), 70%); bottom: calc(100% + 6px); z-index: 2;
  padding: 0.3rem 0.6rem; border-radius: 6px; background: var(--text); color: var(--bg); font-size: 0.85rem; font-weight: 600; white-space: nowrap; pointer-events: none;
}
.nx-bar:hover .nx-bar__fill { filter: brightness(1.12); }
.nx-row--single { display: grid; grid-template-columns: 10rem minmax(0, 1fr); align-items: center; gap: 1rem; }
.nx-row--single .nx-bar { margin: 0; }
.nx-table { margin-top: 1rem; font-size: 0.95rem; }
.nx-table summary, .nx-sources summary { cursor: pointer; font-family: var(--font-label); font-weight: 700; letter-spacing: 0.04em; color: var(--link); }
.nx-table table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; }
.nx-table th, .nx-table td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent); font-variant-numeric: tabular-nums; }

/* Timeline */
.nx-years { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); position: relative; }
.nx-year { position: relative; padding: 1.5rem; background: var(--surface); border: var(--nx-edge); border-radius: var(--nx-r); box-shadow: var(--hard); }
.nx-year__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.75rem; margin-bottom: 0.75rem; }
.nx-year__num { font-family: var(--font-display); font-size: var(--step-5); line-height: 1; }
.nx-year__dates { color: var(--text-soft); font-weight: 600; }
.nx-stamp { display: inline-block; font-family: var(--font-label); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; padding: 0.25rem 0.6rem; border: 2px solid var(--link); color: var(--link); border-radius: 6px; transform: rotate(-3deg); }
.nx-year__note { color: var(--text-soft); font-size: 0.98rem; margin: 0 0 1.25rem; }
.nx-events { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid color-mix(in srgb, var(--text) 18%, transparent); }
.nx-event { position: relative; padding: 0 0 0.9rem 0.25rem; font-size: 0.95rem; }
.nx-event::before { content: ""; position: absolute; left: calc(-1.1rem - 6px); top: 0.45em; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--text-soft); }
.nx-event--photo::before { background: var(--link); border-color: var(--link); }
.nx-event__date { display: block; font-family: var(--font-label); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.nx-event a { color: var(--text); text-decoration-color: color-mix(in srgb, var(--text) 30%, transparent); }
.nx-event a:hover { color: var(--link); }
.nx-cam { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.25rem; font-size: 0.85rem; font-weight: 600; color: var(--link); }
.nx-cam svg { width: 1rem; height: 1rem; }

/* Camera band */
.nx-section--band { background: var(--red); color: #fff; }
[data-theme="dark"] .nx-section--band { background: var(--field-red); }
.nx-camera { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.nx-camera p { color: rgb(255 255 255 / 0.88); font-size: 1.1rem; }
.nx-camera__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: 0; }
.nx-camera__stats div { display: flex; flex-direction: column; border-top: 3px solid #fff; padding-top: 0.75rem; }
.nx-camera__stats dd { margin: 0; font-family: var(--font-display); font-size: clamp(3rem, 8vw, 5.5rem); line-height: 1; }
.nx-camera__stats dt { font-weight: 600; }

/* Team grid + my share */
.nx-team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--nx-edge); }
.nx-team li { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.5rem 1.25rem 1.5rem 0; border-bottom: var(--nx-edge); }
.nx-team__value { font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1; color: var(--link); font-variant-numeric: tabular-nums; }
.nx-team__label { color: var(--text-soft); max-width: 18rem; }
.nx-mine { margin-top: 3rem; max-width: 46rem; }
.nx-mine h3 { font-family: var(--font-head); font-size: var(--step-2); margin: 0 0 1rem; }
.nx-mine ul { list-style: none; margin: 0; padding: 0; }
.nx-mine__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 6rem; gap: 1rem; align-items: center; padding: 0.7rem 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.nx-mine__area { font-weight: 600; }
.nx-mine__share { font-family: var(--font-label); font-weight: 700; color: var(--link); text-align: right; }
.nx-meter { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.nx-meter span { display: block; height: 100%; width: var(--w); border-radius: 999px; background: var(--nx-b); }

/* Workload */
.nx-hero-num { display: flex; flex-direction: column; margin: 2rem 0 0; }
.nx-hero-num span:first-child { font-family: var(--font-display); font-size: clamp(4rem, 12vw, 7.5rem); line-height: 0.9; color: var(--link); font-variant-numeric: tabular-nums; }
.nx-hero-num span:last-child { font-family: var(--font-head); font-weight: 700; font-size: var(--step-2); }

/* Sources */
.nx-sources ol { columns: 2 18rem; column-gap: 2.5rem; padding-left: 1.25rem; margin-top: 1rem; }
.nx-sources li { break-inside: avoid; margin-bottom: 0.35rem; font-size: 0.95rem; }
.nx-next { margin-top: 2.5rem; }

/* Professional mode: calmer hero and stamps */
[data-mode="pro"] .nx-hero { background: var(--bg); color: var(--text); border-bottom: 1px solid var(--line-soft); }
[data-mode="pro"] .nx-hero .back, [data-mode="pro"] .nx-hero .lead { color: var(--text-soft); }
[data-mode="pro"] .nx-hero .eyebrow { color: var(--link); }
[data-mode="pro"] .nx-hero__title { font-weight: 600; letter-spacing: -0.03em; }
[data-mode="pro"] .nx-record { background: var(--surface-alt); color: var(--text); border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: none; transform: none; animation: nx-rise 0.8s calc(0.1s + var(--i) * 0.12s) both var(--ease-calm); }
[data-mode="pro"] .nx-record__year { font-weight: 600; color: var(--link); }
[data-mode="pro"] .nx-record__line { font-family: var(--font-body); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: var(--step-1); }
@keyframes nx-rise { from { opacity: 0; transform: translateY(10px); } }
[data-mode="pro"] .nx-tile__value, [data-mode="pro"] .nx-team__value, [data-mode="pro"] .nx-year__num,
[data-mode="pro"] .nx-hero-num span:first-child, [data-mode="pro"] .nx-camera__stats dd { font-weight: 600; letter-spacing: -0.03em; }
[data-mode="pro"] .nx-tile__value { color: var(--text); }
[data-mode="pro"] .nx-tile--feature { background: var(--surface); color: var(--text); border-color: var(--link); }
[data-mode="pro"] .nx-tile--feature .nx-tile__value { color: var(--link); }
[data-mode="pro"] .nx-tile--feature .nx-tile__sub { color: var(--text-soft); }
[data-mode="pro"] .nx-stamp { transform: none; border-width: 1px; border-radius: 999px; font-weight: 600; }
[data-mode="pro"] .nx-section--band { background: var(--ink); }
[data-theme="dark"][data-mode="pro"] .nx-section--band { background: var(--navy-950); }
[data-mode="pro"] .nx-camera__stats div { border-top-width: 1px; }
[data-mode="pro"] .nx-section h2 { font-weight: 600; }

@media (max-width: 64rem) {
  .nx-years { grid-template-columns: minmax(0, 1fr); }
  .nx-hero__inner, .nx-split, .nx-camera { grid-template-columns: minmax(0, 1fr); }
  .nx-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 36rem) {
  .nx-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-team li { padding-right: 0.75rem; }
  .nx-row--single { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .nx-mine__row { grid-template-columns: minmax(0, 1fr) 5rem; }
  .nx-meter { grid-column: 1 / -1; grid-row: 2; }
  .nx-camera__stats dd { font-size: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-record, [data-mode="pro"] .nx-record { animation: none; }
  .nx-bar__fill { transition: none; }
}

/* ==========================================================================
   20. ORGANIZATION PAGES (/temc/, /tdem/, /tamuct/), WORK HUB, SITE MAP
   ========================================================================== */
.org-facts { margin: 0 0 clamp(2rem, 5vw, 3.5rem); }
.org-facts .nx-tile__sub { font-size: 1rem; }

/* Sticky "On this page" bar */
.chapters { position: sticky; top: var(--header-h); z-index: 20; background: var(--bg); border-block: var(--nx-edge, 1px solid var(--line-soft)); }
.chapters__inner { display: flex; align-items: center; gap: 1rem; overflow-x: auto; scrollbar-width: none; padding-block: 0.6rem; }
.chapters__inner::-webkit-scrollbar { display: none; }
.chapters__label { flex: none; margin: 0; font-family: var(--font-label); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.chapters ol { display: flex; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.chapters a { display: block; white-space: nowrap; padding: 0.4rem 0.85rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; color: var(--text); text-decoration: none; background: color-mix(in srgb, var(--text) 6%, transparent); transition: background 0.2s, color 0.2s; }
.chapters a:hover, .chapters a.is-current { background: var(--link); color: #fff; }
.chapter { scroll-margin-top: calc(var(--header-h) + 3.5rem); }

/* Chapter header */
.chapter__head { padding-block: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 3vw, 2rem); border-top: var(--nx-edge, 1px solid var(--line-soft)); }
.chapter:first-of-type .chapter__head { border-top: 0; }
.chapter__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.5rem clamp(1rem, 3vw, 2rem); align-items: start; }
.chapter__num { margin: 0; font-family: var(--font-display); font-size: var(--step-5); line-height: 1; color: var(--link); }
.chapter__title { margin: 0; font-family: var(--font-head); font-size: var(--step-5); line-height: 1.05; }
.chapter__meta { margin: 0.4rem 0 0; font-family: var(--font-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.9rem; color: var(--text-soft); }
.chapter__intro { max-width: 46rem; color: var(--text-soft); font-size: 1.1rem; margin: 1rem 0 0; }
.chapter__open { white-space: nowrap; }
@media (max-width: 52rem) {
  .chapter__inner { grid-template-columns: auto minmax(0, 1fr); }
  .chapter__open { grid-column: 2; justify-self: start; }
}

/* Other major projects */
.org-next { padding-block: var(--section); }
.org-next ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--gap); }
.org-next a { display: flex; flex-direction: column; gap: 0.4rem; height: 100%; padding: 1.4rem 1.5rem; border: var(--nx-edge, 1px solid var(--line-soft)); border-radius: var(--nx-r, 14px); box-shadow: var(--hard); background: var(--surface); color: var(--text); text-decoration: none; transition: transform 0.2s; }
.org-next a:hover { transform: translateY(-3px); }
.org-next strong { font-family: var(--font-head); font-size: var(--step-1); }
.org-next span { color: var(--text-soft); font-size: 0.95rem; }

[data-mode="pro"] .chapter__num, [data-mode="pro"] .chapter__title { font-weight: 600; letter-spacing: -0.02em; }
[data-mode="pro"] .chapters a:hover, [data-mode="pro"] .chapters a.is-current { background: var(--text); color: var(--bg); }

/* Work hub */
.hub-hero { padding-bottom: 2.5rem; }
.hub-hero__lead { max-width: 44rem; }
.hub-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.hub-jump a { padding: 0.5rem 1rem; border-radius: 999px; border: 2px solid rgb(255 255 255 / 0.6); color: #fff; font-weight: 700; text-decoration: none; }
.hub-jump a:hover { background: #fff; color: var(--ink); }
[data-mode="pro"] .hub-jump a { border: 1px solid var(--line-soft); color: var(--text); font-weight: 600; }
[data-mode="pro"] .hub-jump a:hover { background: var(--text); color: var(--bg); }
.hub-orgs { padding-bottom: 1rem; }
.hub-orgs__list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--gap); }
.hub-org { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; padding: 1.5rem 1.6rem; background: var(--surface); color: var(--text); text-decoration: none; border: var(--nx-edge); border-radius: var(--nx-r); box-shadow: var(--hard); transition: transform 0.2s; }
.hub-org:hover { transform: translateY(-4px); }
.hub-org__years { font-family: var(--font-label); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }
.hub-org__title { font-family: var(--font-head); font-size: var(--step-2); line-height: 1.1; }
.hub-org__fact { color: var(--text-soft); }
.hub-org__fact b { color: var(--link); font-size: 1.15em; }
.hub-org__go { margin-top: auto; padding-top: 0.5rem; font-weight: 700; color: var(--link); }
.hub-org__go::after { content: " \2192"; }
.hub-group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: 1.75rem; }
.hub-group__head p { margin: 0; color: var(--text-soft); max-width: 32rem; }
.hub-group { scroll-margin-top: var(--header-h); }
.hub-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: var(--gap); }
.hub-grid .work-card { width: auto; }
.hub-extra { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.hub-extra a { font-weight: 700; }
.hub-extra a::after { content: " \2192"; }

/* Range and numbers page */
.range-tally { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: 0; }
.range-tally div { display: flex; flex-direction: column; border-top: 3px solid currentColor; padding-top: 0.75rem; }
.range-tally dd { margin: 0; font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 3.75rem); line-height: 1; font-variant-numeric: tabular-nums; }
.range-tally dt { color: rgb(255 255 255 / 0.8); font-size: 0.95rem; margin-top: 0.35rem; }
[data-mode="pro"] .range-tally div { border-top-width: 1px; border-color: var(--line-soft); }
[data-mode="pro"] .range-tally dd { font-weight: 600; letter-spacing: -0.03em; }
[data-mode="pro"] .range-tally dt { color: var(--text-soft); }
.range-orgs { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.range-org { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1.6rem; background: var(--surface); border: var(--nx-edge); border-radius: var(--nx-r); box-shadow: var(--hard); }
.range-org h3 { margin: 0.3rem 0 0; font-family: var(--font-head); font-size: var(--step-2); line-height: 1.1; }
.range-org dl { margin: 0; display: grid; gap: 0.9rem; }
.range-org dl div { display: flex; flex-direction: column; }
.range-org dd { margin: 0; font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--link); font-variant-numeric: tabular-nums; }
.range-org dt { color: var(--text-soft); font-size: 0.95rem; }
.range-org .hub-org__go { margin-top: auto; text-decoration: none; }
[data-mode="pro"] .range-org dd { font-weight: 600; letter-spacing: -0.03em; }
.range-disc summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(4rem, 9rem) auto auto; }
.range-disc summary span:first-child { margin-right: 0; }
.range-disc__meter { height: 8px; }
.disc__body { overflow: hidden; }
.range-disc li { opacity: 0; transform: translateY(0.6rem) scale(0.92); transition: opacity 0.3s ease, transform 0.45s cubic-bezier(.2,.9,.3,1.4); transition-delay: 0s; }
.range-disc.is-shown li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 28ms + 60ms); }
.range-disc li::before { transition: transform 0.4s cubic-bezier(.2,.9,.3,1.6); transform: scale(0) rotate(-90deg); transition-delay: inherit; }
.range-disc.is-shown li::before { transform: none; }
.range-disc summary::after { transition: transform 0.35s cubic-bezier(.2,.9,.3,1.5); }
.range-disc.is-shown .range-disc__meter span { animation: meterPop 0.6s cubic-bezier(.2,.9,.3,1.4); }
@keyframes meterPop { 0% { transform: scaleX(0.6); } 60% { transform: scaleX(1.06); } 100% { transform: scaleX(1); } }
.range-disc__meter span { transform-origin: left center; }
@media (prefers-reduced-motion: reduce) { .range-disc li, .range-disc li::before { transition: none; opacity: 1; transform: none; } }
.range-disc__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(4rem, 9rem) auto; align-items: center; gap: 1rem; margin: 0; padding: 1rem 0.25rem 0.75rem; font-family: var(--font-head); font-weight: 800; font-size: var(--step-3); line-height: 1.05; }
@media (max-width: 36rem) { .range-disc__head { grid-template-columns: minmax(0, 1fr) auto; } }
@media (max-width: 64rem) { .range-orgs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 36rem) { .range-disc summary { grid-template-columns: minmax(0, 1fr) auto auto; } .range-disc__meter { display: none; } .range-tally { gap: 1rem; } }
.range-teaser { padding-block: clamp(2.5rem, 6vw, 4rem); background: var(--surface-alt); }
.range-teaser__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; }
.range-teaser__text { margin: 0; font-size: var(--step-1); max-width: 40rem; }
.work-all { margin-top: 1.5rem; }

/* Site map */
.sm-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 1.5rem 0 0; padding: 0; }
.sm-legend li { display: flex; align-items: center; gap: 0.5rem; }
.sm-badge { flex: none; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: 0.8rem; font-weight: 800; line-height: 1; }
.sm-badge--1 { background: var(--nx-b); color: #fff; }
.sm-badge--2 { background: var(--nx-a); color: #fff; }
.sm-badge--a { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); }
.nx-hero .sm-badge--a { background: rgb(255 255 255 / 0.2); color: #fff; }
[data-mode="pro"] .nx-hero .sm-badge--a { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); }
.sm-root { display: flex; justify-content: center; position: relative; padding-bottom: 2rem; }
.sm-root::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 3px; height: 2rem; background: var(--text); }
.sm-tree { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); position: relative; padding-top: 2rem; border-top: 3px solid var(--text); }
.sm-branch { position: relative; display: flex; flex-direction: column; gap: 0.9rem; }
.sm-branch::before { content: ""; position: absolute; top: -2rem; left: 1.75rem; width: 3px; height: 2rem; background: var(--text); }
[data-mode="pro"] .sm-root::after, [data-mode="pro"] .sm-branch::before { width: 1px; background: var(--line-soft); }
[data-mode="pro"] .sm-tree { border-top-width: 1px; border-color: var(--line-soft); }
.sm-node { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin: 0; padding: 0.9rem 1.1rem; background: var(--surface); color: var(--text); text-decoration: none; border: var(--nx-edge); border-radius: var(--nx-r); box-shadow: var(--hard); }
.sm-node strong { font-family: var(--font-head); font-size: var(--step-1); }
.sm-node code, .sm-group__title code { font-size: 0.8rem; color: var(--text-soft); background: none; }
.sm-node span:not(.sm-badge) { font-size: 0.85rem; color: var(--text-soft); }
.sm-node--root { background: var(--ink); color: #fff; padding-inline: 2rem; }
.sm-node--root code { color: rgb(255 255 255 / 0.7); }
[data-mode="pro"] .sm-node--root { background: var(--text); color: var(--bg); }
a.sm-node:hover { border-color: var(--link); }
.sm-group { margin-left: 1.75rem; padding-left: 1rem; border-left: 2px solid color-mix(in srgb, var(--text) 18%, transparent); }
.sm-group__title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.4rem; font-weight: 700; color: var(--text); text-decoration: none; }
a.sm-group__title:hover { color: var(--link); }
.sm-group ul, .sm-flat { list-style: none; margin: 0; padding: 0; }
.sm-flat { margin-left: 1.75rem; padding-left: 1rem; border-left: 2px solid color-mix(in srgb, var(--text) 18%, transparent); }
.sm-leaf { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; color: var(--text); text-decoration: none; font-size: 0.95rem; }
.sm-leaf:hover { color: var(--link); }
.sm-leaf em { color: var(--text-soft); font-style: normal; font-size: 0.85rem; }
@media (max-width: 64rem) {
  .sm-tree { grid-template-columns: minmax(0, 1fr); border-top: 0; padding-top: 0; gap: 2rem; }
  .sm-root { justify-content: flex-start; }
  .sm-root::after { left: 1.75rem; }
  .sm-branch::before { display: none; }
}
.sm-group__title { flex-wrap: nowrap; align-items: flex-start; }
.sm-group__text { flex: 1; min-width: 0; }
.sm-group__text code { display: block; }

/* All work: three long sections */
.hub-section { border-top: var(--nx-edge); }
.hub-section__head { padding-block: clamp(3.5rem, 8vw, 6rem) 0; }
.hub-section__title { margin: 0; font-family: var(--font-display); font-size: var(--step-6); line-height: 0.95; }
[data-mode="pro"] .hub-section__title { font-weight: 600; letter-spacing: -0.03em; }
.hub-section__blurb { max-width: 40rem; margin: 1rem 0 0; font-size: 1.15rem; color: var(--text-soft); }
.hub-section__index { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; padding: 0; }
.hub-section__index a { display: block; padding: 0.4rem 0.9rem; border: var(--nx-edge); border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.hub-section__index a:hover { border-color: var(--link); color: var(--link); }
.hub-section--bare .block:first-of-type { padding-top: 2rem; }
.hub-project { scroll-margin-top: calc(var(--header-h) + 3.5rem); }
.hub-project + .hub-project .chapter__head { border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.hub-section .chapter__head { border-top: 0; }
.hub-section .chapter__inner { grid-template-columns: minmax(0, 1fr); }
.hub-section .chapter__num:empty { display: none; }
.hub-orgs__note { color: var(--text-soft); margin: 0.25rem 0 0; }
.hub-orgs { border-top: var(--nx-edge); }

/* ==========================================================================
   21. EXPANDING STRIPS, ART GRID, BEFORE/AFTER BOX, CALLOUT, TEAM PANEL
   ========================================================================== */
.block--wide .prose, .block--wide .block__heading { max-width: none; }
.block--wide .prose p { max-width: none; }

/* Same-height image row */
.gallery-row { display: flex; gap: var(--gap); align-items: flex-start; }
.gallery-row__item { flex-basis: 0; min-width: 0; }
.gallery-row__item .shot img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; }
@media (max-width: 44rem) { .gallery-row { flex-direction: column; } .gallery-row__item { flex-basis: auto; width: 100%; } }

/* Expanding strip that keeps its slide-open behavior in both modes */
[data-mode] .regions.regions--expand { display: flex; gap: 0.6rem; height: clamp(22rem, 40vw, 30rem); padding: 0; }
[data-mode="pro"] .regions.regions--expand { background: none; border: 0; box-shadow: none; gap: 0.5rem; }
[data-mode] .regions--expand .region { flex: 1 1 0; min-width: 0; }
[data-mode] .regions--expand .region .region__link { position: relative; display: block; height: 100%; overflow: hidden; color: #fff; aspect-ratio: auto; }
[data-mode] .regions--expand .region img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transform: none; }
[data-mode="pro"] .regions--expand .region .region__link { border-radius: var(--r-img); }
[data-mode="pro"] .regions--expand .region img { border-radius: 0; }
[data-mode] .regions--expand .region__label { position: absolute; left: 0.75rem; bottom: 0.75rem; right: auto; max-width: calc(100% - 1.5rem); opacity: 0; transform: translateY(0.5rem); background: rgb(19 16 14 / 0.88); color: #fff; padding: 0.5rem 0.85rem 0.6rem; border-radius: 0.6rem; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-mode] .regions--expand .region:hover .region__label, [data-mode] .regions--expand .region:focus-within .region__label { opacity: 1; transform: none; }
.regions--expand:hover .region, .regions--expand:focus-within .region { flex-grow: 0.7; }
.regions--expand .region:hover, .regions--expand .region:focus-within { flex-grow: 4 !important; }

/* Slides: show the whole 16:9 slide when open */
.regions--slides .region:hover img, .regions--slides .region:focus-within img { object-fit: contain; background: #0b0b0b; }
/* Logos: white field, mark contained, story slides up on hover */
[data-mode] .regions--logos { height: clamp(24rem, 40vw, 30rem); }
[data-mode] .regions--logos .region .region__link { background: #fff; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
[data-mode="turbo"] .regions--logos { background: var(--ink); }
[data-mode] .regions--logos .region img { object-fit: contain; padding: 1.25rem 1rem 1.25rem; transition: padding 0.35s ease; }
[data-mode] .regions--logos .region:hover img, [data-mode] .regions--logos .region:focus-within img { padding: 3.5rem 1rem 46%; }
.region__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 1.15rem 1.15rem; background: var(--ink); color: #fff; font-size: 0.95rem; line-height: 1.45; opacity: 0; transform: translateY(100%); transition: opacity 0.3s ease 0.1s, transform 0.35s ease; }
.regions--expand .region:hover .region__body, .regions--expand .region:focus-within .region__body { opacity: 1; transform: none; }
[data-mode] .regions--logos .region:hover .region__label, [data-mode] .regions--logos .region:focus-within .region__label { bottom: auto; top: 0.75rem; }
[data-theme="dark"] .region__body { background: var(--navy-950); }

@media (max-width: 44rem), (hover: none) {
  [data-mode] .regions.regions--expand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; gap: 0.6rem; }
  [data-mode] .regions--expand .region .region__link { aspect-ratio: 1; }
  [data-mode] .regions--slides .region .region__link, [data-mode] .regions--wide .region .region__link { aspect-ratio: 16 / 10; }
  [data-mode] .regions--expand .region__label { opacity: 1; transform: none; font-size: 0.85rem; left: 0.4rem; bottom: 0.4rem; max-width: calc(100% - 0.8rem); }
  .regions--expand .region, .regions--expand:hover .region, .regions--expand .region:hover { flex-grow: 1 !important; }
  /* Logos on phones: one per row, story always visible */
  [data-mode] .regions.regions--logos { grid-template-columns: minmax(0, 1fr); }
  [data-mode] .regions--logos .region .region__link { aspect-ratio: auto; display: flex; flex-direction: column; color: var(--text); }
  [data-mode] .regions--logos .region img { height: 11rem; padding: 1rem; }
  [data-mode] .regions--logos .region:hover img { padding: 1rem; }
  [data-mode] .regions--logos .region__label, [data-mode] .regions--logos .region:hover .region__label { position: static; background: none; color: var(--ink); padding: 0 1rem; font-size: 1.1rem; white-space: normal; }
  .regions--logos .region__body { position: static; opacity: 1; transform: none; background: none; color: #3a3430; padding: 0.4rem 1rem 1rem; }
  [data-mode] .regions--slides .region:hover img { object-fit: cover; background: none; }
}

/* 4 x 2 art grid: the hovered piece's column and row grow */
.artgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 0.6rem; height: clamp(34rem, 68vw, 52rem); transition: grid-template-columns 0.45s cubic-bezier(.3, .9, .3, 1), grid-template-rows 0.45s cubic-bezier(.3, .9, .3, 1); }
.artgrid__cell { min-width: 0; min-height: 0; }
.artgrid__btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--ink); border-radius: var(--r-img); overflow: hidden; cursor: zoom-in; }
.artgrid__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
@media (max-width: 44rem), (hover: none) {
  .artgrid { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; height: auto; }
  .artgrid__btn { aspect-ratio: 4 / 5; }
}

/* Before and after, one box */
.ba-box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); margin-top: 1.5rem; padding: clamp(1rem, 3vw, 2rem); background: var(--surface); border: var(--nx-edge, 3px solid var(--line)); border-radius: var(--r-img); box-shadow: var(--hard); }
[data-mode="pro"] .ba-box { border: 1px solid var(--line-soft); }
.ba-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ba-side + .ba-side { border-left: 1px solid color-mix(in srgb, var(--text) 14%, transparent); padding-left: clamp(1rem, 3vw, 2.5rem); }
.ba-side__tag { align-self: flex-start; margin: 0; padding: 0.3rem 0.8rem; border-radius: 999px; font-family: var(--font-label); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
.ba-side__tag--after { background: var(--link); color: #fff; }
.ba-side .shot { margin: 0; }
.ba-side__banner .shot img { width: 100%; height: auto; }
.ba-side__pieces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; align-items: end; }
.ba-side__pieces .shot img { width: 100%; height: clamp(12rem, 24vw, 20rem); object-fit: contain; background: color-mix(in srgb, var(--text) 4%, transparent); border-radius: calc(var(--r-img) - 4px); }
@media (max-width: 44rem) {
  .ba-box { grid-template-columns: minmax(0, 1fr); }
  .ba-side + .ba-side { border-left: 0; padding-left: 0; border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent); padding-top: 1.25rem; }
}

/* Callout: the story inside a case study */
.callout { position: relative; padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.5rem); background: var(--ink); color: #fff; border-radius: var(--r-img); box-shadow: var(--hard); border-left: 10px solid var(--red); }
[data-theme="dark"] .callout { background: var(--navy-950); }
.callout__kicker { margin: 0 0 0.6rem; font-family: var(--font-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.9rem; color: #FF8A92; }
.callout__heading { margin: 0 0 1rem; font-family: var(--font-display); font-size: var(--step-5); line-height: 1; }
.callout__body { max-width: 52rem; font-size: 1.2rem; line-height: 1.6; color: rgb(255 255 255 / 0.9); }
.callout__body p { margin: 0; }
[data-mode="pro"] .callout { background: var(--surface-alt); color: var(--text); border-left-width: 4px; box-shadow: none; }
[data-mode="pro"] .callout__kicker { color: var(--link); }
[data-mode="pro"] .callout__heading { font-weight: 600; letter-spacing: -0.03em; }
[data-mode="pro"] .callout__body { color: var(--text); }

/* Media and Communications team panel */
.team-band { padding-block: clamp(3rem, 7vw, 5rem); }
.team-panel { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); grid-template-areas: "intro stats" "mine stats"; gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem); padding: clamp(1.5rem, 4vw, 2.75rem); background: var(--surface); border: var(--nx-edge); border-radius: var(--nx-r); box-shadow: var(--hard); }
.team-panel__intro { grid-area: intro; }
.team-panel__intro h2 { margin: 0.25rem 0 0.5rem; font-family: var(--font-head); font-size: var(--step-3); line-height: 1.1; }
.team-panel__intro p:last-child { margin: 0; color: var(--text-soft); }
.team-stats { grid-area: stats; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; align-content: start; }
.team-stats li { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.1rem; border-radius: 12px; background: var(--surface-alt); }
.team-stats__value { font-family: var(--font-display); font-size: clamp(1.9rem, 3.5vw, 2.6rem); line-height: 1; color: var(--link); font-variant-numeric: tabular-nums; }
.team-stats__label { font-size: 0.9rem; line-height: 1.35; color: var(--text-soft); }
.team-mine { grid-area: mine; align-self: end; }
.team-mine h3 { margin: 0 0 0.6rem; font-family: var(--font-label); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.team-mine ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.team-mine li { display: flex; align-items: baseline; gap: 0.65rem; }
.team-mine__share { flex: none; min-width: 5.5rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--nx-b); color: #fff; font-family: var(--font-label); font-weight: 700; font-size: 0.8rem; text-align: center; text-transform: uppercase; letter-spacing: 0.06em; }
.team-mine__area { font-weight: 600; }
[data-mode="pro"] .team-stats__value { font-weight: 600; letter-spacing: -0.03em; }
@media (max-width: 64rem) { .team-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "stats" "mine"; } }
@media (max-width: 36rem) { .team-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Revisions: art grid pop-out, slide strip height, logo strip color --- */
/* Art grid: tiles keep their shape; the hovered one pops out to full size and the rest scatter */
.artgrid { height: auto; grid-template-rows: none; transition: none; position: relative; }
.artgrid__cell { aspect-ratio: 4 / 5; position: relative; z-index: 1; transition: transform 0.55s cubic-bezier(.34, 1.56, .64, 1), filter 0.35s ease, opacity 0.35s ease; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(var(--s, 1)); }
.artgrid__cell:nth-child(1) { transform-origin: left top; } .artgrid__cell:nth-child(2), .artgrid__cell:nth-child(3) { transform-origin: center top; } .artgrid__cell:nth-child(4) { transform-origin: right top; }
.artgrid__cell:nth-child(5) { transform-origin: left bottom; } .artgrid__cell:nth-child(6), .artgrid__cell:nth-child(7) { transform-origin: center bottom; } .artgrid__cell:nth-child(8) { transform-origin: right bottom; }
.artgrid.is-popping .artgrid__cell { --s: 0.9; filter: saturate(0.6) brightness(0.85); }
.artgrid.is-popping .artgrid__cell.is-pop { --s: 1.75; --dx: 0px; --dy: 0px; z-index: 5; filter: none; }
.artgrid__cell.is-pop .artgrid__btn { box-shadow: 0 24px 60px rgb(0 0 0 / 0.45), 0 0 0 4px #fff; }
[data-mode="turbo"] .artgrid__cell.is-pop .artgrid__btn { box-shadow: 10px 10px 0 var(--red), 0 0 0 4px var(--ink); }
.artgrid__cell:hover .artgrid__btn img { transform: none; }
.artgrid__btn img { object-fit: contain; background: var(--ink); }
@media (max-width: 44rem), (hover: none) {
  .artgrid__cell, .artgrid.is-popping .artgrid__cell { transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) { .artgrid__cell { transition: filter 0.2s ease; } }

/* Slide strip: tall enough that the open slide shows at its natural 16:9 size */
[data-mode] .regions.regions--slides { height: auto; aspect-ratio: 3 / 1; }
.regions--slides .region:hover, .regions--slides .region:focus-within { flex-grow: 6 !important; }
.regions--slides .region:hover img, .regions--slides .region:focus-within img { object-fit: cover; background: none; }

/* Logo strip: cream panels, navy story card, the mark resizes with its panel */
.regions--logos { --logo-panel: #F6F1E7; --logo-accent: #1F3F6E; }
[data-theme="dark"] .regions--logos { --logo-panel: #EDE6D8; --logo-accent: #263F5E; }
[data-mode="turbo"] .regions.regions--logos { background: var(--logo-accent); border-color: var(--logo-accent); box-shadow: 10px 10px 0 var(--red); }
[data-mode] .regions--logos .region .region__link { display: flex; flex-direction: column; background: var(--logo-panel); border: 1px solid color-mix(in srgb, var(--logo-accent) 25%, transparent); }
[data-mode] .regions--logos .region img, [data-mode] .regions--logos .region:hover img, [data-mode] .regions--logos .region:focus-within img { flex: 1 1 auto; min-height: 0; height: auto; width: 100%; object-fit: contain; padding: 14% 12%; transition: padding 0.45s ease; }
[data-mode] .regions--logos .region:hover img, [data-mode] .regions--logos .region:focus-within img { padding: 3.75rem 8% 1.25rem; }
.regions--logos .region__body { position: static; flex: none; max-height: 0; padding: 0 1.15rem; overflow: hidden; transform: none; background: var(--logo-accent); transition: max-height 0.45s ease, padding 0.45s ease, opacity 0.3s ease 0.1s; }
.regions--logos .region:hover .region__body, .regions--logos .region:focus-within .region__body { max-height: 14rem; padding: 1rem 1.15rem 1.15rem; }
[data-mode] .regions--logos .region__label { background: var(--logo-accent); }
@media (max-width: 44rem), (hover: none) {
  .regions--logos .region__body { max-height: none; padding: 0.4rem 1rem 1rem; background: none; }
  [data-mode] .regions--logos .region img { flex: none; height: 11rem; padding: 1rem; }
}
[data-mode] .regions--logos .region img { mix-blend-mode: multiply; }

/* ---- Family logo panels: each mark on its own brand color ---------------- */
[data-mode] .regions--logos .region .region__link { background: var(--panel, var(--logo-panel)); }
[data-mode] .regions--logos .region img { mix-blend-mode: normal; }
.regions--logos .region--dark .region__link { border-color: transparent; }
@media (max-width: 44rem), (hover: none) {
  [data-mode] .regions--logos .region .region__link { background: var(--surface); }
  [data-mode] .regions--logos .region img { background: var(--panel, transparent); border-radius: calc(var(--r-img) - 4px); }
}

/* ---- All work: branded banners that open ------------------------------- */
.acc-group { padding-top: clamp(3rem, 7vw, 5rem); }
.acc-group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 2rem; margin-bottom: 1.25rem; }
.acc-group__head h2 { margin: 0; font-family: var(--font-display); font-size: var(--step-5); line-height: 1; }
[data-mode="pro"] .acc-group__head h2 { font-weight: 600; letter-spacing: -0.03em; }
.acc-group__head p { margin: 0; color: var(--text-soft); }
.acc-list { display: flex; flex-direction: column; gap: 0.5rem; }
.acc { scroll-margin-top: var(--header-h); }
.acc__bar { list-style: none; cursor: pointer; background: var(--acc-bg); color: var(--acc-fg); transition: filter 0.2s ease; }
.acc__bar::-webkit-details-marker { display: none; }
.acc__bar:hover { filter: brightness(1.08) saturate(1.05); }
.acc__bar:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.acc__bar-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 1.5rem; padding-block: clamp(1.1rem, 2.6vw, 1.75rem); }
.acc__title { font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1; }
.acc__meta { font-family: var(--font-label); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.acc__plus { position: relative; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid currentColor; transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1), background 0.2s; }
.acc__plus::before, .acc__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.2rem; height: 3px; margin: -1.5px 0 0 -0.6rem; background: currentColor; border-radius: 2px; }
.acc__plus::after { transform: rotate(90deg); }
.acc[open] .acc__plus { transform: rotate(135deg); background: var(--acc-accent); border-color: var(--acc-accent); }
.acc[open] .acc__plus::before, .acc[open] .acc__plus::after { background: var(--acc-fg); }
.acc__body { border-left: 6px solid var(--acc-accent); background: var(--bg); animation: acc-open 0.45s ease both; }
.acc__intro { padding-top: clamp(1.5rem, 3vw, 2.5rem); max-width: 60rem; margin-inline: 0; }
.acc__intro p { font-size: 1.1rem; color: var(--text-soft); }
.acc__body .block { padding-block: clamp(1.5rem, 3.5vw, 2.5rem); }
@keyframes acc-open { from { opacity: 0; transform: translateY(-8px); } }

/* Banner type, matched to each project's look in the portfolio PDF */
.acc--serif .acc__title { font-family: Didot, "Bodoni 72", "Bodoni MT", "Playfair Display", Georgia, serif; font-weight: 700; letter-spacing: -0.02em; }
.acc--deco .acc__title { font-family: Didot, "Bodoni 72", Georgia, serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.32em; font-size: clamp(1.6rem, 4vw, 2.8rem); }
.acc--chunky .acc__title { font-family: var(--font-head, "Barlow Condensed"), sans-serif; font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-style: italic; text-transform: uppercase; text-shadow: 3px 3px 0 var(--acc-accent); }
.acc--speed .acc__title { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.04em; }
.acc--speed .acc__title::after { content: "\2605"; color: var(--acc-accent); margin-left: 0.15em; font-style: normal; }
.acc--trajan .acc__title { font-family: "Trajan Pro", Optima, Georgia, serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(1.4rem, 3.6vw, 2.6rem); }
.acc--western .acc__title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; }
@media (max-width: 36rem) {
  .acc__bar-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .acc__title { grid-column: 1; }
  .acc__meta { grid-column: 1; grid-row: 2; }
  .acc__plus { grid-column: 2; grid-row: 1 / span 2; width: 2.5rem; height: 2.5rem; }
}

/* ---- Long pages: alternating section bands ----------------------------- */
.is-band { background: var(--red); color: #fff; --text: #fff; --text-soft: rgb(255 255 255 / 0.86); --link: #fff; --line: #fff; }
[data-theme="dark"] .is-band { background: var(--field-red); }
.is-band .block--alt, .is-band .nx-section--alt { background: transparent; }
[data-mode="turbo"] .is-band .btn:not(.btn--ghost) { --btn-bg: var(--ink); --btn-fg: #fff; --btn-edge: var(--ink); }
[data-mode="turbo"] .is-band .tag--red { background: var(--ink); border-color: var(--ink); }
.is-band :is(.nx-tile, .ba-box, .nx-year, .team-panel, .nx-chart, .social, .org-next a) { --text: var(--ink); --text-soft: var(--stone); --link: var(--red); --line: var(--ink); color: var(--text); }
[data-theme="dark"] .is-band :is(.nx-tile, .ba-box, .nx-year, .team-panel, .nx-chart, .social) { --text: #EEF2F7; --text-soft: #A8B5C6; --link: #FF6B76; --line: #EEF2F7; }
.is-band .nx-tile--feature { --text: #fff; color: #fff; background: var(--ink); }
.is-band .nx-tile--feature .nx-tile__value, .is-band .nx-tile--feature .nx-tile__sub { color: #fff; }
.is-band .callout { border-left-color: #fff; }
.is-band .chapter__num { color: #fff; }
.is-band .regions:not(.regions--logos) { box-shadow: 10px 10px 0 var(--ink); }
/* Professional mode: quiet tone shift instead of red */
[data-mode="pro"] .is-band { background: var(--surface-alt); color: var(--text); --text: var(--ink); --text-soft: var(--stone); --link: #B01C2A; --line: var(--ink); }
[data-theme="dark"][data-mode="pro"] .is-band { background: var(--navy-800); --text: #EEF2F7; --text-soft: #A8B5C6; --link: #FF7A83; --line: #EEF2F7; }
[data-mode="pro"] .is-band .chapter__num { color: var(--link); }
[data-mode="pro"] .is-band .callout { border-left-color: var(--red); background: var(--surface); }
[data-mode="pro"] .is-band .nx-tile--feature { background: var(--surface); color: var(--text); }
[data-mode="pro"] .is-band .nx-tile--feature .nx-tile__value { color: var(--link); }
[data-mode="pro"] .is-band .nx-tile--feature .nx-tile__sub { color: var(--text-soft); }
/* Bands win over a section's own tinted background */
.org-page .is-band.block--alt, .org-page .is-band.nx-section--alt { background: var(--red); }
[data-theme="dark"] .org-page .is-band.block--alt, [data-theme="dark"] .org-page .is-band.nx-section--alt { background: var(--field-red); }
[data-mode="pro"] .org-page .is-band.block--alt, [data-mode="pro"] .org-page .is-band.nx-section--alt { background: var(--surface-alt); }
[data-theme="dark"][data-mode="pro"] .org-page .is-band.block--alt, [data-theme="dark"][data-mode="pro"] .org-page .is-band.nx-section--alt { background: var(--navy-800); }
.org-page .chapter:not(.is-band) > :is(.block--alt, .nx-section--alt):not(.is-band) { background: var(--bg); }
.org-page .is-band :is(.block--alt, .nx-section--alt) { background: transparent; }

/* ==========================================================================
   22. EVEN HEIGHTS, HEADER PLATES, FLIPBOOK
   ========================================================================== */
/* Justified rows: images side by side always share one height */
.jrows { display: flex; flex-direction: column; gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: 2rem; }
.split__media .jrows { margin-top: 0; }
.jrow { display: flex; gap: clamp(1rem, 2.5vw, 1.75rem); align-items: flex-start; }
.jrow__item, .jrow__spacer { flex-basis: 0; min-width: 0; }
.jrow__item .shot { margin: 0; }
.jrow__item .shot img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; }
.jrow__item figcaption { font-family: var(--font-label); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--text-soft); margin-top: 0.55rem; }
@media (max-width: 34rem) {
  .jrow { flex-direction: column; }
  .jrow__item { flex-basis: auto; width: 100%; }
  .jrow__spacer { display: none; }
}
/* Before and after pairs: same height, widths follow each image */
.pair { display: flex; gap: clamp(1rem, 3vw, 2.5rem); align-items: flex-start; }
.pair__side { flex-basis: 0; min-width: 0; }
.pair__side .shot img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; }
@media (max-width: 34rem) { .pair { flex-direction: column; align-items: stretch; } .pair__side { flex-basis: auto; } }
/* Before and after box: both banners the same height */
.ba-side__banner .shot img { width: 100%; height: clamp(4rem, 9vw, 7rem); object-fit: contain; object-position: left center; }
.ba-side__banner .shot { display: block; }

/* Header plates: every section header sits on its own background */
:root { --hd-bg: var(--ink); --hd-fg: #fff; }
[data-theme="dark"] { --hd-bg: var(--field-red); --hd-fg: #fff; }
[data-mode="pro"] { --hd-bg: var(--surface-alt); --hd-fg: var(--text); }
[data-theme="dark"][data-mode="pro"] { --hd-bg: var(--navy-850); --hd-fg: #EEF2F7; }
.nx-hero { --hd-bg: var(--red); --hd-fg: #fff; }
[data-theme="dark"] .nx-hero { --hd-bg: var(--field-red); }
[data-mode="pro"] .nx-hero { --hd-bg: var(--surface-alt); --hd-fg: var(--text); }
[data-theme="dark"][data-mode="pro"] .nx-hero { --hd-bg: var(--navy-850); --hd-fg: #EEF2F7; }
.is-band { --hd-bg: var(--ink); --hd-fg: #fff; }
[data-theme="dark"] .is-band { --hd-bg: var(--navy-950); }
[data-mode="pro"] .is-band { --hd-bg: var(--surface); --hd-fg: var(--text); }
[data-theme="dark"][data-mode="pro"] .is-band { --hd-bg: var(--navy-950); --hd-fg: #EEF2F7; }
.block--alt, .nx-section--alt { --hd-bg: var(--ink); }
[data-mode="pro"] :is(.block--alt, .nx-section--alt):not(.is-band) { --hd-bg: var(--surface); }

:is(.case-head h1, .nx-hero__title, .block__heading, .chapter__title, .nx-intro h2, .story__text h2, .acc-group__head h2,
    .range__intro h2, .split__text h2, #temc-title, #about-title, #words-title, #contact-title) {
  width: fit-content; max-width: 100%;
  background: var(--hd-bg); color: var(--hd-fg);
  padding: 0.12em 0.4em 0.16em; border-radius: 0.18em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.nx-hero__title, .case-head h1 { padding: 0.08em 0.3em 0.14em; }
[data-mode="turbo"] :is(.block__heading, .chapter__title, .acc-group__head h2) { box-shadow: 5px 5px 0 var(--red); }
[data-mode="turbo"] .is-band :is(.block__heading, .chapter__title) { box-shadow: 5px 5px 0 rgb(0 0 0 / 0.35); }

/* No orphans: let the browser balance lines, and keep the last two words together (see main.js) */
:is(p, li, dd, dt, figcaption, blockquote) { text-wrap: pretty; }
:is(h1, h2, h3, .acc__title, .callout__heading) { text-wrap: balance; }

/* Flip book viewer for PDFs */
.flip-wrap { padding-block: calc(var(--header-h) + 2rem) clamp(3rem, 7vw, 5rem); background: var(--surface-alt); min-height: 100vh; }
.flip-wrap { --hd-bg: var(--ink); --hd-fg: #fff; }
[data-mode="pro"] .flip-wrap { --hd-bg: var(--surface); --hd-fg: var(--text); }
[data-theme="dark"][data-mode="pro"] .flip-wrap { --hd-bg: var(--navy-950); --hd-fg: #EEF2F7; }
.flip-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.5rem; }
.flip-title { font-size: var(--step-5); margin: 0.25rem 0 0.5rem; }
.flip-lead { margin: 0; color: var(--text-soft); }
.flipbook { position: relative; margin-inline: auto; width: min(100%, calc((100svh - var(--header-h) - 19.5rem) * 1.546), 72rem); perspective: 2600px; outline-offset: 6px; }
.flipbook__book { position: relative; aspect-ratio: var(--ratio); transform-style: preserve-3d; box-shadow: 0 14px 40px rgb(0 0 0 / 0.25); border-radius: 2px 8px 8px 2px; }
.flipbook__book::after { content: ""; position: absolute; inset: auto 2% -18px 2%; height: 24px; background: radial-gradient(closest-side, rgb(0 0 0 / 0.35), transparent); z-index: -1; }
.leaf { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(.45, .05, .25, 1); }
.leaf__front, .leaf__back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 2px 8px 8px 2px; overflow: hidden; background: #fff; }
.leaf__front::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(0 0 0 / 0.18), transparent 4%, transparent 96%, rgb(0 0 0 / 0.06)); }
.leaf__front img { width: 100%; height: 100%; object-fit: cover; }
.leaf__back { transform: rotateY(180deg); background: linear-gradient(90deg, #e9e4dc, #f7f4ef 60%, #ddd6cb); border-radius: 8px 2px 2px 8px; }
.leaf.is-turned { transform: rotateY(-180deg); }
.leaf.is-gone { visibility: hidden; }
.flipbook__hit { position: absolute; top: 0; bottom: 0; width: 30%; border: 0; background: none; cursor: pointer; z-index: 999; }
.flipbook__hit--prev { left: 0; cursor: w-resize; }
.flipbook__hit--next { right: 0; cursor: e-resize; }
.flip-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.75rem; }
.flip-range { width: min(26rem, 50vw); accent-color: var(--red); }
.flip-count { min-width: 4.5rem; text-align: center; font-family: var(--font-label); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .leaf { transition: none; } }
/* Header plates: sections with their own color get a plate that stands apart */
[data-theme="dark"][data-mode="pro"] { --hd-bg: var(--navy-700); }
[data-theme="dark"][data-mode="pro"] .nx-hero { --hd-bg: var(--navy-700); }
[data-theme="dark"][data-mode="pro"] :is(.block--alt, .nx-section--alt, .feature, .words):not(.is-band) { --hd-bg: var(--navy-950); }
[data-mode="pro"] :is(.feature, .words) { --hd-bg: var(--surface); }
[data-mode="turbo"] .contact { --hd-bg: var(--red); }
[data-theme="dark"][data-mode="turbo"] .contact { --hd-bg: var(--field-red); }
[data-theme="dark"][data-mode="turbo"] .words { --hd-bg: var(--navy-950); }

/* ==========================================================================
   23. RESPONSIVE FIXES
   ========================================================================== */
/* HOWDY sizes to its own container, not the window. Window units include the
   scrollbar on Windows, which pushed the word 17px past the page edge. */
.hero__howdy { container-type: inline-size; }
@supports (width: 1cqw) { .howdy { font-size: calc(100cqw * 0.296); } }

/* Long words in big headers wrap instead of pushing the page wider */
h1, h2, h3, .acc__title, .chapter__title, .nx-hero__title, .hub-section__title { overflow-wrap: break-word; }
.chapter__inner > *, .team-panel > *, .team-mine li > *, .split > *, .story > *, .socials > * { min-width: 0; }
@media (max-width: 36rem) {
  .chapter__inner { grid-template-columns: minmax(0, 1fr); }
  .chapter__num { font-size: var(--step-3); }
  .chapter__title { font-size: clamp(1.7rem, 8.5vw, 2.4rem); }
  .team-panel { padding: 1.1rem; }
  .team-mine li { flex-wrap: wrap; gap: 0.3rem 0.6rem; }
  .team-mine__share { min-width: 0; }
  .team-stats__value { font-size: 1.7rem; }
  .acc__title { font-size: clamp(1.6rem, 9vw, 2.2rem); }
}
@media (max-width: 30rem) { .team-stats { grid-template-columns: minmax(0, 1fr); } .team-stats li { flex-direction: row; align-items: baseline; gap: 0.6rem; } }
.team-stats li { min-width: 0; overflow-wrap: break-word; }

/* 3D challenge coin */
.coin { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); margin-top: 1.75rem; align-items: stretch; }
.coin__stage { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-img); overflow: hidden; background: radial-gradient(ellipse 60% 55% at 50% 46%, #262a31, #111317 72%); box-shadow: var(--hard); }
[data-mode="turbo"] .coin__stage { border: 3px solid var(--ink); }
.coin__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.coin__stage canvas:active { cursor: grabbing; }
.coin__status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #8f939b; font-family: var(--font-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; pointer-events: none; }
.coin__views { position: absolute; top: 0.75rem; left: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.coin__views button, .coin__plates button { font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; border-radius: 999px; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.coin__views button { color: #ece8df; background: rgb(17 19 23 / 0.7); border: 1px solid #3a4049; padding: 0.35rem 0.8rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.coin__views button[aria-pressed="true"] { border-color: #d9d2c2; background: rgb(217 210 194 / 0.18); }
.coin__hint { position: absolute; left: 0; right: 0; bottom: 0.6rem; margin: 0; text-align: center; color: #8f939b; font-size: 0.8rem; letter-spacing: 0.08em; pointer-events: none; opacity: 0; transition: opacity 0.4s; }
.coin__stage.is-ready .coin__hint { opacity: 1; }
.coin__info { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
.coin__specs { margin: 0; display: grid; gap: 0.5rem; }
.coin__specs div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.coin__specs dt { color: var(--text-soft); }
.coin__specs dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.coin__label { margin: 0.5rem 0 0; font-family: var(--font-label); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.coin__plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.coin__plates button { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.75rem; border-radius: 10px; background: var(--surface); color: var(--text); border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); text-align: left; }
.coin__plates button i { width: 1rem; height: 1rem; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 60%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 60%, #000)); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.2); }
.coin__plates button[aria-pressed="true"] { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); }
.is-band .coin__plates button { --text: var(--ink); color: var(--ink); background: #fff; }
[data-theme="dark"] .is-band .coin__plates button { color: #EEF2F7; background: var(--navy-850); }
@media (max-width: 52rem) { .coin { grid-template-columns: minmax(0, 1fr); } .coin__stage { aspect-ratio: 1; } }
.coin__status[hidden] { display: none; }

/* The family: 3 x 2 grid. The hovered mark's column and row grow, the rest make room. */
@media (min-width: 44.01rem) and (hover: hover) {
  [data-mode] .regions.regions--logos {
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);
    height: clamp(30rem, 52vw, 40rem);
    transition: grid-template-columns 0.45s cubic-bezier(.3, .9, .3, 1), grid-template-rows 0.45s cubic-bezier(.3, .9, .3, 1);
  }
  .regions--logos .region { min-width: 0; min-height: 0; }
  .regions--logos:has(.region:nth-child(3n+1):is(:hover, :focus-within)) { grid-template-columns: 2fr 1fr 1fr; }
  .regions--logos:has(.region:nth-child(3n+2):is(:hover, :focus-within)) { grid-template-columns: 1fr 2fr 1fr; }
  .regions--logos:has(.region:nth-child(3n+3):is(:hover, :focus-within)) { grid-template-columns: 1fr 1fr 2fr; }
  .regions--logos:has(.region:nth-child(-n+3):is(:hover, :focus-within)) { grid-template-rows: 1.7fr 1fr; }
  .regions--logos:has(.region:nth-child(n+4):is(:hover, :focus-within)) { grid-template-rows: 1fr 1.7fr; }
}
@media (min-width: 44.01rem) and (hover: hover) {
  /* fixed padding so a mark never shrinks just because its column got wider */
  [data-mode] .regions--logos .region img { padding: clamp(0.9rem, 2vw, 1.75rem); }
  [data-mode] .regions--logos .region:is(:hover, :focus-within) img { padding: 3.5rem clamp(1rem, 2.5vw, 2rem) 1rem; }
}
.tldr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.8rem; margin-top: 1.5rem; padding: 1rem 1.2rem; border-left: 5px solid var(--red); background: var(--surface-alt); font-weight: 600; font-size: 1.1rem; }
.tldr__tag { font-family: var(--font-label); font-weight: 800; letter-spacing: 0.1em; font-size: 0.85rem; padding: 0.15rem 0.55rem; border-radius: 4px; background: var(--red); color: #fff; }

/* ---- Collage variant: one big tile, one wide, two small; same pop-out as the art grid ---- */
.artgrid--collage { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, clamp(9rem, 15vw, 14rem)); height: auto; }
.artgrid--collage .artgrid__cell { aspect-ratio: auto; }
.artgrid--collage .artgrid__cell:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; transform-origin: left center; }
.artgrid--collage .artgrid__cell:nth-child(2) { grid-column: 3 / 5; grid-row: 1; transform-origin: right top; }
.artgrid--collage .artgrid__cell:nth-child(3) { grid-column: 3; grid-row: 2; transform-origin: center bottom; }
.artgrid--collage .artgrid__cell:nth-child(4) { grid-column: 4; grid-row: 2; transform-origin: right bottom; }
.artgrid--collage .artgrid__btn img { object-fit: cover; }
.artgrid.artgrid--collage.is-popping .artgrid__cell.is-pop { --s: 1.6; }
.artgrid.artgrid--collage.is-popping .artgrid__cell.is-pop:nth-child(1) { --s: 1.12; }
.artgrid.artgrid--collage.is-popping .artgrid__cell.is-pop:nth-child(2) { --s: 1.3; }
@media (max-width: 44rem), (hover: none) {
  .artgrid--collage { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
  .artgrid--collage .artgrid__cell:nth-child(n) { grid-column: auto; grid-row: auto; }
  .artgrid--collage .artgrid__cell:nth-child(-n+2) { grid-column: 1 / 3; }
  .artgrid--collage .artgrid__btn { aspect-ratio: 4 / 3; }
  .artgrid--collage .artgrid__cell:nth-child(-n+2) .artgrid__btn { aspect-ratio: 16 / 9; }
}

/* Never hyphenate words at the end of a line */
html, body, * { hyphens: manual; -webkit-hyphens: manual; }

/* Let headline columns shrink so long names scale down instead of widening the page */
.case-head > *, .case-head__main { min-width: 0; }
.case-head__main h1 { max-width: 100%; }

/* Phones: let strip labels wrap instead of cutting off with "..." */
@media (max-width: 44rem), (hover: none) {
  [data-mode] .regions--expand .region__label { white-space: normal; overflow: visible; text-overflow: clip; font-size: 0.85rem; line-height: 1.2; padding: 0.4rem 0.6rem 0.45rem; left: 0.5rem; bottom: 0.5rem; max-width: calc(100% - 1rem); }
}

/* HMU artwork stands in for the contact heading in Turbo */
.contact__art { margin: 0 0 1.25rem; padding: 0; background: none; box-shadow: none; line-height: 0; width: 100%; max-width: 32rem; }
.contact__art img { display: block; width: 100%; height: auto; }
.contact__aside { display: block; margin-top: 0.2rem; font-size: 0.78em; font-weight: 400; font-family: var(--font-body); opacity: 0.8; letter-spacing: 0; }
.thanks .wip__actions { margin-top: 1.25rem; }

/* Display text now uses Barlow Condensed at full weight (Sancreek lives only in the HOWDY hero) */
:is(.stats dd, .big-word, .wip__title, .ql__stats dd, .nx-hero__title, .nx-record__year, .nx-tile__value, .nx-year__num,
  .nx-camera__stats dd, .nx-team__value, .nx-hero-num span:first-child, .chapter__num, .range-tally dd, .range-org dd,
  .hub-section__title, .callout__heading, .team-stats__value, .acc-group__head h2) { font-weight: 800; letter-spacing: -0.01em; }

/* ---- Range: headline tally card ---- */
.range-tally__hero { grid-column: 1 / -1; flex-direction: row !important; align-items: center; gap: 1rem; border-top: 0 !important; padding: 1rem 1.25rem !important;
  background: var(--paper, #fff); color: var(--ink); border-radius: 14px; box-shadow: 6px 6px 0 var(--red); }
.range-tally__hero dd { font-size: clamp(3.5rem, 8vw, 5rem) !important; color: var(--red); }
.range-tally .range-tally__hero dt { color: var(--ink); font-family: var(--font-head); font-weight: 800; text-transform: uppercase; font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.05; margin: 0; max-width: 24ch; }
[data-theme="dark"] .range-tally__hero { background: #F4EFE6; }

/* ---- Range: program bubbles with a hover list of brands ---- */
.prog { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.prog__item { position: relative; }
.prog__bubble { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.9rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--surface, #fff); color: var(--text);
  font: 600 0.92rem/1.2 var(--font-body); text-align: left; }
button.prog__bubble { cursor: pointer; background: var(--ink); color: #fff; }
.prog__count { font: 800 0.75rem/1 var(--font-label); background: var(--red); color: #fff; border-radius: 999px; padding: 0.25rem 0.45rem; }
.prog__pop { position: absolute; z-index: 20; left: 0; top: calc(100% + 0.5rem); min-width: min(22rem, 85vw); list-style: none; margin: 0; padding: 0.9rem 1rem;
  background: var(--ink); color: #fff; border-radius: 12px; box-shadow: 6px 6px 0 var(--red);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; }
.prog__pop li { padding: 0.35rem 0; border-top: 1px solid rgb(255 255 255 / 0.14); font-size: 0.95rem; }
.prog__pop li.prog__pop-head { border: 0; padding-top: 0; font: 700 0.75rem/1 var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; color: #FFC23D; }
.prog__item.has-brands:hover .prog__pop, .prog__item.has-brands:focus-within .prog__pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* ---- Range: stacked "8+ years of in-house designing" badge ---- */
.range-badge { margin: 0; display: flex; flex-direction: column; align-items: center; justify-self: center; text-align: center; color: #fff;
  font-family: var(--font-head); font-weight: 800; text-transform: uppercase; line-height: 0.95; }
.range-badge__num { font-size: clamp(7rem, 16vw, 12rem); line-height: 0.85; letter-spacing: -0.03em; text-shadow: 0.05em 0.05em 0 var(--red); margin-bottom: 0.15em; }
.range-badge__line { font-size: clamp(2rem, 4.4vw, 3.2rem); letter-spacing: 0.01em; }
.range-badge__line--plate { background: var(--red); padding: 0 0.18em 0.04em; margin: 0.06em 0; }
[data-mode="pro"] .range-badge { color: var(--text); }

/* ---- Word around town: "hold this to scroll" control ---- */
.scroller { position: relative; display: flex; justify-content: flex-start; margin: 1.5rem auto 0.5rem; cursor: pointer; }
.scroller::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 5px; border-radius: 3px; background: var(--ink); transform: translateY(-50%); }
.scroller__pill { position: relative; display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; background: #fff; border: 6px solid var(--ink); border-radius: 999px; user-select: none; -webkit-user-select: none; touch-action: none; }
.scroller__arrow { display: grid; place-items: center; width: 3.4rem; height: 3.6rem; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 999px; color: var(--ink); transition: transform 0.12s ease, background 0.12s ease; }
.scroller__arrow svg { width: 2.2rem; height: 3.2rem; fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: butt; stroke-linejoin: miter; }
.scroller__arrow:hover { background: rgb(0 0 0 / 0.06); }
.scroller__arrow.is-held, .scroller__arrow:active { transform: scale(0.9); color: var(--red); }
.scroller__label { display: flex; flex-direction: column; align-items: center; line-height: 0.9; color: var(--ink); font-family: var(--font-head); font-weight: 800; text-transform: lowercase; padding: 0 0.25rem; }
.scroller__label span:first-child { font-size: 1.35rem; letter-spacing: -0.01em; }
.scroller__big { font-size: 1.75rem; letter-spacing: 0.32em; margin-right: -0.32em; }
.words .scroller :focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
[data-theme="dark"] .scroller__pill { background: #F4EFE6; }
.range-org__sum { margin: 0.75rem 0 1.25rem; color: var(--text-soft); line-height: 1.55; }

/* The real scrollbar is hidden; the pill above is the thumb */
.quotes { scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%); }
.quotes::-webkit-scrollbar { display: none; }
.scroller__pill { will-change: transform; transition: box-shadow 0.15s ease; }
.scroller__label { cursor: grab; touch-action: none; }
.scroller__pill.is-dragging .scroller__label { cursor: grabbing; }
.scroller__pill.is-dragging { box-shadow: 6px 6px 0 var(--ink); }
[data-mode="turbo"] .role-banner::before { content: none; }
.nx-sources--inband { margin-top: clamp(2rem, 4vw, 3rem); }
.is-band .nx-sources--inband summary, .is-band .nx-sources--inband a, .is-band .nx-sources--inband .nx-fine { color: #fff; }
.org-temc .site-footer { background: var(--ink); }

/* =====================================================================
   Block tones: a section can set its own background (TDEM brand + family)
   ===================================================================== */
.block--t-white { background: var(--bg); }
.block--t-grey { background: #ECEAE6; --hd-bg: var(--ink); --hd-fg: #fff; }
[data-theme="dark"] .block--t-grey { background: #1B2130; }
.block--t-black { background: var(--ink); color: #fff; --text: #fff; --text-soft: rgb(255 255 255 / 0.78); --link: #fff; --line: #fff; --hd-bg: var(--red); --hd-fg: #fff; }
[data-theme="dark"] .block--t-black { background: #07090D; }
.block--t-red { background: var(--field-red, var(--red)); color: #fff; --text: #fff; --text-soft: rgb(255 255 255 / 0.88); --link: #fff; --line: var(--ink); --hd-bg: var(--ink); --hd-fg: #fff; }
:is(.block--t-white, .block--t-grey, .block--t-black, .block--t-red) { padding-block: clamp(3rem, 7vw, 5.5rem); margin: 0; }
.block--t-red.block--tight { padding-top: 0; }
[data-mode="turbo"] .block--t-red :is(.block__heading) { box-shadow: 5px 5px 0 rgb(0 0 0 / 0.35); }
[data-mode="turbo"] .block--t-black :is(.block__heading) { box-shadow: 5px 5px 0 rgb(255 255 255 / 0.25); }
.block--t-black .shot__btn { border-color: #fff; }
.chapter--toned > .chapter__head { background: var(--bg); }

/* Seal next to the chapter number */
.chapter__num { display: flex; align-items: center; gap: 0.6rem; }
.chapter__badge { width: auto; height: 1.15em; flex: none; }

/* Heading on the left, text on the right */
.block--aside > .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 1rem clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.block--aside .prose { margin: 0; } .block--aside .prose p { max-width: 42rem; }
@media (max-width: 52rem) { .block--aside > .wrap { grid-template-columns: 1fr; } }

/* Then / Now rows */
.evolve { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.evolve__text { position: sticky; top: calc(var(--header-h, 4rem) + 4.5rem); }
.evolve__text p { color: var(--text-soft); line-height: 1.65; }
.evolve__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
.evolve__row { display: grid; grid-template-columns: minmax(0, 3fr) auto minmax(0, 5fr); align-items: center; gap: clamp(0.5rem, 2vw, 1.25rem); }
.evolve figure { margin: 0; }
.evolve figcaption { font: 700 0.78rem/1 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 0.5rem; }
.evolve__now figcaption { color: var(--red); }
.evolve__then .shot__btn, .evolve__then img { filter: grayscale(0.85) contrast(0.92); opacity: 0.9; }
.evolve__then .shot__btn:hover img { filter: none; }
.evolve__arrow svg { width: clamp(1.75rem, 3vw, 2.5rem); fill: none; stroke: var(--red); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 52rem) {
  .evolve { grid-template-columns: 1fr; } .evolve__text { position: static; }
  .evolve__row { grid-template-columns: 1fr; } .evolve__arrow { justify-self: center; transform: rotate(90deg); }
}

/* Family of brands: logo tiles that jump to each brand */
.brandgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.1rem); }
.brandgrid__tile { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 1.25rem 1.25rem 2.75rem; border-radius: 14px; background: var(--panel); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); text-decoration: none; color: var(--ink); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.brandgrid__tile img { width: 100%; height: 100%; max-width: 78%; max-height: 82%; object-fit: contain; transition: transform 0.2s ease; }
.brandgrid__tile:hover, .brandgrid__tile:focus-visible { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--red); }
.brandgrid__tile:hover img { transform: scale(1.05); }
.brandgrid__label { position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.75rem; font: 700 0.85rem/1.2 var(--font-label); letter-spacing: 0.06em; text-transform: uppercase; }
.brandgrid__tile.is-dark { color: #fff; }
@media (max-width: 44rem) { .brandgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Challenge coin, bare: title and text left, coin right, no box */
.coin--bare { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; margin-top: 0; }
.coin--bare .coin__text p { color: var(--text-soft); line-height: 1.65; max-width: 34rem; }
.coin--bare .coin__stage, [data-mode="turbo"] .coin--bare .coin__stage { background: none; border: 0; box-shadow: none; aspect-ratio: 1 / 1; border-radius: 0; overflow: visible; cursor: grab; }
.coin--bare .coin__status { color: var(--text-soft); }
@media (max-width: 52rem) { .coin--bare { grid-template-columns: 1fr; } }

/* Chapter bar jump menu */
.chapters__caret { font-size: 0.7em; margin-left: 0.15rem; }
.chapters__pop { position: absolute; z-index: 30; list-style: none; margin: 0; padding: 0.4rem; min-width: 16rem; background: var(--ink); border-radius: 12px; box-shadow: 6px 6px 0 var(--red);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s, transform 0.15s, visibility 0s linear 0.15s; }
.chapters__pop.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.chapters__pop a { display: block; padding: 0.55rem 0.8rem; border-radius: 8px; color: #fff; text-decoration: none; font-weight: 600; font-size: 0.95rem; white-space: nowrap; background: none; }
.chapters__pop a:hover, .chapters__pop a:focus-visible { background: var(--red); }

/* Project page header: the intro lines up with the top of the title */
.org-page article:not(.personal) .org-head .case-head__inner { align-items: start; }
.org-page article:not(.personal) .org-head .lead-stack { padding-top: 2.9rem; } .org-page article:not(.personal) .org-head .lead-stack .lead:first-child { margin-top: 0; }
@media (max-width: 52rem) { .org-page article:not(.personal) .org-head .lead-stack { padding-top: 0; } }
.brandgrid > li { display: block; }
.brandgrid__tile { height: auto; overflow: hidden; }
.brandgrid__tile img { position: absolute; inset: 1.25rem 1.25rem 2.9rem; width: calc(100% - 2.5rem); height: calc(100% - 4.15rem); max-width: none; max-height: none; }
:is(.block--t-white, .block--t-grey, .block--t-black, .block--t-red) + :is(.block--t-white, .block--t-grey, .block--t-black, .block--t-red) { margin-top: 0; }
.block--t-red.block--tight { margin-top: 0 !important; padding-top: 0; }
.coin--bare .coin__stage { width: 100%; max-width: 30rem; justify-self: center; }
.block--t-red.block--tight { padding-top: 0.1px; } .block--tight > .wrap > :first-child { margin-top: 0; }
@media (max-width: 44rem) { .brandgrid__label { font-size: 0.68rem; letter-spacing: 0.03em; } .brandgrid__tile { padding-bottom: 3rem; } .brandgrid__tile img { inset: 0.9rem 0.9rem 3.2rem; width: calc(100% - 1.8rem); height: calc(100% - 4.1rem); } }

/* =====================================================================
   03 Phone feed
   ===================================================================== */
.pfeed { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.pfeed__steps { list-style: none; margin: 0; padding: 0; }
.pfeed__step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.32; transition: opacity 0.35s ease; max-width: 30rem; }
.pfeed__step.is-on { opacity: 1; }
.pfeed__step:first-child { min-height: 40vh; justify-content: flex-start; padding-top: 4rem; }
.pfeed__step:last-child { min-height: 70vh; }
.pfeed__num { font: 700 0.8rem/1 var(--font-label); letter-spacing: 0.12em; color: var(--red); margin: 0 0 0.6rem; }
.pfeed__step h3 { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 0.95; margin: 0 0 0.75rem; }
.pfeed__step p:last-child { color: var(--text-soft); font-size: 1.1rem; line-height: 1.55; margin: 0; }
.pfeed__stick { position: sticky; top: calc(var(--header-h, 4rem) + 4.5rem); display: flex; justify-content: center; }
.phone { position: relative; width: min(100%, 20rem); aspect-ratio: 9 / 19; background: #0E0D0C; border-radius: 2.6rem; padding: 0.7rem; box-shadow: 10px 10px 0 var(--red), inset 0 0 0 2px #2a2725; }
.phone__notch { position: absolute; top: 1.05rem; left: 50%; transform: translateX(-50%); width: 34%; height: 1.4rem; background: #0E0D0C; border-radius: 1rem; z-index: 3; }
.phone__screen { position: relative; height: 100%; border-radius: 2rem; overflow: hidden; background: #fff; }
.phone__bar { position: absolute; z-index: 2; inset: 0 0 auto; display: flex; align-items: center; gap: 0.5rem; padding: 2.7rem 0.9rem 0.6rem; background: rgb(255 255 255 / 0.94); border-bottom: 1px solid #e7e3dc; font-size: 0.85rem; color: #111; }
.phone__dots { margin-left: auto; letter-spacing: 0.1em; }
.phone__avatar { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #fff 0 22%, var(--red) 23% 100%); flex: none; }
.phone__feed { position: absolute; inset: 0; padding-top: 5.2rem; will-change: transform; transition: transform 0.12s linear; }
.post { border-bottom: 1px solid #ece8e1; padding-bottom: 0.5rem; background: #fff; }
.post__head { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; font-size: 0.78rem; color: #111; }
.post img { display: block; width: 100%; height: auto; }
.post__foot { display: flex; gap: 0.9rem; padding: 0.5rem 0.8rem 0.2rem; font-size: 1.05rem; color: #111; }
@media (max-width: 52rem) {
  .pfeed { grid-template-columns: 1fr; }
  .pfeed__stick { position: static; order: -1; }
  .phone__feed { overflow-y: auto; transition: none; overscroll-behavior: contain; }
  .pfeed__steps { display: none; }
}

/* =====================================================================
   04 Projector theater (lights down, simple slide changes)
   ===================================================================== */
.block--projector { padding: 0 !important; background: #050505 !important; }
.org-page .block--projector > .wrap, .case .block--projector > .wrap { max-width: none; width: 100%; padding-inline: 0; margin: 0; }
.proj { height: calc(var(--n) * 60vh + 50vh); position: relative; background: #050505; color: #EDE6D8; }
.proj__stick { position: sticky; top: calc(var(--header-h, 4rem) + 3.6rem); height: calc(100vh - var(--header-h, 4rem) - 3.6rem); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem var(--gap); }
.proj__beam { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 45% at 50% 46%, rgb(255 244 214 / 0.08), transparent 70%); }
.proj__screen { position: relative; width: min(100%, 72rem, calc((100vh - var(--header-h, 4rem) - 12rem) * 16 / 9)); aspect-ratio: 16 / 9; background: #0B0B0B; box-shadow: 0 0 90px 10px rgb(255 240 200 / 0.08); }
.proj__slide { position: absolute; inset: 0; padding: 0; border: 0; background: #0B0B0B; cursor: zoom-in; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.proj__slide.is-on { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.proj__slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.proj__hud { position: relative; width: min(100%, 72rem); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.25rem; }
.proj__label { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; font-size: clamp(1.1rem, 2.2vw, 1.6rem); color: #EDE6D8; }
.proj__count { font: 800 1.05rem/1 var(--font-head); color: #8f897c; font-variant-numeric: tabular-nums; }
.proj__bar { position: relative; width: min(100%, 72rem); height: 3px; margin-top: 0.7rem; background: rgb(255 255 255 / 0.12); overflow: hidden; }
.proj__bar span { display: block; height: 100%; width: 100%; background: #EDE6D8; transform-origin: left; transform: scaleX(0); }
body.is-theater .site-header, body.is-theater .chapters { background: #050505 !important; border-color: #111 !important; }
body.is-theater .chapters a:not(.is-current) { background: #151515; color: #8f897c; }
.site-header, .chapters { transition: background-color 0.4s ease; }

/* =====================================================================
   05 Poster wall
   ===================================================================== */
.pwall__wall { position: relative; height: clamp(26rem, 58vw, 42rem); border-radius: 14px; overflow: hidden;
  background-color: #CFC6B8;
  background-image: linear-gradient(0deg, rgb(0 0 0 / 0.07) 1px, transparent 1px), linear-gradient(90deg, rgb(0 0 0 / 0.07) 1px, transparent 1px), radial-gradient(circle at 20% 30%, rgb(255 255 255 / 0.25), transparent 60%);
  background-size: 100% 2.4rem, 4.8rem 100%, 100% 100%;
  box-shadow: inset 0 0 60px rgb(0 0 0 / 0.18); border: 3px solid var(--ink); }
.poster { position: absolute; left: var(--x); top: var(--y); width: clamp(6.5rem, 15vw, 11.5rem); padding: 0; border: 0; background: #fff; cursor: zoom-in;
  box-shadow: 0 10px 22px rgb(0 0 0 / 0.28); transform: rotate(var(--r)) scale(1.6) translateY(-40px); opacity: 0; pointer-events: none;
  transition: transform 0.38s cubic-bezier(.2, 1.4, .4, 1), opacity 0.2s ease; }
.poster.is-up { opacity: 1; transform: rotate(var(--r)); pointer-events: auto; }
.poster.is-up:hover { transform: rotate(0deg) scale(1.08); z-index: 50 !important; }
.poster img { display: block; width: 100%; height: auto; }
.poster__tape { position: absolute; top: -0.55rem; width: 2.6rem; height: 1.1rem; background: rgb(245 235 200 / 0.85); box-shadow: 0 1px 2px rgb(0 0 0 / 0.15); }
.poster__tape--l { left: -0.6rem; transform: rotate(-30deg); } .poster__tape--r { right: -0.6rem; transform: rotate(30deg); }
.pwall__empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 2rem; text-align: center; font-family: var(--font-head); font-weight: 800; text-transform: uppercase; font-size: clamp(1.2rem, 2.6vw, 1.8rem); color: rgb(0 0 0 / 0.45); }
.pwall__ctrl { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.pwall__tap { position: relative; overflow: hidden; width: clamp(9rem, 22vw, 12rem); aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--ink); background: var(--red); color: #fff; cursor: pointer; box-shadow: 0 10px 0 var(--ink); transition: transform 0.08s ease, box-shadow 0.08s ease; touch-action: manipulation; }
.pwall__tap:active { transform: translateY(8px); box-shadow: 0 2px 0 var(--ink); }
.pwall__word { position: relative; z-index: 1; font: 800 clamp(2.6rem, 6vw, 3.6rem)/1 var(--font-head); letter-spacing: 0.02em; }
.pwall__fill { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform 0.15s ease; opacity: 0.45; }
.pwall__tap.is-pulse .pwall__word { animation: tapPulse 0.25s ease; }
.pwall__tap.is-done { background: var(--ink); }
@keyframes tapPulse { 50% { transform: scale(1.15); } }
.pwall__step { width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 4px solid var(--ink); background: #fff; color: var(--ink); font-size: 1.15rem; cursor: pointer; box-shadow: 0 5px 0 var(--ink); }
.pwall__step:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.pwall__step:disabled { opacity: 0.35; cursor: not-allowed; }
.pwall__status { text-align: center; margin: 1rem 0 0; font-weight: 600; color: var(--text-soft); }
.pwall.is-shake .pwall__wall { animation: wallShake 0.35s ease; }
@keyframes wallShake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .poster, .proj__slide, .phone__feed { transition: none; } .pwall__tap.is-pulse .pwall__word, .pwall.is-shake .pwall__wall { animation: none; } }
.pwall__empty[hidden] { display: none; }
.pwall__tap { background: var(--ink); }
.pwall__fill { background: var(--red); opacity: 1; }
.pwall__tap.is-done { background: var(--red); }
.is-band .phone { box-shadow: 10px 10px 0 var(--ink), inset 0 0 0 2px #2a2725; }
.is-band .pwall__tap, .is-band .pwall__step { box-shadow: 0 8px 0 rgb(0 0 0 / 0.55); }
.is-band .proj__bar span { background: #fff; }
.is-band .proj__bar { background: rgb(0 0 0 / 0.25); }
.org-page .block--projector > .wrap, .case .block--projector > .wrap { max-width: none; width: 100%; padding-inline: 0; margin: 0; }
.proj__ring, .proj__sweep { width: auto; height: 82%; }

/* ---- Social: scroll from before to after ---- */
.swap { height: 170vh; position: relative; }
.swap + .swap { margin-top: -20vh; }
.swap__stick { position: sticky; top: calc(var(--header-h, 4rem) + 5rem); display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.swap__frame { position: relative; width: min(100%, 52rem, calc((100vh - var(--header-h, 4rem) - 13rem) * var(--ar))); aspect-ratio: var(--ar); border: 3px solid var(--ink); border-radius: var(--r-img); overflow: hidden; background: var(--ink); box-shadow: var(--hard); }
.swap__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.swap__after { opacity: 0; }
.swap__meter { display: flex; align-items: center; gap: 0.75rem; width: min(100%, 26rem); font: 700 0.8rem/1 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; }
.swap__track { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 18%, transparent); overflow: hidden; }
.swap__track span { display: block; height: 100%; background: var(--red); transform-origin: left; transform: scaleX(0); }
.is-band .swap__track span { background: var(--ink); }
.swap__lbl { opacity: 1; transition: opacity 0.2s; } .swap__lbl--after { opacity: 0.45; }
.swap.is-after .swap__lbl:not(.swap__lbl--after) { opacity: 0.45; } .swap.is-after .swap__lbl--after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .swap { height: auto; } .swap__stick { position: static; } .swap__after { opacity: 1; } }
.pwall__wall { height: clamp(30rem, 70vw, 52rem); }
.poster { width: clamp(5rem, 13vw, 10rem); }

/* ---- Illustrated campaigns: scratch-off tickets ---- */
.scratch__hint { margin: 0 0 1.25rem; color: var(--text-soft); }
.scratch__hint strong { color: var(--text); font-family: var(--font-head); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.scratch__row { list-style: none; margin: 0; padding: 0.5rem max(var(--gap), (100vw - var(--wrap)) / 2) 1.5rem; margin-inline: calc(-1 * max(var(--gap), (100vw - var(--wrap)) / 2)); display: grid; grid-auto-flow: column; grid-auto-columns: clamp(11rem, 20vw, 15rem); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
.ticket { position: relative; aspect-ratio: 4 / 5; scroll-snap-align: start; border-radius: 10px; overflow: hidden; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: #fff; }
.ticket__art { display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: zoom-in; background: #fff; }
.ticket__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ticket__foil { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; transition: opacity 0.4s ease; }
.ticket__foil:active { cursor: grabbing; }
.ticket.is-open .ticket__foil { opacity: 0; pointer-events: none; }
.ticket__no { position: absolute; left: 0.5rem; top: 0.45rem; z-index: 2; font: 800 0.72rem/1 var(--font-label); letter-spacing: 0.08em; background: var(--ink); color: #fff; padding: 0.25rem 0.4rem; border-radius: 4px; pointer-events: none; transition: opacity 0.3s; }
.ticket.is-open .ticket__no { opacity: 0; }
.scratch__actions { margin: 0.75rem 0 0; }
.is-band .ticket { box-shadow: 6px 6px 0 rgb(0 0 0 / 0.45); }
.lightbox { touch-action: pan-y; }
.lightbox img { user-select: none; -webkit-user-drag: none; }
.lightbox__count { opacity: 0.7; font-variant-numeric: tabular-nums; margin-left: 0.5rem; }
.lightbox.is-single :is(.lightbox__prev, .lightbox__next) { display: none; }
.block--narrow .gallery-row { max-width: 40rem; }

/* ---- Swipeable card decks (carousels) ---- */
.deckwrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.5rem clamp(2rem, 6vw, 5rem); align-items: center; }
.deckwrap__kicker { margin: 0 0 0.6rem; font: 700 0.8rem/1 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }
.deckwrap__text p:not(.deckwrap__kicker) { color: var(--text-soft); line-height: 1.65; max-width: 32rem; }
.deck { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; outline: none; padding: 1rem 2.5rem 0 0; }
.deck:focus-visible .deck__card.is-top { outline: 3px solid var(--red); outline-offset: 4px; }
.deck__stack { position: relative; width: min(100%, 24rem); aspect-ratio: var(--ar); }
.deck__card { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; background: #fff; border: 3px solid var(--ink); box-shadow: 0 14px 30px rgb(0 0 0 / 0.22);
  transition: transform 0.38s cubic-bezier(.3, .7, .4, 1), opacity 0.3s; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; will-change: transform; }
.deck__card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.deck.is-dragging .deck__card.is-top { cursor: grabbing; box-shadow: calc(var(--tilt, 0) * -18px) 24px 40px rgb(0 0 0 / 0.32); }
.deck__ctrl { display: flex; align-items: center; gap: 1rem; }
.deck__btn { width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 3px solid var(--ink); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 0 var(--ink); }
.deck__btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.deck__btn svg { width: 1.2rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.deck__dots { display: flex; gap: 0.45rem; }
.deck__dots span { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 25%, transparent); transition: width 0.25s, background 0.25s; }
.deck__dots span.is-on { width: 1.6rem; background: var(--red); }
.deck__hint { margin: 0; font: 700 0.78rem/1 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
@media (max-width: 52rem) { .deckwrap { grid-template-columns: 1fr; } .deck { padding-right: 1.5rem; } .deck__stack { width: min(100%, 20rem); } }
@media (prefers-reduced-motion: reduce) { .deck__card { transition: none; } }
.block--deck { overflow-x: clip; } .deck__stack { touch-action: pan-y; }

/* ---- Carousel slides edge to edge ---- */
.seam { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: center; }
.seam--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.seam--flip .seam__row { order: -1; }
.seam__text p:not(.deckwrap__kicker) { color: var(--text-soft); line-height: 1.65; max-width: 32rem; }
.seam__row { display: flex; align-items: stretch; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); border-radius: 12px; overflow: hidden; background: var(--ink); }
.seam__slide { min-width: 0; padding: 0; border: 0; background: none; cursor: zoom-in; display: block; }
.seam__slide img { display: block; width: 100%; height: auto; transition: filter 0.2s; }
.seam__slide:hover img, .seam__slide:focus-visible img { filter: brightness(1.06); }
@media (max-width: 52rem) { .seam, .seam--flip { grid-template-columns: 1fr; } .seam--flip .seam__row { order: 0; } }
.block--split .split__media .shot__btn:has(img[src*="student-id"]) { background: #e9eaec; }

/* ---- Light page-through book ---- */
.book { margin-top: 1.5rem; outline: none; }
.book__stage { position: relative; aspect-ratio: 1600 / 1035; max-width: 60rem; margin-inline: auto; touch-action: pan-y; }
.book__page { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0s linear 0.22s; }
.book__page.is-on { opacity: 1; visibility: visible; transition: opacity 0.22s ease; }
.book__img { padding: 0; border: 0; background: none; cursor: zoom-in; height: 100%; max-width: 100%; display: block; }
.book__img img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; box-shadow: 0 10px 30px rgb(0 0 0 / 0.18); border: 1px solid color-mix(in srgb, var(--text) 15%, transparent); background: #fff; }
.book__bar { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.25rem; }
.book__cap { margin: 0; min-width: 16rem; text-align: center; font-weight: 600; }
.book__num { color: var(--text-soft); font-variant-numeric: tabular-nums; margin-left: 0.4rem; }
.deck__btn:disabled { opacity: 0.35; cursor: default; }
.book:focus-visible .book__stage { outline: 3px solid var(--red); outline-offset: 6px; }
.is-band .book__img img { border-color: rgb(0 0 0 / 0.3); }
@media (prefers-reduced-motion: reduce) { .book__page { transition: none; } }
.book__page { display: flex; align-items: center; justify-content: center; }
.book__img { height: 100%; width: auto; max-width: 100%; }
.book__img img { height: 100%; width: auto; max-height: 100%; }
.book__stage { max-height: 70vh; width: min(100%, 60rem, calc(70vh * 1600 / 1035)); }

/* TDEM page: photos without captions */
.org-tdem .shot figcaption, .org-tdem .region__label { display: none; }

/* Two projects side by side */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.duo__item .prose { margin-bottom: 1.5rem; }
@media (max-width: 52rem) { .duo { grid-template-columns: 1fr; } }
.h1-line { display: block; }
.block--artgrid .block__heading { margin-bottom: 2.25rem; position: relative; z-index: 3; }

/* Flippable print pieces, side by side at equal height */
.pflips { display: flex; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: flex-start; }
.pflip { margin: 0; min-width: 0; }
.pflip__stage { perspective: 1600px; width: 100%; }
.pflip__card { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 2px solid var(--line, var(--ink)); border-radius: 6px; background: #fff; cursor: pointer; box-shadow: var(--hard, 6px 6px 0 var(--ink)); transform-style: preserve-3d; overflow: hidden; }
.pflip__page { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.pflip__page.is-on { opacity: 1; }
.pflip__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 0.18), transparent 35%, transparent 65%, rgb(255 255 255 / 0.18)); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.pflip__card.is-turning::after { opacity: 1; }
.pflip__card:hover { transform: translateY(-3px); transition: transform 0.2s ease; }
.pflip__bar { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1rem; font-family: var(--font-head); font-weight: 700; }
.pflip__nav { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 999px; border: 2px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.pflip__nav svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pflip__nav:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.pflip__count { min-width: 3.5rem; text-align: center; letter-spacing: 0.04em; }
.pflip__label { margin: 0.35rem 0 0; text-align: center; font-family: var(--font-head); font-weight: 600; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.85; }
@media (max-width: 52rem) { .pflips { flex-direction: column; align-items: center; } .pflip { flex: none !important; width: min(100%, 26rem); } }

/* Event photo collage: justified rows, every photo keeps its own shape, order shuffled on load */
.mosaic__head { margin-bottom: 1.75rem; }
.mosaic__head .block__heading { margin: 0; }
.mosaic { --row: clamp(10rem, 19vw, 17rem); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mosaic::after { content: ""; flex: 999 1 0; }
.mosaic.is-justified::after { display: none; }
.mosaic.is-justified .mosaic__cell { flex: var(--r) 1 0; }
.mosaic__break { flex-basis: 100%; height: 0; margin: 0; padding: 0; list-style: none; }
.mosaic__cell { position: relative; min-width: 0; flex: var(--r) 1 calc(var(--row) * var(--r)); opacity: 0; transform: translateY(1.25rem) scale(0.92) rotate(var(--tilt, 0deg)); transition: opacity 0.45s ease, transform 0.6s cubic-bezier(.2,.9,.3,1.3); transition-delay: calc(var(--k, 0) * 55ms); }
.mosaic.is-in .mosaic__cell { opacity: 1; transform: none; }
.mosaic__btn { display: block; width: 100%; aspect-ratio: var(--r); padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: zoom-in; background: #222; }
.mosaic__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease, filter 0.3s ease; }
.mosaic:hover .mosaic__btn img { filter: brightness(0.6) saturate(0.8); }
.mosaic .mosaic__btn:hover img, .mosaic .mosaic__btn:focus-visible img { filter: none; transform: scale(1.06); }
.mosaic__cell:hover { z-index: 2; }
@media (max-width: 40rem) { .mosaic { --row: 8rem; } }
@media (prefers-reduced-motion: reduce) { .mosaic__cell { transition: none; opacity: 1; transform: none; } }

/* Subtitle-sized block heading (e.g. Headshots under Event photography) */
.block--sub .block__heading { font-size: var(--step-2); }
.block--t-black.block--sub { padding-top: clamp(1.5rem, 4vw, 3rem); }

/* Theme toggle with a text label */
.theme-toggle { width: auto; padding: 0 0.85rem 0 0.7rem; gap: 0.45rem; grid-auto-flow: column; }
.theme-toggle__text { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
@media (max-width: 30rem) { .theme-toggle__text { display: none; } .theme-toggle { padding: 0; width: 2.75rem; } }
.mosaic.is-justified { row-gap: 0; }
.mosaic.is-justified .mosaic__cell { margin-bottom: 0.6rem; }

/* Before and after: equal-height pairs, clean labels */
.ba { display: grid; gap: clamp(3rem, 7vw, 5.5rem); }
.ba__row { max-width: 54rem; margin-inline: auto; width: 100%; }
.ba__row--wide { max-width: none; }
.ba__label { margin: 0 0 1rem; font-family: var(--font-head); font-weight: 800; font-size: var(--step-1); text-transform: uppercase; letter-spacing: 0.06em; }
.ba__pair { display: flex; gap: clamp(1rem, 2.5vw, 2rem); align-items: flex-start; }
.ba__side { position: relative; min-width: 0; }
.ba__side .shot { margin: 0; }
.ba__side img, .ba__side video { display: block; width: 100%; height: auto; border-radius: 8px; }
.ba__side--before img { filter: saturate(0.85); }
.ba__tag { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; padding: 0.3rem 0.8rem 0.35rem; border-radius: 999px; font-family: var(--font-head); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; }
.ba__side--before .ba__tag { background: #fff; color: var(--ink); border: 2px solid var(--ink); }
.ba__side--after .ba__tag { background: var(--red); color: #fff; border: 2px solid var(--red); }
@media (max-width: 40rem) { .ba__pair { flex-direction: column; } .ba__side { flex: none !important; width: 100%; } }
.block--t-white .ba__label { color: #141110; }
[data-theme="dark"] .block--t-white .ba__label { color: #EEF2F7; }