/* Shared styles for Studio mockup */

:root {
  --ink: #0a0a0a;
  --ink-2: #2b2b2b;
  --muted: #6a6a6a;
  --line: #e6e6e6;
  --bg: #fafaf8;
  --paper: #ffffff;
  --accent: #003F2D;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.display { font-family: 'Fraunces', Georgia, serif; }
img {
  display: block;
  max-width: 100%;
  height: auto;
  background: #ececea;
  color: #c4c4be;
  font-size: 11px;
  text-align: center;
}
a { color: inherit; }

/* Top bar */
.topbar {
  border-bottom: 1px solid var(--line);
  background: rgba(250, 250, 248, 0.92);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  /* Fixed height, horizontal padding only. Deriving the band from vertical
     padding + content made the header depend on inherited text metrics, so
     pages that don't inherit body's line-height measured a couple of px
     shorter. 64px = the old 18+28+18; 60px mobile = 14+32(burger)+14. */
  height: 64px;
  padding: 0 48px;
}
@media (max-width: 768px) { .topbar .inner { height: 60px; padding: 0 24px; } }
.mark {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}
.mark span { color: var(--accent); }

/* Brand lockup — CREATE studio / from CBRE.
   Transparent PNGs, swapped by CSS: dark artwork on light chrome, white on dark.
   background:transparent is required — the global img rule above paints a
   #ececea placeholder plate that would show through the logo's transparency. */
.mark {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.mark img {
  display: block;
  height: 34px;
  width: auto;
  background: transparent;
}
/* The img.<class> qualifier keeps these state rules ahead of any
   `.topbar .mark img { display: block }` a page-level style might add —
   without it both logos render side by side. */
.mark img.mark-logo-light { display: none; }
.topbar.on-dark .mark img.mark-logo-dark { display: none; }
.topbar.on-dark .mark img.mark-logo-light { display: block; }
@media (max-width: 768px) { .mark img { height: 29px; } }
.topbar nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 11px;
  /* line-height:1 pins the nav line box so header height is set by the 28px
     logo alone — pages that don't inherit body's 1.65 line-height (the
     self-contained work/ case studies) then measure identically. */
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  position: relative;
  padding: 6px 0;
  transition: color 0.15s ease;
}
.topbar nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.topbar nav a:hover { color: var(--accent); }
.topbar nav a:hover::after,
.topbar nav a.active::after { transform: scaleX(1); }
.topbar nav a.active { color: var(--accent); }
@media (max-width: 900px) {
  .topbar nav { display: none; }
}

/* Burger button — mobile only */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--ink);
}
@media (max-width: 900px) {
  .burger { display: flex; }
}

/* Mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  display: flex;
  flex-direction: column;
}
.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.mobile-menu nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
  padding: 48px 32px;
}
.mobile-menu nav a {
  font-family: 'Fraunces', serif;
  font-size: clamp(32px, 8vw, 48px);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
  line-height: 1.1;
  transition: color 0.15s ease;
}
.mobile-menu nav a:hover { color: var(--accent); }
.mobile-menu nav a.active { color: var(--accent); }
.menu-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  padding: 0;
}
.menu-close::before,
.menu-close::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 24px;
  height: 1.5px;
  background: var(--ink);
}
.menu-close::before { transform: rotate(45deg); }
.menu-close::after { transform: rotate(-45deg); }

body.menu-open { overflow: hidden; }

/* ============================================================
   INSIGHTS SECTION DROPDOWN
   Lives here rather than in insights.html so the same menu can
   hang off the Insights link in every page's header.
   ============================================================ */


