/* ============================================================
   Holding Company — hldng.co
   Faithful static rebuild of the Squarespace site.
   Palette, type and layout measured from the live site.
   ============================================================ */

/* ---- Fonts ----
   Self-hosted, open-licensed (SIL OFL) so the site is fully portable:
     • IBM Plex Mono  — exact match for the original body/nav font.
     • Playfair Display — stand-in for the headline font (see note).
   NOTE: the original headline uses "New Spirit Condensed", a LICENSED
   Adobe Fonts typeface that can't be bundled. It is listed first in
   --font-display, so once you add your own Adobe Fonts web project
   (including New Spirit Condensed, scoped to your domain + localhost)
   the headlines switch to the exact font automatically. Until then,
   Playfair Display renders as a close editorial serif. See README. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/fonts/playfair-display-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/fonts/playfair-display-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --lavender: #b4a8c7;
  --white: #ffffff;
  --black: #000000;

  --font-display: "new-spirit-condensed", "Playfair Display", Georgia,
    "Times New Roman", serif;
  --font-mono: "ibm-plex-mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular",
    Menlo, monospace;

  --gutter: clamp(20px, 3vw, 30px);
  --maxw: 1024px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--lavender);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 1.15rem;      /* ~18.4px */
  line-height: 1.6;
  letter-spacing: -0.02em;
  text-wrap: pretty;       /* avoid single-word orphans across the board (inherited) */
}

/* Home / light content pages: white background, black type + black logo. */
body.theme-light {
  background: var(--white);
  color: var(--black);
}

/* Full-screen reel pages (home featured + brand identity): the stage is white,
   so the body behind the floating header must be white too — otherwise the
   lavender shows through wherever the header isn't over the scroller (e.g. the
   moment it stops being fixed at small widths). Black type keeps the nav legible. */
body.e-page,
body.bi-page {
  background: var(--white);
  color: var(--black);
}

/* The header on these pages floats over a separate scroller, so wheeling over
   its large empty area would hit a dead zone (the body is overflow:hidden and
   can't scroll). Let pointer + wheel events pass through the header to the reel
   beneath, while keeping the logo, nav and hamburger themselves clickable. */
body.e-page .site-header,
body.bi-page .site-header {
  pointer-events: none;
}
body.e-page .site-header__logo,
body.e-page .site-nav,
body.e-page .nav-toggle,
body.bi-page .site-header__logo,
body.bi-page .site-nav,
body.bi-page .nav-toggle {
  pointer-events: auto;
}


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

a {
  color: inherit;
}

/* ---------- Header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 2.4vw, 34px) clamp(30px, 3.6vw, 50px) 0;
}

.site-header__logo {
  display: block;
  flex: 0 0 auto;
}

.site-header__logo img {
  width: clamp(150px, 20vw, 213px);
  height: auto;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 22px;
  font-size: 1.15rem;
  letter-spacing: -0.04em;
}

.site-nav a {
  text-decoration: none;
  text-underline-offset: 3px;
}

.site-nav a:hover {
  text-decoration: underline;
}

.site-nav a.is-active {
  text-decoration: underline;
}

/* Hamburger toggle — injected by JS, shown only at small widths */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  flex: 0 0 auto;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--black);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
body.theme-detail .nav-toggle span {
  background: var(--white);
}
.site-header.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
.site-header.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Page shell ---------- */
.page {
  padding: clamp(28px, 6vw, 72px) var(--gutter) 0;
}

/* ---------- Hero / intro ---------- */
.hero {
  max-width: clamp(722px, 72%, 1120px);
  /* Align the hero copy's left edge with the logo (the header is inset more
     than the page gutter). */
  margin-left: calc(clamp(30px, 3.6vw, 50px) - var(--gutter));
  padding-right: 10px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0;
}

.hero .display {
  font-size: clamp(2.65rem, 6vw, 3.9rem);
}

.hero .display + .display {
  margin-top: 1.1em;
}

.hero__meta {
  margin: clamp(28px, 4vw, 40px) 0 0;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

/* Intro: hero type blurs into focus, line by line, on first load — then boils */
@keyframes heroBlurIn {
  from { opacity: 0; filter: blur(5px); transform: translateY(8px); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
}
.hero > .display,
.hero > .hero__meta { opacity: 0; }
.hero.is-split > .display,
.hero.is-split > .hero__meta { opacity: 1; }
.hero .hinner { display: block; }
.hero .hline { display: block; }
.hero.is-split .hinner {
  animation: heroBlurIn 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: var(--d, 0s);
}
.hero.is-boiling > .display { filter: url(#logo-boil); }
@media (prefers-reduced-motion: reduce) {
  .hero.is-split .hinner { animation: none; }
  .hero.is-boiling > .display { filter: none; }
}

/* ---------- Creative Direction: work grid ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 22px;
  row-gap: 42px;
  padding: 0 var(--gutter) clamp(60px, 10vw, 110px);
}

.work {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.08);
}

.work img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.work__caption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;      /* middle */
  justify-content: flex-start; /* left */
  padding: clamp(18px, 2.4vw, 33px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.67rem, 2.65vw, 2.45rem);
  line-height: 1.12;
  color: var(--white);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.work:hover::after {
  opacity: 0.92;
}

.work:hover .work__caption {
  opacity: 1;
}

/* ---------- Brand Identity: stacked images ---------- */
.stack {
  padding: 0 var(--gutter) clamp(60px, 10vw, 110px);
}

.stack img {
  width: 100%;
  height: auto;
  margin-bottom: 22px;
}

.stack img:last-child {
  margin-bottom: 0;
}

/* Brand cards: an image with a studio background or a centered overlay. */
.stack > .brand-card {
  margin-bottom: 22px;
}
.stack > .brand-card:last-child {
  margin-bottom: 0;
}
.brand-card {
  position: relative;
}
.brand-card img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
}

/* Nuffle: the knot animation sits centered on the gold-fur background. */
.brand-card--nuffle .brand-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44%;
  height: auto;
}

/* BitMind: the logo card is transparent, so give it a light studio sweep. */
.brand-card--bitmind video {
  display: block;
  width: 100%;
  height: auto;
}
/* BitMind logo + project details, overlaid bottom-left like the original. */
.brand-card--bitmind .brand-card__info {
  position: absolute;
  left: 2%;
  bottom: 2%;
  width: 21%;
  height: auto;
}

/* Scroll reveal: each slide rises and fades into place as it enters view.
   The hidden start-state is gated behind .reveal-ready (added by JS only when
   IntersectionObserver is available and motion is allowed), so without JS or
   under reduced-motion every slide stays fully visible. */
.stack.reveal-ready > img,
.stack.reveal-ready > .brand-card {
  opacity: 0;
  transform: translateY(46px) scale(0.988);
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.stack.reveal-ready > img.is-in,
.stack.reveal-ready > .brand-card.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .stack.reveal-ready > img,
  .stack.reveal-ready > .brand-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- About ---------- */
/* Editorial rows bracketed by full-width horizontal rules, in the same language
   as the featured reel: a mono eyebrow on the left, content on the right. The
   portrait is small, up in the lead row. */
.about { padding: 0 0 clamp(60px, 10vw, 110px); }

/* Lead: the photo-left / text-right chunk, centred as a group inside a band whose
   top rule sits at the CD / BI band position. The band's bottom is the Select
   Clients row's top rule (one line, not two). */
.about__lead {
  position: relative;
  --cardH: clamp(390px, 62vh, 640px);
  --winTop: max(calc((100dvh - var(--cardH)) / 2 + 16px), 244px);
  height: calc(var(--winTop) + var(--cardH));
}
.about__lead::before { content: ""; position: absolute; left: 0; right: 0; top: var(--winTop); border-top: 1px solid #000; }
.about__lead-inner {
  position: absolute; left: 0; right: 0; top: var(--winTop); height: var(--cardH);
  display: flex; align-items: center; justify-content: center; gap: clamp(28px, 4vw, 72px);
  padding: 0 var(--gutter);
}
.about__photo { flex: 0 0 auto; }
.about__photo img {
  width: clamp(150px, 16vw, 210px); aspect-ratio: 1 / 1; height: auto;
  object-fit: cover; border-radius: 50%; display: block;
}
.about__intro { max-width: 44ch; text-align: left; }
.about__intro p { margin: 0; }
.about__intro .about__headline {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.55rem, 2.8vw, 2.35rem); line-height: 1.15;
  letter-spacing: -0.01em; margin-bottom: 0.7em;
}

/* Clients + contact: centred rows, full-bleed rule on top (the first doubles as
   the lead band's bottom rule), last row closed with a bottom rule. */
.about__row {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(18px, 2.4vw, 30px);
  border-top: 1px solid #000; padding: clamp(34px, 4.5vw, 60px) var(--gutter);
}
.about__row:last-child { border-bottom: 1px solid #000; }
.about__eyebrow {
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.72rem; opacity: 0.55; margin: 0;
}
.about__clients {
  list-style: none; margin: 0; padding: 0;
  width: min(520px, 100%); columns: 2; column-gap: clamp(24px, 3vw, 48px);
  font-size: 0.98rem; line-height: 1.6;
}
.about__clients li { margin: 0; break-inside: avoid; }
.about__contact { display: flex; flex-direction: column; align-items: center; gap: 0.3em; }
.about__contact p { margin: 0 0 1em; }

@media (max-width: 860px) {
  .about__lead { --cardH: clamp(320px, 72vh, 560px); --winTop: max(calc((100dvh - var(--cardH)) / 2 + 16px), 130px); }
  .about__lead-inner { flex-direction: column; gap: clamp(16px, 3vh, 28px); }
  .about__intro { text-align: center; }
}

/* Header: an absolute overlay (not fixed) so the band starts at the viewport top
   and its rules line up with the CD / BI reels, while the header simply scrolls
   away with the page (no overlap with the lists below). Smaller logo to match. */
body.about-page .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 200; }
body.about-page .site-header__logo img { width: clamp(112px, 10.5vw, 138px); height: auto; }

.btn {
  display: inline-block;
  margin-top: 0.4em;
  padding: 0.85em 1.4em;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0;
  text-decoration: none;
}

.btn:hover {
  opacity: 0.85;
}

/* On the white About/light pages, invert the button so it reads. */
body.theme-light .btn {
  background: var(--black);
  color: var(--white);
}

/* ---------- Footer ---------- */
.site-footer {
  padding: clamp(30px, 6vw, 60px) var(--gutter);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: -0.02em;
}

/* ---------- Home footer (sleek, structured) ---------- */
.site-footer--home {
  padding: clamp(56px, 8vw, 110px) var(--gutter) clamp(24px, 3vw, 36px);
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  color: var(--black);
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}
.site-footer__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--black);
  max-width: 10ch;
  transition: opacity 0.3s ease;
}
.site-footer__wordmark:hover { opacity: 0.62; }
/* The wordmark is now the logo mark rather than set text. */
.site-footer__wordmark img { display: block; width: clamp(128px, 19vw, 184px); height: auto; }
.site-footer__col { display: flex; flex-direction: column; }
.site-footer__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.4;
  margin-bottom: 1.1em;
}
.site-footer__col a {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--black);
  text-decoration: none;
  opacity: 0.7;
  padding: 0.18em 0;
  transition: opacity 0.25s ease;
}
.site-footer__col a:hover { opacity: 1; }
.site-footer__base {
  margin-top: clamp(44px, 7vw, 96px);
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.5;
}
@media (max-width: 720px) {
  .site-footer__top { grid-template-columns: 1fr; gap: clamp(26px, 8vw, 40px); }
  .site-footer__base { flex-direction: column; gap: 8px; }
}