/* Container */
.shell { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.shell-tight { max-width: 1080px; margin: 0 auto; padding: 0 48px; }
.shell-text { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
/* The reading column keeps its 664px measure but is left-aligned on the site
   grid, so long-form copy starts on the same axis as the logo. */
.shell-text > * { max-width: 664px; }
@media (max-width: 768px) {
  .shell, .shell-tight, .shell-text { padding: 0 24px; }
}

/* Typography */
h1.display {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.04;
}
h2.display {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
h3.display {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 500;
}
.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 300;
  max-width: 700px;
}
.body-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  font-weight: 400;
}
.body-text p + p { margin-top: 18px; }
.muted {
  color: var(--muted);
  font-size: 13px;
}

/* Hero carousel — auto-fading images with dimmed overlay and white text */
.hero-carousel {
  position: relative;
  width: 100%;
  height: 85vh;
  min-height: 600px;
  max-height: 900px;
  overflow: hidden;
  background: #0a0a0a;
}
@media (max-width: 768px) {
  .hero-carousel { height: 78vh; min-height: 520px; }
}
.hc-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hc-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.8s ease;
}
.hc-slide.active { opacity: 1; }
.hc-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0a0a0a;
}
.hc-dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.7) 100%);
  z-index: 1;
  pointer-events: none;
}
.hc-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  color: #ffffff;
}
.hc-content .eyebrow {
  color: rgba(255,255,255,0.78);
  margin-bottom: 32px;
  display: block;
}
.hc-content h1.display { color: #ffffff; }
.hc-content .lede {
  color: rgba(255,255,255,0.9);
  margin-top: 32px;
  max-width: 640px;
}

/* Hero */
.hero-full {
  width: 100%;
  height: 78vh;
  min-height: 480px;
  max-height: 800px;
  object-fit: cover;
}
.hero-half {
  width: 100%;
  height: 56vh;
  min-height: 360px;
  max-height: 600px;
  object-fit: cover;
}

/* Sections */
.block { padding: 96px 0; }
.block-sm { padding: 64px 0; }
.divider { border-top: 1px solid var(--line); }

/* Footer — a black band closing every page. No border-top and no margin-top:
   the band itself is the divider, and a gap above it would read as a stripe
   of --bg trapped between the content and the footer. */
footer {
  background: var(--ink);
  padding: 64px 0;
}
footer .finner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  justify-content: space-between;
  /* center, not end: the back button is the taller item (border + 10px padding),
     so bottom-aligning to it pushed the brand lockup below the optical middle
     of the band. Centring keeps the lockup centred in the footer whether or not
     the page carries a back link. */
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 12px;
  color: #fff;
}
@media (max-width: 768px) { footer .finner { padding: 0 24px; } }
footer .cbre { text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; color: #fff; }
/* --accent (#003F2D) is invisible on black; #17E88F is the site's on-dark
   accent, used the same way in the hero and the dark topbar. */
footer .cbre strong { color: #17E88F; font-weight: 600; }

/* Footer brand lockup — the CREATE.Studio wordmark with the CBRE attribution
   set beside it. The wordmark file is white-on-transparent, so it needs the
   black band behind it; the SVG is sized by height only (width:auto) so the
   ~8.6:1 artwork never distorts.

   align-items:baseline puts the logotype and the attribution on one shared
   bottom line. A replaced element takes its bottom margin edge as its baseline,
   and the artwork's cap bottoms sit within 0.2px of the file's bottom edge at
   this size, so the img's bottom edge IS the logotype's baseline — the caps of
   "POWERED BY CBRE" then land on exactly that line. Do not swap this for
   flex-end: that aligns the text's box bottom, which carries the line-height's
   descender space, and would float the caps above the logotype. */
footer .fbrand {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
footer .fbrand-mark {
  display: block;
  /* 22px keeps the hairline "studio" strokes from going wispy against the
     11px caps of the attribution beside it. */
  height: 22px;
  width: auto;
  /* The global `img` rule paints a #ececea placeholder plate (it styles broken
     images), which shows as a light bar behind this transparent white-on-nothing
     SVG on the black band — the same trap as .hero-mark. */
  background: transparent;
}
footer .fbrand-by {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  /* line-height:1 keeps the span's own box tight so the baseline is the only
     thing positioning it — no inherited 1.65 leading to reason about. */
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
footer .fbrand-by strong { color: #17E88F; font-weight: 600; }
@media (max-width: 480px) {
  footer .fbrand { gap: 10px; }
  footer .fbrand-mark { height: 18px; }
}
footer .back {
  text-decoration: none;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: 1px solid rgba(255,255,255,0.28);
  padding: 10px 16px;
  background: transparent;
  transition: all 0.15s ease;
}
footer .back:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* Project tiles */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tiles { grid-template-columns: 1fr; } }
.tile {
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.tile .img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 16px;
  transition: opacity 0.2s ease;
}
.tile:hover .img { opacity: 0.85; }
.tile .meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 6px;
}
.tile .title {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Full-bleed carousel */
.carousel-wrap {
  position: relative;
  width: 100%;
}
.carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0 48px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.carousel::-webkit-scrollbar { height: 4px; }
.carousel::-webkit-scrollbar-track { background: transparent; }
.carousel::-webkit-scrollbar-thumb { background: var(--line); }
@media (max-width: 768px) { .carousel { padding: 0 24px 8px; } }
.carousel-slide {
  flex: 0 0 68%;
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--ink);
  display: block;
  position: relative;
}
@media (max-width: 1100px) { .carousel-slide { flex-basis: 80%; } }
@media (max-width: 700px)  { .carousel-slide { flex-basis: 92%; } }
.carousel-slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 16px;
  transition: opacity 0.2s ease;
}
.carousel-slide:hover img { opacity: 0.9; }
.carousel-slide .meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 6px;
}
.carousel-slide .title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.carousel-hint {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-align: right;
  margin-top: 12px;
  padding: 0 48px;
}
@media (max-width: 768px) { .carousel-hint { padding: 0 24px; } }

/* Masonry grid with overlay */
.masonry {
  column-count: 3;
  column-gap: 16px;
  transition: opacity 0.2s ease;
}
@media (max-width: 900px) { .masonry { column-count: 2; } }
@media (max-width: 560px) { .masonry { column-count: 1; } }
.masonry .m-tile {
  break-inside: avoid;
  margin-bottom: 16px;
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--paper);
}
.masonry .m-tile img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}
/* Statement blocks sitting between the tiles — text only, not clickable.
   They flow in the same column stream, so they break up the wall of images.
   The words live in an inner <span>: flex would otherwise blockify "we",
   "create" and the rest into three separate items and eat the spaces. */