/* ============================================================
   Project detail pages (e.g. Creative Direction case studies)
   ============================================================ */
.detail {
  padding: clamp(24px, 5vw, 56px) var(--gutter) clamp(60px, 10vw, 110px);
  max-width: 1100px;
  margin: 0 auto;
}

/* Back link */
.detail__back {
  display: inline-block;
  margin-bottom: clamp(20px, 3vw, 32px);
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.detail__back:hover { text-decoration: underline; }

/* Project title + intro */
.project-hero { margin-bottom: clamp(28px, 4vw, 48px); }

.project-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  font-size: clamp(2.2rem, 5.4vw, 3.6rem);
  margin: 0 0 0.4em;
  max-width: 16ch;
}

.project-hero__sub {
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  letter-spacing: -0.02em;
  max-width: 52ch;
  margin: 0;
}

/* Section label / heading inside a case study */
.section-label {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  margin: clamp(48px, 7vw, 88px) 0 clamp(16px, 2vw, 24px);
}

/* Body copy */
.prose {
  max-width: 60ch;
  margin: 0 0 clamp(24px, 3vw, 36px);
}
.prose p {
  font-family: var(--font-mono);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  letter-spacing: -0.02em;
  line-height: 1.6;
  margin: 0 0 1.2em;
}
.prose p:last-child { margin-bottom: 0; }

/* Responsive 16:9 video embed */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: clamp(24px, 4vw, 40px) 0;
  background: rgba(0, 0, 0, 0.12);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Vertical (9:16) — centered, height-constrained so it doesn't tower */
.video-embed--vertical {
  aspect-ratio: 9 / 16;
  width: auto;
  max-width: min(420px, 100%);
  max-height: 80vh;
  margin-left: auto;
  margin-right: auto;
}

/* Media */
.media-full {
  margin: clamp(16px, 2.5vw, 28px) 0;
}
.media-full img { width: 100%; height: auto; }

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin: clamp(16px, 2.5vw, 28px) 0;
}
.media-grid img { width: 100%; height: auto; }

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

/* Full-bleed media — breaks out of the centered content column, edge to edge */
.media-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: clamp(40px, 6vw, 76px);
  margin-bottom: clamp(16px, 2.5vw, 28px);
}
.media-bleed img,
.media-bleed video {
  display: block;
  width: 100%;
  height: clamp(380px, 62vh, 720px);
  object-fit: cover;
  object-position: center;
}

/* Trip example cards (image + caption) */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 3vw, 36px);
  margin: clamp(20px, 3vw, 36px) 0;
}
.card img { width: 100%; height: auto; margin-bottom: 0.9em; }
.card p {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: -0.02em;
  line-height: 1.55;
  margin: 0;
}

/* Postcard gallery (the #TravelTheAds trip set) */
.postcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin: clamp(20px, 3vw, 36px) 0;
}
.postcards img { width: 100%; height: auto; }

/* Pull quote */
.pullquote {
  max-width: 40ch;
  margin: clamp(56px, 8vw, 96px) auto clamp(20px, 3vw, 32px);
  text-align: center;
}
.pullquote blockquote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.2;
  margin: 0 0 0.7em;
}
.pullquote cite {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .site-nav {
    justify-content: flex-start;
  }
  .work-grid {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
  .about {
    grid-template-columns: 1fr;
    align-items: start;
  }
  /* Captions always visible on touch (no hover). Keep them small and tucked into
     the bottom-left over a bottom-up gradient scrim, so the type sits out of the
     way of the image instead of blocking the middle of it. */
  .work::after {
    opacity: 1;
    background: linear-gradient(to top,
      rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.42) 34%, rgba(0, 0, 0, 0) 68%);
  }
  .work__caption {
    opacity: 1;
    align-items: flex-end;        /* bottom */
    justify-content: flex-start;  /* left */
    font-size: clamp(0.9rem, 3.1vw, 1.08rem);
    line-height: 1.2;
    padding: clamp(12px, 3.6vw, 18px);
  }
  /* Let the caption run most of the width so titles fit on ~2 lines. */
  .e-grid .work__caption { padding-right: 6%; }
  .media-grid--two { grid-template-columns: 1fr; }
  .postcards { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Case-study v2: full-bleed hero, 2-col editorial, carousels
   ============================================================ */

/* Full-bleed hero image at the top of a case study */
.hero-full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: clamp(28px, 5vw, 56px);
}
.hero-full img {
  width: 100%;
  height: clamp(340px, 62vh, 660px);
  object-fit: cover;
  display: block;
}

/* Two-column editorial row */
.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 4vw, 60px);
  align-items: center;
  margin: clamp(30px, 5vw, 64px) 0;
}
.row2--top { align-items: start; }
.row2 .col img { width: 100%; height: auto; display: block; }
.row2--rev .col-media { order: 2; }   /* media on the right */
.row2--rev .col-text  { order: 1; }

/* Headings/copy inside a case study */
.case-title {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  font-size: clamp(2rem, 4.6vw, 3rem);
  margin: 0 0 0.4em;
}
.case-sub {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  letter-spacing: -0.02em;
  line-height: 1.5;
  margin: 0;
  max-width: 60ch;   /* keep body copy to a readable measure, never full-width */
}
.case-head {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  margin: 0 0 0.5em;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  margin: 0 0 0.6em;
  opacity: 0.9;
}

/* Carousel ---------------------------------------------------- */
.carousel { position: relative; }
.carousel__viewport { position: relative; overflow: hidden; }
.carousel__slide { margin: 0; }
.carousel__slide:not(.is-active) {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.carousel__slide.is-active { position: relative; opacity: 1; }
.carousel__slide img { width: 100%; height: auto; display: block; }

.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  z-index: 3;
  transition: background 0.2s ease;
}
.carousel__arrow:hover { background: rgba(0, 0, 0, 0.6); }
.carousel__arrow--prev { left: 10px; }
.carousel__arrow--next { right: 10px; }

.carousel__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.carousel__thumbs button {
  width: 64px; height: 42px;
  padding: 0; border: 0; cursor: pointer;
  background: none;
  opacity: 0.45;
  transition: opacity 0.2s ease;
}
.carousel__thumbs button.is-active { opacity: 1; }
.carousel__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Trip-postcard grid (4-up) */
.pc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.2vw, 16px);
  margin: clamp(24px, 3vw, 40px) 0;
}
.pc-grid img { width: 100%; height: auto; display: block; }

/* OOH billboards */
.ooh-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2vw, 22px);
  margin: clamp(16px, 2.5vw, 28px) 0;
}
.ooh-grid img { width: 100%; height: auto; display: block; }

@media (max-width: 760px) {
  .row2 { grid-template-columns: 1fr; }
  .row2--rev .col-media { order: 1; }
  .row2--rev .col-text  { order: 2; }
  .pc-grid { grid-template-columns: repeat(2, 1fr); }
  .ooh-grid { grid-template-columns: 1fr; }
  .carousel__thumbs button { width: 52px; height: 34px; }
}

/* ============================================================
   Detail pages use a WHITE theme with a hero-overlay header
   (the lavender theme is only for the listing pages).
   Add class="theme-detail" to <body> on a case-study page.
   ============================================================ */
body.theme-detail { background: var(--white); color: var(--black); }

/* Header is transparent and overlays the full-bleed hero.
   Logo (white PNG) + nav stay white so they read on the dark image. */
body.theme-detail .site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
}
body.theme-detail .site-nav a { color: var(--white); }

/* Scroll-up reveal: the header rides over the page and flips FLAT black or white
   to match the AVERAGE of the content behind it — explore/legible.js samples the
   image under the header band and toggles .hdr-dark (same treatment as the home
   and featured headers), rather than a per-pixel difference blend. */
body.theme-detail.hdr-peek .site-header {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent;
  padding-top: clamp(14px, 1.6vw, 20px);
  padding-bottom: clamp(14px, 1.6vw, 20px);
  transition: transform 0.35s ease;
}
/* Light frame (default): black logo + black pill. Dark frame (.hdr-dark, set by
   JS): white pill + white (JS-inverted) logo. */