.masonry .m-say {
  break-inside: avoid;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  background: var(--paper);
  padding: 38px 32px;
  min-height: 160px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 25px;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.masonry .m-say span { display: block; }
.masonry .m-say b { font-weight: 700; }
@media (max-width: 900px) { .masonry .m-say { font-size: 23px; } }
@media (max-width: 560px) {
  .masonry .m-say { font-size: 21px; padding: 28px 24px; min-height: 0; }
}
.masonry .m-tile:hover img { transform: scale(1.03); }
.masonry .m-tile .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0.75) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  pointer-events: none;
}
.masonry .m-tile .o-meta {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.75);
  margin-bottom: 6px;
}
.masonry .m-tile .o-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 500;
}
@media (max-width: 560px) {
  .masonry .m-tile .o-title { font-size: 19px; }
}

/* V2 look — 80% black veil that lifts on hover; company name in accent green */
.masonry .m-tile img { position: relative; z-index: 0; }
.masonry .m-tile .veil {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.6;
  transition: opacity 0.45s ease;
  z-index: 1;
  pointer-events: none;
}
.masonry .m-tile:hover .veil { opacity: 0; }
/* keep text above the veil, and soften the gradient while veiled, restore on hover */
.masonry .m-tile .overlay {
  z-index: 2;
  transition: background 0.45s ease;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.25) 100%);
}
.masonry .m-tile:hover .overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0.75) 100%);
}
.masonry .m-tile .o-meta .co { color: #17E88F; }

/* Coming-soon tiles — portfolio projects without a case study yet */
.masonry .m-tile.coming { background: #12241d; cursor: default; aspect-ratio: 4 / 3; }
.masonry .m-tile.coming.ar-3-4 { aspect-ratio: 3 / 4; }
.masonry .m-tile.coming.ar-4-5 { aspect-ratio: 4 / 5; }
.masonry .m-tile.coming .overlay {
  background: linear-gradient(180deg, rgba(0,63,45,0.20) 0%, rgba(0,63,45,0.68) 100%);
}
.masonry .m-tile.coming .o-meta { color: rgba(255,255,255,0.7); }
.masonry .m-tile.coming .o-title { color: #ffffff; }
.masonry .m-tile.coming .soon-badge {
  position: absolute; top: 16px; left: 16px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  color: #04150f; background: #17E88F; padding: 4px 10px; border-radius: 999px;
}
.filter-hint { font-size: 12px; color: #8a8a86; margin: 14px 0 0; }

/* Stacked single-column editorial gallery */
.stack-gallery {
  display: flex;
  flex-direction: column;
  gap: 96px;
  transition: opacity 0.2s ease;
}
@media (max-width: 768px) { .stack-gallery { gap: 56px; } }
.stack-tile {
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.stack-tile img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: opacity 0.3s ease;
  display: block;
}
.stack-tile:hover img { opacity: 0.92; }
.stack-tile .caption {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  margin-top: 24px;
  align-items: baseline;
}
.stack-tile .s-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.stack-tile .s-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.stack-tile .s-meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.stack-tile .s-view {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}
@media (max-width: 600px) {
  .stack-tile .caption { grid-template-columns: 1fr; gap: 8px; }
  .stack-tile .s-meta { text-align: left; }
}

/* Aspect ratios for masonry variety */
.ar-3-4 img { aspect-ratio: 3 / 4; object-fit: cover; }
.ar-4-3 img { aspect-ratio: 4 / 3; object-fit: cover; }
.ar-4-5 img { aspect-ratio: 4 / 5; object-fit: cover; }
.ar-1-1 img { aspect-ratio: 1 / 1; object-fit: cover; }
.ar-16-9 img { aspect-ratio: 16 / 9; object-fit: cover; }
.ar-2-3 img { aspect-ratio: 2 / 3; object-fit: cover; }

/* Two column */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 32px; } }

.two-col-narrow {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) { .two-col-narrow { grid-template-columns: 1fr; gap: 32px; } }

/* Wide image */
.wide-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Capability list */
.cap-list {
  list-style: none;
  border-top: 1px solid var(--line);
}
.cap-list li {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  display: grid;
  grid-template-columns: 60px 1fr 2fr;
  gap: 24px;
  font-size: 14px;
}
.cap-list li .n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  padding-top: 2px;
}
.cap-list li .t {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 500;
}
.cap-list li .d { color: var(--muted); }
@media (max-width: 768px) {
  .cap-list li { grid-template-columns: 40px 1fr; }
  .cap-list li .d { grid-column: 1 / -1; }
}

/* Filters */
.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 48px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.filter-bar .chip {
  padding: 8px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  cursor: pointer;
}
.filter-bar .chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Client search (Work) */
.client-search { position: relative; max-width: 380px; margin: 40px 0 0; }
.client-search .cs-field { position: relative; display: flex; align-items: center; }
.client-search input {
  width: 100%;
  padding: 12px 38px 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.client-search input:focus { outline: none; border-color: var(--ink); }
.client-search input::placeholder { color: var(--muted); }
.client-search .cs-clear {
  position: absolute;
  right: 6px;
  width: 26px;
  height: 26px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: none;
}
.client-search.has-value .cs-clear { display: block; }
.client-search .cs-clear:hover { color: var(--ink); }
.client-search ul {
  position: absolute;
  z-index: 30;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  max-height: 280px;
  overflow-y: auto;
  display: none;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}
.client-search.open ul { display: block; }
.client-search li {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.client-search li + li { border-top: 1px solid var(--line); }
.client-search li:hover,
.client-search li.hl { background: #f3f3f1; }
.client-search li mark { background: none; color: #17E88F; font-weight: 500; }
.client-search li .cs-year { font-size: 11px; color: var(--muted); white-space: nowrap; }
.client-search li.cs-empty { color: var(--muted); cursor: default; }
.client-search li.cs-empty:hover { background: none; }
.no-results { font-size: 13px; color: var(--muted); padding: 24px 0 48px; display: none; }

/* Form */
form.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
form.contact-form label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 6px;
  display: block;
}
form.contact-form input,
form.contact-form textarea,
form.contact-form select {
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease;
}
form.contact-form input:focus,
form.contact-form textarea:focus { border-bottom-color: var(--ink); }
form.contact-form textarea { resize: vertical; min-height: 120px; }
form.contact-form button {
  align-self: flex-start;
  padding: 14px 28px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  margin-top: 16px;
}

/* Data (insights only) */
.data-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 768px) { .data-grid { grid-template-columns: repeat(2, 1fr); } }
.data-cell {
  background: var(--paper);
  padding: 32px;
  transition: background 0.2s ease;
}
.data-cell .num {
  font-family: 'Fraunces', serif;
  font-size: 48px;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 12px;
  font-weight: 400;
  transition: color 0.2s ease;
}
.data-cell .lbl {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.data-cell.hover-able { cursor: pointer; }
.data-cell.hover-able:hover { background: var(--bg); }
.data-cell.hover-able:hover .num { color: #17E88F; }

/* Black manifesto hero — always full screen on every device */
.hero-manifesto {
  background: #0a0a0a;
  color: #ffffff;
  position: relative;
  min-height: 100vh;
  /* Use small-viewport unit on mobile so URL bar doesn't crop the section */
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 88px 0 64px; /* top space accommodates the sticky topbar */
}
.hero-manifesto .shell-wide {
  /* 1280px = .topbar .inner, so the manifesto starts on the logo's axis */
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
}
@media (max-width: 768px) {
  .hero-manifesto { padding: 96px 0 48px; }
  .hero-manifesto .shell-wide { padding: 0 24px; }
}
.hero-manifesto h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(34px, 5.6vw, 84px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  max-width: 1300px;
  color: #ffffff;
}
.hero-manifesto h1 .soft { color: #17E88F; }

/* Hero wordmark — replaces the literal "CREATE.Studio" on line 1.
   SVG, so it stays crisp at any size. Sized in em so it tracks the h1
   clamp automatically at every breakpoint:
     height 0.745em  -> wordmark cap height == Inter's cap height at this size
     margin-bottom   -> keeps the 1.05 line-height rhythm, plus a little air */
.hero-manifesto h1 .hero-mark {
  display: block;
  /* MUST come before the em height: the global `img` rule sets font-size:11px
     (it styles broken-image alt text), and an em on the img would resolve
     against that 11px instead of the h1's clamp — rendering the logo ~8px tall. */
  font-size: inherit;
  width: auto;
  height: 0.745em;
  max-width: 100%;
  margin: 0 0 0.18em;
  /* the same global rule paints a #ececea placeholder plate, which shows as a
     light bar behind a transparent SVG on the black hero. */
  background: transparent;
}
.hero-manifesto .eyebrow {
  color: rgba(255,255,255,0.6);
  margin-bottom: 32px;
}

/* Inline CTA link with green hover */
a.cta-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.15s ease;
}
a.cta-link:hover { color: #17E88F; }

/* Trusted by — testimonials + client logos */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 80px;
}
@media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr; gap: 24px; } }
.testimonial {
  padding: 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.testimonial .quote {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 24px;
  flex: 1;
}
.testimonial .quote::before {
  content: "“";
  font-size: 32px;
  line-height: 0;
  vertical-align: -0.18em;
  margin-right: 4px;
  color: var(--accent);
}
.testimonial .attrib {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.testimonial .attrib strong {
  display: block;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}

.client-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 900px) { .client-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .client-row { grid-template-columns: repeat(2, 1fr); } }
.client-cell {
  background: var(--paper);
  padding: 28px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  text-align: center;
  min-height: 96px;
  transition: color 0.15s ease, background 0.15s ease;
}
.client-cell:hover { color: #17E88F; background: var(--bg); }

/* Article list */
.article-list {
  display: flex;
  flex-direction: column;
}
.article-list a {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  align-items: start;
}
.article-list a:last-of-type { border-bottom: 1px solid var(--line); }
.article-list a:hover .a-title { color: var(--accent); }
.article-list .a-meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.article-list .a-title {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  transition: color 0.15s ease;
}
.article-list .a-snippet {
  font-size: 14px;
  color: var(--muted);
  max-width: 540px;
}
@media (max-width: 768px) {
  .article-list a { grid-template-columns: 1fr; gap: 8px; }
}

/* Team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
@media (max-width: 1000px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
.team-grid .member img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(1);
  margin-bottom: 12px;
}
.team-grid .member .name {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 500;
}
.team-grid .member .role {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Method steps */
.method {
  display: flex;
  flex-direction: column;
}
.method-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding: 64px 0;
  border-top: 1px solid var(--line);
  align-items: center;
}
.method-step:last-child { border-bottom: 1px solid var(--line); }
.method-step:nth-child(even) .ms-text { order: 2; }
.method-step .ms-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  margin-bottom: 16px;
  letter-spacing: 0.14em;
}
.method-step .ms-title {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.method-step img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (max-width: 900px) {
  .method-step { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .method-step:nth-child(even) .ms-text { order: 0; }
}

/* Project facts */
.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.facts .f {
  background: var(--paper);
  padding: 20px;
}
.facts .f .k {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 6px;
}
.facts .f .v { font-size: 14px; }

/* Project body sections */
.proj-section {
  padding: 80px 0;
  border-top: 1px solid var(--line);
}
.proj-section h2 {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 32px;
}
.proj-section p { margin-bottom: 18px; }

/* Quote */
.pullquote {
  font-family: 'Fraunces', serif;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 880px;
  margin: 0 auto;
  padding: 80px 0;
  text-align: center;
}
.pullquote cite {
  display: block;
  margin-top: 28px;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
}

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr; } }
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.gallery .stack { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; }

/* Site-wide vertical scroll-snap was removed on purpose.
   'proximity' snapping tugged the viewport whenever a visitor settled near a
   section edge, which read as the page fighting the trackpad — and any section
   taller than the viewport (the Work masonry, long service panels) could not be
   read without being pulled back. Scrolling is now native and free; pages that
   genuinely want full-screen panels declare scroll-snap in their own <style>.
   scroll-margin-top keeps in-page anchor links clear of the sticky topbar. */
section { scroll-margin-top: 72px; }
.panel { scroll-margin-top: 0; }

/* ===========================================================================
   SCROLL EXPERIENCE — shared with scripts/scroll-experience.js
   The hero is the only full-screen panel; the first scroll intent glides once
   to the section below, and everything after that is native scrolling.
   =========================================================================== */

/* The bar rides the black hero, then fades to paper mode past it. The class is
   applied by scroll-experience.js, so its look lives here rather than being
   re-declared per page. */
.topbar { transition: background .5s ease, border-color .5s ease; }
.topbar nav a, .topbar .burger span { transition: color .5s ease, background .5s ease; }
.topbar.on-dark { background: rgba(10,10,10,0.92); border-bottom: 1px solid #1c1c1c; }
.topbar.on-dark nav a { color: rgba(255,255,255,0.65); }
.topbar.on-dark nav a:hover,
.topbar.on-dark nav a.active { color: #17E88F; }
.topbar.on-dark nav a::after { background: #17E88F; }
.topbar.on-dark .burger span { background: #ffffff; }
/* The dropdown panel is always a white card, so it must NOT take the on-dark
   and was painting the panel's labels white on white, readable only on hover.
   Re-assert the panel's own palette at matching specificity. */

/* Scroll cue at the foot of a dark hero — a real button, for people who click.
   Its hero needs position:relative, which the hero rules already set. */
.scroll-cue {
  position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  transition: color .3s ease, opacity .5s ease, transform .5s ease, visibility .5s ease;
}
.scroll-cue:hover { color: #17E88F; }
.scroll-cue:focus-visible { outline: 1px solid #17E88F; outline-offset: 8px; }
.scroll-cue .cue-line {
  width: 1px; height: 46px; position: relative; overflow: hidden;
  background: rgba(255,255,255,0.14);
}
.scroll-cue .cue-line::after {
  content: ''; position: absolute; left: 0; right: 0; height: 100%;
  background: #17E88F; transform: translateY(-101%);
  animation: cueRun 2.6s cubic-bezier(.65,.05,.36,1) infinite;
}
@keyframes cueRun {
  0%        { transform: translateY(-101%); }
  60%, 100% { transform: translateY(101%); }
}
/* Once the visitor has left the hero the cue has said its piece. visibility,
   not just opacity: an invisible button must not stay focusable. */
body.past-hero .scroll-cue,
body.handed-off .scroll-cue {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(12px);
}

/* Reveal on entry — content arriving is what carries the seam between
   sections, now that nothing snaps. */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue .cue-line::after { animation: none; transform: translateY(0); opacity: .5; }
  .scroll-cue { transition: color .3s ease; }
  body.past-hero .scroll-cue,
  body.handed-off .scroll-cue { transform: translateX(-50%); }
}


/* ============================================================
   RESEARCH ARTICLES — shared kit
   Used by the insight-*.html pages and the Insights research
   library. Deliberately dependency-free: every chart below is
   plain CSS or inline SVG so the pages stay fast and work with
   no network beyond the webfonts.
   ============================================================ */

:root { --spark: #17E88F; }

/* ---- Article shell ---- */
/* Section heading block. The Insights page carries an identical rule in its own
   <style>; this copy is what the standalone article pages use. */
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head .eyebrow { display: block; margin-bottom: 20px; }
.section-head h2 { margin-bottom: 20px; }

/* ------------------------------------------------------------------
   Article hero
   The photograph the article's tile in the Research Library carries,
   reused full-width at the head of the piece so arriving feels like
   continuing rather than starting again. Each page passes its own
   image in as --shot; everything else is shared.

   Shorter than the site's full-screen panels (64vh) because a reader
   who has clicked a headline wants the first paragraph, not another
   poster. Photography is grayscale, as everywhere else on the site,
   and the veil is weighted to the bottom where the type sits.
   ------------------------------------------------------------------ */
.art-hero {
  position: relative; overflow: hidden;
  min-height: 64vh; min-height: 64svh;
  display: flex; align-items: flex-end;
  background: #0a0a0a; color: #fff;
  /* The article pages carry the ordinary sticky topbar, which is opaque and
     sits above this section in normal flow rather than over it — so this
     padding is breathing room for the type, not clearance for the bar. */
  padding: 92px 0 56px;
}
.art-hero .ah-bg {
  position: absolute; inset: 0;
  background-image: var(--shot);
  background-position: center; background-size: cover; background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.04);
}
.art-hero .ah-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.62) 0%, rgba(10,10,10,0.70) 42%, rgba(10,10,10,0.86) 100%);
}
.art-hero .shell-text { position: relative; z-index: 2; }
/* 0.82 rather than the 0.72 used on paper: at 11px this line needs 4.5:1,
   and over the veil 0.72 measured 4.49:1 on the lightest photograph. */
.art-hero .art-meta { color: rgba(255,255,255,0.82); }
.art-hero .art-meta .dot { color: rgba(255,255,255,0.34); }
.art-hero h1 { color: #fff; }
.art-hero .lede { color: rgba(255,255,255,0.84); }
@media (max-width: 768px) {
  .art-hero { min-height: 0; padding: 64px 0 44px; }
}

.art-meta {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 14px;
}
.art-meta .dot { color: var(--line); }
.art-body > p { margin-bottom: 20px; }
.art-body > p:last-child { margin-bottom: 0; }
.art-body h2 {
  font-family: 'Fraunces', serif; font-weight: 400; font-size: 28px;
  line-height: 1.2; letter-spacing: -0.01em;
  margin: 56px 0 18px; max-width: 664px;
}
.art-body h2:first-child { margin-top: 0; }
@media (max-width: 768px) { .art-body h2 { font-size: 23px; margin-top: 44px; } }

/* Pull-quote / single stat shout */
.shout {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 24px; margin: 36px 0;
  max-width: 664px;
}
.shout .shout-num {
  font-family: 'Fraunces', serif; font-size: 56px; line-height: 1;
  color: var(--accent); margin-bottom: 10px;
}
.shout .shout-txt { font-size: 15px; color: var(--ink-2); }
@media (max-width: 768px) { .shout .shout-num { font-size: 42px; } }

/* Takeaway box — "what this means" */
.take {
  border: 1px solid var(--line); background: var(--paper);
  padding: 32px; margin: 44px 0; max-width: 664px;
}
.take .take-hd {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--accent); margin-bottom: 16px;
}
.take ul { list-style: none; }
.take li {
  position: relative; padding-left: 22px; margin-bottom: 12px;
  font-size: 14px; line-height: 1.6;
}
.take li:last-child { margin-bottom: 0; }
.take li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; background: var(--spark);
}

/* ---- Chart frame ---- */
.chart {
  border: 1px solid var(--line); background: var(--paper);
  padding: 32px; margin: 44px 0;
}
@media (max-width: 768px) { .chart { padding: 22px 18px; } }
.chart .c-hd {
  font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500;
  line-height: 1.3; margin-bottom: 4px;
}
.chart .c-sub { font-size: 13px; color: var(--muted); margin-bottom: 28px; }
.chart .c-src {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); margin-top: 26px;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.chart .c-scroll { overflow-x: auto; }

/* Legend */
.c-legend {
  display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
}
.c-legend span { display: inline-flex; align-items: center; gap: 8px; }
.c-legend i { width: 11px; height: 11px; flex: 0 0 11px; }

/* ---- Horizontal bars ---- */
.hbar { display: grid; gap: 12px; }
.hbar .row {
  display: grid; grid-template-columns: 210px 1fr 46px;
  align-items: center; gap: 16px;
}
.hbar .row .k { font-size: 13px; line-height: 1.35; }
.hbar .row .t { height: 22px; background: var(--bg); position: relative; }
.hbar .row .t i { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.hbar .row.lite .t i { background: #9db3ab; }
.hbar .row .v {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; text-align: right; color: var(--ink);
}
@media (max-width: 700px) {
  .hbar .row { grid-template-columns: 1fr 44px; grid-template-areas: "k v" "t t"; row-gap: 6px; }
  .hbar .row .k { grid-area: k; } .hbar .row .v { grid-area: v; } .hbar .row .t { grid-area: t; height: 16px; }
}

/* ---- Grouped column chart ---- */
.gbar { display: flex; gap: 34px; align-items: flex-end; min-height: 230px; }
.gbar .grp { flex: 1; min-width: 118px; }
.gbar .cols { display: flex; gap: 8px; align-items: flex-end; height: 190px; }
/* height:100% so the percentage heights on the bars below resolve against the
   190px track rather than collapsing to content height. */
.gbar .col { flex: 1; height: 100%; position: relative; display: flex; flex-direction: column; justify-content: flex-end; }
.gbar .col b {
  display: block; width: 100%;
  background: var(--accent);
}
.gbar .col.y1 b { background: #c3d2cc; }
.gbar .col.y2 b { background: #6c9184; }
.gbar .col .n {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; text-align: center; margin-bottom: 6px; color: var(--ink-2);
}
.gbar .glbl {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); text-align: center;
}

/* ---- 100% stacked bars ----
   Namespaced .sbar, not .stack: insights.html defines its own .stack for the
   cost calculator's breakdown bar, and a bare .stack here leaked gap into it. */
.sbar { display: grid; gap: 10px; }
.sbar-row { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 16px; }
.sbar-yr {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; color: var(--muted);
}
/* flex-direction is stated explicitly: the Insights page defines its own
   `.bars { flex-direction: column }` for a different chart, and a stacked bar
   dropped onto that page would otherwise inherit it and stand on end. */
.sbar-bars { display: flex; flex-direction: row; height: 34px; }
.sbar-bars i {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #fff; overflow: hidden;
}
.sbar-bars i.s1 { background: var(--accent); }
.sbar-bars i.s2 { background: #4d7a6b; }
.sbar-bars i.s3 { background: #8fa9a0; }
.sbar-bars i.s4 { background: var(--spark); color: #04231a; }
.sbar-bars i.s5 { background: #cfdad6; color: #2b2b2b; }
.sbar-bars i.s6 { background: #b5643f; }

/* ---- Delta list (change since baseline) ---- */
.delta { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.delta .d {
  background: var(--paper); padding: 24px 26px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px;
}
.delta .d .dk { font-size: 14px; line-height: 1.45; }
.delta .d .dk em { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 3px; }
.delta .d .dv {
  font-family: 'Fraunces', serif; font-size: 30px; line-height: 1; white-space: nowrap;
}
.delta .d .dv.up { color: var(--accent); }
.delta .d .dv.down { color: #9a3b2c; }

/* ---- Download band ---- */
.dl-band {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--paper); padding: 40px 0; margin: 0;
}
.dl-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 24px;
}
@media (max-width: 768px) { .dl-inner { padding: 0 24px; } }
.dl-copy .dl-hd {
  font-family: 'Fraunces', serif; font-size: 21px; font-weight: 500;
  line-height: 1.25; margin-bottom: 6px;
}
.dl-copy .dl-sub { font-size: 13px; color: var(--muted); }
.dl-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--accent); color: #fff; text-decoration: none;
  padding: 16px 28px; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.14em;
  border: 1px solid var(--accent);
  transition: background 0.16s ease, color 0.16s ease;
  white-space: nowrap;
}
.dl-btn::before { content: "↓"; font-size: 15px; letter-spacing: 0; }
.dl-btn:hover { background: var(--spark); color: #04231a; border-color: var(--spark); }
.dl-btn:focus-visible { outline: 2px solid var(--spark); outline-offset: 3px; }

/* Secondary (ghost) variant, for "read the article" next to a download */
.dl-btn.ghost { background: transparent; color: var(--accent); }
.dl-btn.ghost::before { content: "→"; }
.dl-btn.ghost:hover { background: var(--accent); color: #fff; }

/* ---- Series strip: prev / next within the four-part series ---- */
.series { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 820px) { .series { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .series { grid-template-columns: 1fr; } }
.series a {
  background: var(--paper); padding: 24px; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; min-height: 148px;
  transition: background 0.15s ease;
}
.series a:hover { background: var(--bg); }
.series a[aria-current="page"] { background: var(--bg); cursor: default; }
.series .s-num {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--accent); margin-bottom: 14px;
}
.series .s-ttl {
  font-family: 'Fraunces', serif; font-size: 16px; font-weight: 500;
  line-height: 1.28; margin-bottom: auto;
}
.series a[aria-current="page"] .s-ttl { color: var(--muted); }
.series .s-now {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted); margin-top: 16px;
}

/* ---- Report card becomes a link in the research library ----
   Only the link behaviour lives here; the tile's own look (photograph, veil,
   white type) is in insights.html. These cards became dark photo tiles on
   16 Sept 2026, so the hover colour is the bright #17E88F — dark --accent
   green was all but invisible against the veil, and `color: var(--ink)`
   here was fighting the tile's white text. */
a.report { text-decoration: none; }
a.report:hover .r-title,
a.report:focus-visible .r-title { color: #17E88F; }

/* ---- Paired horizontal bars (two series, one category per row) ---- */
.pbar { display: grid; gap: 20px; }
.pbar .prow { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: center; }
.pbar .pk { font-size: 13px; line-height: 1.35; }
.pbar .pb { display: grid; gap: 5px; }
.pbar .pl { display: grid; grid-template-columns: 1fr 44px; gap: 12px; align-items: center; }
.pbar .pt { height: 15px; background: var(--bg); position: relative; }
.pbar .pt i { position: absolute; inset: 0 auto 0 0; }
.pbar .pt i.a { background: #9db3ab; }
.pbar .pt i.b { background: var(--accent); }
.pbar .pv {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; text-align: right;
}
@media (max-width: 700px) {
  .pbar .prow { grid-template-columns: 1fr; gap: 8px; }
}