body.theme-detail .site-header .site-nav.is-toggle a { color: #000; }
body.theme-detail .site-header .site-nav.is-toggle .nav-group,
body.theme-detail .site-header .site-nav.is-toggle .nav-about { border-color: #000; }
body.theme-detail .site-header .site-nav.is-toggle .nav-pill { background: #000; }
body.theme-detail .site-header .site-nav.is-toggle a.is-lit { color: #fff; }
body.theme-detail .site-header.hdr-dark .site-nav.is-toggle a { color: #fff; }
body.theme-detail .site-header.hdr-dark .site-nav.is-toggle .nav-group,
body.theme-detail .site-header.hdr-dark .site-nav.is-toggle .nav-about { border-color: #fff; }
body.theme-detail .site-header.hdr-dark .site-nav.is-toggle .nav-pill { background: #fff; }
body.theme-detail .site-header.hdr-dark .site-nav.is-toggle a.is-lit { color: #000; }
body.theme-detail.hdr-peek .site-header__logo img { width: clamp(104px, 9.5vw, 132px); height: auto; }
body.theme-detail.hdr-peek.hdr-hidden .site-header { transform: translateY(-110%); }

/* Black text for the content below the hero */
body.theme-detail .case-title,
body.theme-detail .case-head,
body.theme-detail .case-sub,
body.theme-detail .eyebrow,
body.theme-detail .prose p,
body.theme-detail .pullquote blockquote,
body.theme-detail .pullquote cite { color: var(--black); }

/* Full-viewport hero; header sits on top of it */
body.theme-detail .hero-full {
  margin: 0 0 clamp(48px, 8vw, 120px);
}
body.theme-detail .hero-full img {
  height: clamp(480px, 92vh, 940px);
}

/* Wider content column + more generous vertical rhythm */
body.theme-detail .detail {
  max-width: 1680px;
  padding: 0 clamp(24px, 3vw, 52px) clamp(72px, 10vw, 130px);
}
body.theme-detail .row2 {
  gap: clamp(28px, 5vw, 90px);
  margin: clamp(44px, 7vw, 100px) 0;
}
body.theme-detail .video-embed { margin: clamp(40px, 6vw, 76px) 0; }
body.theme-detail .carousel    { margin: clamp(40px, 6vw, 76px) 0; }
body.theme-detail .pc-grid     { margin: clamp(44px, 6vw, 90px) 0; }
body.theme-detail .case-title  { font-size: clamp(2rem, 4.3vw, 3.3rem); }

/* Carousel thumbnail strip centered */
.carousel__thumbs { justify-content: center; }

/* On the dark hero, keep the mobile header text white too */
@media (max-width: 760px) {
  body.theme-detail .site-header { position: absolute; }
}

/* ============================================================
   Case-study column ratios (match the original's asymmetry:
   large media + narrow text, alternating sides, big gaps)
   ============================================================ */
.row2.r-5050 { grid-template-columns: 1fr 1fr; }
.row2.r-5347 { grid-template-columns: 1fr 1.15fr; }
.row2.r-6040 { grid-template-columns: 1.5fr 1fr; }
.row2.r-6535 { grid-template-columns: 1.9fr 1fr; }
.row2.r-4060 { grid-template-columns: 1fr 1.5fr; }
.row2.r-3565 { grid-template-columns: 1fr 1.9fr; }
.row2--wide-gap { column-gap: clamp(44px, 10vw, 150px); }

/* "How it worked:" style lead-in */
.lead { font-weight: 500; }

/* Wider, centered press quote */
body.theme-detail .pullquote { max-width: 860px; }
body.theme-detail .pullquote blockquote { font-size: clamp(1.5rem, 2.6vw, 2.15rem); }

/* Detail footer is centered */
body.theme-detail .site-footer { text-align: center; }

/* ---------- Condensed slide-toggle nav on phones ----------
   Logo scaled down in the top-left, the desktop pill toggle (sliding highlight
   and all) condensed beside it on one row — the same header on Creative
   Direction and Brand Identity. Links get a taller tap target than their type so
   they aren't a 22px sliver that's easy to miss on a phone. */
@media (max-width: 560px) {
  .site-header {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-left: 16px; padding-right: 16px;
  }
  /* Logo top-left, scaled down. !important overrides the per-page e-compact /
     bi-compact / about logo sizes (some set inline) so it's consistent. */
  body .site-header__logo img { width: clamp(68px, 21vw, 86px) !important; }
  /* No hamburger in this design — hide the injected button. */
  .nav-toggle { display: none !important; }

  /* Condense the pill so [Creative Direction | Brand Identity] + the About
     bubble fit beside the logo. .site-header prefix keeps these ahead of the
     desktop .is-toggle rules lower in the file. */
  .site-header .site-nav.is-toggle { gap: 5px; flex: 0 0 auto; }
  .site-header .site-nav.is-toggle .nav-group,
  .site-header .site-nav.is-toggle .nav-about { padding: 2px; border-width: 1.5px; }
  .site-header .site-nav.is-toggle a {
    padding: 12px 1em; font-size: .62rem; letter-spacing: .05em; line-height: 1;
  }
  /* Shorten the pill labels on phones: "Creative Direction" → "Creative",
     "Brand Identity" → "Brand" (the trailing word is wrapped in .nav-sub).
     Footer menu links keep their full text (they're not .site-nav). */
  .site-nav.is-toggle .nav-sub { display: none; }
}

@media (max-width: 760px) {
  .row2[class*="r-"] { grid-template-columns: 1fr !important; }
}

/* ---------- OOH: feature poster + billboard masonry ---------- */
.ooh-feature {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 360px);
  align-items: start;
  column-gap: clamp(32px, 7vw, 120px);
  margin: clamp(44px, 7vw, 100px) 0 clamp(28px, 4vw, 44px);
}
.ooh-poster img { width: 100%; height: auto; display: block; }

.ooh-masonry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 22px);
  align-items: start;
  margin: 0;
}
.ooh-col { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px); }
.ooh-col img { width: 100%; height: auto; display: block; }

@media (max-width: 760px) {
  .ooh-feature { grid-template-columns: 1fr; row-gap: 22px; }
  .ooh-masonry { grid-template-columns: 1fr; }
}

/* ============================================================
   Exact 24-column grid (mirrors Squarespace Fluid Engine) for the
   structured text/feature sections, using the real block coordinates
   extracted from the page source.
   ============================================================ */
.fe-grid {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  column-gap: clamp(8px, 0.9vw, 11px);
  align-items: start;
  margin: clamp(44px, 7vw, 100px) 0;
}
.fe-grid > * { min-width: 0; }

@media (max-width: 760px) {
  .fe-grid { grid-template-columns: 1fr; row-gap: 24px; }
  .fe-grid > * { grid-column: 1 / -1 !important; }
}

/* OOH feature now uses the exact grid; drop its own column template */
.ooh-feature { grid-template-columns: repeat(24, minmax(0, 1fr)); column-gap: clamp(8px, 0.9vw, 11px); }

/* Horizontal film-stills strip */
.filmstrip {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: clamp(24px, 4vw, 44px) 0;
}
.filmstrip img { width: clamp(72px, 9vw, 112px); height: auto; display: block; }

/* Local <video> previews inside the 16:9 embed (swap for Vimeo later) */
.video-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

/* Press list (case-study) */
.press-list {
  list-style: none;
  margin: clamp(18px, 3vw, 30px) 0 0;
  padding: 0;
  max-width: 860px;
}
.press-list li {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: -0.02em;
  line-height: 1.45;
  padding: 0.7em 0;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
}
.press-list li:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.14); }
.press-list .press-pub { font-weight: 500; }
.press-list a { text-decoration: none; text-underline-offset: 3px; }
.press-list a:hover { text-decoration: underline; }
.press-note {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  margin: 1.2em 0 0;
  opacity: 0.85;
}

/* Credits — structured "liner-notes" block (role + collaborators) */
.credits {
  max-width: 840px;
  margin: clamp(52px, 8vw, 104px) 0 0;
}
.credits__label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  opacity: 0.55;
  margin: 0 0 clamp(14px, 2vw, 22px);
}
.credits__grid { margin: 0; }
.credits__row {
  display: grid;
  grid-template-columns: clamp(130px, 24%, 210px) 1fr;
  gap: clamp(12px, 3vw, 40px);
  padding: clamp(11px, 1.3vw, 15px) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
}
.credits__row:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.14); }
.credits__row dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.5;
  line-height: 1.6;
}
.credits__row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  line-height: 1.5;
}
/* Lead row — the role, emphasized in the display face */
.credits__row--lead dt { opacity: 0.5; }
.credits__row--lead dd {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
@media (max-width: 560px) {
  .credits__row { grid-template-columns: 1fr; gap: 3px; }
  .credits__row dt { font-size: 0.72rem; }
}

/* More work — end-of-case-study nav to the next few projects */
.more-work {
  max-width: 1680px;
  margin: 0 auto;
  padding: clamp(44px, 6vw, 84px) clamp(24px, 3vw, 52px) clamp(10px, 2vw, 24px);
  border-top: 1px solid rgba(0, 0, 0, 0.14);
}
.more-work__label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  opacity: 0.55;
  margin: 0 0 clamp(14px, 2vw, 22px);
}
.more-work__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(18px, 2.6vw, 40px);
}
.more-work__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  text-decoration: none;
  padding: clamp(14px, 1.6vw, 20px) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
}
.more-work__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.9vw, 1.55rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.more-work__go {
  font-family: var(--font-mono);
  opacity: 0.5;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.more-work__list a:hover .more-work__go { transform: translateX(4px); opacity: 1; }
.more-work__list a:hover .more-work__title { text-decoration: underline; text-underline-offset: 3px; }
.more-work__all {
  display: inline-block;
  margin-top: clamp(22px, 3vw, 40px);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  opacity: 0.85;
}
.more-work__all:hover { text-decoration: underline; text-underline-offset: 3px; opacity: 1; }

@media (max-width: 720px) {
  .more-work__list { grid-template-columns: 1fr; }
}

/* --- Slow Sign: character-count demo --- */
.sign-demo { display: flex; flex-direction: column; gap: clamp(22px, 3.4vw, 40px); width: 100%; }
.sign-demo__group { display: flex; flex-direction: column; gap: 12px; }
.sign-demo__label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  color: #e5157f;
  text-align: center;
  margin: 0;
}
.sign-demo__pair { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); }
.sign-demo__arrow { flex: 0 0 auto; color: #b9b4a8; font-size: 1.2rem; }
.sign-board {
  flex: 1 1 0;
  min-width: 0;
  background: #0f0f0f;
  border-radius: 12px;
  padding: clamp(12px, 2vw, 20px) clamp(22px, 3vw, 34px) clamp(12px, 2vw, 20px) clamp(12px, 1.8vw, 18px);
  display: flex;
  flex-direction: column;
  gap: 0.12em;
}
.sign-board__line {
  position: relative;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  color: #ff7e1c;
  font-size: clamp(0.66rem, 1.5vw, 1.02rem);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-shadow: 0 0 7px rgba(255, 126, 28, 0.35);
}
.sign-board__line .n {
  position: absolute;
  right: -0.6em;
  top: 50%;
  transform: translateY(-50%);
  color: #e5157f;
  font-size: 0.6em;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: none;
}

/* ============================================================
   Section / page transition — a black curtain that rises from the
   bottom to cover, then lifts off the top to reveal the next piece
   (so the whole motion travels bottom → top). Scales on the Y axis
   with a firm ease; never inverts photography.
   ============================================================ */
.curtain { position: fixed; inset: 0; z-index: 9999; pointer-events: none; visibility: hidden; }
.curtain.is-cover, .curtain.is-held, .curtain.is-reveal, .curtain.is-iris { visibility: visible; }
/* A single black curtain wipes across the viewport; the boulder rides only over
   it — shown while the slide is present, gone when it isn't. No white sheet: a
   full-white sweep bracketing the black read as a flash, especially arriving on
   a coloured page. */
.curtain__panel { position: absolute; inset: 0; background: #000; transform: scaleY(0); transform-origin: bottom; will-change: transform; }
/* The mark rides over the black panel, centred. It's the REAL boulder render played
   as a frame sequence: all 121 frames packed into one tall sprite strip and stepped
   through with steps(121), so the light and shadows stay fixed while the rock turns
   (a spun still would rotate its baked highlights with it). Being decoded images, not
   a video, there's no loop seam, decode hitch or seek — it can't judder. The wrapper
   carries the fade + a soft circular mask (keeps the silhouette round and feathers
   the edge); the sequence inside advances, with screen blend + a contrast crush
   dropping its dark background fully into the panel.
   Sprite: 121 frames stacked vertically → background-size height 12100% (121 × 100%).
   One frame of travel = 100%/120 = 0.8333%; the full loop advances 121 frames, so the
   to-value is 121 × 0.8333% = 100.8333% (the 121st step lands on the loop seam, which
   is only reached at the instant the animation restarts). */
.curtain__mark { position: absolute; left: 50%; top: 50%; width: clamp(66px, 7vw, 108px); height: clamp(66px, 7vw, 108px); transform: translate(-50%, -50%); opacity: 0; overflow: hidden; -webkit-mask: radial-gradient(circle at 50% 50%, #000 56%, transparent 72%); mask: radial-gradient(circle at 50% 50%, #000 56%, transparent 72%); }
.curtain__seq { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 0; background-size: 100% 12100%; mix-blend-mode: screen; filter: brightness(.72) contrast(2.5); animation: markSeq 2200ms steps(121) infinite; will-change: background-position; }
@keyframes markSeq { from { background-position-y: 0%; } to { background-position-y: 100.8333%; } }
@media (prefers-reduced-motion: reduce) { .curtain__seq { animation: none; } }

/* held fully covering (used on arrival before the reveal lifts it off) */
.curtain.is-held .curtain__panel { transform: scaleY(1); transform-origin: top; }
.curtain.is-held .curtain__mark  { opacity: 1; }

/* ---- Vertical travel (bottom → top) ---- */
/* cover: black wipes up; the mark fades in over it. reveal: black lifts off the
   top; the mark fades out with it. */
.curtain.is-cover .curtain__panel { transform-origin: bottom; animation: cCover var(--c-d, 500ms) cubic-bezier(.76, 0, .24, 1) forwards; }
.curtain.is-cover .curtain__mark  { animation: markIn 170ms ease-out 300ms forwards; }
.curtain.is-reveal .curtain__panel { transform: scaleY(1); transform-origin: top; animation: cReveal var(--c-r, 460ms) cubic-bezier(.76, 0, .24, 1) forwards; }
.curtain.is-reveal .curtain__mark  { opacity: 1; animation: markOut 150ms ease-in forwards; }
@keyframes cCover  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes cReveal { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes markIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes markOut { from { opacity: 1; } to { opacity: 0; } }

/* ---- Horizontal travel (directional wipe — the slide-tabs toggle) ----
   from-left = sweep left→right (advancing right); from-right = sweep right→left. */
.curtain.axis-x .curtain__panel { transform: scaleX(0); }
.curtain.axis-x.is-held .curtain__panel { transform: scaleX(1); }
.curtain.axis-x.from-left.is-cover  .curtain__panel { transform-origin: left;  animation: cCoverX var(--c-d, 500ms) cubic-bezier(.76, 0, .24, 1) forwards; }
.curtain.axis-x.from-left.is-reveal .curtain__panel { transform: scaleX(1); transform-origin: right; animation: cRevealX var(--c-r, 460ms) cubic-bezier(.76, 0, .24, 1) forwards; }
.curtain.axis-x.from-right.is-cover  .curtain__panel { transform-origin: right; animation: cCoverX var(--c-d, 500ms) cubic-bezier(.76, 0, .24, 1) forwards; }
.curtain.axis-x.from-right.is-reveal .curtain__panel { transform: scaleX(1); transform-origin: left; animation: cRevealX var(--c-r, 460ms) cubic-bezier(.76, 0, .24, 1) forwards; }
@keyframes cCoverX  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cRevealX { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* Circular "iris" reveal — the black opens out from the centre boulder, used on
   the homepage's first load in place of a directional wipe. The intro is a plain
   black→page (no white sheet); the black panel is masked by a transparent circle
   that grows from the middle, and the boulder spins on, then scales up and fades
   as the hole widens. */
@property --iris { syntax: "<length>"; inherits: false; initial-value: 0px; }
.curtain.is-iris .curtain__panel {
  transform: none;
  -webkit-mask: radial-gradient(circle at 50% 50%, #0000 var(--iris), #000 calc(var(--iris) + 2px));
          mask: radial-gradient(circle at 50% 50%, #0000 var(--iris), #000 calc(var(--iris) + 2px));
  animation: irisOpen var(--c-iris, 1050ms) cubic-bezier(.76, 0, .24, 1) forwards;
}
.curtain.is-iris .curtain__mark { opacity: 1; animation: irisMark var(--c-iris, 1050ms) ease-out forwards; }
@keyframes irisOpen { from { --iris: 0px; } to { --iris: 125vmax; } }
/* The boulder holds, then dissolves in place (no scale, no drift) just as the
   white hole blooms out from its centre and reaches its edge — so the light
   appears to emanate from the boulder itself, with no ring or border around it. */
@keyframes irisMark {
  0%   { opacity: 1; }
  14%  { opacity: 1; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .curtain { display: none !important; } }
/* Pre-paint cover: a tiny head script adds .tx-cover before first paint when we
   arrived through a nav transition, so the incoming page is black from the very
   first frame and never flashes before the JS curtain takes over. */
html.tx-cover::before { content: ''; position: fixed; inset: 0; background: #000; z-index: 100000; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { html.tx-cover::before { display: none; } }

/* ── Slide-tabs toggle (nav) ────────────────────────────────────────────────
   Progressive enhancement: becomes a pill with a sliding highlight once JS adds
   .is-toggle. Text uses mix-blend-difference so it reads white over the black
   pill and dark over the page. */
.site-nav.is-toggle {
  position: relative; display: inline-flex; flex-wrap: nowrap;
  align-items: center; gap: 10px; padding: 0; border: 0; background: none;
}
/* The two bordered shells: CD + BI share one pill, About gets its own bubble.
   Both keep a transparent interior so the single sliding highlight (painted
   first, beneath them) shows through. The highlighted label is flipped to white
   by JS (.is-lit) rather than a blend mode — a blend reads white over a
   transparent backdrop and vanishes. */
.site-nav.is-toggle .nav-group,
.site-nav.is-toggle .nav-about {
  position: relative; display: inline-flex; align-items: stretch;
  padding: 4px; border: 2px solid #000; border-radius: 999px; background: transparent;
}
.site-nav.is-toggle a {
  position: relative; display: inline-flex; align-items: center;
  white-space: nowrap; padding: .5em 1.15em; border-radius: 999px;
  text-transform: uppercase; font-size: .72rem; letter-spacing: .08em;
  color: #000; text-decoration: none; transition: color .3s ease;
}
.site-nav.is-toggle a.is-lit { color: #fff; }
.site-nav.is-toggle a:hover, .site-nav.is-toggle a.is-active { text-decoration: none; }
/* About reads as a circular info mark instead of the word "About": the bubble
   is the circle, an italic serif "i" sits centred, and the sliding highlight
   becomes a matching disc when About is active. Overrides the generic link
   padding (incl. the condensed mobile padding) so it stays round everywhere. */
.site-nav.is-toggle a.nav-i {
  padding: 0; width: 1.62em; aspect-ratio: 1 / 1;
  justify-content: center; line-height: 1;
  font-size: 1rem; letter-spacing: 0; text-transform: none;  /* glyph in the menu's own typeface */
}
.site-nav.is-toggle a.nav-i span { display: block; }
/* The pill's trailing word ("Direction"/"Identity") is a separate flex item, so
   the word-space before it collapses — restore it with a margin. Hidden on
   phones (see the ≤560 rule), where the label shortens to "Creative"/"Brand". */
.site-nav.is-toggle .nav-sub { margin-left: .3em; }
.site-nav.is-toggle .nav-pill {
  position: absolute; top: 0; left: 0; width: 0; height: 0;
  background: #000; border-radius: 999px; opacity: 0; pointer-events: none;
  transition: left .46s cubic-bezier(.76, 0, .24, 1), top .46s cubic-bezier(.76, 0, .24, 1),
              width .46s cubic-bezier(.76, 0, .24, 1), height .46s cubic-bezier(.76, 0, .24, 1), opacity .2s ease;
}
@media (prefers-reduced-motion: reduce) { .site-nav.is-toggle .nav-pill { transition: none; } }
/* Dark detail headers: invert — white shells/labels, a white highlight with a
   dark active label. */
body.theme-detail .site-nav.is-toggle .nav-group,
body.theme-detail .site-nav.is-toggle .nav-about { border-color: #fff; }
body.theme-detail .site-nav.is-toggle a { color: #fff; }
body.theme-detail .site-nav.is-toggle .nav-pill { background: #fff; }
body.theme-detail .site-nav.is-toggle a.is-lit { color: #000; }